Jouons avec les Sprites.

But : Ce tutorial va vous apprendre à animer et bouger le Sprite ainsi que la gestion de la collision et l'interaction avec le joueur.



Sur l'image ci-dessus, vous voyez ce qu'on nous allons faire. En rouge, c'est le mouvement du Sprite et en vert, la gestion des évènements sur le Sprite.

Nous irons pas plus loin pour le moment. Nous mettrons pas d'autres étoiles au hasard sur la carte ni de scores ni de tirs ni d'ennemi ... bref, nous verrons seulement les bases pour savoir manipuler les Sprites.

Nous aurons besoin de 3 classes :

- Sprite_Star : permettra de faire le déplacement et l'animation du Sprite "étoile"
- Sprite_Starfighter : déplacement du Sprite "vaisseau"
- Scene_StarWars : La scène où il y aura le tout



I) La classe "Sprite_Star"

Pour cette classe, nous allons avoir 3 méthodes :
- initialize
- update : pour l'animation
- move : pour le déplacement.

Code Ruby

class Sprite_Star < Sprite  
  def initialize
 
  end
 
  def update

  end
 
  def move

  end  
 end

a) La méthode "initialize"

Le principe de l'animation sera simple :



Nous allons prendre un morceau de l'image, ici le carré rouge, qui sera le départ de l'animation. Ensuite, nous allons faire une variable qui va parcourir l'image. On va l'initialiser à 0 (qui est la position X du rectangle du carré rouge ci-dessus). Enfin, nous allons faire une variable pour le nombre de frame.

Code Ruby

def initialize
    super
   self.bitmap = RPG::Cache.picture("Star")
   #  self.bitmap = Cache.picture("Star") - RGSS 2
   self.x = 320
   self.y = 100
   self.src_rect.set(0, 0, 25, 25)
   @i = 0
   @nb_Frame = 0
end

Comme on l'a vu précédemment, "src_rect" est un rectangle (Rect.new) et "set" permet de définir ses dimensions. Ainsi on prend le carré rouge sur l'image ci-dessus. La variable @i sera la variable qui parcours l'image et @nb_debut_Frame le nombe de frame pour le changement d'image.

b) la méthode "update" : Mise à jour de l'animation

Tout les 5 Frames, on déplacera la position X du rectangle de 25px. On se retrouvera sur le morceau de l'image N°1 de l'image ci-dessus.

Code Ruby

def update
    super
    # Incrémentaion de nombre de Frame
    @nb_Frame += 1
    # Quand les frames vaut 5
  if @nb_Frame > 5
     # On remet le nombre de Frame à 0
     @nb_Frame = 0
     # Affichage de la prochaine séquence d'animation
     @i += 25  
     @i = 0 if @i >= 250
    self.src_rect.set(@i, 0, 25, 25)
end

Quand les 5 frames sont dépassés, on remet à 0 le compteur de frames et on affiche la prochaine séquence d'animation. On donne à la variable @i, 25 pixels en plus pour le rectangle (src_rect).

A quoi sert cette ligne ? :

Code Ruby

@i = 0 if @i >= 250

Si @i vaut plus de 250 pixels (donc on sort de l'image), on la remet à 0 pour refaire l'animation.

c) La méthode "move" pour le déplacement.

La méthode est la suivante :

Code Ruby

def move
   # Déplacement de 10px vers le bas
    self.y += 10
        # Suppression du Sprite quand on sort de l'écran
    self.dispose if self.y > 480
  end

Continuellement, on change la valeur Y du Sprite, ce qui permet de le faire déplacer vers le bas. Ensuite, si sa position Y est supérieur à 480 donc en dehors de l'écran, on la supprime avec "dispose".

Note : Tout les actions (déplacement ...etc.) seront réellement faites dans la scène.

II) La classe "Sprite_Starfighter"

C'est la classe la plus simple. D'ailleurs, un classe pourrait être inutile mais si plus tard, vous évoluez ce système, il est bien de faire une classe à part pour le vaisseau.

Nous aurons besoin des méthodes :
- initialize
- move_right : pour le déplacement vers la droite
- move_left : pour le déplacement vers la gauche

Voici la classe complète :

Code Ruby

class Sprite_Starfighter < Sprite
   def initialize
    super
   self.bitmap = RPG::Cache.picture("Starfighter")
   #  self.bitmap = Cache.picture("Starfighter") - RGSS 2
   self.x = 320
   self.y = 400
 end
  def move_right
    self.x += 5
  end
 
  def move_left
    self.x -= 5
  end
end

Rien de nouveau. Pour les déplacements, on change la valeur X du Sprite, comme d'habitude :)

III) La classe "Scene_StarWars"

Nous aurons 3 méthodes :
- main
- update
- collision : gestion de la collision entre l'étoile et le vaisseau

a) La méthode "main".

Voici la méthode complète. Il n'y a pas de nouveau :

Code Ruby

class Scene_StarWars
  def main  
    # Sprite "Fond"
    @sprite =  Sprite.new
    @sprite.bitmap = RPG::Cache.picture("Space")
    #  self.bitmap = Cache.picture("Space") - RGSS 2
    # Sprite "Fond" bis
    @sprite2 =  Sprite.new
    @sprite2.bitmap = RPG::Cache.picture("Space")
    #  self.bitmap = Cache.picture("Space") - RGSS 2
    @sprite2.y = -480
    # Sprite "Etoile"
    @sprite_star = Sprite_Star.new
    # Sprite "Vaisseau"
    @sprite_starfighter = Sprite_Starfighter.new
    # Mise à jour habituelle
    Graphics.transition
    loop do
      Graphics.update
      Input.update
      update
      if $scene != self
        break
      end
     end
     Graphics.freeze
     @sprite.dispose
     @sprite.bitmap.dispose
     @sprite2.dispose
     @sprite2.bitmap.dispose
     @sprite_star.dispose
     @sprite_starfighter.dispose
  end

Vous avez remarquez que nous créons deux fonds. Le premier sera afficher normalement alors que le deuxième sera affiché au dessus de l'écran (que sera bien entendu invisible pour le joueur) :



Le principe est simple, les deux fonds se déplaceront vers le bas. Quand le premier fond sera en dehors de l'écran, il prendra la place du deuxième fond et le deuxième fond sera affiché à l'écran ...etc. tout cela en boucle (Voir l'image ci-dessus et suivre les flèches en partant de celle du haut). Le joueur ne verra que du feu !

b) La méthode "update"

La méthode "update" permettra de faire la mise jour du jeu donc faire le déplacement, animations ...etc. sur la scène. On va faire en trois parties : déplacement du fond, gestion de l'étoile et du vaisseau.

- Pour le fond, nous allons faire ce qu'on a dit ci-dessus :

Code Ruby

def update
  @sprite.y += 5
  @sprite2.y += 5
  @sprite.y = -480 if @sprite.y > 480
  @sprite2.y = -480 if @sprite2.y > 480

On déplace de 5px vers le bas les deux fonds simultanément. Quand leurs positions ont dépassé le bas de l'écran (donc que Y > 480), on remet le fond à -480px (en dehors de l'écran comme sur l'image montré dans la fin du paragraphe a))

- Pour le Sprite "Etoile", il suffit d'appeler les méthodes "update" et "move" de la classe "Sprite_Star" qu'on a créé pour l'animation et le mouvement. Cependant, attention ! Rappelez vous ... quand le Sprite "Etoile" quitte l'écran, il est supprimé. Si vous appellez toujours les méthodes "update" et "move" de la classe "Sprite_Star" alors que le Sprite est supprimé, le script plantera. Il faut donc s'assurer que le Sprite "Etoile" n'a pas été supprimé :

Code Ruby

# Si le Sprite "Etoile" n'a pas été supprimé
if not @sprite_star.disposed?
 # On gère la collision (sera vu après)
 collision
 # Animation du Sprite
 @sprite_star.update
 # Déplacement du Sprite
 @sprite_star.move
end

Voici cette fameuse méthode pour tester si le Sprite a été supprimé ou non : disposed? (voir la documentation).
Ensuite, on gère l'animation et le déplacement du Sprite. la méthode "collision" permet de gérer la collision entre le Sprite "Etoile" et Sprite "Vaisseau" qu'on créera après.

- Pour terminer cette méthode, nous allons faire la gestion du mouvement du Sprite "Vaisseau" qui sera contrôlé par le joueur :

Code Ruby

# Si la touche "gauche" est pressé
if Input.press?(Input::LEFT)
  @sprite_starfighter.move_left
# Si la touche "droite" est pressé
elsif Input.press?(Input::RIGHT)
  @sprite_starfighter.move_right
end

Il n'y a rien de surprenant sauf, remarquez, qu'on utilise "Input.press?" au lieu de "Input.trigger?". La différence est que "Input.press?" détermine si le bouton est continuellement pressé.

c) La méthode "collision".

Cette méthode donnera seulement le principe de la collision. On ne cherchera pas à la développer par souci de simplicité. Voici seulement le principe :

Pour savoir si il y a une collision entre deux Sprites, il faut vérifier leurs positions. Si ces derniers sont égaux, cela veut dire que le Sprite "Etoile" et sur le Sprite "Vaisseau" et donc une collision a eu lieu :

Code Ruby

def collision
    if @sprite_star.x == @sprite_starfighter.x and @sprite_star.y == @sprite_starfighter.y
      print('BOOM')
    end
  end # Fin de cette méthode
end # Fin de la classe Scene_StarWars