Le Deal du moment : -24%
PC Portable Gaming 15.6″ Medion Erazer Deputy ...
Voir le deal
759.99 €

Aller en bas
Zangther
Zangther
Membre

Nombre de messages : 913
Distinction : aucune
Date d'inscription : 06/02/2013

RPG Maker VX Ace [VXAce][RME] Créer des jauges simples

Dim 3 Sep 2017 - 22:53
Ce tutoriel a été initialement diffusé ici : https://github.com/RMEx/RME/wiki/Cr%C3%A9er-des-jauges-simples

Nuki a écrit:Avant toute chose, je m'excuse d'avance du peu d'originalité de ce premier tutoriel (honteusement plagié de l'Event Extender). Cependant, pour ceux ne connaissant pas le tutoriel original et aussi dans l'objectif de le réécrire en plus complet, j'ai pensé qu'évoquer l'usage des images dans RME était une bonne chose !

Créer des jauges


Il existe plusieurs manières de créer des jauges. Sur cette page nous n'évoquerons qu'une seule des manières, celle qui consiste à changer la largeur (ou la hauteur pour une jauge verticale) d'une image.
En EventMaking classique, c'est souvent très loooong car on ne peut pas modifier le zoom d'une image en fonction de variables. Donc en général, il faut faire cent conditions (une par pourcentage). RME rajoute des commandes pour modifier le zoom_x (horizontal) et le zoom_y. Comme ces commandes sont des appels de scripts, on peut leur donner en argument des variables (locales ou non) sans aucun souci.

Images utilisées


Pour représenter une jauge, nous allons nous servir de deux images :
[VXAce][RME] Créer des jauges simples 687474703a2f2f7777772e62696c6f75636f72702e636f6d2f4243572f4e756b692f524d452f6a61756765412e706e67 et [VXAce][RME] Créer des jauges simples 687474703a2f2f7777772e62696c6f75636f72702e636f6d2f4243572f4e756b692f524d452f6a61756765422e706e67
Une fois superposées, ces deux images donnent une image comme ceci :
[VXAce][RME] Créer des jauges simples 687474703a2f2f7777772e62696c6f75636f72702e636f6d2f4243572f4e756b692f524d452f6a6175676546756c6c2e706e67
Les deux images ont la même taille. La première correspond au contenu de la jauge. C'est elle qui se rétrécira en fonction des points de vie. La seconde est le fond et elle gardera toujours la même taille.

Un processus parallèle


Comme beaucoup de systèmes, tout commence avec un évènement en processus parallèle. Voyons sa forme :

Code:
Afficher le fond sur l'image 1
Afficher le contenu sur l'image 2
Boucle
   attendre 1 frame
   calculer le pourcentage de vie
   modifier le zoom_x de l'image en fonction du pourcentage de vie
fin boucle

C'est très simple. Au début de l'évènement en processus parallèle, on initialise les images. Ensuite vient une boucle (qui s'exécute plus vite encore qu'un évènement en processus parallèle) dans lequel le attendre 1 évite simplement les lags. La boucle permet aussi de ne jamais ré-afficher les images, une autre solution aurait été d'afficher les images sur une première page, ensuite d'activer l'interrupteur local A, et sur la seconde page, elle aussi en processus parallèle, calculer le pourcentage et modifier le zoom_x. Cependant, j'ai l'habitude de choisir la boucle, surtout pour de si petits évènements.

Calculer le pourcentage de point de vie


Avant de calculer le pourcentage, il faut savoir de quelles valeurs on va parler. Dans notre cas, notre jauge affichera les points de vie du héros n°1. Pour ça il nous faut ses points de vie, accessibles via la commande actor_hp(ID) et ses points de vie maximum, accessibles via la commande actor_hp_max(ID).

Le calcul de pourcentage peut se faire manuellement : (actor_hp(1) / actor_hp_max(1)) * 100. Cependant, RME possède une commande pour directement produire un pourcentage. La commande percent(valeur, max). Dans notre cas, le pourcentage de point de vie s'obtient donc comme ceci : percent(actor_hp(1), actor_hp_max(1)).

Nuki a écrit:J'aurais pu créer des variables pour actor_hp et actor_hp_max, mais ici je pense que ce n'est pas nécessaire car le code est assez clair.

Nous pouvons récapituler notre évènement :

[VXAce][RME] Créer des jauges simples 687474703a2f2f7777772e62696c6f75636f72702e636f6d2f4243572f4e756b692f524d452f636f64654a61756765412e706e67

Ou alors en utilisant "plus" de commandes évènementielles et en ne passant pas par une variable temporaire pour stocker le pourcentage :

[VXAce][RME] Créer des jauges simples 687474703a2f2f7777772e62696c6f75636f72702e636f6d2f4243572f4e756b692f524d452f636f64654a61756765422e706e67

Personnellement, voici le résultat que j'obtiens avec ce code :

[VXAce][RME] Créer des jauges simples 687474703a2f2f7777772e62696c6f75636f72702e636f6d2f4243572f4e756b692f524d452f72656e6465724a617567652e676966

