[RPG-MAKER.FR] Oniromancie: tout l'univers de RPG Maker en français - Tutoriels - Créer une barre de HP en quelques lignes qui bouge pixel par pixel

Oniromancie: Tutoriels - Créer une barre de HP en quelques lignes qui bouge pixel par pixel


Découvrir
RPG Maker

RM 95
RM 2000/2003
RM XP
RM VX/VX Ace

Apprendre
RPG Maker

Guides
Tutoriels
Astuces
Making-of


Comment ça marche?

Aëdemphia
Par Sylvanor

Fighting Robots Quest
Par Boulon

Geex
Par roys

Inexistence
Par Falco

La Légende d'Ibabou
Par Zaitan

Nylu
Par NanakyTim

Sarcia
Par Kaëlar

Super Mario RPG - Lost Souls
Par Omegabowser

News: Game design: ouvrir son jeu aux (...) / News: Des jeux et des screens / News: Alex 2019 : tests et nominations (...) / Jeux: Wendy Whedon / Sorties: Wendy Whedon /

Chat  

Bienvenue
visiteur !




publicité RPG Maker!

Statistiques

Liste des
membres


Contact

Mentions légales

107 connectés actuellement

10211078 visiteurs
depuis l'ouverture

99 visiteurs
aujourd'hui

Groupe Facebook

Barre de séparation

Partenaires






TOP
GAMEMAKING


Les 5 plus
visités

Akademiya RPG Maker

Alex d'Or

Blog of Chaos17

BloGecko

ConsoleFun

Au hasard

Blog of Chaos17

RitoJS Blog

Level Up!

Les deux derniers

Zarok

Akademiya RPG Maker

Nos autres partenaires

Devenir
partenaire


Barre de séparation

Un site du réseau
War Paradise

Annuaires référenceurs




Créer une barre de HP en quelques lignes qui bouge pixel par pixel
Ecrit par Reenow

Hello tous le monde,
J'aimerai vous montrer une technique simple pour créer une barre de HP (où autre chose, à vous de voir) qui bougera pixel par pixel.
Commençons par le commencement (qui sait qui dit ça déjà?).
Déjà munissez vous d'une picture d'une jauge et d'une barre :
image
Jauge

image
Barre

(Bon ok c'est très petit)
Puis créer un Event Commun en processus parrallèle, que vous nommerez comme vous voulez. Tire la langue
On va créer les variables(5) :
-X Barre HP Elle va nous servir à placé la barre par rapport au HP du héros
-Y Barre HP Elle permet de placé la barre (haut, bas) donc les coordonnés Y de la barre
-Calcul Barre Cette variable contiendra les HP du héros en %
-HP Max héros Les HP max du héros
-HP héros Les HP actuel du héros

Voilà nos variables sont créer, passons à la pratique :
Tous d'abords, on va afficher la jauge en haut à gauche de l'écran(la jauge doit être collé à un coté de l'écran, la barre va se cacher sur les cotés, enfin la c'est pas encore assez clair mais c'est important Clin d'oeil ) :
image
<>Afficher une image: 10,jauge,(25,4)

Maintenant, on va afficher la barre de HP aux coordonnés X et Y des variables "X Barre HP" et "Y Barre HP".
D'abord on va configurer la coordonné Y de la barre :
<>Variable(s): [0002: Y Barre HP] = , 4
Puis on affiche la barre :
image
<>Afficher une image: 9,barreHP,X[0001:X Barre HP], Y[0002:Y Barre HP]

Jusqu'à là, tous va bien ?
Bon, alors maintenant on va passé à la partie la plus importante, on va pêcher les HP du héros en pourcentage.
Pour cela, il faut tous d'abord insérer les HPs actuel du héros dans la variable "Calcul Barre" :
<>Variable(s): [0003:Calcul Barre] = , valeur de [0005:HP héros]
Puis on multiplie cette valeur par 50, pourquoi 50 ? Parce-que ma barre mesure 50 pixels de coté ! C'est très important la aussi!(Donc si votre barre mesure 60 pixels de coté, c'est 60 qu'il faut mettre Rire grinçant) :
<>Variable(s): [0003:Calcul Barre] * , 50
Ensuite on divise la valeur qu'on à dans la variable "Calcul Barre" par les HPs max du héros.(Donc la valeur de la variable "HP Max héros") :
<>Variable(s): [0003:Calcul Barre] = , valeur de [0004:HP Max héros]
Et enfin, on soustrait la valeur de la variable "Calcul Barre" par 25.La encore, pourquoi 25 ?
Car il faut que notre barre se positionne à l'endroit où il y'a la jauge, comme la coordonné X de notre jauge est 25, est que notre barre mesure 50 pixels de coté, en additionnant ces deux variables(Calcul Barre + Coordonné X Jauge) on doit obtenir le nombre de pixel de votre barre.Ici vous pouvait faire le calcul, on obtient bien 50.
<>Variable(s): [0003:Calcul Barre] - , 25
Deux dernière chose, on doit rendre égal la variable "X Barre HP" à la valeur de la variable "Calcul Barre" :
<>Variable(s): [0001:X Barre HP] = , valeur de [0003:Calcul Barre]

Votre Event doit ressembler à ça maintenant :
<>Afficher une image: 10,jauge,(25,4)
<>Variable(s): [0002: Y Barre HP] = , 4
<>Afficher une image: 9,barreHP,X[0001:X Barre HP], Y[0002:Y Barre HP]
<>Variable(s): [0003:Calcul Barre] = , valeur de [0005:HP héros]
<>Variable(s): [0003:Calcul Barre] * , 50
<>Variable(s): [0003:Calcul Barre] = , valeur de [0004:HP Max héros]
<>Variable(s): [0003:Calcul Barre] - , 25
<>Variable(s): [0001:X Barre HP] = , valeur de [0003:Calcul Barre]

Mais nous avons oublié de vérifier si les HPs actuel du héros ne sont pas supérieur aux HP max du héros, si ils le sont, on soustrait les HPs actuel du héros de 1 :
image
<>Si variable[0005:HP héros] V[0004:HP Max héros] > strict
<>Variable(s): [0005:HP héros] - , 1
<>
Fin

Et voilà l'event au complet :
image

Edit de Joke :
Attention, ce tutoriel est une source de ralentissements !!!
-Un événement en processus parallèle sans aucun "attendre" dedans, ça ralentit un peu le jeu
-Mais surtout, afficher des images en boucle ça ralentit encore plus, il faut éviter et à la place faire un déplacement d'image en boucle, ça ça ne ralentit pas du tout le jeu

Voici le bon code à écrire pour que ça marche nickel :


<>Afficher une image: 10,jauge,(25,4)
<>Afficher une image: 9,barreHP,X[0001:X Barre HP]
BOUCLE
<>Si variable[0005:HP héros] V[0004:HP Max héros] > strict
<>Variable(s): [0005:HP héros] = , V[0004:HP Max Héros]
<>Variable(s): [0002:Y Barre HP] = , 4
<>Variable(s): [0003:X Barre HP] = , valeur de [0005:HP héros]
<>Variable(s): [0003:X Barre HP] * , 50
<>Variable(s): [0003:X Barre HP] = , valeur de [0004:HP Max héros]
<>Variable(s): [0003:X Barre HP] - , 25
<>Variable(s): [0001:X Barre HP] = , valeur de [0003:Calcul Barre]
<>déplacer une image: 9,barreHP,X[0001:X Barre HP], Y[0002:Y Barre HP] 0.0sec (attendre fin)
<>attendre 0.0sec (2 frame)
<>
FIN DE LA BOUCLE (c'est la fin de la boucle, pas la commande "sortir de la boucle" !!)
<>
Fin
<>

Pour RMXP et VX, c'est bon, mais pour le 2003 il faut ajouter un nouvel événement commun en processus parallèle avec :

modifier variable "ID old" = ID de la carte
BOUCLE
modifier variable "ID now" = ID de la carte
condition : si "ID old" différent de "ID now" :
<>Afficher une image: 10,jauge,(25,4)
<>Afficher une image: 9,barreHP,X[0001:X Barre HP]
<>modifier variable "ID old" = ID de la carte
attendre 0.0sec
FIN DE BOUCLE

Cet autre événement aura pour rôle d'afficher la jauge seulement à chaque fois qu'on changera de map ! (Allez voir ce tutoriel pour plus d'informations sur ce code.

Commentaire? Edenté


virateck - posté le 14/07/2008 à 10:35:43. (47 messages postés)

sa marche avec rpg maker 2000?:inter:doute2

fana de metroid jusqu'au bout!!!


Cyborgs - posté le 13/08/2008 à 02:27:43. (360 messages postés)

DRIVE I SHOOT ZOMBIE!

après, on peut modeler la barre comme on veux, c'est un très bon tuto...

Galerie souvent mise à jour! des gags MGS!


poussivert (visiteur non enregistré) - posté le 28/09/2008 à 14:46:44.

Reenow:tres bon tuto,j'avait fait un systeme de barre de hp et il etait plus long qu'autre chose.alors le tien m'arrange beaucoup
virateck:si c'est possible avec rm 2003 alors c'est possible avec RM 2000


infernus - posté le 29/10/2008 à 21:20:37. (2 messages postés)

Bonjour j'ai fait un click droit sur les 2 images (Barre et jauge) et je les ai enregistrées dans un dossiers sur mon ordi. Mais quand je lance RM2000 et que je met "Importer" pour Importer les images et éxécuter le tutorial comme il faut, il mette un truc du style :

"Ce fichier C:\Program Files\ASCII\RPG2000\Project\GaluZy\Image\jauge.png ne peut être crée"

Comment est-ce que je peux faire pour importer ???

(Je crois avoir SANS LE FAIRE EXPRES supprimer un fichier RPG2000 autre que celui qui contient le programme :doute2 C'est pt'et ça NoN ???) GaluZy c'est normal, c'est le nom de mon jeu ^^

Merci de m'aider d'avance, Infernus :help:help:help


Reenow - posté le 15/11/2008 à 10:47:44. (769 messages postés)

infernus : Essai de copier/coller l'image directement dans le dossier "Picture" de ton jeu et normalement ça marche. Autrement essai de réinstaller rpg maker, peut-être.

virateck: oui, c'est possible sur rpg maker 2000/2003/XP/VX. :)

Merci à tout les autres pour les commentaires !
(rien que de relire ça, j'ai une motive d'écrire un autre tuto.)


bowlde - posté le 05/04/2009 à 12:16:51. (3 messages postés)

Quand je lance le jeu l'image ne bouge plus ... j'utilise VX
voila mon code...
image
Si vous pourriez m'aider ...


fizz26 - posté le 09/05/2009 à 19:46:14. (132 messages postés)

FIzz26 est de retour, fâcher avec Assassin's creed!

image
Dans la condition, tu as mis [0005:HP héros] < Variable [0004:HP Max héros] Donc [0005:HP héros] inférieur au [0004:HP Max héros]
Il faut mettre supérieure, comme Joke l'a si bien mis.
Attention, dans ce genre de tuto faut être attentif!



Reenow -> Tu peux remettre le lien, ça dit qu'il est plus valable...
Et sinon la barre ne s'affiche pas à l'endroit voulu!
Je peux pas avancer l'image de la barre de quelque pixel vers la droite? J'en ai fait un de ma fabrication.

Un skateparc de 1500 m3 à 1 million? Youpi c'est pour dans 2-3 ans!


SHINTYMAN - posté le 14/07/2009 à 20:13:22. (36 messages postés)

avec cette wii, tu peux jouer à Soul Calibur... Sans Soul Calibur !!!

Euh... quel sont les "operations a effectuer" et les "operandes" des chaques Variables ?:doute2

la chaîne des RPG's est en marche !


ryandu42 - posté le 01/09/2009 à 13:15:49. (6 messages postés)

apprenti-arpg!

J'ai un probleme! Quand je teste le jeu, a ta facon, pas a celle de joke, mes vies se vident sans que je bouge! :help please!!!

Ah, le mapping... JE DETESTE CA!!!


Kemsey - posté le 12/08/2010 à 01:17:47. (8 messages postés)

Un nouvelle univers viens d'etre creé celui de Vileo

sans vouloir te vexer.
C'est franchement inutile
pourquoi se casser la réticule alors que les script donne tout sur un plateau d'or.
Enfin c'est mon avis.

La force de la création !


Tata-Monos - posté le 12/08/2010 à 01:34:14. (56891 messages postés) - misteroniro

Vive le making libre

Citation:

sans vouloir te vexer.
C'est franchement inutile
pourquoi se casser la réticule alors que les script donne tout sur un plateau d'or.
Enfin c'est mon avis.


Bravos. J'applaudis champions.
Tu me feras signe si tu trouves les scripts ruby sur Rpg Maker 2000 et 2003.

Pixner|Offgame | Le comptoire des clikeurs


kilam1110 - posté le 12/08/2010 à 02:27:47. (9159 messages postés)

Bah TG.

Très con en effet.

New RPG Maker - Forum traitant du logiciel RPG Maker tout en français ! | SURVIVE V2.5 - Dégommez du zombie !


Killer-de-rpg - posté le 15/08/2010 à 13:25:33. (191 messages postés)

http://www.ClaraVenger.com/?id=567577 siou plaît un clic =D

Je dirais même très très con en effet :F


Joke - posté le 15/08/2010 à 13:46:28. (5054 messages postés)



ATTENTION

Il y a une erreur dans mon edit ^^""

- Il n'y a que "<>Variable(s): [0005:HP héros] = , V[0004:HP Max Héros]" à l'intérieur de la condition "<>Si variable[0005:HP héros] V[0004:HP Max héros] > strict", j'ai oublié de mettre le "fin de condition"

- Le "<>Variable(s): [0003:X Barre HP] = , valeur de [0004:HP Max héros]" est en fait une division, et non pas un "rendre égal à"

- Le "<>Variable(s): [0001:X Barre HP] = , valeur de [0003:Calcul Barre]" n'a rien à foutre là, c'est à oublier !



Pour arrêter de m'embrouiller, je vous présente une méthode plus simple à comprendre : Faire votre jauge avec deux images de 320*240 (la résolution de l'écran), ce qui fait que le centre sera toujours X=160 et Y=120 quel que soit la gueule et la taille de votre jauge.

Donc si vous suivez bien, la jauge est pleine lorsque X=160, la jauge est vide lorsque X=(160-largeur de la jauge)

Vous avez d'abord le cadre de la jauge, dont les coordonnées ne bougent pas : (X=160, Y=120 sur 2003, sur XP et VX vous affichez à 0,0 via le point haut/gauche)
image

Vous avez ensuite le remplissage de la jauge, dont les coordonnées sont calculées en fonction du rapport PV/PVMAX
image

Puis vous avez le fond de la jauge, que vous verrez derrière le remplissage de la jauge, dont les coordonnées ne bougent pas, comme le cadre.
image

Ici, la jauge fait 50 pixel de large, mais elle fait la taille que vous voulez
image

Le code est simple, il suffit de faire ça en événement commun :

Portion de code : Tout sélectionner

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
afficher image 50 : Jauge Cadre, 160, 120
afficher image 49 : Jauge remplissage, 160, 120
afficher image 48 : Jauge Fond, 160, 120
(Sur RM2003) modif variable "ID old" = ID de la carte 
BOUCLE
(Sur RM2003) modif variable "ID now" = ID de la carte 
           ) condition : si variable "ID old" différent de variable "ID now" :
           )   sortir de la boucle
           ) fin de condition
condition : si variable "PV" > variable "PVMAX"
   modif variable "PV" = valeur variable "PV max"
fin de la condition
modif variable X = valeur variable "PV"
modif variable X - valeur variable "PVMAX"
modif variable X * 50 (largeur de la jauge)
modif variable X / valeur variable "PVMAX"
modif variable X + 160
modif variable Y = 120
déplacer image 49 : Jauge remplissage, variable X, variable Y, 0.1sec
attendre 0.0sec
Fin de boucle
 



Sur XP ou VX, il suffit d'afficher les images par le point haut/gauche et remplacer "160" et "120" par 0 dans le code

La portion de code réservée à RM2003 sert pour que l'affichage d'image se fasse à chaque changements de map, sur XP et VX l'événement commun se réinitialise à chaque changements de map, sur le 2003 la boucle continue alors il faut la stopper ^^

http://rmex.github.io/ | Joke's Tuts | Joke's Gribs | SoundCloud | Terre cuite | BilouCorp | Genesis | Groupe Skype RPG Maker | DELIRIUM-II


lerapeur91400 - posté le 30/12/2010 à 14:55:29. (24 messages postés)

Débutant maintenant, débutant toujours

dsl mais je comprend pas comment on prend l'image pour l'afficher.


Alzaikmerra - posté le 20/10/2012 à 18:32:18. (32 messages postés)

