Aclaración inicial

Todos los comandos en este tutorial deben ser ejecutados como un usuario normal (es decir, como un no super usuario).

Si algún comando requiere privilegios elevados será indicado oportunamente o utilizará sudo. Este artículo fue escrito y probado utilizando Ubuntu 22.04 LTS y Arch Linux.

Paquetes necesarios

Necesitamos varios paquetes. Están todos en este único comando para no preocuparnos por ello más adelante.

Ubuntu

Si estamos utilizando Ubuntu y derivados instalamos los siguientes paquetes:

1
2

sudo apt update
sudo apt install build-essential pkg-config cmake git curl zip unzip tar libgl1-mesa-dev libx11-dev libxcursor-dev libxinerama-dev libxrandr-dev libxi-dev libasound2-dev mesa-common-dev xorg-dev libglu1-mesa-dev libglfw3-dev

• build-essential, pkg-config, cmake: Herramientas de compilación básicas que se utilizarán a lo largo del cuatrimestre.
• git: Lo necesitamos para crear, clonar y manipular repositorios.
• curl, zip, unzip, tar: Dependencias de vcpkg. ¹
• libgl1-mesa-dev, libx11-dev, libxcursor-dev, libxinerama-dev, libxrandr-dev, libxi-dev, libasound2-dev, mesa-common-dev, xorg-dev, libglu1-mesa-dev: Dependencias de raylib. ²
• libglfw3-dev: Biblioteca para OpenGL. La necesitamos para algunos levels.

Arch Linux

En Arch Linux y derivados:

1
2

sudo pacman -Syu
sudo pacman -S base-devel cmake git curl zip unzip tar glfw-x11 glfw-wayland libx11 libxcursor libxinerama libxrandr ninja vulkan-headers xorg-server-devel xorg-xinput

• base-devel, cmake: Herramientas de compilación básicas que se utilizarán a lo largo del cuatrimestre.
• git: Lo necesitamos para crear, clonar y manipular repositorios.
• curl, zip, unzip, tar: Dependencias de vcpkg. ¹
• libx11, libxcursor, libxinerama, libxrandr, ninja, vulkan-headers, xorg-server-devel, xorg-xinput: Dependencias de raylib. ²
• glfw-x11, glfw-wayland: Biblioteca para OpenGL. La necesitamos para algunos levels.

vcpkg

Instalemos el gestor de paquetes que vamos a utilizar durante la cursada.

Para ello, ejecutamos los siguientes comandos:

1
2
3
4
5
6

mkdir ~/dev && cd ~/dev
git clone https://github.com/Microsoft/vcpkg.git
cd vcpkg/
./bootstrap-vcpkg.sh
./vcpkg integrate install
./vcpkg integrate bash

Con estos comandos estamos:

• mkdir ~/dev && cd ~/dev: Creando (y luego accediendo) a la carpeta dev en nuestro $HOME.
• git clone ...: Obteniendo el código fuente de vcpkg del repositorio oficial.
• bootstrap-vcpkg.sh: Instalando vcpkg.
• ./vcpkg integrate install: ‘‘Integrando’’ las bibliotecas. ³
• ./vcpkg integrate bash Agregando autocompletado al presionar tab. Si nuestra shell es zsh podemos reemplazar bash por zsh en este comando. ⁴

¡IMPORTANTE!

Prestemos atención a que todos los comandos de vcpkg están siendo ejecutados desde la carpeta donde fue instalado de la siguiente manera: ./vcpkg <comando>.

Si quisiéramos ejecutar el gestor desde ‘cualquier carpeta’ deberíamos agregarlo a nuestro $PATH.

Instalando raylib

En Ubuntu, instalar raylib utilizando el archivo de vcpkg que viene por defecto trae muchos problemas al momento de compilar el programa. Para solucionarlos, modifiqué el archivo con las instrucciones de instalación de la biblioteca para vcpkg.

Vamos a reemplazar el archivo portfile.cmake original de raylib en vcpkg con la versión modificada. ⁵

Para ello, primero descargamos el nuevo portfile.cmake desde este link (haciendo click derecho sobre el link -> Guardar cómo…) y lo guardamos en un lugar de fácil acceso, por ejemplo, la carpeta ~/dev/ que creamos al principio. ⁶

Como tenemos disponible cURL, podemos copiar la url del archivo modificado (de nuevo, haciendo click derecho sobre el link -> Copiar dirección) y ejecutando el siguiente comando desde nuestra terminal, reemplazando <url a portfile.cmake> apropiadamente.

1

curl -o ~/dev/vcpkg/ports/raylib/portfile.cmake <url a portfile.cmake>

Si hacemos esto, podemos omitir el paso a continuación.

Ahora, desde una terminal, reemplazamos el archivo original con nuestra versión:

1
2
3

cd ~/dev/vcpkg
# Cambiar porfile.cmake por la dirección donde descargamos el archivo.
mv portfile.cmake ~/dev/vcpkg/ports/raylib/portfile.cmake

Y procedemos, ahora sí, a instalar raylib con vcpkg:

1

./vcpkg install raylib

Visual Studio Code

Instalación

La manera más rápida de instalar el editor de texto es entrar a la sección de descargas del sitio oficial de Visual Studio Code, descargar el archivo .deb y ejecutar en una terminal: ⁷

1
2

cd ~/Downloads  # Cambiar por la ubicación donde se descargó el archivo
sudo apt install ./code_<version>.deb

Extensiones

Para poder utilizar C/C++ y CMake de manera amigable en Visual Studio Code, instalaremos la extensión C/C++ Extension Pack.

Para ello, vamos al menú de extensiones, desde el botón ubicado en la barra lateral izquierda o presionando Ctrl+Shift+X y buscamos la extensión por su nombre. También podemos entrar a su página en Visual Studio Marketplace e instalarla mediante el comando provisto.

CMake

Configuración global

Una vez instalado VS Code, abrimos el archivo de configuración.

Para ello, abrimos la paleta de comandos presionando Ctrl+Shift+P y seleccionamos Preferences: Open Settings (JSON) en el menú que nos aparece.

Tip

Podemos escribir settings json para reducir las opciones.

Si la instalación es reciente, veremos un archivo vacío con un contenido similar al siguiente:

1
2
3

{
    "workbench.colorTheme": "Default Dark+"
}

Entre las llaves ({ }), agregamos la siguiente línea de código: ⁸

1
2
3

,"cmake.configureSettings": {
"CMAKE_TOOLCHAIN_FILE": "~/dev/vcpkg/scripts/buildsystems/vcpkg.cmake"
}

Obteniendo un resultado similar al siguiente:

1
2
3
4
5
6

{
    "workbench.colorTheme": "Default Dark+"
    ,"cmake.configureSettings": {
        "CMAKE_TOOLCHAIN_FILE": "~/dev/vcpkg/scripts/buildsystems/vcpkg.cmake"
    }
}

Configuración por proyecto

Para trabajar más cómodos en VS Code, cuando iniciamos un proyecto podemos abrir la paleta de comandos y ejecutar CMake: Configure para que nos cree un archivo CMakeLists.txt y configure archivos extras en la carpeta build.

Probando… probando…

Crear una nueva carpeta para nuestro proyecto de prueba y la abrimos con Visual Studio Code.

Tip

Si estamos en una terminal podemos abrir una carpeta con VS Code directamente utilizando code <path>. En particular, si estamos posicionados en la carpeta donde vamos a crear nuestro proyecto de prueba utilizamos code . para abrir el editor.

Crearemos dos archivos: main.cpp y CMakeLists.txt con el siguiente contenido:

main.cpp:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// main.cpp
// Raylib [core] example
// Copyright (C) 2013-2016 Ramon Santamaria (@raysan5)

#include <raylib.h>

int main(void) {
    const int screenWidth = 800;
    const int screenHeight = 450;

    InitWindow(screenWidth, screenHeight,
            "raylib [core] example - basic window");

    SetTargetFPS(60);

    // Game loop
    while (!WindowShouldClose())
    {
        BeginDrawing();
        
        ClearBackground(RAYWHITE);

        DrawText("Congrats! You created your first window!",
                190, 200, 20, LIGHTGRAY);

        EndDrawing();
    }

    CloseWindow();

    return 0;
}

CMakeLists.txt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# CMakeLists.txt
cmake_minimum_required(VERSION 3.0.0)
project(raylib-example VERSION 0.1.0)

# From "Working with CMake" documentation:
if (${CMAKE_SYSTEM_NAME} MATCHES "Darwin")
    set(CMAKE_CXX_STANDARD 11)
    add_compile_options(-fsanitize=address)
    add_link_options(-fsanitize=address)
endif()


add_executable(ray-example main.cpp)


# Raylib
find_package(raylib CONFIG REQUIRED)

if(${CMAKE_SYSTEM_NAME} MATCHES "Windows")
    target_include_directories(ray-example PRIVATE ${RAYLIB_INCLUDE_DIRS})
    target_link_libraries(ray-example PRIVATE ${RAYLIB_LIBRARIES})
elseif(${CMAKE_SYSTEM_NAME} MATCHES "Darwin")
    target_link_libraries(ray-example PRIVATE raylib)
elseif(${CMAKE_SYSTEM_NAME} MATCHES "Linux")
    target_link_libraries(ray-example PRIVATE raylib m ${CMAKE_DL_LIBS} pthread GL rt X11)
endif()


# From "Working with CMake" documentation:
if (${CMAKE_SYSTEM_NAME} MATCHES "Darwin")
    target_link_libraries(ray-example PRIVATE "-framework IOKit")
    target_link_libraries(ray-example PRIVATE "-framework Cocoa")
    target_link_libraries(ray-example PRIVATE "-framework OpenGL")
endif()

La línea de configuración

1

target_link_libraries(main PRIVATE raylib m ${CMAKE_DL_LIBS} pthread GL rt X11)

es necesaria en Linux para indicarle al linker que debe utilizar las bibliotecas especificadas (raylib, math, pthread, etc).⁹

Para compilar nuestro proyecto de prueba, podemos presionar la tecla F7 y, una vez compilado, Shift+F5 para ejecutarlo.

1. Del repositorio oficial en GitHub ↩ ↩²

2. Al compilar raylib obtenemos el siguiente mensaje:

   raylib currently requires the following libraries from the system package
   manager:
       libgl1-mesa-dev
       libx11-dev
       libxcursor-dev
       libxinerama-dev
       libxrandr-dev
   These can be installed on Ubuntu systems via sudo apt install 
   libgl1-mesa-dev libx11-dev libxcursor-dev libxinerama-dev libxrandr-dev
   

   Además, en la Wiki del repositorio oficial nos dicen que

   You need to install some required libraries; ALSA for audio, Mesa for OpenGL accelerated graphics and X11 for windowing system.

   ↩ ↩²

3. De la documentación oficial:

   This will implicitly add Include Directories, Link Directories, and Link Libraries for all packages installed with Vcpkg to all VS2015, VS2017 and VS2019 MSBuild projects. We also add a post-build action for executable projects that will analyze and copy any DLLs you need to the output folder, enabling a seamless F5 experience.

   ↩

4. Ver la documentación oficial. ↩

5. Si en el futuro deja de ser necesario este parche, podemos reestablecer los archivos originales de vcpkg descargándolos desde su ubicación en el repositorio de GitHub y reinstalando raylib. ↩

6. También podemos ver una copia en este sitio antes de descargarlo. ↩

7. Ver la documentación al respecto. ↩

8. Ver la documentación oficial. ↩

9. Podemos obtener una lista de las distantas plataformas en este artículo. ↩