- ZangtherMembre
- Nombre de messages : 913
Distinction : aucune
Date d'inscription : 06/02/2013
[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
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.
Pour représenter une jauge, nous allons nous servir de deux images :
et
Une fois superposées, ces deux images donnent une image comme ceci :
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.
Comme beaucoup de systèmes, tout commence avec un évènement en processus parallèle. Voyons sa forme :
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.
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)).
Nous pouvons récapituler notre évènement :
Ou alors en utilisant "plus" de commandes évènementielles et en ne passant pas par une variable temporaire pour stocker le pourcentage :
Personnellement, voici le résultat que j'obtiens avec ce code :
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 :
Pour activer les jauges sur les maps 5, 6, 7, 8, 9 et 39
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.
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.
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 :
Ce qui donne :
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 :
(Normalement ça tremble !!! mais le gif ne le rend pas très bien )
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 :
et
Une fois superposées, ces deux images donnent une image comme ceci :
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 :
Ou alors en utilisant "plus" de commandes évènementielles et en ne passant pas par une variable temporaire pour stocker le pourcentage :
Personnellement, voici le résultat que j'obtiens avec ce code :
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
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 :
- 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 !
Ce qui donne :
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 rigoloAvec 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 :
(Normalement ça tremble !!! mais le gif ne le rend pas très bien )
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|