[RMXP] Les pictures

Les pictures sont des images qui peuvent être affichées directement à l'écran, par-dessus à peu près tout : les panoramas, les décors, les charas et les fogs.
Même si ça paraît assez simple, elles peuvent être très utiles et servir à pas mal de choses. D'ailleurs, ce tutoriel sera accompagné de deux exemples d'utilisation des pictures dans un jeu.

Notez que ce tutoriel porte plutôt sur RPG Maker XP, mais le principe reste sensiblement le même pour les autres versions (une image, c'est une image...). Seule la dernière partie est spécifique à rmXP : en effet, rm2003 n'intègre pas le RGSS, et la version de celui-ci utilisée par rmVX est différente. Cependant, il est possible de s'inspirer de cette partie pour comprendre globalement le fonctionnement des pictures en RGSS sous rmVX.


I - Afficher, manipuler et effacer des images

Avant toute chose, pour utiliser des pictures (pictures = images au cas où vous n'auriez pas percuté :p: ), vous devez d'abord en importer. En effet, par défaut, le logiciel n'utilise pas les pictures (ou peu) et il y a peu de chances que vous en trouviez des toutes prêtes à l'emploi. Ce sera donc à vous de les chercher ou de les créer.
Pour les importer, c'est aussi bête que pour importer n'importe quel type de ressources RM : ouvrez le gestionnaire de ressources (F10 sous rmXP), et importez vos images dans le dossier "Graphics/Pictures".

Maintenant, on va pouvoir manipuler un peu nos pictures. Commençons d'abord par utiliser des commandes événementielles, nous verrons comment utiliser le RGSS avec les pictures plus tard.
Vous devriez trouver quelques commandes événementielles qui portent sur la manipulation des images :



Commençons d'abord par l'affichage (parce que bon, c'est un peu idiot d'effacer une image qui n'a pas été affichée au préalable, n'est-ce pas ? ).

a) Afficher une image

Si vous cliquez sur "Afficher une image", plusieurs options s'offrent à vous :



Bon, elles ne sont pas toujours utiles, toutefois on va les expliquer :

- Numéro de l'image : une image est identifiée par un numéro unique (c'est important pour la suite). Choisissez donc un numéro pour votre image. Vous ne pouvez choisir un numéro que de 1 à 50 par défaut, donc placer 50 images au maximum simultanément sur l'écran.
Notez aussi que plus le numéro est élevé, plus l'image risquera de s'afficher en priorité si vous décidez d'en afficher plusieurs (on en reparlera un peu plus tard).

- Fichier de l'image : précisez le fichier image (que vous devriez avoir importé au préalable) que vous voulez afficher.

- Coordonnées d'affichage : c'est ici que vous pourrez préciser où afficher votre image. Pour ça, il faut d'abord savoir se répérer sur l'écran :



Voilà comment on se repère sur l'écran : avec un repère cartésien orienté vers le bas (oui, attention, vers le bas, contrairement à ce qu'on fait d'habitude quand on travaille avec ce type de repère en mathématiques).
Il ne vous reste qu'à préciser la position de votre image (soit avec des valeurs que vous précisez directement, soit avec des valeurs contenues dans des variables).

De là, vous pouvez définir la position de votre image... quoique... je vais d'abord devoir vous expliquer la différence entre le pixel haut-gauche et le pixel central.
Comme vous avez pu le voir sur le schéma, le repère a une origine située tout en haut à gauche de l'écran. Mais pour positionner votre image, il faut indiquer où se trouve son origine.
Pour indiquer son origine, vous pouvez choisir le pixel tout en haut à gauche de l'image ou le pixel au centre de votre image.

Pour illustrer la différence, voici une image que j'ai affichée deux fois, la première avec l'origine "pixel haut-gauche" et la deuxième "pixel central" :



