personnalisation du visage et expressions

[Ter Rowan]

coucou

je me pose la question suivante :

supposons un jeu avec création d'avatar avec les fonctionnalités suivantes :

je choisis des morceaux du visage (nez, bouche, coupe de cheveux)
Je peux étirer ou écraser dans certaines limites ces morceaux (ex : j'agrandis les oreilles)
Je peux choisir la couleur de la peau / des cheveux

... du classique quoi

D'un point de vue création d'image, je pense à une banque d'image correspondant aux morceaux du visage auxquelles on applique des transformations (longueur, largeur, couleur)

mais ... comment faire pour les expressions ?

ex : le type est :
- sûr de lui
- confiant
- concentré
- paniqué
- comme un troll face à la théorie de la relativité générale
- avec un oeil au beurre noir

Comment vous imaginez cela ? Doit on créer autant d'image que de croisement ("expression" , "morceau du visage") ? Y a t il d'autres méthodes ?

Merci de votre éclairage !

[Damocorp]

Si je devais faire un truc pareil, j'en parlerai d'abord au graphiste qui te conseillera surement bien.
Et pour tester je commencerai par jouer sur le width et le height. Tant que cela ne déforme pas l'image ça doit bien jouable et c'est facile à mettre en place. Suffit de sauvegarder les infos en BDD concernant le width et le height :

Voici un exemple : Test bouche

Le tout en png transparent. Et position en css dans un bloc.
le truc chiant c'est qu'en jouant sur cela, ca va affecter la position du CSS puisque l'image s'agrandit, faudra la mettre aussi dans la balise.
Donc le css de manière général, et tout ce qui est affecté ( width, height, position css ), généré directement via php dans la balise qui affiche l'image et la positionne.

[Maks]

Si je devais faire quelque chose comme cela, j'utiliserais canvas

[Ter Rowan]

Merci pour ces premières réponses

mais ce que vous me décrivez concerne uniquement la taille de l'image et correspond à ma première partie (où je dis la même chose que toi (étirer ou écraser une image avec longueur, largeur)

ma question est plutôt sur les métamorphoses du visage concerné :

comment faire un oeil explosé ? un nez qui saigne ? une bouche qui rit ? (width et height ne suffisent pas)

et le sujet est bien graphique effectivement (d'où sa position) plus que javascript / css, comment concevoir tout cela ? quelles sont les ressources nécessaires ?

[niahoo]

Savoir dessiner ?

[Ter Rowan]

Savoir dessiner ?

...

dans tous les cas

ma question est savoir dessiner quoi

grosso mode est ce qu'il y a des méthodes / algo de transformations connus des graphistes ou est ce qu'il faut faire des planches avec toutes les combinatoires possibles

genre :

avec une transformation (à étudier si width / height suffisent, on l'appellera [rond vers bridé]) j'arrive en partant d'un oeil rond à créer un oeil bridé

maintenant, il me faudra certainement une ressource dessinée pour passer d'un oeil rond à un oeil rond explosé.

est ce la même transformation [rond vers bridé] qui, partant d'une ressource oeil rond explosé amène à oeil bridé explosé ? idem pour la surprise, les pleurs, etc... ou bien ces transformations seront trop crades et faut il dessiner toutes les configurations ?

[niahoo]

Selon moi savoir dessiner et dessiner toutes les configurations nécessaires.

Ensuites si tu bosses en vectoriel, que tu décomposes ton œil en plusieurs zones, genre paupière-haut-haut, paupiere-haut-bas, cils, blanc-haut-haut, blanc-haut-bas, blanc-iris, iris, pupille, et le reste du bas (2 zones paupieres et 2 zones blanc aussi) alors tu définis un œil. Ensuite pour avoir un œil bridé ou un œil européen tu peux définir des tailles de zones en hauteur.

Et si tu veux définir un oeil explosé tu peux appliquer les transformations suivantes : zones médianes des paupières qui grandissent en hauteur, zone blanche qui réduit à fond, toutes zones paupières qui bleuissent. Et tu peux appliquer ça a ton œil bridé ou européen ça devrait marcher pareil.

Si tu souhaites faire de l'animation ça peut être un bon concept. Sinon mieux vaut dessiner tous les cas de figure, ça apportera un peu de variété.

[Ter Rowan]

Si tu souhaites faire de l'animation ça peut être un bon concept. Sinon mieux vaut dessiner tous les cas de figure, ça apportera un peu de variété.

certes, mais ça coûte plus cher :langue2:

[Damocorp]

ben faut ce qu'il faut hein ^^

[OurPleasure]

J'avais travaillé sur un cas comme ça quand j'étais Lead Artiste sur un ancien projet.

Les histoires de scaling c'est bien tant que tu impose une limite et le plus simple pour l'utilisateur est de lui donner des choix limités. J'entends par là de lui proposer des tailles spécifiques comme minuscule, petit, moyen, normal, gros, énorme et d'éviter les pourcentages. Sinon on se retrouve avec des customisation dans le genre de Dragon Age et on passe 35 minutes à faire son avatar pour au final se dire "bon j'ai plus envie et plus le temps de jouer là ...".

Sinon, pour en venir à ce qui nous intéresse, les expressions.
La solution la plus simple et selon moi la meilleures est d'utiliser la rotation et la position tout simplement.
Voici un petit exemple illustré dans lequel j'ai utilisé les mêmes sourcils et 2 types de bouches auxquels j'ai appliqué des rotations :



Ensuite pour les ajouts tels que des blessures, accessoires, oeil mutant, cicatrices ... etc.
Il faut employer la méthode du postiche et en créer des génériques adaptables à tous les cas. C'est d'ailleurs la partie la plus difficile ou la plus frustrante car cela peut limiter le champ des possibles. Et oui, parce que si on fait un oeil de serpent, la paupière humaine ne collera pas. Il faudra donc refaire toutes les paupières adaptée au serpent ou alors ne permettre qu'un type de paupière pour le serpent qui sera tout le temps compris avec l'oeil de serpent.

Et donc un exemple de postiches (j'en ai pas fait des tonnes j'ai fait ça vite fait pour mieux illustrer) :



Évidemment, tout ceci est à combiner. Ensuite, si tu peux repérer les couleurs de peau par exemple, ce serait vraiment bien pour que les postiches s'adaptent en fonction.

Voilou avec ça tu devrais pouvoir presque tout faire. :roi: