Pour ce tuto, comme le tuto 1, il vous faut le fichier d'aide RPG maker XP en français, ainsi qu'un projet complétement vide et n'ayant qu'un seul script s'appelant 'main' et contenant ce code :
| (Ruby) | |
| 1 2 3 4 5 6 |
#==============================================================================
# ■ Main #------------------------------------------------------------------------------ # Fonction principale du programme, c'est ici que ça commence #============================================================================== |
Donc, dans un premier temps, le bitmap. En programmation la plupart du temps, c'est une zone rectangulaire où l'on peut définir des pixels de couleur, mais attention cette zone est conservé en mémoire et n'est pas affiché automatiquement, mais cela on le verra plus tard.
Dans le RGSS, comme vous pouvez le voir dans le fichier d'aide, beaucoup de fonctions sont associées à la classe Bitmap, et permettent donc son utilisation de manière simplifiée et optimale. Si vous avez déjà été vous promener dans plusieurs scripts Window_.., vous avez certainement due constater ces lignes de code :
| (Ruby) | |
| 1 2 3 |
self.contents = Bitmap.new(width - 32, height - 32)
self.contents.font.name = $fontface self.contents.font.size = $fontsize |
| (Ruby) | |
| 1 2 3 |
self.contents.clear
self.contents.font.color = system_color self.contents.draw_text(4, 0, 130, 32, "Temps de jeu :") |
Elles permettent de créer une zone Bitmap pour la fenêtre et de pouvoir la modifier.
Certains se diront "Ba oui, mais ça, ça s'affiche tout seul, alors pourquoi t'as dit que c'était juste une zone mémoire?" Tout simplement car, dans le cas de Window, la propriété 'contents' est affiché via les fonctions internes de la class RGSS Window. Mais cette classe sera abordé bien plus tard.
Bon ensuite pour pouvoir dessiner dans cette classe il va falloir définir des couleurs, pour cela, on va utiliser la classe intégrée 'Color'. Vous connaissez tous un peu le principe de fonctionnement d'un téléviseur, il faut additionner 3 couleurs de base pour obtenir tout le panel de couleur, ces 3 couleurs sont Rouge, Vert et Bleu (RVB, ou RGB pour les anglophones), il ya aussi le paramètre 'alpha' qui rentre en compte pour la définition d'une couleur (voir le post suivant pour plus de détail). Regarder dans le logiciel Paint, et essayer de redéfinir des couleurs, vous avez le 3 valeurs affichées.
En ruby, cela se fait de cette manière :
| (Ruby) | |
| 1 2 |
couleur_bleu = Color.new(0, 0, 255, 255) # R, V, B, Alpha a 255
couleur_blanc = Color.new(255, 255, 255, 255) |
Voila pour la classe Color, il n'y a rien d'autre à retenir
Chose importante : Un sprite ou un Bitmap, c'est beaucoup de ressource utilisées, il faut donc penser systématiquement à libérer ces ressources lorsque l'on n'utilise plus les sprites ou Bitmaps, à l'aide de la fonction 'dispose'
Pour la classe Sprite, on va juste pour le moment, l'initialiser avec un bitmap pour pouvoir l'afficher
| (Ruby) | |
| 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 |
#==============================================================================
# ■ Main #------------------------------------------------------------------------------ # Fonction principale du programme, c'est ici que ça commence #============================================================================== # Créer un nouveau sprite spr = Sprite.new # Associer un bitmap faisant la taille de la fenêtre RMXP spr.bitmap = Bitmap.new(640,480) # Création de la couleur Bleu couleur_bleu = Color.new(0,0,255,255) # Faire un carré de 4 pixel spr.bitmap.set_pixel(50, 50, couleur_bleu) spr.bitmap.set_pixel(50, 51, couleur_bleu) spr.bitmap.set_pixel(51, 50, couleur_bleu) spr.bitmap.set_pixel(51, 51, couleur_bleu) loop do # Mettre à jour les graphiques Graphics.update # Mettre à jour les entrés claviers Input.update # Sortir de la boucle, Si Echap est appuyé break if Input.trigger?(Input::B) end # Libérer le sprite spr.dispose |
Avec les fonctions bitmap, on aurait pus faire plus simple pour dessiner un carré :
| (Ruby) | |
| 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 |
#==============================================================================
# ■ Main #------------------------------------------------------------------------------ # Fonction principale du programme, c'est ici que ça commence #============================================================================== # Créer un nouveau sprite spr = Sprite.new # Associer un bitmap faisant la taille de 640*480 spr.bitmap = Bitmap.new(640,480) # Création de la couleur Bleu couleur_bleu = Color.new(0,0,255,255) # Faire un carré de 10 pixel spr.bitmap.fill_rect(50, 50, 10, 10, couleur_bleu) loop do # Mettre à jour les graphiques Graphics.update # Mettre à jour les entrés claviers Input.update # Sortir de la boucle, Si Echap est appuyé break if Input.trigger?(Input::B) end # Libérer le sprite spr.dispose |
Ecrire un texte?? pas de problème, on va juste initialiser la propriété font de la classe Bitmap. (Allez voir Font dans le fichier d'aide, faut que ce soit automatique maintenant, pour consulter ce fichier)
| (Ruby) | |
| 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 |
#==============================================================================
# ■ Main #------------------------------------------------------------------------------ # Fonction principale du programme, c'est ici que ça commence #============================================================================== # Créer un nouveau sprite spr = Sprite.new # Associer un bitmap faisant la taille de 640*480 spr.bitmap = Bitmap.new(640,480) # Création de la couleur Bleu couleur_bleu = Color.new(0,0,255,255) # Initialisation de la font du bitmap spr.bitmap.font.name = ["Arial", "Courier New"] spr.bitmap.font.size = 26 spr.bitmap.font.color = couleur_bleu # Faire un carré de 4 pixel spr.bitmap.draw_text(50, 50, 500, 32, "Mon premier texte affiché sur RMXP !!") loop do # Mettre à jour les graphiques Graphics.update # Mettre à jour les entrés claviers Input.update # Sortir de la boucle, Si Echap est appuyé break if Input.trigger?(Input::B) end # Libérer le sprite spr.dispose |
Tout ce qui est en rapport avec 'Rect', permet de créer des sous-zone de bitmap. Si vous vous sentez à l'aise, essayer de manipuler quelque zone Rect.
On va faire un dernier petit truc sympas avec les bitmaps, c'est d'afficher une ressource. Pour cela, il existe une fonction pour chaque ressource qui retourne un bitmap, c'est les fonctions du module RPG::Cache (gogo fichier d'aide)
| (Ruby) | |
| 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 |
#==============================================================================
# ■ Main #------------------------------------------------------------------------------ # Fonction principale du programme, c'est ici que ça commence #============================================================================== #Créer un nouveau sprite spr = Sprite.new # Associer un bitmap de la ressource Battler Angel
spr.bitmap = Bitmap.new('Graphics/Battlers/Angel.png')
# Positionner le spritespr.x = 100 spr.y = 100 loop do # Mettre à jour les graphiques Graphics.update # Mettre à jour les entrés claviers Input.update # Sortir de la boucle, Si Echap est appuyé break if Input.trigger?(Input::B) end # Libérer le sprite spr.dispose |
Revenons au fameux 4eme paramètre définissant une couleur, je mets cet exemple de programme avec l'affichage de 2 sprites contenant chacun un carré de couleur, un bleu ayant alpha à 255, et un rouge ayant alpha à 128 :
| (Ruby) | |
| 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 |
#==============================================================================
# ■ Main #------------------------------------------------------------------------------ # Fonction principale du programme, c'est ici que ça commence #============================================================================== # Créer des nouveaux sprites sprBleu = Sprite.new sprRouge = Sprite.new # Associer un bitmap faisant la taille 150*150 pxl sprBleu.bitmap = Bitmap.new(150,150) sprRouge.bitmap = Bitmap.new(150,150) # Création des couleurs couleur_bleu = Color.new(0,0,255,255) couleur_rouge = Color.new(255,0,0,128) # Faire des carrés de 100*100 pixel sprBleu.bitmap.fill_rect(0, 0, 100, 100, couleur_bleu) sprRouge.bitmap.fill_rect(50, 50, 100, 100, couleur_rouge) loop do # Mettre à jour les graphiques Graphics.update # Mettre à jour les entrés claviers Input.update # Sortir de la boucle, Si Echap est appuyé break if Input.trigger?(Input::B) end # Libérer les sprites sprBleu.dispose sprRouge.dispose |
Vous pouvez constater que le carré rouge est plus sombre et légèrement transparent. donc alpha gère la transparence de la couleur définit. Mais attention, chose importante, la couleur affichée, correspond au mélange de deux couleurs, la couleur du pixel utilisé dans le bitmap, et la couleur de transparence du sprite, définit par le paramètre 'color' du sprite (par défaut 'color' = Color.new(0,0,0,0) soit noir complétement transparente). Si vous changé 'color' du sprite en la mettant plus opaque, vous vous retrouvez avec un mélange différent :
| (Ruby) | |
| 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 35 36 |
#==============================================================================
# ■ Main #------------------------------------------------------------------------------ # Fonction principale du programme, c'est ici que ça commence #============================================================================== # Créer des nouveaux sprites sprBleu = Sprite.new sprRouge = Sprite.new # Associer un bitmap faisant la taille 150*150 pxl sprBleu.bitmap = Bitmap.new(150,150) sprRouge.bitmap = Bitmap.new(150,150) sprRouge.color = Color.new(255,255,255,128) # Couleur blanche semi-transparente # Création des couleurs couleur_bleu = Color.new(0,0,255,255) couleur_rouge = Color.new(255,0,0,180) # Faire des carrés de 100*100 pixels sprBleu.bitmap.fill_rect(0, 0, 100, 100, couleur_bleu) sprRouge.bitmap.fill_rect(50, 50, 100, 100, couleur_rouge) loop do # Mettre à jour les graphiques Graphics.update # Mettre à jour les entrés claviers Input.update # Sortir de la boucle, Si Echap est appuyé break if Input.trigger?(Input::B) end # Libérer les sprites sprBleu.dispose sprRouge.dispose |
Vous savez maintenant à quoi sert le paramètre alpha des couleurs.
Voila voila, c'est déjà pas mal, non? Si le coeur vous en dit, tenter d'utiliser les autres fonctionnalités de la classe Sprite (zoom, rotation...)
