« Forum de discussion basé sur les créations de tous types. »
 
AccueilAccueil  PortailPortail  FAQFAQ  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 [rmXP] Les pictures

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
garsim
Admin
Admin
avatar

Messages : 1631
Date d'inscription : 03/09/2008
Age : 25
Localisation : Regardez sur Villorama !

MessageSujet: [rmXP] Les pictures   Ven 9 Juil - 19:34

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.

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...).


I - Afficher, manipuler et effacer des images

Avant toute chose, pour utiliser des pictures (pictures = images au cas où vous n'auriez pas percuté tirlalangue ), 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 ? tirlalangue ).

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. tirlalangue
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 ! tirlalangue
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. tirlalangue
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ée 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 rit

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 - soupir - ). 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à ! Sourire
Bon, tel quel, l'exemple est amusant mais présente quand même peu d'intérêt, il faut l'avouer. tirlalangue
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 (mais qui savent quand même manipuler le RGSS, hein !).

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... Sourire
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'uilisation 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. tirlalangue


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.

___________

Mon blog de tests de jeux (autant être direct...)
Revenir en haut Aller en bas
Ximajinebix
Grand Ookami
Grand Ookami
avatar

Messages : 603
Date d'inscription : 24/11/2008
Age : 24

MessageSujet: Re: [rmXP] Les pictures   Ven 9 Juil - 21:49

Cool merci garsim pour ce tuto, j'ai déjà enfin compris pour les coordonnée qui étais en pixel (je croyais que c'était en fonction des carreaux aux début...)
Et puis maintenant que je connais les dimentions du jeux j'ai plus qu'à faire le calcul.

Pour le deplacement de l'image sur un evenement je le savais car j'avais regarder dans un autre jeux.

Pour la barre de vie, c'est tout simplement exellent ! je n'y avais pas pensé ! :) Mais bon il en faut pas mal d'image... surtout si on se decide à faire monter les pv du personnage... Il faut tout réajuster.
Par contre l'image sera toujours au dessus du heros sans qu'on puisse la toucher? Car si j'ai l'intention de faire un boss en image donc, qu'il bouge et que si le hero touche l'image qui doit être au meme niveau que lui... et bien il se prend un coup...
Ou alors il faut que j'adopte la technique de la cencure?
Revenir en haut Aller en bas
garsim
Admin
Admin
avatar

Messages : 1631
Date d'inscription : 03/09/2008
Age : 25
Localisation : Regardez sur Villorama !

MessageSujet: Re: [rmXP] Les pictures   Ven 9 Juil - 21:57

Ximajinebix a écrit:
Pour la barre de vie, c'est tout simplement exellent ! je n'y avais pas pensé ! :) Mais bon il en faut pas mal d'image... surtout si on se decide à faire monter les pv du personnage... Il faut tout réajuster.
C'est justement un peu le problème des HUD dans ce genre.
D'ailleurs, je crois que quelques Zelda amateurs faisaient comme ça au début (faut dire qu'ils étaient sous rm2000) : ils construisaient toutes les images nécessaires et les affichaient en fonction des cas. Je crois que c'est le cas de Zelda Solarus.
En fait, la méthode RGSS a beaucoup plus d'avantages car elle est beaucoup moins lourde. Il faut juste s'y connaître un peu en RGSS par contre.
M'enfin on voit tout de suite qu'en à peine dix lignes, on peut faire l'équivalent d'une cinquantaine de conditions événementielles...

Ximajinebix a écrit:
Par contre l'image sera toujours au dessus du heros sans qu'on puisse la toucher?
Oui, la particularité des pictures, c'est justement de rester au-dessus de tout.
Mais je pense qu'il est peut-être possible d'arranger ça avec un peu de RGSS... par contre, je ne m'y connais pas suffisamment pour te dire comment faire si c'est le cas.

Ximajinebix a écrit:
Par contre l'image sera toujours au dessus du heros sans qu'on puisse la toucher? Car si j'ai l'intention de faire un boss en image donc, qu'il bouge et que si le hero touche l'image qui doit être au meme niveau que lui... et bien il se prend un coup...
Ou alors il faut que j'adopte la technique de la cencure?
La technique de la censure me semble être un bon compromis.
Mais de toute façon, si ton image a la taille d'un event, c'est possible que le joueur n'y voie que du feu (sauf peut-être si tu mets des animations dessus...).

___________

Mon blog de tests de jeux (autant être direct...)
Revenir en haut Aller en bas
Ximajinebix
Grand Ookami
Grand Ookami
avatar

Messages : 603
Date d'inscription : 24/11/2008
Age : 24

MessageSujet: Re: [rmXP] Les pictures   Sam 10 Juil - 0:58

Mouais je prendrais un chara qui ressemble à rien, et mettrais mon image directement dessus....
Aaaah mais oui mais details important. Je peux faire defiler les images dessus en boucle?
Car si je fais tournoyer mon boss, donc admettons je le dessine en 4 images. Ca se passe comment?
Revenir en haut Aller en bas
garsim
Admin
Admin
avatar

Messages : 1631
Date d'inscription : 03/09/2008
Age : 25
Localisation : Regardez sur Villorama !

MessageSujet: Re: [rmXP] Les pictures   Sam 10 Juil - 12:16

Tu demandes l'affichage d'une image avec un numéro précis.
Tu attends un peu.
Tu demandes l'affichage d'une autre image avec le même numéro (elle remplacera la première).
Tu attends un peu.
Tu demandes l'affichage d'une autre image avec le même numéro (elle remplacera la précédente).
Tu attends un peu.
Tu demandes l'affichage d'une autre image avec le même numéro (elle remplacera la précédente).
Tu attends un peu et tu recommences.

Et tu mets tout ça dans un event en processus parallèle.
Je pense que c'est comme ça qu'il faudrait faire.

___________

Mon blog de tests de jeux (autant être direct...)
Revenir en haut Aller en bas
Ximajinebix
Grand Ookami
Grand Ookami
avatar

Messages : 603
Date d'inscription : 24/11/2008
Age : 24

MessageSujet: Re: [rmXP] Les pictures   Sam 10 Juil - 14:39

Ouais mais... Ce sera en boucle rassure moi? Car sinon j'ai pas fini d'en mettre -____________-
(Ca faisais longtemps que je l'avais pas faites la baleine ! =D)
Revenir en haut Aller en bas
garsim
Admin
Admin
avatar

Messages : 1631
Date d'inscription : 03/09/2008
Age : 25
Localisation : Regardez sur Villorama !

MessageSujet: Re: [rmXP] Les pictures   Sam 10 Juil - 20:49

Ximajinebix a écrit:
Ouais mais... Ce sera en boucle rassure moi? Car sinon j'ai pas fini d'en mettre -____________-
Oui, bien sûr... dans un processus parallèle, ça va de soi.

___________

Mon blog de tests de jeux (autant être direct...)
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: [rmXP] Les pictures   

Revenir en haut Aller en bas
 
[rmXP] Les pictures
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Solus [RMXP]
» [RMXP] Dark Knight La chute du royaume[Projet stoppé]
» roll-over, zone réactive, image et son
» [Fermé] MOTEUR DE RECHERCHE LO.ST
» [GM8] Zelda Engine (Morwenn)

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Yasei Ookami :: Making :: Tutoriels making-
Sauter vers: