Apprendre à coder avec Scratch : un générateur d'avatar

Créer un Avatar est l’un des thèmes proposés pour la première semaine du #ScratchMonth.

Mon projet : Avatar Creator

Une vidéo explicative

Je ne sais pas dessiner… alors j’ai puisé dans la bibliothèque des sprites pour créer un projet autour de ce sujet. Pour quelqu’un qui est à l’aise en dessin la technique reste la même. A la place d’importer un sprite il suffit d’en dessiner un en mode Vectoriel pour pouvoir dissocier les différentes parties, et les modifier.

• Dans la bibliothèque, sélectionnez le sprite Harper.
• Représentant une petite fille, il est pourvu de trois costumes facile à modifier et à habiller. Ce sprite nous servira de sprite de référence

Il sera supprimé plus tard.

• Positionnez-le à l’endroit désiré sur la scène.
• Bloquez sa position avec le bloc aller à x: () y: (). 

Vos coordonnées peuvent être différentes des miennes.

 

 

 

1. Le corps/ mannequin

Pour commencer, nous allons créer un sprite Corps qui permettra à l’utilisateur de choisir le personnage qu’il souhaite utiliser. Tel un mannequin, il n’aura ni cheveux, ni vêtements.

Dans la fenêtre des sprites, faites une copie de Harper :

• Un clic droit sur la vignette Harper.
• Sélectionnez dupliquer?
• Un deuxième sprite identique est créé avec le programme.
• Nommez ce sprite Corps.

 

Maintenant, nous allons supprimer les cheveux des trois costumes du sprite Corps.

• Ouvrez la palette graphique en sélectionnant l’onglet Costume
• Avec la souris et l’outil Sélectionner, faites un cadre de sélection autour de la tête.
• Cliquez sur Dégrouper. Les cheveux sont désormais dissociés du reste de la tête et vous pouvez les supprimer.

 Faites la même chose pour les deux autres costumes. 

Un sprite va être utilisé pour sélectionner l'un des trois corps. Chaque fois que ce sprite est cliqué, il entraîne le changement de costume. Ce sprite aura pour nom Clic corps.

Pour créer le sprite Clic corps :

• Créer un nouveau sprite en sélectionnant Peindre.
• Dans la palette graphique, avec l’outil Rectangle et l’outil Texte, dessinez une étiquette.
• Nommez ce nouveau sprite Clic corps

 

Le programme pour modifier le corps 

Quand le sprite Clic corps est sélectionné avec la souris, un message Corps est envoyé. Ce message est utilisé pour changer de costume.

 

Pour tous les autres éléments qui peuvent être modifiés, nous allons suivre cette procédure 

• création d'un sprite pourvu de plusieurs costumes
• création d'un sprite cliquable pour modifier les costumes

2. Les cheveux 

Le sprite des cheveux est créé à partir du sprite Harper.

• Dupliquez le sprite Harper.
• Ouvrez la palette graphique en sélectionnant l’onglet Costume.
• Avec les outils Sélectionner – Dégrouper supprimez le corps et le visage pour ne conserver que les cheveux.
• Nommez ce sprite Cheveux.

Notre émulateur d’avatar ne possède pour le moment que trois coupes de cheveux. Nous allons en créer plus. Les trois coupes de cheveux vont être dupliquées et leur couleur va-t-être modifiée.

Pour créer un nouveau costume :

• Faites un clic droit sur la vignette de la coiffure que vous souhaitez dupliquer
• Modifiez la couleur des cheveux de ce nouveau costume
• Procédez de la même manière pour créer des costumes supplémentaires.

Sur le modèle du sprite Clic corps, créez un sprite Clic cheveux. Il sera utilisé pour modifier la chevelure de notre avatar.

Le programme du sprite Clic Cheveux est construit de la même manière que le programme de sprite Clic corps. Pour modifier les cheveux, le message Cheveux est envoyé.

Le programme du sprite Cheveux est quant à lui construit de la même manière que celui de sprite Corps.

Vous pouvez désormais supprimer le sprite Harper!

 

3. Habiller le mannequin

Pour habiller le mannequin, vous pouvez utiliser certains des sprites disponibles dans la bibliothèque dans la catégorie Fashion. 

Dans mon projet, l'Avatar peut porter : une robe (Dress), un TShirt (Shirt), un Pantalon (Pants). Ainsi que des accessoires : des lunettes (Glasses) et un nœud (Bowlie).

Bien évidemment il n’est pas forcément très esthétique de porter une robe, un pantalon et un T Shirt en même temps. Mais pourquoi pas… Pour éviter cette superposition, pensez à insérer pour chacun des sprites un costume vierge.

• Dupliquez la vignette d’un costume
• Supprimez l’élément graphique présent sur la toile

 

Tout comme pour les cheveux, vous pouvez dupliquer les costumes de ces différents vêtements et accessoires. Et modifier leur aspect graphique pour disposer d’un plus grand choix.

 

Le programme

Pensez à placer manuellement le vêtement ou l’accessoire à l’endroit désiré sur l’avatar. Et à bloquer la position.

Voici la position du sprite Robe pour mon projet et son programme d’initialisation. Lorsque l’exécution du programme commence, le spritre Robe s’affiche sur le costume vierge.

 

L'arrière-plan

Vous pouvez utiliser plusieurs arrière-plan dans votre simulateur d'Avatar. Ces arrière-plans peuvent provenir de la bibliothèque de Scratch, être dessinés, importés depuis votre ordinateur.

Tout comme pour les costumes et accessoires, pensez à insérer un arrière-plan vierge.

Pour modifier l'arrière-plan, c'est-à-dire pour passer d'un arrière-plan à l'autre, il suffit de cliquer dessus avec la souris.

Vous pouvez utiliser mon projet, le modifier, vous en inspirer pour créer votre propre simulateur d'Avatars. 

J'ai utilisé un personnage issu de la bibliothèque mais vous pouvez dessiner votre propre mannequin. Votre simulateur peut être un simulateur animalier. Ou même un simulateur d'Avatars de gâteaux, de maisons, de voitire etc. Tout est possible.

Une seule limite ... l'imagination.