SDL / Primer programa

Bienvenidos sean a este post, hoy veremos como crear nuestro primer programa.

En el post anterior, hicimos todos los pasos necesarios para «instalar» a SDL. Por eso, hoy nos centraremos en como crear un programa o juego. Solamente haremos el procedimiento basico para habilitar al complemento en nuestros codigos, hablaremos un poco sobre el codigo pero recuerden que nos centraremos en otros temas mas adelante. Nuestro primer paso sera abrir Visual Studio

En esta ventana, elegiremos la opcion de Crear un proyecto, esto nos abrira la siguiente ventana

Para nuestro primer programa filtraremos los proyectos de la siguiente manera:

• C++
• Windows
• Consola

Tal como se ve en la imagen, esto nos traera varias opciones y la que elegiremos es Aplicacion de Consola. Presionamos Siguiente para pasar a la siguiente ventana

Aca definiremos los datos basicos de la solucion que crearemos. Esto es el conjunto que envolvera al programa junto con otras implementaciones. Le definimos un nombre, y luego donde lo crearemos. Les recomiendo usar el predeterminado que nos provee Visual Studio. Tambien les recomiendo tildar la opcion de Colocar solucion y proyecto en el mismo directorio, tal como se ve en la imagen. Para finalmente, presionar el boton Crear y generar la base de nuestro programa, deberia quedar algo asi como la siguiente imagen

Nuestro primer paso sera agregar a SDL, para ello deben hacer click con el boton derecho, van a Agregar y luego selecccionan Proyecto Existente. Esto nos abrira una ventana de dialogo y ahi debemos buscar y seleccionar el archivo SDL.vcxproj. Recuerden que este archivo deben buscarlo dentro de la reposicion que hicimos para poder utilizar a SDL, tal como lo veremos en la siguiente imagen

En mi caso, el archivo estaba en: SDL\VisualC\SDL. Con el archivo seleccionado, le damos Abrir y este procedera a agregarlo en el Explorador de Soluciones. Debe quedar de la siguiente manera

Con SDL agregado a nuestra solucion, lo siguiente es referenciarlo, para ello deben hacer click con el boton derecho en el programa (Primer Programa), y deben ir a Agregar, luego a Referencia y nos abrira la siguiente ventana

Nos aparecera todas las posibles referencias que podemos agregar. En este caso solo debemos tener a SDL3 porque fue el unico proyecto que agregamos. Lo seleccionamos y presionamos Aceptar. Esto dejara al Explorador de Soluciones de la siguiente manera

Solo nos falta un paso mas para terminar con la configuracion de SDL para poder usarlo en nuestro codigo. Para ello, deben hacer click con el boton derecho sobre el programa nuevamente, y seleccionar Propiedades. En esta nueva ventana, deben ir a Propiedades de Configuracion, C/C++, y General. Del lado derecho deben buscar la opcion Directorios de inclusion adicionales. En esta opcion, deben agregar el path completo donde se encuentra el directorio include, tal como se ve en la siguiente imagen

Recuerden que este directorio debe estar en la replica local de SDL. Con esta modificacion realizada, presionamos Aceptar para realmente finalizar la configuracion de SDL. Pasemos a modificar nuestro codigo. Para ello, vamos a Primer Programa.cpp y cambiemos el codigo existente con el siguiente:

#include<SDL3/SDL.h>

SDL_Window* g_pWindow = 0;
SDL_Renderer* g_pRenderer = 0;
const char* mensaje = "Hola Mundo!";
const float scale = 4.0f;
int w = 0, h = 0;
float x, y;

