Découverte de GB Studio

Que diriez-vous de créer votre propre jeu rétro accessible directement sur le web ou sur une GameBoy ? C'est justement ce que GB Studio vous aidera à faire, c'est un logiciel gratuit et accessible à tous pour mener à bien le développement de jeu de ce style.

GB Studio est un programme inventé par Chris Maltby au début de l'année 2019.

Le projet est open-source, développé en React à l'aide de l'outil Electron ainsi qu'une architecture Redux et est disponible sur Github.

Il n'est pas question ici de développer un jeu très complexe avec des fonctionnalités personnalisées et hors du commun. Ce logiciel est destiné à la création de jeux d’aventure 2D certes parfois limité mais qui vous ouvre aussi une multitude de possibilités !

Fonctionnalités disponibles :

• Créateur visuel de jeu accessible avec des connaissances basiques en programmation ❤️
• Réalisez vos éléments graphiques avec n’importe quel éditeur capable de générer du PNG ✨
• Un exemple de projet est inclus pour bien démarrer ✅
• Déploiement sur GameBoy en ROM 🕹
• Déploiement en HTML5 et jouable sur un navigateur web 🖥

Pour illustrer cet article nous avons développé notre jeu The Byte Quest. Nous allons donc vous expliquer comment nous avons créé ce jeu avec l'aide de GB Studio !

L'histoire de The Byte Quest

Le jeu démarre et nous avons déjà notre première mission : déployer l’application !

Pour cela nous devons nous rendre dans la salle de réunion pour récupérer une clé SSH sur un ordinateur. Une fois l'application déployée, une erreur survient et nous nous retrouvons bloqués à l'intérieur des node_modules.

A partir de là, notre aventure à l'intérieur de ces derniers commence !

Nous avançons en résolvant les différentes énigmes des zones du jeu, ou en répondant aux questions des différents personnages tout au long de notre aventure. Par exemple, en positionnant des pierres pour former le logo de GraphQL ou en entrant un mot de passe pour débloquer l'accès à un pont.

Créer ses propres assets

Lorsque vous créez votre projet, un dossier d'assets a également été créé dans le projet contenant un certain nombre de sous-dossiers pour chaque type d'assets de votre jeu.

Pour ajouter des nouveaux sprites à votre jeu, il vous suffit de placer vos fichiers PNG dans le dossier assets/sprites de votre projet. Les sprites sont les représentations graphiques utilisées par les personnages jouables ou interactifs dans vos scènes.

Actuellement GB Studio n'offre pas la possibilité de modifier directement les graphiques de votre jeu. À la place vous pouvez utiliser vos applications d'édition préférées et enregistrer des fichiers dans les dossiers prévus à cet effet, ils apparaîtront instantanément dans votre projet. Si vous modifiez un fichier PNG de sprite ou d'assets à l'aide d'un éditeur d'image externe, la modification sera visible dans votre fenêtre de projet dès que vous l'ouvrirez de nouveau.

Vous pouvez créer des graphiques dans n'importe quelle application capable de générer des fichiers PNG, mais il est recommandé d'utiliser Aseprite ou Photoshop pour créer vos sprites et vos éléments d'interface utilisateur, puis d'utiliser l'éditeur Tiled Map Editor pour créer vos scènes en arrière-plan.

Dans votre projet, vous devez respecter des couleurs prédéfinies pour les scènes et les personnages qui sont disponibles directement dans la documentation.

Un sprite se compose de un ou plusieurs cadres de 16 x 16 pixels disposés horizontalement dans un fichier PNG. Un sprite avec une seule image mesurera 16 x 16px tandis qu'un sprite avec trois images mesurera 48 x 16px.

Pour créer des sprites qui peuvent faire face dans quatre directions tournées vers le joueur, créez un PNG de 48 x 16 pixels contenant les trois images orientées vers l'avant, vers le haut et vers la droite. Le sprite orienté vers la gauche est automatiquement généré en retournant le sprite orienté vers la droite horizontalement et n'a donc pas besoin d'être créé.

Pour les sprites qui n'ont besoin que d'un seul cadre (par exemple, des éléments statiques tels que des panneaux indicateurs), créez votre PNG sous la forme d'une image 16 x 16px contenant uniquement le cadre requis comme l'exemple ci-dessous.

Si vous voulez avoir des sprites qui jouent de courtes animations, vous pouvez créer un PNG qui peut avoir au minimum 2 images à 32px x 16px et un maximum de 25 images à 400px x 16px. L'utilisation de ces sprites sur un acteur vous permettra de sélectionner l'image que vous souhaitez afficher par défaut et permettra à une animation d'être jouée à une vitesse spécifiée.

Une image ne peut pas contenir plus de 192 mosaïques uniques de 8 x 8 pixels à la fois car GB Studio contient une limite de mémoire afin d'éviter des bugs d'affichages dans le jeu. Cela signifie que même en utilisant la plus petite taille d'arrière-plan possible, vous devez répéter environ la moitié de vos carreaux. Si possible, répétez les mêmes pixels entre les images car elles seront regroupées en économisant sur la taille totale du jeu. Il est recommandé d'utiliser un éditeur de mosaïque tel que Tiled Map Editor pour vous assurer que vos arrière-plans sont conformes à la grille de pixels.

Si vous avez dépassé la limite autorisée, un warning apparaîtra dans votre console lors de la compilation du projet. Vous pourrez donc modifier votre map d'arrière plan pour qu'elle corresponde aux limites autorisées par GB Studio.

