Table des matières

, , , ,

GB Studio

GB Studio est un outil (visual game builder) qui permet de créer des jeux vidéo, pour Game Boy ou Game Boy Color, sans nécessiter de compétences en programmation. Les jeux créés sont exportables facilement pour le web ou sous forme de «rom» qui peut être inscrite sur cartouche et joués sur une véritable console (cf. GBxCart RW et EverDrive-GB X5)

GB Studio est un logiciel libre qui peut être installé sur Linux, MacOS ou Windows, développé à l'origine par Chris Maltby.

Caractéristiques des jeux

Pour chaque scene, il y a un nombre max de sprites affichables et de tuiles utilisables pour le background

Utilisation : assets

Dans le contexte du jeu vidéo, le terme assets désigne éléments qui composent un jeu :

Palettes

En mode Game Boy, la palette de background (à gauche) comporte 4 couleurs, la palette de sprites (à droite) en comporte 3, la dernière couleur indique la transparence.
Palette background : #071821, #306850, #86c06c, #e0f8cf
Palette sprites : #071821, #86c06c, #e0f8cf, #65ff00 (transparent)

En mode Game Boy Color (TODO)

Sprites

Types de sprites

Pour dessiner les sprites, on utilise LibreSprite, attention la palette Gameboy de LibreSprite n'a pas les bonnes couleurs, on les a refaites : gb_palette.zip

Utiliser l'éditeur de sprites de GB Studio

Exemple d'un sprite d'acteur animé à 6 positions (fichier .PNG de 96×16 pixels) :

Positions : 2 frames «de face en mouvement», 2 frames «avançant vers le haut», 2 frames «avançant à droite» (dont seront déduites les positions «avançant à gauche»). Le vert vif clair correspond à la couleur transparente.

Images de fond (backgrounds)

Plusieurs règles pour les images de fond :

Optimiser ses images

Pour les scènes de type «Logo» : 160 x 144 px, 4 couleurs, pas nécessaire de faire des tuiles mais pas de player sur la scène

Musique

La musique peut être au format .MOD ou .UGE, mais un projet ne peut comporter qu'un seul de ces formats.
L'éditeur intégré permet de réaliser des musiques au format .UGE. Pour le format .MOD, il faut utiliser un éditeur externe.

