Fenêtre de sélection personnalisée - Partie 2

But : Nous pourrons mettre des images dans cette fenêtre



I) Structure de la classe

Nous allons avoir 3 méthodes :
- initialize
- refresh
- update_cursor_rect : permet de définir la taille et la position du curseur

Code Ruby

class Window_SelectPerso < Window_Selectable
  def initialize
   
  end
 
  def refresh
   
  end
 
  def update_cursor_rect
   
  end
end

II) La méthode "initialize"

Dans cette méthode, on va initialiser la fenêtre mais aussi mettre un tableau avec les commandes. Comme d'habitude, certes, mais cette fois ci, nous allons faire un Hash plutôt qu'un tableau avec le nom de la commande comme clé et le nom de l'image comme valeur :

Code Ruby

def initialize
    super(0, 0, 260, 140)
    self.contents = Bitmap.new(width - 32, height - 32)
    self.contents.font.name = $fontface
    self.contents.font.size = $fontsize
    @tab_icon = {
    "Une potion" => "021-Potion01",
    "Une autre potion" => "022-Potion02",
    "Encore une potion" => "023-Potion03"
    }
    refresh
    self.active = true
    self.index = 0
  end

Le Hash "@tab_icon" est une variable d'instance car elle sera évidemment utilisée dans "Refresh". Autre petite précision, nous avons rendu active la fenêtre pour que le joueur puisse déplacer le curseur et mis l'index sur 0.

Note : Par soucis de simplification la taille de la fenêtre a était définie. On ne calculera pas la taille selon le nombre de commandes.

III) La méthode "refresh"

Ici, on aura l'affichage des images et textes. C'est sûrement la partie la plus délicate à comprendre dans ce tutorial, mais on va faire simple :)

Code Ruby

def refresh
    self.contents.clear
    @item_max = @tab_icon.size
 

Comment allons nous faire pour mettre des images dans cette fenêtres ? Un Sprite ?

On pourrait faire un Sprite ... mais celui ci serait en dehors de la fenêtre et non dans la fenêtre. Le principe est le suivant : nous allons faire une sorte de "couper-coller". On coupe l'image (ou une partie de l'image) et colle dans cette fenêtre dans les positions voulues.

Tout d'abord, nous allons faire une boucle qui va parcourir notre Hash créé précédemment :

Code Ruby

i = 0
@tab_icon.each do |key, value|
x = 64
y = i * 32

Notre variable i permettra de positionner le texte et l'image sur l'ordonnée Y. Puisque i sera incrémentée de 1 à chaque fin de tour de boucle, cela permettra d'augmenter Y de 32 pixels :



Enfin, voici le principe pour les images vu ci-dessus :

Code Ruby

bitmap = RPG::Cache.icon(value)
# bitmap = Cache.picture(value) - RGSS 2. Sous VX, votre icône doit être dans le dossier "Pictures"

Pas de surprise ... on créé un Bitmap où celui ci contient une icône. "value" est bien entendu la valeur dans le Hash donc le nom de l'image.
Nous allons créer un "rectangle" du Bitmap :

Code Ruby

src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)

A quoi ça sert ?
En fait, c'est comme si dans Paint ou bien dans votre logiciel d'image préférée, vous ouvrez une image et vous voulez la couper pour ensuite la coller ailleurs. Qu'allez vous faire ? Je pense qu'avec la souris vous allez sélectionnez avec un outils de sélection une partie de l'image ou bien toute l'image et ensuite vous allez la couper. Ici, c'est la même chose. Faire un rectange permet de savoir quelle partie de l'image on va couper.

On doit définir la taille du rectangle, ici on va prendre toute l'image donc on part des positions X = 0 et Y = 0 de l'image et la taille du rectangle sera la taille du Bitmap : bitmap.width pour la largeur et bitmap.height pour la hauteur



Comme vous voyez sur les images ci-dessus, Le rectangle dans Ruby et celui qui est en rouge sur l'image de gauche. L'image de droite est la même chose mais sûrement d'une façon plus explicite :)

On a sélectionné mais maintenant, il faut le coller dans la fenêtre :

Code Ruby

self.contents.blt(5, y, bitmap, src_rect)

Cela revient à dire : "Je colle (= blt) le rectangle sélectionné (= src_rect) de l'image (= bitmap) sur les positions X (= 5) et Y (= y) sur le Bitmap (= contents) de cette (= self) fenêtre."

