Premier exemple : prise en main

Commençons par la construction d'une simple fenêtre avec un texte et une figure en deux dimensions. Nous allons d'abord faire cela dans un seul fichier, puis l'on modularisera par la suite.

Commencer par créer un sous-dossier (p.ex. PremierExemple, mais vous pouvez choisir librement ce nom, tant que vous restez cohérent(e) au niveau de votre CMakeLists.txt).
Ajoutez ensuite ce sous-dossier à votre fichier CMakeLists.txt principal :

add_subdirectory(PremierExemple)

Allez ensuite dans le sous-dossier PremierExemple et créez votre fichier C++, p.ex. main_exemple1.cpp (mais vous pouvez changer librement ce nom).

Il faut tout d'abord inclure les fichiers d'en-tête de raylib, puis écrire la fonction main() :

#include <raylib.h>

int main()
{
    // À compléter
    return 0;
}

Pour pouvoir afficher quelque chose, nous commençons par initialiser la fenêtre. On peut le faire en utilisant la fonction InitWindow(), qui prend en argument la largeur et la hauteur de la fenêtre, ainsi qu'un titre.
Et comme toujours en programmation, il faut libérer toute ressource que l'on a utilisé, donc on termine le programme par la fonction CloseWindow().

#include <raylib.h>

int main()
{
    InitWindow(800, 450, "Premier exemple");

    CloseWindow();
    return 0;
}

Il faut ensuite lancer la boucle principale d'attente d'évènements, qui se terminera lorsque l'utilisateur fermera la fenêtre :

#include <raylib.h>

int main()
{
    InitWindow(800, 450, "Premier exemple");

    while (!WindowShouldClose()) {
        BeginDrawing();

            // Ce que l'on veut afficher

        EndDrawing();
    }

    CloseWindow();
    return 0;
}

On peut maintenant ajouter différents éléments à afficher. Par exemple, on peut afficher un texte en utilisant la fonction DrawText(), qui prend en argument le texte à afficher, la position du coin supérieur gauche du texte, la taille de la police et la couleur du texte.

Il y a également la possibilité d'afficher des formes géométriques. Par exemple, on peut afficher un cercle via la fonction DrawCircle(), qui prend en argument le centre du cercle, son rayon, sa couleur et sa bordure (on trouvera ici d'autres exemples de formes 2D).

Il est important en règle générale de remettre la couleur de fond de la fenêtre à chaque tour de boucle, pour éviter que les éléments ne se superposent. Celà se fait via la fonction ClearBackground(), laquelle prend en argument la couleur desirée.

#include <raylib.h>

int main()
{
    InitWindow(800, 450, "Premier exemple");

    while (!WindowShouldClose()) {
        BeginDrawing();

        ClearBackground(RAYWHITE);

        DrawText("Ceci est un cercle", 20, 20, 20, DARKGRAY);

        DrawCircle(400, 225, 100, RED);

        EndDrawing();
    }

    CloseWindow();
    return 0;
}

Et voilà !

Il nous faut maintenant compiler. Pour cela il faut créer un fichier CMakeLists.txt dans le sous-dossier PremierExemple. Ce fichier va gérer tout ce qu'il y a dans ce sous-dossier. Ici c'est très simple :