4 canaux (2 ondes carrées pour les mélodies, 1 noise, 1 forme d'onde sawtooth pour les basses), chacun de ces canaux a ses propres caractéristiques (instruments, etc.)
L'édition peut se faire sous la forme d'un piano roll, ou d'un tracker.
Pas de BPM, juste une vitesse indiquant combien de frames par pulsation.
Des effets peuvent être ajoutés sur chaque note

Ressources musique :

Effets sonores

Les effets sonores sont à placer dans le dossier /assets/sounds, plusieurs types de fichiers sont possibles :

Ressources effets sonores

Conversion des sons pour effets sonores

# Créer un dossier "8bit" s'il n'existe pas
mkdir -p 8bit
 
# Boucle sur chaque fichier .wav dans le dossier actuel
for file in *.wav; do
  # Transformer le fichier en wav mono 8 bits avec sox
  sox "$file" -b 8 -r 44100 "8bit/${file%.*}_8bit_44100_mono.wav" channels 1
done

La boucle for parcourt tous les fichiers .wav dans le dossier actuel. La commande sox utilisée à l'intérieur de la boucle convertit chaque fichier en wav mono 8 bits 44100. La sortie est enregistrée dans le dossier “8bit”. La substitution de variables ${file%.*} retire l'extension “.wav” du nom de fichier.

Utilisation : composer un jeu

Un jeu est composé de plusieurs scènes, reliées par des évènements déclencheurs, dans lequelles des acteurs interagissent. La logique du jeu est assurée par des scripts associés aux scènes, aux acteurs ou aux évènements.

Les zones de collision des scènes sont réglées dans l'éditeur.

A chaque scène, on peut associer un arrière plan, un type, une feuille de sprite au personnage et des scripts à l'initialisation (par exemple : changer la musique)

Les acteurs sont soit des personnages, soit des objets avec lesquels le joueur interagit

Scenes

Les scènes composent le jeu, chacune est un «écran» ou un inviers du jeu, elle ssont reliées par des déclencheurs (triggers) qui déclenche un évènement «change scene». Dans l'éditeur ces liens entre scènes sont représentés par des flèches bleues en pointillés.

Plusieurs types de scènes sont proposés qui correspondent à un type de jeu :

Chaque scène peut avoir un maximum de 20 acteurs, 30 triggers/déclencheurs et entre 64 et 192 tuiles de sprites selon la complexité du projet. En sélectionnant une scène, dans la barre grise sous la scène, on retrouve ces infos :

Tout ça est à nuancer, voir la doc : https://www.gbstudio.dev/docs/project-editor/scenes

Utilisation : scripting

TODO

Les scripts permettent de contrôler le déroulement du jeu en fonctions des interactions du joueur. Par exemple, ils sont utilisés pour relier les scènes entre elles, modifier des variables, ajouter des dialogues, etc.

Les scripts peuvent être ajoutés aux scènes, aux acteurs ou aux déclencheurs (triggers). Pour afficher les scripts liès à un de ces éléments, le sélectionner dans la vue générale.

scène

acteur

déclencheur

Ressources scripts

Utilisation : build & export

Le jeu peut être «buildé» à tout moment avec le bouton «play» en haut à droite, il s'ouvrira alors dans un émulateur (qui a quelques difficultés avec le son).
On peut aussi l'exporter sous différente forme depuis le menu «jeu/exporter sous» :

Pour jouer au jeu créé, on peut utiliser :

Émulateur intégré

Quand on «build» le jeu, il s'affiche dans une fenêtre d'émulation. C'est BinjGB qui assure l'émulation.

Haut, Bas, Gauche, Droite : flèches directionnelles
Bouton A : Z
Bouton B : X
Bouton Start : ↵ Enter
Bouton Select : ⇧ Shift

Export HTML

Quand on exporte un jeu en html, il faut lancer un serveur pour le tester en local (et ne pas se confronter aux règles CORS du navigateur), par exemple en utilisant le serveur intégré à python

Pour publier sur itch.io :

FAQ / Tips

Jouer de la musique une seule fois
Apparemment le player n'est pas fait pour ça, il faut créer un pattern vide et à la fin de celui-ci renvoyer vers le pattern vide, cf. https://github.com/chrismaltby/gb-studio/issues/1191#issuecomment-1284881468

Représenter des sprites sur une grille
Utile d'un point de vue pédagogique! Les images des sprites sont très petites (16x16px), il faut les agrandir et ajouter une grille (avec le script grid de Fred Weinhaus) 

convert frogue.png -filter point -resize 1000% f1.png           # multiplier la définition par 10 sans interpolation
convert f1.png -background '#65ff00' -layers flatten f2.png     # ajouter un fond vert
sh ./grid -s 10 -c white -o 0.8 f2.png f3.png                   # ajouter une grille blanche autour de chaque pixel
sh ./grid -s 160 -c black f3.png frogue_x10_grille.png          # ajouter une grille noire autour de chaque frame 

Original Résultat

Advanced mode

Explaining VRAM and tile limits in GB Studio. https://gbstudiolab.neocities.org/guides/vram-tile-limits
Game size checker : https://gbstudiolab.neocities.org/resources/game-size-checker (utile avant optimisation)

Détails techniques croustillants sur GB Studio

Le projet est open-source, développée principalement par Chris Maltby depuis 2019. Il est réalisé en React à l'aide de l'outil Electron ainsi qu'une architecture Redux et est disponible sur Github.

GB Studio fonctionne sur la machine virtuelle GBVM

GB Studio fonctionne comme une interface visuelle avec GBDK (Game Boy Developer’s Kit) qui est un set non-officiel d'outils et de bibliothèques en langage C pour développer des logiciels sur Game Boy (et pour d'autres consoles).

Ressources

Assets

Tutos vidéo