Tuto n°3 - Utilisation des Viewports, Sprites et Plane
Nuri Yuri - 19 août 2014 à 14:44
Tuto n°3 - Utilisation des Viewports, Sprites et Plane
Nous arrivons à la partie qui va rendre utile 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.
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 ça permet principalement de définir la zone dans laquelle les Sprites seront affichés, ça permet d'appliquer des effets de manière généralisée et ça aide surtout beaucoup pour la hiérarchie des éléments.
Créer un viewport
Créer un **Viewport **est une chose assez simple : ça s'initialise comme un Rect, ça 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 information x, y, width et height. Ca aura le même effet que la méthode présenté ci-dessus.
Pour bien comprendre l'intérêt de ces données imaginez qu'un Viewport c'est comme la fenêtre de jeu : c'est défini par des coordonnées x et y qui indique la position sur l'écran et ça a une certaine taille. Si un Sprite est légèrement affiché à l'extérieur de la fenêtre, vous ne verrez que ce qui est dans la fenêtre, vous ne voyez jamais un Sprite dépasser de la fenêtre de jeu, ça sera pareil pour les Viewport. Tous les objets affichés dans le Viewport mais qui débordent un peu seront tronqués.
En image ça donne ça :
Le cadre violet c'est la fenêtre de jeu, le rectangle bleu c'est notre Viewport, le rectangle vert c'est un sprite affiché entièrement dans le viewport car il ne déborde pas, le Rectangle rouge c'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ême méthodes et attributs. Pas de 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. : Cet attribut vous permet d'indiquer si le Viewport (et donc tout son contenu) sera affiché ou non. Ça prend true ou false en argument. : 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 chance 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. : Cet attribut vous permet de déplacer le contenu du Viewport, par défauts 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. : 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. =>ox et oy indique le point à partir duquel le Viewport affiche son contenu. : 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.) : 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 " ", c'est définit par quatre attributs : qui indiquent l'ajout de rouge, vert, bleu (de -255 à 255) et la saturation pour gray (de 0 à 255). : Cette méthode vous permet de libérer le Viewport, implicitement ça 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.) : Cette méthode vous permet de savoir si le Viewport est libéré ou non, ça retourne un booléen.
J'ai placé un Sprite dans un Viewport.
En pointillé c'est son src_rect d'origine.
Les vecteurs sont les coordonnés 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 indique 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 visible dans le src_rect seront dessiné en fonction de ce pixel d'origine. Après, les zoom 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 scr_rect. Si l'origine aurait été 0,0 le Sprite n'aurait débordé qu'à droite et en bas.