C'est clair non ?
J'ai voulu afficher les images à la position (300, 100). Celle-ci est d'ailleurs mise en évidence sur le schéma.
On voit que ce point est d'une part le point central de l'image de gauche (dont j'ai précisé que l'origine serait ce point-là), et le point haut-gauche de l'image de droite (affichée selon celui-ci).

Bon, il nous restait d'autres options sur le feu, on va pouvoir les expliquer maintenant. Elles sont utilisées plus rarement mais peuvent être utiles.

- Agrandissement : Vous pouvez changer la taille de votre image par rapport à sa taille d'origine. Il faudra indiquer des valeurs en pourcentages.
Par exemple, 100 correspond à la taille d'origine (laissez donc tel quel si vous ne souhaitez pas redimensionner votre image).
50 correspond à la moitié, 200 à une taille deux fois plus grande, etc.
Vous pouvez aussi déformer votre image en mettant deux pourcentages différents en X ou en Y.

- Opacité : l'opacité de votre image (sans blague). Correspond plus ou moins à la transparence.
Si vous laissez 255, elle sera totalement opaque. Si vous mettez une valeur plus faible, elle sera transparente (le degré de transparence sera plus élevé si la valeur est faible).
Vous pouvez par exemple mettre 0 pour rendre l'image totalement transparente (ça paraît un peu idiot mais bon...).

- Type de transparence : le type de transparence (normale, éclaircie, obscurcie).


b) Afficher plusieurs images

Bon, en fait, il suffit juste d'utiliser plusieurs fois la commande "Afficher une image", c'est aussi simple que ça.
Toutefois, faites attention car quelques pièges venant des numéros que vous avez attribués à vos images peuvent survenir.

Par exemple, si vous voulez afficher deux images distinctes, à des positions différentes, faites bien attention à leur donner des numéros différents, sinon, RM considèrera que vous avez juste changé votre image en cours de route.
Démonstration :



Là, j'ai voulu afficher des images clairement distinctes, pourtant une seule s'affiche au final (celle que j'ai demandé d'afficher en deuxième).
Tout ça parce que j'ai donné le même numéro à ces deux images, et que RM a compris que je voulais remplacer la première image par la deuxième...

Pour remplacer une image par une autre, c'est effectivement ce qu'il faudrait faire.
Mais pour afficher les deux images distinctement, je dois leur donner des numéros différents.



Là, j'ai donné le numéro 2 à ma deuxième image (le faceset), qui s'est affichée par-dessus la première.

Notez aussi que si j'inverse les numéros (1 pour le faceset, 2 pour le fond de carte), le fond de carte apparaîtra par-dessus le faceset (qu'on ne verra pas, du coup, car il sera masqué).
Faites donc attention avec les numéros que vous donnez.


c) Déplacer une image

Bonne nouvelle : ça va aller bien plus vite.
En effet, la commande "déplacer/modifier une image" ne change pas tellement de la précédente : vous précisez le numéro de l'image que vous voulez bouger/modifier, puis remettez les nouvelles coordonnées et nouvelles options que vous souhaitez appliquer.
Pas besoin de préciser le nom du fichier (inutile, puisqu'on précise le numéro de l'image), en revanche, vous pouvez préciser le temps de transition nécessaire à la transformation (en frames).


d) Faire tourner une image

Pour vous amuser à faire pivoter vos images !
Précisez juste le numéro de l'image et sa vitesse de rotation.
Notez qu'il est possible de mettre une vitesse négative : dans ce cas, votre image tournera dans le sens horaire (avec une vitesse positive, elle tourne dans le sens anti-horaire).


e) Modifier le ton d'une image

S'utilise de la même façon que "Modifier le ton de l'écran", mais sur une image particulière (dont il faudra préciser le numéro).


f) Effacer une image

Rien de plus simple : précisez le numéro de l'image que vous voulez effacer.


II - Quelques exemples

a) De la censure

Supposons que votre personnage soit un peu... exhibitionniste sur les bords :



Bon, c'est juste une retouche de charset que j'ai faite pour l'exemple, hein.
Et supposons maintenant que votre joueur soit un peu... sainte-nitouche. Il ne va pas accepter de manipuler un héros exhibitionniste ! Sauf si vous le lui cachez...
Le but de l'exemple est tout bête : on veut afficher un rectangle noir qui masque le héros et qui le suit tout le temps.

On va alors importer l'image suivante que voici (qui fait exactement la taille du personnage) :



Ensuite, on va créer un événement en processus parallèle.
On va aussi créer deux variables qui permettront de récupérer la position du héros (je les ai appelées Héros X et Héros Y).
Dans votre événement, mettez ceci :

Code:

Rendre variable : Héros X égale à la coordonnée X relative à l'écran du Héros
Rendre variable : Héros Y égale à la coordonnée Y relative à l'écran du Héros
Afficher l'image "Carré noir" à la position définie par les variables Héros X et Héros Y.

Notez deux choses :
- d'abord, comme les coordonnées d'une image sont définies par des pixels, lorsqu'on utilise "Gestion des variables", on utilise les coordonnées relatives à l'écran, qui renvoient des pixels (alors que par défaut, elles renvoient les coordonnées en cases).
- ensuite, vous avez là un exemple de position d'une image définie par des variables. Hé, c'est intéressant à souligner, je parie que vous n'en voyiez pas l'utilité dix minutes plus tôt :lol:

Bon, on pourrait se dire que ça suffit, mais en fait, pas vraiment...



En effet, le pixel d'origine du héros est un peu... particulier, car il s'agit du pixel situé en bas au milieu du héros (diable, ce n'est même pas l'un de ceux dont on parlait tout à l'heure ). On va donc devoir repositionner un peu notre image...
Pour la position en X, il suffit de la positionner selon le pixel central.
Pour celle en Y, il va falloir faire un petit calcul : en effet, si notre héros fait 49 pixels de hauteur (vous pouvez le mesurer sur un charset classique style Arshes si vous ne me croyez pas), la position en Y devrait alors être augmentée de la moitié de la hauteur, c'est-à-dire 25 pixels (oui, je sais, 49 / 2 ça ne donne pas un résultat entier, mais bon, on doit arrondir à l'entier supérieur).

Modifiez donc vos commandes événementielles comme ceci :

Code:

Rendre variable : Héros X égale à la coordonnée X relative à l'écran du Héros
Rendre variable : Héros Y égale à la coordonnée Y relative à l'écran du Héros
Retirer 25 à la variable Héros Y
Afficher l'image "Carré noir" par rapport au pixel central à la position définie par les variables Héros X et Héros Y.

Eh ben voilà !
Bon, tel quel, l'exemple est amusant mais présente quand même peu d'intérêt, il faut l'avouer.
Mais vous pouvez vous en inspirer pour afficher des choses juste au-dessus du héros (par exemple, une animation pour laquelle un charset ne suffirait pas).


b) Un système de vies

Vous voudriez afficher des vies à l'ancienne, comme sur ces bons vieux jeux bien rétro ?



Pas de problème ! On peut le faire facilement avec les images.
Supposons que le nombre de vies soit stocké dans une variable "Vies héros" (bon, on pourrait utiliser les PV par défaut, mais on va simplifier en utilisant une variable), que celui-ci en a trois par défaut et qu'il puisse perdre ou gagner des vies sans dépasser 3.

On va préparer trois images (ou quatre, si vous voulez faire une image où on voit qu'il n'a plus de vies) basées sur celle-ci (mettez autant de fois le bonhomme qu'il n'y a de vies pour chaque image, càd faites une image avec un seul, une avec deux, etc.) :



Ensuite, on programme un event en processus parallèle.
Celui-ci contiendra en fait plusieurs conditions :

Code:

Si la variable Vies héros est égale à 1
   Afficher l'image "1vie"