Il faut mettre l'image dans TonProjet\\Graphics\Pictures.
Puis dans les commandes des EV aller dans le deuxième onglet\Images et climat\Afficher une image. Dans cette même partie tu trouves "Déplacer une image".

athx

Suite à de nombreux abus, le post en invités a été désactivé. Veuillez vous inscrire si vous souhaitez participer à la conversation.

Haut de page

Merci de ne pas reproduire le contenu de ce site sans autorisation.
Contacter l'équipe - Mentions légales

Plan du site:

Communauté: Accueil | News | Forum | Flash-news | Sorties | Chat | Commentaires | Galerie | Blogs | Articles perso | Screen de la semaine | Palmarès | Livre d'or | Recherche | Interviews | OST | L'Annuaire | Divers
Apprendre: Le Wiki | Tutoriels | Guides | Gaming-Live | Tests | Making-of
Télécharger: Programmes | Scripts | Packs de ressources | Midis | Eléments séparés | Sprites
Jeux: Index jeux séparés | Top Classiques | Top Originaux | Les autres | Collection Oniro | RPG Maker 95 | RPG Maker 2000 | RPG Maker 2003 | RPG Maker XP | RPG Maker VX | RPG Maker VX Ace | RPG Maker MV | Autres | Jeux complets | Proposer
Hébergés: Aëdemphia | Fighting Robots Quest | Geex | Inexistence | La Légende d'Ibabou | Nylu | Sarcia | Super Mario RPG - Lost Souls
Ressources RPG Maker 2000/2003: Chipsets | Charsets | Panoramas | Backdrops | Facesets | Battle anims | Battle charsets | Monstres | Systems | Templates
Ressources RPG Maker XP: Tilesets | Autotiles | Characters | Battlers | Window skins | Icônes | Transitions | Fogs | Templates
Ressources RPG Maker VX: Tilesets | Charsets | Facesets | Systèmes
Ressources RPG Maker MV: Tilesets | Characters | Faces | Systèmes | Title | Battlebacks | Animations | SV/Ennemis