Discussion :

[Sereine]

Bonjour à tous.

Je développe tranquillement un petit jeu web (dans le but de m'améliorer en php, et pourquoi pas lancer un projet plus sérieux à long terme)

Donc, j'ai créer à peu près correctement les systèmes de base, pour concrétiser le tout, je met en place l'aspect 'graphique' du site (je parle donc d'harmoniser mon code et de mettre en place la css).

Mon petit jeu est tout simple, cependant, lors de la création du personnage, il y a plusieurs façons possible de mettre en place un avatar personnalisé du personnage. (et je manipule absolument pas l'html5 )

Donc, d'abord, au plus simple:
- Proposer quelques images de personnages différents, niveau personnalisation: zéro ..

Après j'imagine qu'il est possible de mettre en base plusieurs type de yeux, de tête, de nez, ect .. et de créer une image à partir du choix de chaque partie du personnage, puis d'enregistrer celle ci en base?

Je compte partir là dessus, mais, y a t'il d'autres moyens permettant de pousser l'idée plus loin? (html5? mais si c'est le cas, n'étant pas du tout initié là dessus, me faudrait un bon gros tuto x) )

Voilou, merci d'avance à ceux qui voudrait m'aider

[cristobal.dupasquier]

Bonjour,

Je pense que ce que tu veux faire est possible via la balise canvas de HTML5, en y ajoutant un peu de JQuery.

Pour info sur la balise : http://www.html5canvastutorials.com/

[Invité]

Bonjour,

Après j'imagine qu'il est possible de mettre en base plusieurs type de yeux, de tête, de nez, ect .. et de créer une image à partir du choix de chaque partie du personnage, puis d'enregistrer celle ci en base?

C'est tout à fait possible.
Au niveau de l'affichage :
des images .png (à fond transparent, donc) superposées.

Soit via <canvas>, soit avec des <div> :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div id="avatar">
	<div id="avatar-tete"></div>
	<div id="avatar-cheveux"></div>
	<div id="avatar-yeux"></div>
	<div id="avatar-nez"></div>
	<div id="avatar-bouche"></div>
	<div id="avatar-menton"></div>
	<div id="avatar-barbe"></div>
	........
</div>

Avec la div "avatar" en position:relative;
et les autres div en position:absolute;