Votre projet contient un certain nombre de fichiers dans assets/ui avec des noms de fichiers fixes qui définissent des parties de l'interface utilisateur de votre jeu. La modification de ces fichiers vous permet de changer la police par défaut, de définir le cadre de la fenêtre et de modifier le curseur de sélection.

Le développement

Le système est basé sur des actions en "drag and drop" et des fonctions prédéfinies dans le menu du logiciel, ce qui rend le logiciel très simple d'utilisation et rapide pour pouvoir ajouter, modifier ou supprimer des éléments.

Lors de l'ajout d'événements aux acteurs, ils s'exécuteront lorsque le joueur se tiendra à côté de cet acteur et appuiera sur le bouton d'interaction. Les événements sur les déclencheurs (trigger) s'exécutent lorsque le joueur se tient au-dessus du déclencheur, ce qui est utile pour créer des portes entre les scènes et des points d'actions. Par contre pour les événements sur les scènes, contrairement aux autres ils s'exécutent dès que cette scène est chargée, ce qui est utile pour configurer la scène en fonction des valeurs de variables ou pour lancer une cinématique.

Lorsqu'une scène, un acteur ou un déclencheur est sélectionné dans l'éditeur, la barre latérale contiendra un bouton "Add Event". Cliquez dessus pour ajouter de nouveaux événements. Si des événements ont déjà été définis, ils seront répertoriés ici. L'événement le plus haut sera le premier à être exécuté dans le script.

GB Studio nous donne accès à une grande quantité de scripts prédifinis pour créer notre jeu mais qui reste quand même limitée. Par exemple il y a la possibilité de cacher un acteur donc un personnage avec le script "Actor : Hide". Ou au contraire, si l'on souhaite l'afficher il faudra utiliser le script "Actor : Show" etc...

Voici la liste des différents scripts présents dans GB Studio :

Il y a des scripts pour agir sur les acteurs mais aussi sur les scènes, sur la camera et sur les données du jeu.

Dans l'exemple ci-dessous, nous pouvons voir 4 scènes différentes. Les lignes en pointillés bleus correspondent au lien de transition entre les différentes pages, il s'agit plus particulièrement du script "Scene : Switch Scene". Les carrés rouges sont les collisions présentes sur chaque map, pour éviter que le personnage puisse se déplacer librement sur les obstacles. Les déclencheurs sont visibles par une marque orange sur le sol, qui vont donc activer un script lorsque le personnage passera dessus. Et pour finir, les acteurs sont présents avec un petit carré vert, qui nous montre qu'une action peut être définie lorsque nous intéragierons avec eux.

Le déploiement

En cliquant sur le navigateur de projet et en sélectionnant "Build & Run", vous accédez au terminal de déploiement où vous pouvez voir les différents logs de votre projet à sa compilation. Vous accédez également à cet écran en cliquant sur le bouton "Play" pendant qu'une compilation est en cours. Cet écran vous montrera s'il y a des erreurs dans votre build pour vous aider à les corriger.

ROM

Cliquez sur le bouton "Export" et cliquer sur "Export ROM", cela construira votre jeu et créera un fichier ROM dans le dossier de construction de votre projet sous le nom $PROJECT_ROOT/build/rom/game.gb. Vous pouvez lire ce fichier ROM dans n'importe quel émulateur compatible tel que OpenEmu ou KiGB .

Web

Cliquez sur le bouton "Export" et sur "Export Web" pour créer votre jeu et créer une version Web HTML5 dans le dossier \$PROJECT_ROOT/build/web. Vous pouvez télécharger ce dossier sur n'importe quel serveur Web et accéder au fichier index.html pour jouer à votre jeu dans un navigateur Web. Si vous utilisez un navigateur Web mobile ou tablette, le jeu comprendra également des commandes tactiles.

Développé à l'aide d'un moteur en C qui est compilé avec l'aide de Emscripten. Pour permettre de compiler du bitcode LLVM en asm.js pour qu'il soit ensuite interprêté par les navigateurs web.

Vous pouvez aussi ZIP votre dossier build/web, et le télécharger sur Itch.io en tant que jeu HTML. Dans ce cas, la taille de la fenêtre recommandée à utiliser est de 480 px x 432 px.

Alors vous démarrez quand ?

Vous avez désormais toutes les informations nécessaires pour créer votre propre jeu rétro avec l'aide de GB Studio ! Si vous souhaitez approfondir vos connaissances dans le logiciel, la documentation est très complète.

Vous pouvez toujours tester notre jeu The Byte Quest ici 🥰

The Byte Quest est aussi disponible sur la page 404 de notre site web !

Une nouvelle version de GB Studio est désormais disponible depuis vendredi dernier avec énormément de nouvelles fonctionnalités ! Des couleurs dans votre jeu, ou des maps encore plus grandes, ou même la possibilité d'ajouter jusqu'à 30 acteurs ou triggers par scène ce qui ouvre énormément de nouvelles possibilités !

Toutes les nouveautés de la version 2.0 sont présentes ici 👀

Cependant, ce n'est encore qu'une bêta, il est possible que des bugs soit présents dans cette version, si c'est le cas, vous pouvez créer un ticket directement ici pour en informer le créateur 😉

N'hésitez pas à nous partager vos créations, à votre tour de démarrer le développement de votre jeu rétro ! 💪🏻

👋