8 Jan, 2014

Mon incroyable banquet : les avatars

Développement d'un système de création d'avatars dans un projet CakePHP
Attention, cet article a désormais quelques années… Il se peut que toutes les informations qu’il contient ne soient plus pertinentes.

Récemment chez Web And Cow, nous avons réalisé une application web sous forme de jeu concours pour l’asssociation Bleu-Blanc-Coeur. Le projet s’appellait « Mon Incroyable Banquet » et était d’envergure nationale. Chaque participant devait réussir à réunir 100 personnes à son banquet (amis facebook, etc) pour participer à un tirage au sort final. Le gagnant se faisait offrir son Incroyable Banquet par l’association Bleu-Blanc-Coeur et cuisiné par le chef Emmanuel Picard.

Dans le cadre de ce grand projet, nous avons été amené à réaliser quelques fonctionnalités techniques originales. Cet article fait donc partie d’une série de plusieurs explications des mécanismes du jeu.

–  Les Avatars

A son inscription, chaque participant, qu’il soit créateur d’un banquet ou invité, devait créer son avatar. Il avait à sa disposition une palette de combinaisons pour différentes parties du corps. Du visage au buste en passant par les lunettes, l’utilisateur pouvait configurer son personnage avec un choix de couleurs pour chaque élément. Dès que son image était prête et validée, elle était générée.

Fig. 1 : Génération d’un avatar

Nous avons donc commencé par récupérer toutes les différentes parties du corps de l’avatar en images séparées. Cette étape était un peu longue et répétitive mais nécessaire. Afin d’avoir le moins de problème possible, nous les avons découpés en images de même largeur et de même hauteur (1). Ensuite nous avons créé un algorithme qui générait ces morceaux d’images dans toutes les couleurs d’une palette définie au préalable (2). Ces images étant au format .png, il fallait donc faire attention à bien conserver la transparence.

Fig. 2 : Exemple de rendu de la couleur des avatars

Voici la fonction que nous avons utilisé pour réaliser ce traitement :

–  La génération de l’avatar

Pour la gestion de l’avatar, nous avons donc développé un système permettant d’afficher, de façon superposée, l’ensemble de ces images. La propriété CSS z-index a donc forcément été beaucoup utilisée. Ensuite, lorsque l’utilisateur modifiait une partie de son avatar, un peu de javascript était utilisé pour venir modifier l’attribut href de l’image concernée.

Une fois l’avatar validé par l’utilisateur, il fallait réaliser la « fusion » de toutes ces parties de l’avatar pour créer l’image finale. Nous avions préalablement convenu d’un nommage strict des fichiers images des avatars, de la façon suivante :
avatar _ visage1 _ cheveux3brun _ lunettes13blanc _ barbe4brun _ buste11blanc.png

Et voici ci-dessous le code de la « fusion » :

Nous avons donc créé un composant Image pour CakePHP qui nous facilite cette fonctionnalité. L’image générée pouvait servir pour un ou plusieurs profil puisqu’elle n’était pas créée une nouvelle fois si elle existait déjà.

Fig. 3 : Exemple d’avatar généré

Il fallait aussi faire attention à l’ordre d’ajout des images dans le tableau. Comme les images se superposent, une partie du corps de l’avatar pouvait passer par dessus une autre si l’ordre était mauvais (ex: La barbe en dessous du visage). Les avatars étaient générés au format .png, il était donc nécessaire de garder la transparence malgré cette association d’images.

C’est la fin de ce deuxième article de la série sur l’Incroyable Banquet de Bleu-Blanc-Coeur.

#avatars #Bleu-Blanc-Coeur #CakePHP