JeuWeb - Crée ton jeu par navigateur
Système Création d'Avatar - Version imprimable

+- 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 : Système Création d'Avatar (/showthread.php?tid=4411)

Pages : 1 2 3 4 5


Système Création d'Avatar - Level - 15-10-2009

Bonjour,

Voilà je cherche actuellement un système ou du moins des aides afin de créer un système de création d'avatar.
Un visage pour être plus clair.
Afin que les joueurs puissent avoir le visage qu'il veulent dans mon jeu.

* Couleur de peau, yeux, bouche, équipement faciale etc. *

Mais pas moyen de mettre la main sur un lien d'aide..
Quels sont les langages nécessaires pour confectionner ça?

Merci. =)


RE: Système Création d'Avatar - niahoo - 15-10-2009

vite fait je te donne des langages :

php et la ibrairie GD pour confectionner les images. ya du boulot a faire dans le code pour que ce soit classe, mais ensuite ça te sort un.png ou .jpg nickel.
il te faudra programmer des formes (visages, sourcils, etc..) de base et les proposer en choix à assembler.

sinon tu as SVg + javascript.
Là c'est plus simple, tu prends inkscape et tu dessines toutes tes formes de base (pareil, visages, bouches, sourciles).
et tu superpose le tout dans ton fichier svg en les répartissant dans des calques (le SVg si tu connais pas c'est des balises)

la balise <g> sert à faire des groupes (calques)
genre toutes les bouches (je les fait avec un rectangle pour simplifier) :
Code :
<g id="bouches">
    <rect id="bouche_1" name="grandebouche" x="12" y="34" height="5" width="9" fill="blue" stroke="black" stroke-width="1"/>
    <rect id="bouche_2" name="bouchefine" x="12" y="34" height="3" width="2" fill="blue" stroke="black" stroke-width="1"/>
    <rect id="bouche_3" name="petitebouche" x="12" y="34" height="1" width="6" fill="blue" stroke="black" stroke-width="1"/>
</g>

ensuite il te faut une interface javascript pour n'afficher qu'un seul élément par calque et changer la couleur de remplissage des formes (attribut fill) et des traits (stroke).

ensuite ça t'enregistre une liste de choix d'éléments et leur couleurs, à partir desquels tu peut recréer l'image svg en php (en utilisant domdocument et en chargeant le même svg avec tous les éléments) en créeant un nouveau svg en n'y mettant que les éléments choisis.

ensuite, un dossier avatars sur ton serveur ou tu stocke le .svg ainsi crée. (avec $xml = new domdocument();
///tu crées le svg et à la fin tu le sauvegarde comme ça:
$xml->save("/svg/".$idDuPerso.".svg");

je ne sais pas encore les transformer en jpeg.,
par contre tu peux en attendant ouvrir les svg de ton dossier avec inkscape et les exporter en image manuellement.

et ensuite sur ton site pour afficher un svg, c'est une balise <embed> ou <object>


PS le svg c'est du simple xml.


RE: Système Création d'Avatar - Argorate - 15-10-2009

Y a pas besoin de ce casser la tete autant que ça.
Ce qu'il faut (c'est justement là où ça bloque 95% du temps) c'est avoir les graphismes corespondant: une image pour chaque variante. (c'est a dire, une image avec les yeux bleu, les yeux vert... etc puis les cheveux brun, blond... etc)
Ensuite c'est facile comme bonjour, il suffit juste de superposer le tout pour avoir le resultat définitif. (en ayant pris soin de faire des images de meme taille et qui s'embriquent bien les une par rapport aux autres)
Ensuite un simple code javascript changeant le src d'une <img> te permettra de faire varrier au joueur les parties qu'il souhaite changer...


RE: Système Création d'Avatar - niahoo - 15-10-2009

Tiens je vais quand même développer l'appli SVG ce soir, je la ferai tourner.
Avec de simple images c'est sympa, mais par exemple tu ne pourra pas proposer à ton joueur de personnaliser les couleurs des éléments. Bon, en mettant beaucoup de choix ça reste sympa et pas long à faire.


RE: Système Création d'Avatar - Argorate - 15-10-2009

La couleur des éléments? je ne vois pas le problème.
Pour mon jeu, on peut choisir la couleur des cheveux, vetements, de la peau... etc


RE: Système Création d'Avatar - niahoo - 15-10-2009

Ben comment tu as fait ?


RE: Système Création d'Avatar - Argorate - 15-10-2009

Je me suis peut etre mal exprimé la premiere fois, je te la refait Smile

J'ai une image de cheveux pour chaque couleur, mais avec rien d'autre présent sur l'image (il n'y a que les cheveux et du transparent). idem pour chaque élément. Ensuite je les empiles les un sur les autres. Le transparent laissant les images du dessous s'imbriquer avec celle du dessus...

Mieux? Smile


RE: Système Création d'Avatar - niahoo - 15-10-2009

Ah oui oui ok, et c'est donc ce que je te disais, si le mec veut ses yeux en #ff5526 il peut pas si tu ne l'a pas prévu. ceci-dit je chipote un peu, c'est peut-être plus facile de commencer avec des images.


RE: Système Création d'Avatar - Argorate - 15-10-2009

Ah, effectivement, je pensais pas que quelqu'un voulait pousser le details a ce point là ^^
Je pense que faire une version "yeux vert clair" et "yeux vert foncé" (voir une troisième intermédière, et ce pour chaque couleur) est deja emplement suffisant! L'oeil ne detectera pas la différence si on varrie la couleur pour chaque code Hexadecimal. :p

Moi je trouve que c'est s'enquiquiner pour des details qui au final ne seront pas flagrant. Maintenant, chacun fait comme il veux, si on decide que cette fonctionnalité est primordiale et doit etre développé au max, c'est effectivement peut etre sympa de faire une gestion dynamique des couleurs...


RE: Système Création d'Avatar - niahoo - 15-10-2009

Oui mais violet foncé avec des pupilles dorées et des sourcils blancs !!
sinon, sans déconner, ill est en ligne quelque part ton créateur d'avatar ?