C'est fini pour le collage d'image ^^. Passons maintenant aux textes :
Comme on l'a vu dans la Partie 1 de ce tutorial, nous allons prendre la taille du texte pour définir la longueur du texte dans "draw_text"

Code Ruby

text_size = self.contents.text_size(key).width
self.contents.draw_text(bitmap.width + 5, y, text_size, 32, key)

Vous remarquez, que pour placer sur la position X, on utilise la taille de l'image "bitmap.width". Ainsi ça va placer le texte 5 pixels à coté de l'image :)

Enfin, pour terminer cette méthode et la boucle, n'oubliez d'incrémenter la variable i :

Code Ruby

        i += 1
  end # Fin de la boucle do
end # Fin de la méthode "refresh"

IV) La méthode "update_cursor_rect"

C'est ici que nous allons définir la taille et la position du curseur. C'est surtout ici que la classe parente "Window_Selectable" nous sera utile car on surcharge cette méthode. Du coup, elle est appeler automatiquement. On n'a qu'à mettre les caractéristiques du curseur.

Vous vous rappelez de "index" dans les scènes pour savoir sur quelle commande le joueur était ? Hé bien, ici on a la même chose mais avec "@index" qu'on a déjà initialisé. C'est grâce à cette variable qu'on pourra déterminer la position du curseur.

Le curseur, lui, est un rectangle comme on la vu plus haut. Mais inutile de tout créer, il existe déjà une méthode "cursor_rect" dans la classe des fenêtres (comme pour "active" et "visible"). Voici la méthode entière :

Code Ruby

def update_cursor_rect
    if @index < 0
      self.cursor_rect.empty
    else
      self.cursor_rect.set(0, @index * 32, self.width - 32, 32)
    end
  end
end # Fin de la classe

Si @index est négatif, on enlève le curseur (le joueur ne le voit plus) avec "empty" sinon, on définit la taille du rectangle et donc du curseur avec "set" :

Code

self.cursor_rect.set(Position X, Position Y, Largeur, hauteur)

Comme pour la variable i de tout à l'heure, la position Y du curseur dépend de la valeur de @index. C'est grâce à ça que le curseur change position. Ensuite, la largeur prend la taille de la fenêtre (plus précisément du Bitmap puisqu'on enlève 32)

V) Le script en entier.

Voici donc le script en entier de notre fenêtre de sélection personnalisée :

Code Ruby

class Window_SelectPerso < Window_Selectable
  def initialize
    super(0, 0, 260, 140)
    self.contents = Bitmap.new(width - 32, height - 32)
    self.contents.font.name = $fontface
    self.contents.font.size = $fontsize
    # Nos commandes avec les images respectives
    @tab_icon = {
    "Une potion" => "021-Potion01",
    "Une autre potion" => "022-Potion02",
    "Encore une potion" => "023-Potion03"
    }
    refresh
    # On rend la fenêtre active et Index à 0
    self.active = true
    self.index = 0
  end
 
  def refresh
    self.contents.clear
    @item_max = @tab_icon.size
    i = 0
    # On parcours le Hash
    @tab_icon.each do |key, value|
      x = 64
      # Augmentation de la position Y selon la valeur de i
      y = i * 32
      # On prend l'image
      bitmap = RPG::Cache.icon(value)
     # bitmap = Cache.picture(value) - RGSS 2. Sous VX, votre icône doit être dans le dossier "Pictures"
      # on sélectionne la partie de l'image : ici, c'est toute l'image
      src_rect = Rect.new(0, 0, bitmap.width, bitmap.height)
      # On fait un transfert : couper-coller
       self.contents.blt(5, y, bitmap, src_rect)
       # Taille du texte
       text_size = self.contents.text_size(key).width
       # Affichage du texte
       self.contents.draw_text(bitmap.width + 5, y, text_size, 32, key)
       # Incrémentation de i
       i += 1
    end
  end
 
  def update_cursor_rect
    # Si l'index est négatif : pas de curseur
    if @index < 0
      self.cursor_rect.empty
    else
      # Position Y du curseur selon l'index et taille du curseur
      self.cursor_rect.set(0, @index * 32, self.width - 32, 32)
    end
  end
end