❤ 0 Sommaire
Ruby
Les variables
Les tableaux
Les booléens et les calculs logiques
Structure de if
Structure de case
Boucles loop do et while
Boucle for
Fonctions et procédures
POO - Classes et objets
RGSS
Débuter avec le RGSS
Module Input
>> Bitmap, Color, Sprite <<
Structure de base des classes Scene et Window
[RGSS] Tuto 3 : Bitmap, Color, Sprite
Pour ce tuto, comme le tuto 1, il vous faut le fichier d'aide de 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 :
1
2
3
4
5
| #==============================================================================
# ■ 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ée 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 dû constater ces lignes de code :
1
2
3
| self.contents = Bitmap.new(width - 32, height - 32)
self.contents.font.name = $fontface
self.contents.font.size = $fontsize |
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ée via les fonctions internes de la class RGSS Window. Mais cette classe sera abordée 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 connaisez tous un peu le principe de fonctionnement d'un téléviseur, il faut aditionner 3 couleurs de base pour optenir 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 :
1
2
| couleur_bleu = Color.new(0, 0, 255, 255) # R, V, B, Alpha a 255
couleur_blanc = Color.new(255, 255, 255, 255) |
Voilà pour la classe Color, il n'y a rien d'autre à retenir.
Chose importante : Un sprite ou un Bitmap, c'est beaucoup de ressources 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 :
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é :
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 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)
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)
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
| #==============================================================================
# ■ 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 sprite
spr.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 :
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 trensparent. donc alpha gére la trensparence de la couleur définit. Mais attention, chose importante, la couleur affiché, correspond au mélange de deux couleurs, la couleur du pixel utilisé dans le bitmap, et la couleur de tranparence 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 diférent :
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.
Voilà voilà, c'est déjà pas mal, non ? Si le coeur vous en dit, tentez d'utiliser les autres fonctionnalités de la classe Sprite (zoom, rotation...).
Source
- Tonyryu, "[RGSS] Tuto 3 : Bitmap, Color, Sprite", TonyryuDev, écrit le 2 août 2013 [consulté le 4 juillet 2021], https://web.archive.org/web/20181202044019/http://www.tonyryudev.com/joomla3/index.php/menu-mes-developpements/menu-cours-ruby-rgss/13-rgss-tuto-3-bitmap-color-sprite
Ce tutoriel a été posté avec l'accord de son auteur.
|
Chat
