Nous arrivons à la partie qui va rendre utiles les deux premiers tutoriels sur le Scripting RPG Maker XP. Dans ce tutoriel, je vais vous apprendre à utiliser les classes d'affichage graphique qui vous permettront de créer vos propres interfaces.
En image cela donne ça :
Le cadre violet est la fenêtre de jeu, le rectangle bleu est notre Viewport, le rectangle vert est un sprite affiché entièrement dans le viewport car il ne déborde pas, le rectangle rouge est le sprite qui sera partiellement affiché car il déborde : tout ce qui est foncé dans le sprite rouge ne sera pas visible.
J'ai placé un Sprite dans un Viewport. En pointillé, c'est son src_rect d'origine.
Les vecteurs sont les coordonnées respectives du Sprite en fonction de la couleur : x et y se font par rapport à l'endroit dans lequel est affiché le Sprite, ox et oy indiquent le pixel d'origine du src_rect (non zoomé) ; ce pixel sera dessiné à la coordonnée x et y du Sprite et tous les autres pixels visibles dans le src_rect seront dessinés en fonction de ce pixel d'origine. Après, les zooms et rotations sont appliqués toujours par rapport à ce pixel d'origine.
Comme vous pouvez le constater, le zoom x2 a fait sortir le Sprite de tous les côtés du src_rect, c'est parce que nous avons placé l'origine à peu près au centre du src_rect. Si l'origine avait été 0,0 le Sprite n'aurait débordé qu'à droite et en bas.
-> Retour au Sommaire
Les Planes s'initialisent pareil que les Sprites mais perdent quelques méthodes par rapport à ces derniers. Il n'y a plus de rotation, plus de bush_depth, plus de coordonnées x et y, plus de src_rect. Le but de cette classe est de faire un background avec une petite image et de le déplacer si besoin en utilisant les méthodes ox et oy.
Je vous liste les méthodes disponibles, elles ont quasiment les mêmes propriétés que celles de la classe Sprite alors regardez dans la classe Sprite pour la description.
Nous avons toutes les informations nécessaires pour créer une interface en image, ce sera l'horloge de RSE qui permettra de régler une heure virtuelle. Je ferai ceci sur PSP DS bien qu'il y ait déjà un système d'heure, ce sera à vous d'adapter la chose à votre jeu si vous l'intégrez. Le but sera d'utiliser un Viewport avec des coordonnées exotiques, c'est pourquoi je prends PSP DS, vous pourrez adapter cela sous PSP 0.7, ça fonctionnera tout autant. Par contre, ce sera l'objet du tutoriel n°4 car ce tuto d'information est déjà assez long. Prenez le temps de digérer tout ça et de tester deux trois trucs.
Par Nuri Yuri
Sommaire :
- Viewport
- Créer un Viewport
- Attributs de la classe Viewport
- Sprite
- Créer un Sprite
- Attributs et méthodes de la classe Sprite
- Valeur des attributs par défaut
- Image récapitulative des coordonnées
- Plane
Viewport
Nous allons commencer par les Viewports. C'est quelque chose qui est souvent oublié lors de la programmation d'interfaces et pourtant c'est très utile, car cela permet principalement de définir la zone dans laquelle les Sprites seront affichés, d'appliquer des effets de manière généralisée et d'aider beaucoup pour la hiérarchie des éléments.Créer un Viewport
Créer un Viewport est une chose assez simple : il s'initialise comme un Rect et peut aussi s'initialiser avec un Rect :- Viewport.new(x, y, width, height) : x, y définissent les coordonnées à partir desquelles le contenu du Viewport sera affiché ; width et height définissent les dimensions du Viewport.
- Viewport.new(rect) : ici rect est un objet Rect qui contient les quatre informations x, y, width et height. Cela aura le même effet que la méthode présentée ci-dessus.
En image cela donne ça :
Le cadre violet est la fenêtre de jeu, le rectangle bleu est notre Viewport, le rectangle vert est un sprite affiché entièrement dans le viewport car il ne déborde pas, le rectangle rouge est le sprite qui sera partiellement affiché car il déborde : tout ce qui est foncé dans le sprite rouge ne sera pas visible.
Les attributs de la classe Viewport
La classe Viewport a des méthodes et attributs que je vais vous définir. Un truc qu'il faut savoir, c'est que ce n'est pas parce qu'un viewport s'initialise comme un Rect qu'il possède les mêmes méthodes et attributs. Pas d'attributs x, y, width et height pour la classe Viewport, mais un autre attribut qui aura le même effet.- rect : C'est cet attribut qui nous indique les informations x, y, width, height du Viewport. Concrètement c'est un Rect alors référez-vous au Tuto n°2 pour les propriétés que vous pouvez tirer de cette méthode. Modifier cet attribut modifie les propriétés du Viewport.
- visible : Cet attribut vous permet d'indiquer si le Viewport (et donc tout son contenu) sera affiché ou non. Cela prend true ou false en argument.
- z : Cet attribut est très important : il vous permet d'indiquer la supériorité du Viewport par rapport à tous les autres Viewports ou objets d'affichage qui ne sont pas contenus dans un Viewport. Plus z est élevé plus vous aurez de chances de voir le Viewport au-dessus du reste. Néanmoins, n'abusez pas, 1000 c'est bien, 10000 c'est déjà au-dessus de beaucoup de choses.
- ox : Cet attribut vous permet de déplacer le contenu du Viewport, par défaut c'est à zéro, si vous élevez cette valeur, le contenu va se déplacer vers la gauche dans le Viewport et inversement. Cet attribut ne modifie pas la position du Viewport par rapport à l'écran, seulement celle de son contenu.
- oy : La même chose que ox mais sur l'axe y, plus vous élevez cette valeur plus le contenu sera déplacé vers le haut et inversement.
- color : Cet attribut vous permet de superposer une couleur sur le viewport. C'est un peu comme si vous faisiez un fill_rect sur tout le viewport. (fill_rect est une méthode exclusive de la classe Bitmap.)
- tone : Avec cet attribut vous pouvez appliquer un ton général au contenu du Viewport. On s'en sert généralement pour faire les effets jour/nuit sur le Viewport d'affichage de la map. L'objet contenu dans cet attribut est du type " Tone ", il est défini par quatre attributs : red, green, blue, gray qui indiquent l'ajout de rouge, vert, bleu (de -255 à 255) et la saturation pour gray (de 0 à 255).
- dispose : Cette méthode vous permet de libérer le Viewport, implicitement cela devrait libérer tous les objets contenus dans le Viewport, c'est pourquoi je vous conseille d'utiliser cette méthode après avoir libéré les objets du Viewport car si c'est le Viewport qui le fait, vous ne pourrez plus accéder aux propriétés des objets qu'il contient. (Donc vous ne pourrez pas libérer certains bitmaps.)
- disposed? : Cette méthode vous permet de savoir si le Viewport est libéré ou non, cela retourne un booléen.
Sprite
Après avoir vu les Viewports, voyons les Sprites. Ce type d'objet vous permet d'afficher un bitmap à l'écran soit dans un Viewport, soit sur la fenêtre (dans tous les cas cela sera visible dans la fenêtre).Créer un Sprite
- Sprite.new(viewport) : Crée un Sprite contenu dans le viewport que vous lui indiquez.
- Sprite.new : Crée un Sprite sans Viewport, donc affiché dans la fenêtre et ayant une priorité d'affichage du même type que celle des Viewports.
Les attributs et méthodes de la classe Sprite
- x : Coordonnée x du Sprite par rapport à l'objet dans lequel il est affiché, cette coordonnée est donc relative.
- y : Coordonnée y du Sprite, c'est autant relatif que x.
- z : Priorité d'affichage, c'est la même chose que pour les Viewports sauf qu'on distingue deux cas :
- ox et oy sont les attributs qui définissent à partir de quel point le Sprite est affiché dans son src_rect. Cette fois-ci, cela ne déplace pas le contenu de la boîte de dessin du Sprite, cela déplace " le système d'axe du Sprite ". Vous pouvez considérer que ox et oy définissent la position de l'axe Z dans le src_rect car cela influe sur la rotation et le zoom du Sprite.
- zoom_x : cet attribut vous indique l'étirement de l'axe X du Sprite, cela zoome globalement le contenu en X. Cela prend des nombres flottants et vaut par défaut 1.0.
- zoom_y : fait la même chose que zoom_x mais sur y.
- angle : Pivote le Sprite par rapport à son " axe Z " dans le sens trigonométrique en degrés. La rotation n'aura pas la même tête en fonction des valeurs d'ox et d'oy.
- mirror : Indique si le Sprite est affiché comme dans un miroir. (Le sprite est inversé par rapport à son axe Y.)
- bush_depth : Indique la hauteur à partir du bas du Sprite qui sera affichée en semi-transparence.
- opacity : Indique l'opacité du contenu que le Sprite affichera, c'est un nombre entre 0 et 255. À 255 vous voyez le contenu, à 0 vous ne le verrez pas, à 128 ce sera semi-transparent.
- blend_type : Indique le mode de fusion du Sprite avec le reste, 0 est affiché normalement, 1 est affiché en addition, 2 est affiché en soustraction.
- color : C'est la couleur qui est ajoutée avec le contenu du bitmap. Cela prend en compte l'alpha du bitmap donc cela permet par exemple de faire la même chose que " Quel est ce Pokémon ? " en réglant cet attribut avec Color.new(0,0,0,255).
- tone : Fait la même chose que la propriété tone de Viewport mais ne s'applique qu'au contenu du Sprite.
- bitmap : Indique le bitmap que le Sprite affichera à l'écran.
- src_rect : Cet attribut indique le morceau du bitmap que le Sprite affichera. (C'est un peu comme le src_rect de la méthode blt des Bitmaps)
- visible : indique si oui ou non le Sprite est affiché à l'écran.
Valeur des attributs par défaut
- x : 0
- y : 0
- z : 0
- ox : 0
- oy : 0
- zoom_x : 1.0
- zoom_y : 1.0
- mirror : false
- bush_depth : 0
- opacity : 255
- blend_type : 0
- color : Color.new(0,0,0,0)
- tone : Tone.new(0,0,0,0)
- src_rect : Rect.new(0,0,bitmap.width, bitmap.height) si vous avez défini le bitmap.
- bitmap : nil
- visible : true
Image récapitulative des coordonnées
J'ai placé un Sprite dans un Viewport. En pointillé, c'est son src_rect d'origine.
Les vecteurs sont les coordonnées respectives du Sprite en fonction de la couleur : x et y se font par rapport à l'endroit dans lequel est affiché le Sprite, ox et oy indiquent le pixel d'origine du src_rect (non zoomé) ; ce pixel sera dessiné à la coordonnée x et y du Sprite et tous les autres pixels visibles dans le src_rect seront dessinés en fonction de ce pixel d'origine. Après, les zooms et rotations sont appliqués toujours par rapport à ce pixel d'origine.
Comme vous pouvez le constater, le zoom x2 a fait sortir le Sprite de tous les côtés du src_rect, c'est parce que nous avons placé l'origine à peu près au centre du src_rect. Si l'origine avait été 0,0 le Sprite n'aurait débordé qu'à droite et en bas.
-> Retour au Sommaire
Plane
Les Planes sont comme des sprites à la différence que l'affichage de ceux-ci est répété dans tout le Viewport ou toute la fenêtre (avec une limite de 640x480).Les Planes s'initialisent pareil que les Sprites mais perdent quelques méthodes par rapport à ces derniers. Il n'y a plus de rotation, plus de bush_depth, plus de coordonnées x et y, plus de src_rect. Le but de cette classe est de faire un background avec une petite image et de le déplacer si besoin en utilisant les méthodes ox et oy.
Je vous liste les méthodes disponibles, elles ont quasiment les mêmes propriétés que celles de la classe Sprite alors regardez dans la classe Sprite pour la description.
- bitmap
- ox
- oy
- z
- zoom_x
- zoom_y
- bend_type
- color
- tone
- visible
- dispose
- disposed?
Nous avons toutes les informations nécessaires pour créer une interface en image, ce sera l'horloge de RSE qui permettra de régler une heure virtuelle. Je ferai ceci sur PSP DS bien qu'il y ait déjà un système d'heure, ce sera à vous d'adapter la chose à votre jeu si vous l'intégrez. Le but sera d'utiliser un Viewport avec des coordonnées exotiques, c'est pourquoi je prends PSP DS, vous pourrez adapter cela sous PSP 0.7, ça fonctionnera tout autant. Par contre, ce sera l'objet du tutoriel n°4 car ce tuto d'information est déjà assez long. Prenez le temps de digérer tout ça et de tester deux trois trucs.
| <- Utilisation des Bitmaps | Input, Graphics et première interface -> |