• on n'a qu'un seul fichier source ; il suffit simplement de choisir un nom pour notre fichier exécutable, p.ex. exemple1 (contrairement à ce que l'on fait d'habitude en exercices, il n'est pas nécessaire que cet exécutable ait le même nom que le fichier source qui contient le main() ; on est libre de choisir) ;
• et il faut dire que l'on veut utiliser la bibliothèque (« library ») raylib.

Ce qui donne :

# CMakeLists.txt du premier exemple

add_executable(exemple1 main_exemple1.cpp)
target_compile_options(exemple1 PRIVATE ${PROJECT_WARNING_FLAGS})
target_link_libraries(exemple1 raylib)

Pour compiler tout en gardant propres les (sous-)dossiers des codes sources, on a l'habitude de créer un sous-dossier build pour tout le projet : sous le dossier princpal créez le sous-dossier buid et allez-y :

.
├── build
├── CMakeLists.txt
└── PremierExemple
    ├── CMakeLists.txt
    └── main_exemple1.cpp

Depuis ce sous-dossier build, lancez les deux commandes suivantes :

cmake ..
cmake --build .

Cela va :

• créer tout ce qui est nécessaire pour compiler ;
• installer raylib si elle n'est pas déjà installée ;
• compiler votre programme, et créer l'exécutable bin/exemple1.

La commande cmake .. va générer les fichiers de construction pour le projet. Elle est à utiliser après chaque modification du CMakeLists.txt.
La commande cmake --build . va compiler le projet et créer les exécutables. On peut compiler un seul exécutable en ajoutant le nom de celui-ci à la fin de la commande ; p.ex. :

cmake --build . --target nom_de_l_executable

L'intérêt d'être dans un dossier build est que cela garde propres les sources du projet, en mettant tous les fichiers intermédaires (de construction et les exécutables) dans le dossier build.

Note 1 : parfois, le compilateur peut réutiliser un fichier d'une compilation précédente s'il ne détecte pas de changement dans le code. Cela est dû à des dépendances mal écrites dans les CMakeLists.txt et peut parfois faire réapparaître une erreur pourtant réglée auparavant. Dans ce cas, le mieux est de bien comprendre la source de l'erreur, puis corriger le(s) CMakeLists.txt impliqués et relancer la commande :

cmake .. && cmake --build .

Note 2 : la plupart des éditeurs de code permettent aussi de définir des configurations pour de faire ces constructions dans un autre dossier, et cela sans devoir passer par le terminal. Référez vous pour cela à la documentation de votre éditeur de code.

Note 3 : si vous utilisez le compilateur MinGW sous Windows, il faut ajouter l'option -G "MinGW Makefiles" à la commande de génération :

cmake -G "MinGW Makefiles" ..

Vous pouvez donc maintenant lancer l'exécutable (build/bin/exemple1). Cela devrait ressembler à ceci :

Avant de passer à la suite, mentionnons plusieurs paramètres pouvant être utiles pour la configuration de la fenêtre. Par exemple, il y a un système de flags qui permettent de définir son comportement (exemple des flags possibles). On peut par exemple définir si la fenêtre est redimensionnable, si elle est en plein écran, si elle est visible, etc. On peut également lui fixer une taille minimale afin que nos éléments ne soient pas trop écrasés. Il est aussi commun de fixer un nombre de frames par seconde (FPS), pour éviter que le programme ne tourne trop vite.

// ###########################################################
/*
 * Optionnel, les "flags" permettent de définir le comportement de la fenêtre
 * par exemple le redimensionnement "FLAG_WINDOW_RESIZABLE" ou
 * l'adaptation à la résolution "FLAG_WINDOW_HIGHDPI"
 */
SetConfigFlags(FLAG_WINDOW_RESIZABLE | FLAG_WINDOW_HIGHDPI);
// ###########################################################

// Initialisation de la fenêtre, avec la largeur, la hauteur et le titre
InitWindow(800, 450, "Premier exemple");

// Optionnel, on peut fixer une taille minimale pour la fenêtre
SetWindowMinSize(360, 320);

//  Optionnel, on peut fixer le nombre d'images par seconde
SetTargetFPS(60);

Finalement, nous allons voir comment centrer le cercle dans la fenêtre lorsqu'elle est redimensionnable. Pour cela, on peut utiliser les fonctions GetScreenWidth() et GetScreenHeight() pour obtenir la taille de l'écran, et ainsi calculer la position du cercle :

#include <raylib.h>


int main()
{
    // Valeurs initiales, modifiables par la suite
    int largeur = 800;
    int hauteur = 450;

    SetConfigFlags(FLAG_WINDOW_RESIZABLE | FLAG_WINDOW_HIGHDPI);
    InitWindow(largeur, hauteur, "Premier exemple");
    SetWindowMinSize(360, 320);

    SetTargetFPS(60);

    // Boucle principale
    while (!WindowShouldClose())
    {
        /*
         * Récupération de la largeur et de la hauteur de la fenêtre
         * en cas de redimensionnement
         */
        largeur = GetScreenWidth();
        hauteur = GetScreenHeight();

        // Début du dessin
        BeginDrawing();

            ClearBackground(RAYWHITE);

            DrawText("Ceci est un cercle", 20, 20, 20, DARKGRAY);

            DrawCircle(largeur / 2, hauteur / 2, 100, RED);

        EndDrawing();
    }

    CloseWindow();
    return 0;
}

Pour découvrir d'autres exemples et trouver de l'inspiration, on pourra consulter la galerie d'exemples de raylib. Il existe également une page regroupant les différentes fonctions de raylib, mais elle est moins pratique à utiliser.