Apprendre


Vous êtes
nouveau sur
Oniromancie?

Visite guidée
du site


Découvrir
RPG Maker

RM 95
RM 2000/2003
RM XP
RM VX/VX Ace
RM MV/MZ

Apprendre
RPG Maker

Tutoriels
Guides
Making-of

Dans le
Forum

Section Entraide

News: / Annonces du mois d'octobre / Jeux: Happiness Adventure / Jeux: Digital Shadow / Sorties: [RMVXACE] Digital Shadow - (...) / Chat

Bienvenue
visiteur !




publicité RPG Maker!

Statistiques

Liste des
membres


Contact

Mentions légales

174 connectés actuellement

11855326 visiteurs
depuis l'ouverture

91 visiteurs
aujourd'hui



Barre de séparation

Partenaires

Indiexpo

Akademiya RPG Maker

Hellsoft

Planète Glutko

RPG Fusion

Leo-Games

ConsoleFun

Le Comptoir Du clickeur

Alex d'Or

Tous nos partenaires

Devenir
partenaire



[RGSS] Apprendre le RGSS : Bitmap, Color, Sprite

Série de tutoriels sur le RGSS. On aborde ici les classes Bitmap, Color et Sprite, qui permettent d'afficher des images à l'écran.

Ecrit par Tonyryu le 02/08/2013


❤ 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 :

Portion de code : Tout sélectionner

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 :

Portion de code : Tout sélectionner

1
2
3
 self.contents = Bitmap.new(width - 32, height - 32)
self.contents.font.name = $fontface
self.contents.font.size = $fontsize


Portion de code : Tout sélectionner

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 :

Portion de code : Tout sélectionner

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 :

Portion de code : Tout sélectionner

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é :

Portion de code : Tout sélectionner

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)

Portion de code : Tout sélectionner

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)

Portion de code : Tout sélectionner

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 :

Portion de code : Tout sélectionner

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 :

Portion de code : Tout sélectionner

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/https://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.


Aucun commentaire n'a été posté pour le moment.

Suite à de nombreux abus, le post en invités a été désactivé. Veuillez vous inscrire si vous souhaitez participer à la conversation.

Haut de page

Merci de ne pas reproduire le contenu de ce site sans autorisation.
Contacter l'équipe - Mentions légales

Plan du site

Communauté: Accueil | Forum | Chat | Commentaires | News | Flash-news | Screen de la semaine | Sorties | Tests | Gaming-Live | Interviews | Galerie | OST | Blogs | Recherche
Apprendre: Visite guidée | RPG Maker 95 | RPG Maker 2003 | RPG Maker XP | RPG Maker VX | RPG Maker MV | Tutoriels | Guides | Making-of
Télécharger: Programmes | Scripts | Ressources | Packs de ressources | Midis | Eléments séparés | Sprites
Jeux: Au hasard | Notre sélection | Sélection des membres | Tous les jeux | Jeux complets | Le cimetière | RPG Maker 95 | RPG Maker 2000 | RPG Maker 2003 | RPG Maker XP | RPG Maker VX | RPG Maker VX Ace | RPG Maker MV | Autres | Proposer
Ressources RPG Maker 2000/2003: Chipsets | Charsets | Panoramas | Backdrops | Facesets | Battle anims | Battle charsets | Monstres | Systems | Templates
Ressources RPG Maker XP: Tilesets | Autotiles | Characters | Battlers | Window skins | Icônes | Transitions | Fogs | Templates
Ressources RPG Maker VX: Tilesets | Charsets | Facesets | Systèmes
Ressources RPG Maker MV: Tilesets | Characters | Faces | Systèmes | Title | Battlebacks | Animations | SV/Ennemis
Archives: Palmarès | L'Annuaire | Livre d'or | Le Wiki | Divers