Tic-Tac-Toe: Añadiendo gráficos 2D, Parte II

Ahora que ya sabemos como añadir la biblioteca SDL a un proyecto, vamos a modificar nuestro proyecto. Como podremos ver, con tan solo unas pocas modificaciones, seremos capaces de añadir a nuestro juego unos simples gráficos 2D.

Modificando la clase Juego

Lo primero que debemos hacer es añadir un par de variables privadas a la clase juego que son:

SDL_Window* window;

SDL_Renderer* renderer;

La variable window lo que hace es apuntar hacia una ventana creada por SDL, esta ventana es en la más tarde se mostrará nuestro tablero. La variable renderer es una variable de una estructura encargada de todo el renderizado de la aplicación.

Una vez añadidas la variables, lo que debemos hacer es en la función ejecutar crear la ventana y el renderer con el siguiente codigo.

window = SDL_CreateWindow("Tic-Tac-Toe", SDL_WINDOWPOS_CENTERED, SDL_WINDOWPOS_CENTERED, anchura, altura, SDL_WINDOW_SHOWN);
if (window == NULL){
    std::cerr << SDL_GetError() << std::endl;
    return;
}
renderer = SDL_CreateRenderer(window, -1, SDL_RENDERER_ACCELERATED | SDL_RENDERER_PRESENTVSYNC);
if (renderer == NULL){
    std::cout << SDL_GetError() << std::endl;
    return;
}

Recordad que esto se tiene que ejecutar antes de empezar a dibujar, por ejemplo, justo antes del bucle principal.
Para no dejar basura en la memoria, cuando no utilicemos ni el renderer y la ventana, las eliminamos.

SDL_DestroyRenderer(renderer);
SDL_DestroyWindow(window);

Modificaciones en Tablero

Lo único que debemos modificar en Tablero es modificar la función dibujar, añadiendo un parámetro para que pueda recibir el renderer y hacer que cargue una textura y la muestre antes de ordenar dibujar a las fichas. 

SDL_Texture *texture = IMG_LoadTexture(renderer,"../images/Tablero.jpg");

if (texture == NULL){

    std::cerr << SDL_GetError() << std::endl;

    return;

}

SDL_RenderCopy(renderer,texture, NULL, NULL);

for (int i = 0; i < TAM; i++){

    for (int j = 0; j < TAM; j++){

        fichas[i][j].dibujar(renderer,j,i);

    }

}

SDL_DestroyTexture(texture);

Modificaciones en Ficha

En ficha, hay que hacer parecido, pero no queremos que la imagen ocupe toda la pantalla, por lo que le diremos que muestre la imagen en un solo trozo ajustando el tamaño de la misma.

Para esto, necesitamos saber en que posición esta la ficha dentro de la matriz, por lo que lo recibiremos como parametro.

Usaremos una estructura de tipo SDL_Rect para indicar en que posición queremos colocar la imagen, a partir de la coordenadas que recibimos como parametro, e indicar también el tamaño final de la imagen para que la escale.

SDL_Rect r;

r.x = (x*200)+5;

r.y = (y*200)+5;

r.w = 190;

r.h = 190;

Cargamos la textura que corresponda según la ficha.

SDL_Texture *texture = IMG_LoadTexture(renderer,"../images/Ficha1.png");

if (texture == NULL){

    std::cerr << SDL_GetError() << std::endl;

    return;

}

Copiamos la textura en el renderer con el siguiente comando.

SDL_RenderCopy(renderer,texture, NULL, &r);

Y por ultimo borramos la textura cargada.

SDL_DestroyTexture(texture);

Consideraciones Finales

Tal y como está el proyecto, que podéis descargar desde aquí, es funcional; sin embargo, no es la alternativa ni mejor, ni más óptima, puesto que, por ejemplo, cargamos los recursos cada vez que renderizamos una pequeña parte en vez de mantenerlos almacenados que seria lo más eficiente. Más adelante procuraremos mejorarlo para que sea más optimo.

Por último, en esta version se ha incluido un archivo CMakeList.txt, cuyo objetivo es automatizar la creación de archivos make; lo cual a su vez, automatiza el proceso de compilación. Para usarlo, basta con instalar el programa CMake. 

Para usarlo en sistema linux, creamos una carpeta build en el directorio del proyecto, y dentro de ella ejecutamos los comandos:

cmake ..

make

Esto nos compilara el proyecto y si queremos instalarlo debemos ejecutar posteriormente:

make install

En sistemas windows, CMake creara un archivo de proyecto para nuestro IDE y dependiendo de este, cambiara la forma de compilar.

Nota: debido a ciertos problemas con SDL esta version no es recomendable compilar en windows.