Partie 4 - Comprendre une fenêtre ( Window_Selectable )

Partie 4 - Comprendre une fenêtre ( Window_Selectable )
Nous allons prendre la fenêtre-type : Window_Command ( fenêtre servant à afficher pas mal de commandes dont le Scene_Title ).

Code:

#==============================================================================
# ■ Window_Command
#------------------------------------------------------------------------------
# 　一般的なコマンド選択を行うウィンドウです。
#==============================================================================

class Window_Command < Window_Selectable
  #--------------------------------------------------------------------------
  # ● オブジェクト初期化
  #    width    : ウィンドウの幅
  #    commands : コマンド文字列の配列
  #--------------------------------------------------------------------------
  def initialize(width, commands)
    # コマンドの個数からウィンドウの高さを算出
    super(0, 0, width, commands.size * 32 + 32)
    @item_max = commands.size
    @commands = commands
    self.contents = Bitmap.new(width - 32, @item_max * 32)
    self.contents.font.name = $fontface
    self.contents.font.size = $fontsize
    refresh
    self.index = 0
  end
  #--------------------------------------------------------------------------
  # ● リフレッシュ
  #--------------------------------------------------------------------------
  def refresh
    self.contents.clear
    for i in 0...@item_max
      draw_item(i, normal_color)
    end
  end
  #--------------------------------------------------------------------------
  # ● 項目の描画
  #    index : 項目番号
  #    color : 文字色
  #--------------------------------------------------------------------------
  def draw_item(index, color)
    self.contents.font.color = color
    rect = Rect.new(4, 32 * index, self.contents.width - 8, 32)
    self.contents.fill_rect(rect, Color.new(0, 0, 0, 0))
    self.contents.draw_text(rect, @commands[index])
  end
  #--------------------------------------------------------------------------
  # ● 項目の無効化
  #    index : 項目番号
  #--------------------------------------------------------------------------
  def disable_item(index)
    draw_item(index, disabled_color)
  end
end

Nous allons maintenant analyser ce script.
Astuce : tout ce qui suit le caractère # et qui est en vert n'est pas pris en compte par le script, donc abusez-en pour mettre des commentaires, tester des choses...
Je vous conseille de passer d'abord lire la Partie 1, car je ne répèterai pas ici les bases les plus élémentaires.

La classe

Code:

class Window_Command < Window_Selectable

Le nom de la classe est Window_Command .
Encore une fois ( voir Partie 1 ), l'essentiel du code est dans Window_Selectable.

L'initialisation

Code:

  def initialize(width, commands)
    # コマンドの個数からウィンドウの高さを算出
    super(0, 0, width, commands.size * 32 + 32)
    @item_max = commands.size
    @commands = commands
    self.contents = Bitmap.new(width - 32, @item_max * 32)
    self.contents.font.name = $fontface
    self.contents.font.size = $fontsize
    refresh
    self.index = 0
  end

Ici, on définit ce qui est nécessaire pour la suite du fonctionnement de la fenêtre.

def initialize(width, commands)
Méthode initialize.
Vous avez entre parenthèses la largeur et les commandes.
Pour appeler cette fenêtre, ces 2 données sont importantes.
On appelle cela des arguments.
-width est un nombre ( largeur en pixel )
-commands est un tableau : ["commande1", "commande2"]
( Entre guillemets, on a les textes des commandes ).
super(0, 0, width, commands.size * 32 + 32)
Les fenêtres les plus basiques fonctionnent comme suit : super(x, y, w, h)
x = Coordonnée horizontale de la fenêtre
y = Coordonnée verticale de la fenêtre
w = Largeur
h = Hauteur
Comme la taille de la fenêtre dépend du nombre de commandes
( commands.size ) , on multiplie ce nombre par 32 ( place que prend chaque commande ) et on ajoute 32 ( le haut et le bas de la liste ).
D'où h = commands.size * 32 + 32
@item_max = commands.size
Définition de la variable @item_max, qui détermine le maximum de commandes.
Cette variable est égale au nombre de commandes.
@commands = commands
Définition de la variable @commands.
C'est un tableau qui reprend celui de l'argument commands.
self.contents = Bitmap.new(width - 32, @item_max * 32)
Création du bitmap. C'est l'espace où apparaîtra le contenu de la fenêtre.
Ici, c'est un rectangle intérieur à celui de la fenêtre avec une réduction de 16 pixels de chaque côté.
Largeur de la fenêtre = 16 + Largeur de bitmap + 16
Hauteur de la fenêtre = 16 + Hauteur de bitmap ( nombre de commandes * 32 ) + 16
self.contents.font.name = $fontface
self.contents.font.size = $fontsize
$fontface et $fontsize sont les variables globales qui définsissent respectivement la police d'écriture du jeu et sa taille.
Vous pouvez les modifier dans Main.
refresh
Appelle la méthode refresh.
self.index = 0
Place le curseur sur la première commande.
( Attention, dans un tableau, la 1ère commande équivaut à 0.
On n'a pas : 1, 2, 3... mais 0, 1, 2... )
end
Clôt la méthode initialize.

Le rafraîchissement
Je vous conseille d'ailleurs d'en reprendre un petit avant de continuer.

Code:

def refresh
    self.contents.clear
    for i in 0...@item_max
      draw_item(i, normal_color)
    end
  end

Il s'agit de la mise à jour graphique de la fenêtre.
Dans une scène, on l'appelle avec par exemple @command_window.refresh.

def refresh
Méthode refresh.
self.contents.clear
Supprime le contenu de la fenêtre avant d'effectuer la suite de la mise à jour.
Cela sert à éviter notamment des superpositions d'anciennes et nouvelles valeurs.
for i in 0...@item_max
draw_item(i, normal_color)
end
Ceci est une boucle.
Traduction littérale :
"Pour i compris entre 0 et @item_max ( nombre de commandes ),
appeler la méthode draw_item ( qui affiche les commandes, voir plus bas ) avec pour arguments i et la couleur normale".
Pour comprendre, il faut lire la suite.
end
Clôt la méthode refresh.

L'affichage des objets ( commandes )

Code:

  def draw_item(index, color)
    self.contents.font.color = color
    rect = Rect.new(4, 32 * index, self.contents.width - 8, 32)
    self.contents.fill_rect(rect, Color.new(0, 0, 0, 0))
    self.contents.draw_text(rect, @commands[index])
  end

Il s'agit ici d'afficher les commandes. Cette méthode est appelée plus haut dans le refresh.

def draw_item(index, color)
Méthode draw_item.
Encore des arguments :
-index : place de la commande dans la liste des commandes.
-color : la couleur qui va servir pour le nom de la commande.
self.contents.font.color = color
Définit la couleur du texte. Ce sera celle contenue dans color, c'est-à-dire pour le moment : normal_color ( voir refresh ).
rect = Rect.new(4, 32 * index, self.contents.width - 8, 32)
C'est parti pour le plus dur...
On utilise ici un rectangle, définit lui aussi par x, y, w et h.
Ce rectangle est la zone où sera affichée la commande.
x = 4 : on évite que le curseur cache la commande.
y = 32 * index : suivant sa place, la commande a une coordonnée verticale propre.
-1ère commande ( index = 0 ) => y = 0 * 32 = 0
-2ème commande ( index = 1 ) => y = 1 * 32 = 32
-3ème commande ( index = 2 ) => y = 2 * 32 = 64
w = self.contents.width - 8 : On laisse 4 pixels de chaque côté pour le curseur.
h = 32 : C'est ainsi. N'oubliez pas que chaque commande est placée à 32 pixels en-dessous de la précédente.
self.contents.fill_rect(rect, Color.new(0, 0, 0, 0))
On remplit le rectangle d'une couleur qui n'en est pas une.
Si vous avez lu les autres tutoriaux, Color.new(0, 0, 0, 0) n'affichera rien car le dernier chiffre est l'opacité de la couleur.
Cette ligne sert en fait à effacer ce qui se trouve à l'endroit de la commande.
A supprimer si vous avez des folies de design ou si vous affichez quelque chose ici.
self.contents.draw_text(rect, @commands[index])
Vous assistez ici à la 2ème façon d'utiliser draw_text.
La première que nous avons pu voir avant affichait un texte.
Ici, c'est pareil mais on se sert non pas de coordonnées propres mais de celles du rectangle rect.
self.contents.draw_text(rectangle, texte)
rectangle = rect
texte = @commands[index] : l'élément du tableau @commands se trouvant à l'emplacement égal à l'index.
Si @commands = ["un", "deux"]
@commands[0] = "un"
@commands[1] = "deux"
Ici, c'est d'index qu'on se sert.
Pour mieux comprendre, il faut avoir en tête la boucle du refresh.
index = i
i est égal aux entiers entre 0 et @item_max.
Si @item_max = 3, on aura 4 commandes d'affichées. en suivant la méthode draw_item.
end
Clôt la méthode draw_item.

L'objet ( commande ) désactivé

Code:

  def disable_item(index)
    draw_item(index, disabled_color)
  end

Cette méthode est là pour être utilisée dans une Scene.
Si par exemple, la fenêtre est définie dans @command_window, en mettant @command_window.disable(4), vous désactivez la 5ème commande.
C'est notamment utilisé pour activer et désactiver la Sauvegarde dans le menu.

def disable_item(index)
Voir plus 5 lignes plus haut pour l'utilisation dans une Scene.
draw_item(index, disabled_color)
Appelle la méthode draw_item, mais avec la couleur de désactivation ( gris par défaut ).
end
Clôt la méthode disable_item.

La clôture

Code:

end

Clôt la classe Window_Command ainsi que ce tutorial.