[Réglé] Image du perso + équipement

[trididinus]

Toujours pour mon inventaire, je voudrais afficher les équipements portés par le personnage sous la forme d'une seule image :


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.

[Globe]

Tu peux découper ton image et la foutre en tableaux.

[Kassak]

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.

[Sephi-Chan]

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

[trididinus]

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

[Zboy74]

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

[Sephi-Chan]

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

[trididinus]

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!

[Zboy74]

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.

[trididinus]

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.