Skip to content
This repository has been archived by the owner on Jul 24, 2020. It is now read-only.

Créer des jauges simples

nukiFW edited this page Apr 19, 2015 · 3 revisions

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 simples

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 : jauge_content et jauge_bg
Une fois superposées, ces deux images donnent une image comme ceci : jauge_content
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 :

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

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 :

Code évènementiel

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

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

Rendu

Utilisation des évènements de cartes

Il est possible de se servir des é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 :

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

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 : 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 :

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 !

Ce qui donne : Code évènementiel
et pour lequel nous pouvons avoir ce petit aperçu :

Rendu

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

Rendu

(Normalement ça tremble !!! mais le gif ne le rend pas très bien :D)

Clone this wiki locally