Utilisation des évènements de cartes


Il est possible de se servir évènements de cartes pour construire les jauges de manière plus automatique, pour ne pas avoir à répéter les évènements sur toutes les cartes nécessitant l'affichage de jauges (et que ce soit moins gourmand qu'un des évènements communs en processus parallèle). Par exemple, dans un script situé en dessous des scripts de RME, vous pouvez créer un script vierge "Map Events" dans lequel vous pourriez mettre :
Code:
map_onload(5, 6, 7, 8, 9, 39){
  picture_show(1, "jaugeB", 10, 10) # On affiche le fond de la jauge
  picture_show(2, "jaugeA", 10, 10) # On affiche le contenu de la jauge
}

map_onprogress(5, 6, 7, 8, 9, 39){
  # Modification du pourcentage de la jauge
  picture_zoom_x(2, percent(actor_hp(1), actor_max_hp(1)))
}

Pour activer les jauges sur les maps 5, 6, 7, 8, 9 et 39 Wink

Jouer sur la couleur


Nous avons vu comment créer très simplement une jauge simple. Ce que je vous propose, c'est maintenant de voir comment faire une jauge qui commence verte et qui au moins l'on possède de points de vie, au plus elle devient rouge. Pour ça, nous jouerons sur la teinte de la jauge. Au moyen de la commande picture_tone (et de la commande tone(r, v, b, a) pour créer une teinte. Pour commencer, il faut que le corps de jauge (le fond peut rester identique) soit en noir et blanc pour que la teinte s'applique bien. Nous utiliserons donc : [VXAce][RME] Créer des jauges simples 687474703a2f2f7777772e62696c6f75636f72702e636f6d2f4243572f4e756b692f524d452f6a617567654e422e706e67 Rendu comme corps de jauge.

Principe des teintes


Une teinte est paramétrée par une valeur de rouge, de vert, de bleu et de gris (le gris a une valeur par défaut, ici nous ne nous servirons pas du gris). Les valeurs des teintes vont de -255 à +255 (sauf la valeur de gris, qui elle va de 0 à 255). Typiquement, une image à qui on donnerait la teinte tone(0, 0, 0) (le gris vaut par défaut 0), ne changera pas de couleur.

Principe général


Pour que notre teinte ait la bonne couleur, il faut que la valeur de vert soit égale au nombre de pourcentage de points de vie et que notre valeur de rouge soit égale au maximum (en l'occurence, 255), moins un pourcentage de points de vie.
Donc on calcule le pourcentage de points de vie. Cependant, les teintes ne vont pas de zéro à 100, comme les zooms, mais de 0 à 255 (on n'aura pas besoin d'aller dans les négatifs ici). Donc il faut faire un rapport. Pour ça, RME possède une commande apply_percent(pourcentage, max), qui va transformer un pourcentage en une valeur par rapport à un maximum.
Donc la valeur de vert sera égale à apply_percent(pourcentage, 255) et la valeur de rouge sera égale à 255 - apply_percent(pourcentage, 255). Si le héros est à 100% de sa vie, le vert vaut 255 et le rouge vaut 255-255, donc zéro. Si le héros est à 0% de sa vie, le vert vaut zéro et le rouge vaut 255.
Les calculs nécessaires sont :
Code:
pourcent = percent(actor_hp(1), actor_max_hp(1)) # On calcule le pourcentage de vie
valeur_vert = apply_percent(pourcent, 255) # On applique ce pourcentage à 255 ce qui donne la valeur de vert
valeur_rouge = 255 - valeur_vert # La valeur de rouge est égal à 255 moins la valeur de vert
picture_zoom_x(2, pourcent) # On applique le changement de zoom
picture_tone(2, tone(valeur_rouge, valeur_vert, 0)) # On change la teinte !

[VXAce][RME] Créer des jauges simples 687474703a2f2f7777772e62696c6f75636f72702e636f6d2f4243572f4e756b692f524d452f636f64654a61756765432e706e67

Ce qui donne :

[VXAce][RME] Créer des jauges simples 687474703a2f2f7777772e62696c6f75636f72702e636f6d2f4243572f4e756b692f524d452f72656e6465724a61756765322e676966

Conclusion

Ce tutoriel sent un peu le réchauffé, cependant, il évoque certaines notions de passage d'arguments et prouve de la flexibilité héritée (de l'EE) de RME pour le traitement d'image. Je vous invite, pour l'exercice à essayer de reproduire ces jauges sans RME (ou sans l'EE) et vous verrez que c'est tout de suite moins rigolo Smile
Avec un peu d'originalité et en se servant de ce que RME offre pour le traitement d'image, vous pouvez faire des choses assez dynamiques. Comme par exemple... ceci :

[VXAce][RME] Créer des jauges simples 687474703a2f2f7777772e62696c6f75636f72702e636f6d2f4243572f4e756b692f524d452f72656e6465724a6175676533342e676966

(Normalement ça tremble !!! mais le gif ne le rend pas très bien Very Happy)
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum