Idiomas disponibles
en - English

Esta guía práctica muestra un setup configurando VSCode para programación de videojuegos usando raylib y C/C++.

Ya sea desde Linux, Windows o Mac, al finalizar está guía práctica tendremos preparado un entorno para desarrollar desde VSCode (o VSCodium) con videojuegos con raylib, incluyendo la configuración de herramientas de depuración y compilación, así como ayudas autocompletado y resaltado de sintaxis para una mejor experiencia de desarrollo en C/C++.

Tabla de contenido

Descargar el proyecto base

Requisitos:

En The Science of Code hemos preparado un proyecto base en este repositorio, que permite usar raylib con C/C++ en VSCode (VSCodium). El proyecto viene preparado para correr en Linux, Mac y Windows.

Dicho esto, vamos a la ubicación donde queramos descargarlo y ejecutamos el siguiente comando:

git clone https://github.com/TheScienceOfCodeEDU/raylib-vscode-c.git

Realizado esto se puede ver el contenido del proyecto, pero antes de poder ejecutarlo y revisarlo, debe configurarse el sistema.

Configuración del IDE

Configuración del sistema operativo

Linux

  • Fedora:

    sudo dnf install gcc-c++ cmake  git

  • Ubuntu:

    sudo apt install build-essential cmake git

¿Otra distro? revisar aquí

Clonar, compilar e instalar raylib:

git clone https://github.com/raysan5/raylib.git raylib
cd raylib
mkdir build && cd build
cmake -DBUILD_SHARED_LIBS=ON ..
make
sudo make install
sudo ldconfig

Para más información, por favor revisar aquí.

Mac

  1. Instalar brew.

  2. Ejecutar estos comandos:

    xcode-select --install
brew install raylib

Por defecto, hemos activado LLDB como depurador (debugger), en otro caso es necesario certificar los binarios de GDB.

Windows

  1. Instalar MinGW-w64: Instalar MSYS2 en la carpeta por defecto c:\msys64\, sino se hace en esta ruta, es necesario modificar las tareas que están en la carpeta .vscode (del proyecto base).

    Al terminar, asegurarse que la casilla Run MSYS2 now está activa. Esto abrirá una terminal MSYS2. Ejecutar este comando e instalar todos los paquetes sugeridos:

    pacman -S --needed base-devel mingw-w64-ucrt-x86_64-toolchain

  2. Instalar raylib: Descargar raylib aquí, luego extraer los contenidos del archivo en C:\raylib.

  3. Configurar variables de entorno:

    • Buscar la palabra variables en el menú de Windows y seleccionar Editar variables de entorno para el sistema.

    • Hacer clic en el botón Variables de entorno, y luego seleccionar PATH y hacer clic en Editar. Agregar dos nuevas líneas:

      C:\msys64\ucrt64\bin
C:\raylib\bin

      Seleccionar OK para guardar. Re-abrir cualquier programa o consola para que pueda usar el PATH actualizado.

      Probar estos comandos en una terminal para verificar que todo quedó bien configurado:

      gcc --version
g++ --version
gdb --version

      Si algo falla, volver a validar los valores del PATH comparando contra las ubicaciones reales.

Pasos finales

Estos pasos no son requeridos pero pueden mejorar la experiencia de desarrollo.

Desactivar la inserción automática de encabezados (cualquier OS)

Se recomienda desactivar la inserción automática de encabezados (header) presionando f1, luego escribiendo User Settings (JSON) y presionando Enter. Finalmente, agregamos la siguiente línea al archivo JSON que se abre:

"clangd.arguments": [ "--header-insertion=never" ],

raylib vscode c cpp debug

Corriendo el proyecto

De antemano, revisemos los principales archivos y carpetas del proyecto base:

  • .vscode/: Esta carpeta contiene la configuración del IDE, incluyendo tareas para compilar y depurar C/C++.

  • main.c: código fuente para la aplicación de ejemplo de raylib.

  • build files (archivos de compilación) para cada sistema operativo: estos archivos son llamados por VSCode (o VSCodium) cuando se ejecutando las tareas de compilación.

    • build-linux.sh
    • build-mac.sh
    • build-win.bat

    Si se planea usar otras librerías, estos archivos pueden modificarse libremente para ajustarse a cada caso en particular.

Ahora, sólo abriendo la carpeta del proyecto en el IDE y presionando ctrl + shift + b vamos a poder compilar para Linux, Windows o Mac. Luego, presionando ctrl + shift + d podremos iniciar la depuración (debugging), revisando que hayamos seleccionado el sistema operativo correcto. Debería verse una ventana que contiene un personaje pixelart. También podríamos agregar puntos de parada en el depurador, si así lo quisiéramos.

raylib tutorial vscode linux windows mac debug

¡Felicitaciones! Ya tenemos todos listo para empezar a programar videojuegos con raylib y VSCode (VSCodium).