int main(int argc, char* args[])
{
    g_pWindow = SDL_CreateWindow(
        "Instalando y probando a SDL",
        640,
        480,
        SDL_WINDOW_OPENGL);

    if (g_pWindow != 0)
        g_pRenderer = SDL_CreateRenderer(g_pWindow, NULL);

    SDL_GetRenderOutputSize(g_pRenderer, &w, &h);
    SDL_SetRenderScale(g_pRenderer, scale, scale);
    x = ((w/scale) - SDL_DEBUG_TEXT_FONT_CHARACTER_SIZE * SDL_strlen(mensaje)) / 2;
    y = ((h/scale) - SDL_DEBUG_TEXT_FONT_CHARACTER_SIZE) / 2;

    SDL_SetRenderDrawColor(g_pRenderer, 0, 0, 0, 255);
    SDL_RenderClear(g_pRenderer);
    SDL_SetRenderDrawColor(g_pRenderer, 255, 255, 255, 255);
    SDL_RenderDebugText(g_pRenderer, x, y, mensaje);
    SDL_RenderPresent(g_pRenderer);
    SDL_Delay(5000);
    SDL_Quit();

    return 0;
}

Comencemos con el principio, primero incluiremos a la libreria basica de SDL. Por eso debimos agregar al directorio de inclusion, y esta es la libreria basica para poder trabajar con algunas funciones, clases y constantes. Lo siguiente sera crear dos objetos que se encargaran de manejar a la ventana y lo que «rendericcemos» en la misma, respectivamente. Estos son la declaracion de dos punteros porque en un momento los utilizaremos. Luego definiremos una serie de variables para nuestro codigo. La primera sera el mensaje que mostraremos en pantalla, Las siguientes variables las usaremos para poder establecer la ubicacion del texto anterior en la ventana. Pasemos a hablar sobre el main.

Primero definiremos al objeto para la ventana, g_pWindow, y para ello usaremos a la funcion SDL_CreateWindow. Este recibira como parametros al titulo, ancho, alto y driver para crear la ventana respectivamente. Luego tenemos un condicional donde si se creo exitosamente la ventana, procedemos a definir el objeto para renderizar, g_pRenderer, y para ello usamos a la funcion SDL_CreateRenderer. A esta le pasamos la ventana donde hara todo el trabajo, y el segundo parametro es para el driver de renderizado pero si lo pasamos como NULL dejamos que SDL elija por nosotros.

Las siguientes cuatro lineas se encargan principalmente de como estableceremos en pantalla al mensaje. Para ello, primero obtendremos los valores de alto y ancho de la ventana que pasamos al objeto para renderizar. La siguiente funcion se encarga de establecer el valor de escala para el alto y ancho de la seccion en donde renderizaremos. Y las siguientes dos lineas se encargan de establecer las coordenadas X e Y para ubicar al mensaje en la ventana o seccion de renderizado. Para ello, utiliza los parametros anteriormente establecidos asi como algunos particulares como el tamaño de la fuente. Y en ambos casos, lo divide por dos para obtener la mitad. Con todos los parametros establecidos podemos pasar a crear el contenido a mostrar.

Estas lineas se encargaran de eso, la primera establecera el color para el renderizado y la siguiente es la encargada de establecerlo en toda la seccion de renderizado. Tambien se puede usar para limpiar esta seccion pero en esta ocasion sera para lo mencionado anteriormente. Volvemos a establecer un nuevo color para el renderizado, pero ahora estableceremos un texto mediante SDL_RenderDebugText y para ello pasamos el objeto de renderizado, las coordenadas para ubicarlo y el texto. La siguiente funcion se encarga de actualizar al objeto de renderizado con la ultima modificacion que le hayamos realizado. Para finalmente, establecer un delay o demora de cinco segundos y finalmente salir del programa mediante SDL_Quit. Esto pueden compilarlo para probarlo y deben tener un programa como el siguiente

Si lograron lo mismo, FELICITACIONES!!!! Crearon su primer programa con SDL y funciono pero esto es solo el comienzo y obviamente se va a complicar mucho mas pero lo encontraran mucho mas satisfactorio. Antes de finalizar, si se les complica encontrar al ejecutable les dejo el path donde se guardo en mi caso:

C:\Users\<usuario local>\source\repos\Primer Programa\x64\Debug

En resumen, hoy hemos visto como crear nuestro primer programa, los pasos que debemos hacer con cada proyecto nuevo para habilitar a SDL, asi como tambien nuestro primer codigo y ver como trabaja. Espero les haya sido de utilidad.

Les dejo algunas de mis redes sociales para seguirme o recibir una notificacion cada vez que subo un nuevo post: