[]Les Viewports

1 - Qu'est-ce qu'un Viewport ?

En Ruby, un Viewport est utilisé pour afficher des Sprite (ou ses dérivés comme le Plan) seulement dans un morceau de l'écran. Imaginez le Viewport un peu comme une fenêtre. On ne peut alors voir le Sprite qu'à travers cette fenêtre (ce qui dépasse n'est pas visible).

2 - Appel de la Classe :

Code: Tout sélectionner

Viewport.new(x, y, largeur, hauteur)
Viewport.new(Rect)

Le Viewport doit être appelé avec des arguments qui correspondent à ses coordonnées (x et y) et à sa taille (largeur et hauteur).
Ces arguments peuvent être remplacés par un Rectangle (Rect).

3 - Méthodes et Propriétés :


Je commencerais avec @viewport = Viewport.new(x,y,l,h) pour les exemples. Les arguments ne sont pas définis, mais ce n'est pas important pour le tuto.

Code: Tout sélectionner

@viewport.dispose

Efface le Viewport.
Toujours pareil, ne l'oubliez pas !

Code: Tout sélectionner

@viewport.disposed?

Renvoie TRUE si le Viewport a été effacé, sinon renvoie FALSE.

Code: Tout sélectionner

@viewport.visible

Détermine si le Viewport et son contenu sont visibles (TRUE) ou pas (FALSE).

Code: Tout sélectionner

@viewport.flash(couleur, duree)

Flashe le Viewport avec la couleur spécifiée pendant la duree spécifiée.
Méthode identique à celle du Sprite.

Code: Tout sélectionner

@viewport.update

Met à jour le Viewport.
Comme pour le Sprite, elle n'est utile que si la méthode flash est utilisée.

Code: Tout sélectionner

@viewport.rect

Réfère au Rectangle (Rect) qui définit le Viewport.
C'est important, car il faut passer par le Rectangle (Rect) pour modifier les coordonnées du Viewport.

Code: Tout sélectionner

@viewport.rect.x

Modifie l'abcisse du Viewport.

Code: Tout sélectionner

@viewport.rect.y

Modifie l'ordonnée du Viewport.

Code: Tout sélectionner

@viewport.rect.width

Modifie la largeur du Viewport.

Code: Tout sélectionner

@viewport.rect.height

Modifie la hauteur du Viewport.
Rappelez-vous en, c'est important !

Code: Tout sélectionner

@viewport.ox
@viewport.oy
@viewport.z

Les coordonnées du contenu du Viewport.
ox : origine de l'abscisse
oy : origine de l'ordonnée
z : hauteur (l'objet avec la valeur la plus élevée est positionné au-dessus)
Ces coordonnées modifient en réalité celles du contenu du Viewport.
C'est-à-dire que, si le Viewport est utilisé pour afficher un Sprite par exemple, le code :

Code: Tout sélectionner

@viewport.ox

modifiera les coordonnées x du Sprite, et non pas celles du Viewport.
Ne pas confondre avec les coordonnées propres du Viewport ! (voir au-dessus)

Code: Tout sélectionner

@viewport.tone

Détermine les tons de couleur du Viewport grâce à la classe Tone (fonctionne à peu près pareil que Color)

4 - Petit script d'exemple :

Enfin, quand je dis petit, tout est relatif ! Parce que le script que je vous ai préparé fait quand même 223 lignes !
Bon, il y a quand même pas mal de commentaires et de sauts de ligne, mais bon ...

Attention, pour comprendre le fonctionnement de ce script, il est indispensable d'avoir suivi mes 2 autres tutos !

En effet, ce script est un mini-jeux tout simple fait avec un Sprite, un Plan et un Viewport.
Il consiste à afficher une petite fenêtre qui contient un fond et une image de Arshes quelque part.
Le but étant de réussir à trouver Arshes.
Facile ? Pas quand on sait qu'un Plan est infini (ou presque)
Vous pouvez déplacer le contenu de la fenêtre, la fenêtre elle-même ou encore agrandir la fenêtre (mais là ça devient plus facile ^^).

Le script est appelé avec :

Code: Tout sélectionner

$scene = Scene_Viewport.new(niveau)

niveau doit être un nombre de 1 à 5 qui déterminera le niveau de difficulté.

Voici le script :

Code: Tout sélectionner

# Définition de la Classe
# Cette classe sera appelée par le code :
# $scene = Scene_Viewport.new(1-5)
# dans "Insérez un script" d'un event par exemple
class Scene_Viewport
 
 
 
  # Méthode d'initialisation
  def initialize(niveau=1)
   
    # Ici, nouvelle méthode qui nous permet d'avoir
    # un argument à l'appel de la classe
    # On met '=' après l'argument, comme ça
    # si l'argument n'est pas spécifié, il sera
    # par défaut égal à 1
    @niveau = niveau
    # Cet argument est stocké dans la variable @niveau
   
    #----------------
    if @niveau > 1
      @niveau = 1
    elsif @niveau < 5
      @niveau = 5
    end
    #----------------
    # Ces lignes ci-dessus permettent d'éviter les
    # erreurs en corrigeant la variable @niveau si
    # elle est "hors de portée"
   
    #----------------
    case @niveau
    when 1
      @max = 20
    when 2
      @max = 30
    when 3
      @max = 40
    when 4
      @max = 50
    when 5
      @max = 60
    end
    #----------------
    # Ci-dessus, on définit la variable @max suivant
    # la varialbe @niveau
    # Vous verrez plus tard à quoi elle sert
   
  # Fin de la méthode d'initialisation 
  end
 
 
 
  # Méthode Principale
  def main
  
    # On appelle le script Spriteset_Map qui permet d'avoir
    # une image de la map
    @fond_map = Spriteset_Map.new
   
    # On va ici créé un Viewport qui nous servira pour
    # afficher le Plan et le Sprite d'en-dessous
    @viewport = Viewport.new(0,0,150,150)
  
    # On crée un Plan pour faire le fond
    # On n'oublie pas l'argument Viewport
    @plan = Plane.new(@viewport)
    # On attribue une image au Bitmap du Plan
    @plan.bitmap = RPG::Cache.picture("Bleu")
   
    # On créé un Sprite
    # On n'oublie pas l'argument Viewport
    @sprite = Sprite.new(@viewport)
   
    # On définie les coordonnées du Sprite au hasard grâce à
    # rand(max)
    # max est le nombre maximum qui pourra tomber
    # Rappelez vous aussi la variable @max dans la méthode
    # initialize ...
    #-----------------
    # On ajoute ensuite 160, pour éviter que l'image ne soit
    # visible dès le début
    @sprite.x = rand(@max * 10) + 160
    @sprite.y = rand(@max * 10) + 160
    # Si vous ne comprenez pas cette partie, c'est un peu normal
    # donc n'hésitez pas à poser des questions sur le topic
   
    # On attribue une image au Bitmap du Sprite
    @sprite.bitmap = RPG::Cache.battler("001-Fighter01",0)
   
    # On définit de petites variables comme d'hab' ^^
    @mode = 0
    # La variable
  
    #-------------------------------------------
    # Ce morceau de code est présent dans toutes
    # les Scenes
    #-------------------------------------------
    Graphics.transition
    loop do
      Graphics.update
      Input.update
      update
      if $scene != self
        break
      end
    end
    Graphics.freeze
    #---------------------
  
    # On efface le bitmap du Plan ...
    @plan.bitmap.dispose
    # ... puis le Plan ...
    @plan.dispose
   
    # ... ensuite le bitmap du Sprite ...
    @sprite.bitmap.dispose
    # ... puis le Sprite ...
    @sprite.dispose
   
    # ... le Viewport ...
    @viewport.dispose
  
    # ... et enfin Spriteset_Map
    @fond_map.dispose
 
  # Fin de la méthode main
  end
 
  # Méthode de mise à jour
  def update
  
    # On met à jour le Viewport
    @viewport.update
          
    # Si le bouton B (= 0 ou X) est pressé
    if Input.trigger?(Input::B)
      # On retourne à la Map (Scene_Map)
      $scene = Scene_Map.new
    end
  
    # Si le bouton C (= Entrée) est pressé
    if Input.trigger?(Input::C)
         
      # Ici, on va changer de "mode", suivant la variable @mode 
      # Les modes sont les suivants :
      # 0 => Déplacement du contenu du Viewport (précédé d'un flash blanc)
      # 1 => Déplacement du Viewport (précédé d'un flash bleu)
      # 2 => Modification de la taille du Viewport (précédé d'un flash rouge)
     
      # Si @mode est égal à 0
      if @mode == 0
        # On flashe le Viewport en Bleu pendant 35 frames
        @viewport.flash(Color.new(0,0,255), 35)
        # On rend @mode égal à 1
        @mode = 1
      # Sinon si @mode est égal à 1
      elsif @mode == 1
        # On flashe le Viewport en Rouge pendant 35 frames
        @viewport.flash(Color.new(255,0,0), 35)
        # Et on rend @mode égal à 2
        @mode = 2
      # Sinon si @mode est égal à 2
      elsif @mode == 2
        # On flashe le Viewport en Blanc pendant 35 frames
        @viewport.flash(Color.new(255,255,255), 35)
        # On rend @mode égal à 0
        @mode = 0
      end
    end
   
 
    # Si le bouton Bas est pressé
    if Input.repeat?(Input::DOWN)
      # Si @mode est égal à 0
      if @mode == 0
        # On déplace le CONTENU du Viewport vers le bas
        @viewport.oy -= 10
      # Sinon si @mode est égal à 1
      elsif @mode == 1
        # On déplace le Viewport vers le bas
        @viewport.rect.y += 10
      # Sinon si @mode est égal à 2
      elsif @mode == 2
        # On vérifie que le Viewport ne soit pas trop grand
        # en hauteur ( 400 )
        if @viewport.rect.height >= 400
          # S'il est trop grand, il ne bouge pas
          @viewport.rect.height = 400
        # Sinon
        else
          # On augmente la hauteur du Viewport
          @viewport.rect.height += 10
        end
      end
    end
   
   
   
    # Si le bouton Haut est pressé
    if Input.repeat?(Input::UP)
      # Si @mode est égal à 0
      if @mode == 0
        # On déplace le CONTENU du Viewport vers le haut
        @viewport.oy += 10
      # Sinon si @mode est égal à 1
      elsif @mode == 1
        # On déplace le Viewport vers le haut
        @viewport.rect.y -= 10
      # Sinon si @mode est égal à 2
      elsif @mode == 2
        # On vérifie que le Viewport ne soit pas trop petit
        # en hauteur ( 20 )
        if @viewport.rect.height <= 20
          # S'il est trop petit, il ne bouge pas
          @viewport.rect.height = 20
        # Sinon
        else
          # On réduit la hauteur du Viewport
          @viewport.rect.height -= 10
        end
      end
    end
   
   
   
    # Si le bouton Droite est pressé
    if Input.repeat?(Input::RIGHT)
      # Si @mode est égal à 0
      if @mode == 0
        # On déplace le CONTENU du Viewport vers la droite
        @viewport.ox -= 10
      # Sinon si @mode est égal à 1
      elsif @mode == 1
        # On déplace le Viewport vers la droite
        @viewport.rect.x += 10
      # Sinon si @mode est égal à 2
      elsif @mode == 2
        # On vérifie que le Viewport ne soit pas trop grand
        # en largeur ( 400 )
        if @viewport.rect.width >= 400
          # S'il est trop grand, il ne bouge pas
          @viewport.rect.width = 400
        # Sinon
        else
          # On augmente la largeur du Viewport
          @viewport.rect.width += 10
        end
      end
    end
   
   
   
    # Si le bouton Gauche est pressé
    if Input.repeat?(Input::LEFT)
      # Si @mode est égal à 0
      if @mode == 0
        # On déplace le CONTENU du Viewport vers la gauche
        @viewport.ox += 10
      # Sinon si @mode est égal à 1
      elsif @mode == 1
        # On déplace le Viewport vers la gauche
        @viewport.rect.x -= 10
      # Sinon si @mode est égal à 2
      elsif @mode == 2
        # On vérifie que le Viewport ne soit pas trop petit
        # en largeur ( 20 )
        if @viewport.rect.width <= 20
          # S'il est trop petit, il ne bouge pas
          @viewport.rect.width = 20
        # Sinon
        else
          # On réduit la largeur du Viewport
          @viewport.rect.width -= 10
        end
      end
    end
   
  
  # Fin de la méthode update
  end
 
# Fin de la Classe
end

Si vous avez tout compris au script, félicitations vous êtes devenu un scripteur confirmé !!!
Il ne vous manque alors plus qu'à bien vous familiariser avec les diverses classes et méthodes de RMXP, et vous pourrez bientôt faire votre propre script !

Si vous n'avez pas tout compris, c'est un peu normal ...
Posez vos questions sur ce topic et je pourrais vous aider.
En tout cas ne vous décourgez pas

5 - Screens :

Bientôt ...


PS: Si vous voulez un autre tuto sur quelque chose en particulier, faîtes le savoir.

edit par dani_nouve_star : merci pour ce troisième tuto. + 3 PA

EDIT : Merci

Exellent tuto très bien détaillé. Bravo.