+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Réglé] Image du perso + équipement (/showthread.php?tid=1705)
Pages :
1
2
[Réglé] Image du perso + équipement - trididinus - 04-09-2007
Toujours pour mon inventaire, je voudrais afficher les équipements portés par le personnage sous la forme d'une seule image :
![[Image: silhouettehr9.png]](http://img508.imageshack.us/img508/7428/silhouettehr9.png)
Dans les carrés doivent s'afficher chaque objet correspondant à l'emplacement sur le joueur.
J'ai voulu appliquer les images ensemble par librairie GD mais ca ne semble pas fonctionner pour plus de deux images. Et donc je me retrouve avec une idée irréalisable...
Sauriez-vous comment je peux régler ce problème? Ou peut-être avez-vous une autre solution plus simple?
Merci de votre aide.
RE: Image du perso + équipement - Globe - 04-09-2007
Tu peux découper ton image et la foutre en tableaux.
RE: Image du perso + équipement - Kassak - 04-09-2007
Je veux faire un truc du genre aussi, et moi ce que je ferais, tout dabord avec des tableaux je ferais les cases, je les placerais ou je veux, et ensuite je met un background avec l'image du perso.
Sinon en attendant, gros flemmard que je suis, j'ia mis dans un coin les cases pour les equips alignées, avec dans chaque case vide, une armure grisée, un bouclier grisé etc..pour montrer qu'il n'y a rien.
RE: Image du perso + équipement - Sephi-Chan - 04-09-2007
Ton gabarit sera-t-il toujours le même ?
Si c'est le cas, tu peux facilement faire ton positionnement en CSS. Pour cela tu mets ton image dans un div, tu applique à ce div un position: relative; et tu mets chacun des emplacements d'objet dans un div, imbriqué dans le premier. Tu n'as ensuite plus qu'à leur appliquer position: absolute et jouer sur les proprieté left et top pour les mettre où tu veux.
Si le gabarit change selon la race/sexe, tu fais la même chose pour chaque, en changeant juste la class du div conteneur
Ainsi tu aura ça :
Code :
<div class="character-sheet-human">
<div id="slot-head">Tête</div>
<div id="slot-chest">Torse</div>
...
<div id="slot-legg-right">Jambe (droite)</div>
</div>avec un CSS genre :
Code :
.character-sheet-human {
position: relative;
background: url('character-sheet-background.png') #000;
}
.character-sheet-human div {
position: absolute;
}
.character-sheet-human #slot-head {
top: 54px;
left: 123px;
}J'espère t'avoir aidé, et si tu as des questions ou besoin d'aide n'hésite pas à demander.
Sephi-Chan
RE: Image du perso + équipement - trididinus - 04-09-2007
Merci bien!
Je testerai ca demain!
Je n'ai jamais essayé d'utliser le CSS donc je sais pas si j'y arriverai sans aide lol
Bonne nuit à tous
RE: Image du perso + équipement - Zboy74 - 04-09-2007
Salut,
C'est tout à fait possible de "mixer" plusieurs images ensemble avec la librairie GD. Tu crée d'abord ton canvas de travail, avec
Code PHP :
<?php
$personnage = imagecreatefrompng("personnage.png");
, où "personnage.png" est l'image du gabarit de ton personnage, en noir dans ton exemple. Après ca, tu va ajouter à cette image ton premier slot d'équipement, par exemple le casque :
Code PHP :
<?php
$casque= imagecreatefrompng("casque.png");
imagecopy($personnage ,$casque,$x,$y,0,0,50,50);
,avec $x et $y les coordonnées de la 2nde image (casque) par rapport à la 1ère (la silhouette du personnage), en partant du point en haut à gauche (0,0) de ladite 2nde image et en précisant la taille de ta 2nde image (50,50 par exemple). Désormais ton image originale contient, par dessus la silhouette, le slot pour le casque, et s'appelle toujours $personnage. OK?
Avec une simple boucle, tu peut rajouter autant d'images que tu veux à ta silhouette, en faisant un imagecopy à chaque fois. A la fin de ton traitement, tu transforme ta variable $personnage en fichier image avec imagepng($personnage,$chemin);
Moi je m'en sert pour créer à la volée des halos de lumières pour chaque personnage sur une carte, ca marche très bien, mais bon honnêtement pour ce que tu veux faire la méthode de Sephi-Chan est largement plus simple, plus rapide et surtout moins gourmande pour le serveur... en plus, le fait que chaque entité (tête, torse, etc...) ait sa propre balise HTML, c'est beaucoup mieux pour les exploiter par la suite (rollover, changement d'équipement en Javascript, etc...)
RE: Image du perso + équipement - Sephi-Chan - 04-09-2007
Oui, c'est carrément plus lourd de faire ça avec GD.
Il est clair de manière générale, mieux vaut donner la tâche de présentation au client qu'au serveur. D'autant que le CSS favorisera l'accessibilité du site et surtout, facilitera la mise en place de petits bonus comme des rollovers, qui sont souvent utilisés pour afficher les caractéristiques des objets au survol.
Sephi-Chan
RE: Image du perso + équipement - trididinus - 05-09-2007
Haaa dacord..
En fait, a chaque fois que je rajoutais un lot d'images, je transformais ma variable en fichier mage. Je suppose que c'est celà qui n'allait pas.
Et oui je voulais faire l'inventaire en une seule image, mais je me rend compte maintenant que le serveur va souffrir...
Sinon à part ca, j'utilise pour mon inventaie le système du Drag and Drop.
Donc ca va rester très fonctionnel et dynamique.
Merci à tous!
RE: Image du perso + équipement - Zboy74 - 05-09-2007
Raison de plus, pour le drag & drop, d'utiliser différentes balises avec placements en CSS etc... au lieu d'une seule image, où il faudrait genre regarder les coordonnées de la souris lors du drop, et encore, suivant le navigateur et la réso de l'écran, ça m'avait l'air impossible à faire de cette façon.
RE: Image du perso + équipement - trididinus - 05-09-2007
Non le Drag and Drop est déjà réalisé est opérationel qu'importe la méthode utilisée pour générer leséquipements. Donc à ce niveau là pas de problème.