Si la variable Vies héros est égale à 2
   Afficher l'image "2vies"
Si la variable Vies héros est égale à 3
   Afficher l'image "3vies"

Les images correspondent respectivement au nombre de vies qu'elles représentent.

Notez toutefois que cette méthode, certes intuitive, reste quand même lourde. En effet, il faut préparer plusieurs images, qui se suivent et se ressemblent beaucoup (il faut juste changer le nombre de bonshommes présents dessus), et envisager des cas qui risquent de devenir de plus en plus nombreux si le personnage peut avoir beaucoup de vies... bref, on s'en lasse vite.
En fait, c'est un peu l'une des limites de la programmation événementielle. En effet, on peut voir qu'avec du RGSS, on peut être plus malin et n'utiliser l'image du bonhomme qu'une seule fois.

D'ailleurs, puisqu'on parle de RGSS, il serait bien temps d'en glisser un mot au sujet des images, non ?


III - Aller plus loin : manipuler les images avec le RGSS.

Cette brève introduction à la manipulation des images en RGSS s'adresse à ceux qui souhaiteraient manipuler les images avec.
En revanche, je suppose que vous avez déjà quelques bases en Ruby/RGSS pour rmXP, je ne vais pas m'attarder dessus ici.

a) Les variables, classes et méthodes à connaître

En fait, pour accéder aux images en ruby, il faut utiliser la variable $game_screen.pictures[number], où "number" correspond au numéro de l'image.
De là, il suffit juste de connaître les méthodes de la classe Game_picture pour pouvoir les manipuler.

Par exemple, la méthode permettant d'afficher une image est :

Code:

show(name, origin, x, y, zoom_x, zoom_y, opacity, blend_type)

Où name est le nom de l'image, origin le point d'origine (0 pour haut-gauche, 1 pour central), x et y la position, zoom_x et zoom_y l'agrandissement, opacity l'opacité et blend_type le type de transparence.

D'ailleurs, ça ne vous rappelle pas étrangement la commande événementielle "Afficher une image", ça ? Moi si...
D'un autre côté, ça n'a rien de vraiment étonnant quand on sait que les commandes événementielles sont juste des formes très simplifiées d'instructions RGSS... et la commande "Afficher une image" appelle justement en réalité la méthode "show".
Donc pour dire qu'on veut que l'image n°1 contienne le fichier "fond_carte.png", qu'elle soit affichée à la position (100, 100) par rapport au pixel haut-gauche, sans agrandissement ni transparence, il suffit de faire :

Code:

$game_screen.pictures[2].show("fond_carte.png", 1, 100, 100, 100, 100, 255, 0)

Les autres méthodes correspondant aux autres commandes événementielles sont données comme ceci :

Code:

move(duration, origin, x, y, zoom_x, zoom_y, opacity, blend_type)

Pour déplacer une image (s'utilise pratiquement de la même manière que show, à l'exception du paramètre "duration" qui attend une durée).

Code:

rotate(speed)

Pour faire pivoter votre image, indiquez la vitesse en paramètre.

Code:

start_tone_change(tone, duration)

Pour modifier le ton de l'image.

Code:

erase

Pour effacer l'image (l'utilisation est toute bête).


b) Notre système de vies avec du RGSS

Vous vous souvenez du petit système de vies qu'on avait programmé quelques paragraphes auparavant, quand je vous disais qu'il état intuitif mais lourd, et que le RGSS pouvait simplifier un peu les choses sur ce coup-là ?
Eh ben on va tout de suite voir ça avec du script.
Une seule image suffira (celle du héros quand il n'a qu'une seule vie). Vous pouvez aussi effacer toutes les commandes événementielles et les remplacer par "Insérer un script".
Supposons que la variable "Vies héros" soit la première (elle sera accessible via RGSS comme ceci ) :

Code:

$game_variables[1]

L'astuce est d'afficher autant de fois que nécessaire l'image. Pour faire ça, on n'est pas fou, on va utiliser une boucle au lieu d'écrire cinquante conditions répétitives au possible :

Code:

for i in 1..$game_variables[1]
   $game_screen.pictures[i].show("1vie.png", 1, 10 + 40 * (i - 1), 10, 100, 100, 255, 0)
end

Ce qui est intéressant, c'est :
- $game_screen.pictures[i] : on utilise clairement une nouvelle image sans en écraser, ce qui permet d'afficher plusieurs fois le bonhomme.
- 10 + 40 * (i - 1) : bon, c'est juste qu'on affiche nos bonshommes horizontalement, et que pour ne pas qu'ils se superposent, on leur donne des positions distinctes. Un petit calcul suffit à savoir comment les disposer.

Avouez quand même que comme ça, ce système semble bien plus pratique que les events... une seule image et quelques lignes de code au final.
Bon, cela dit, il y a quand même un défaut, car si le héros perd des vies, il y a des images qui seront toujours affichées alors qu'elles ne devraient plus l'être. Il faudra donc les effacer.
Vous pouvez par exemple définir une constante qui donne le nombre maximal de vies, et préciser que toutes les vies qui ne sont pas affichées vont être effacées.
Je vous laisse faire ça, ce n'est pas très difficile et ça vous fera réfléchir un peu.


Sources et remerciements

Merci à Larcange pour ses explications sur le RGSS qui m'ont bien aidé à y voir un peu plus clair au départ.

Oh bien joué le tuto =)!
Merci pour m'avoir cité même si j'ai pas fais grand chose ^^!
On peut tellement faire de chose en event/script!
Pour la petite anecdote, en quatre jour, j'ai programmé un event ultra remodable un système de shoot em all à la smash bros melee, je sors le système bientôt...

Larcange a écrit:Merci pour m'avoir cité même si j'ai pas fais grand chose ^^!

Bah quand même, sans ton tuto et tes explications quand j'ai soumis le problème des images à déplacer simultanément, le tuto n'aurait probablement comporté que ses deux premières parties, car à l'origine je ne connaissais pas le fonctionnement des pictures en RGSS. Même si tu l'avais un peu effleuré (avec les méthodes move et show), ça m'a poussé à en savoir un peu plus à ce sujet (pas grand-chose en fait, vu que les autres méthodes ayant un rapport avec les pictures sont plus simples d'utilisation ).

Larcange a écrit:On peut tellement faire de chose en event/script!

C'était pas vraiment l'objectif du tuto en fait (à l'origine, je l'ai rédigé à la demande d'un membre de Yasei qui voulait un tuto là-dessus) ; à l'origine, il devait juste présenter les pictures et un minimum à savoir à leur sujet.
Cependant j'ai enrichi avec quelques exemples (c'est plus digeste quand même), et comme je venais de découvrir le fonctionnement en RGSS, j'en ai profité pour en glisser quelques mots.
Cela dit, c'est vrai qu'implicitement, ça montre un des intérêts de la manipulation RGSS pour simplifier quelques tâches (avec l'exemple des vies... et pourtant, je crois bien que des Zelda amateurs style Solarus qui étaient faits avec rm2000 étaient contraints d'utiliser le système bourrin des events).

Lol ouip, conditions, conditions, conditions...
Je posterais bientot mon système de battle shoot em all fais en une semaine en event, rien qu'en event, avec ia, déplacements d'images, gestion d'une base de donnée, etc...
Avec jauges en event, différentes selon les trois types d'ennemis, boss, ennemis normaux, leaders (ennemis un peu plus fort que la normal, comme des chef soldats quoi)
Voici donc l'attaque spécial d'un des persos, d'un système à la super smash bros melee, avec les ennemis qui volent contre l'écran de temps à autre:

Le code est plutôt indigesten donc je ferais des commentaires --' ^^

Désolé, j'avais loupé ce tuto là.
+5 points instructeur.
Et je déplace.