Tamagotchi Chat
Dans ce projet, tu vas crĆ©er ton propre petit chat virtuel, un peu comme un Tamagotchi. Il pourra manger, se faire caresser, danser, et mĆŖme dormir quand vient la nuit.
On va tout faire pas Ć pas, du dessin sur Piskel jusquāau code sur Scratch.
Dans cette page tu trouveras :
CrƩe ton chat en Piskel
Avant tout, on va dessiner ton chat en pixel art. Tu vas dessiner les diffƩrents costumes du chat. Assure-toi que le fond soit transparent.
Dessiner un premier chat avec Piskel
Pour commencer, rends-toi sur le site piskelapp.com et clique sur le bouton Ā«Ā Create SpriteĀ Ā» pour ouvrir un nouvel espace de dessin.
Dessine ton chat, de la tĆŖte aux pattes. Tu peux lui faire de grandes oreilles, une queue rigolote ou des moustaches torduesā¦ fais-toi plaisir !
Mais attention : ne fais pas trop de dƩtails, car tu vas devoir faire plusieurs versions du chat pour les animations.
Dessiner un nouveau costume du chat avec Piskel
Quand ton dessin est prĆŖt, duplique-le plusieurs fois dans Piskel. Tu vas crĆ©er plusieursĀ costumesĀ (ou animations) :
- normal : ton chat calme, posƩ.
- miam : il ouvre la bouche pour manger.
- content : il sourit ou ferme les yeux de bonheur.
- danse1 et danse2 : copie le dessin et retourne-le horizontalement (effet miroir) ā Ƨa donnera lāillusion quāil bouge les pattes.
- dormir (bonus) : il ferme les yeux.
Exporter ton chat (format GIF)
Quand tu as fini un dessin, clique sur le bouton Ā«Ā ExportĀ Ā» en haut Ć droite. Choisis le format Ā«Ā GIFĀ«Ā .Ā TĆ©lĆ©charge le fichier en cliquant sur le bouton Ā«Ā DownloadĀ Ā» en bas !Ā
Donne-lui un nom facile Ć reconnaĆ®tre comme Ā«Ā Tamagotchi.gifĀ Ā»
Quand tu as fini un dessin, clique sur le bouton Ā«Ā ExportĀ Ā» en haut Ć droite. Choisis le format Ā«Ā PNGĀ Ā» (si tu nāas quāun seul dessin ou Ā«Ā GIFĀ Ā» si tu as plusieurs images pour une animation). TĆ©lĆ©charge le fichier en cliquant sur le bouton Ā«Ā DownloadĀ Ā» en bas !Ā
Donne-lui un nom facile Ć reconnaĆ®tre comme Ā«Ā ChevalierBleu.pngĀ Ā»
Bonus – CrĆ©e le premier objet avec lequel ton chat va interagir
On va commencer par crĆ©erĀ laĀ nourriture (comme une pomme, un poisson ou un bol de croquettes).
Rajouter de l'ombre et de la lumiĆØre
Pour donner un effet plus rĆ©aliste Ć tes objets, tu peux leur ajouterĀ des ombres et de la lumiĆØre.
Dans Piskel, choisisĀ lāoutil āLumiĆØreāĀ :
- Clique normalement pourĀ Ć©claircirĀ une zone,
- MaintiensĀ CTRLĀ pourĀ assombrir.
Essaie dāimaginerĀ dāoĆ¹ vient la lumiĆØreĀ dans ton jeu, et ajoute les ombres du cĆ“tĆ© opposĆ©.
Ća donnera plus deĀ volume et de reliefĀ Ć tes objets, et ton Tamagotchi aura encore plus de charme !
CrƩe les autres objets avec lesquels ton chat va interagir
Tu peux maintenant crĆ©er lesĀ diffĆ©rents objetsĀ que ton chat utilisera pendant le jeu.
- une main pour le caresser,
- ou encore un poste de radio pour le faire danser.
Exporter ton chat
Quand tu as fini tes dessins, clique sur le bouton Ā«Ā ExportĀ Ā» en haut Ć droite. Choisis le format Ā«Ā PNGĀ Ā» ouĀ Ā«Ā GIFĀ Ā» (si ils sont tous sur le mĆŖme piskel).Ā TĆ©lĆ©charge le fichier en cliquant sur le bouton Ā«Ā DownloadĀ Ā» en bas !Ā
Costumes et Code du chat
Renommer les costumes de ton chat dans Scratch
Ouvre Scratch et importe ton GIF ou tes images en cliquant sur le petit chat bleu en bas Ć droite ā āImporter un spriteā.
Positionne ton chat au centre de lāĆ©cranĀ et ajuste sa taille.
Va dans Costumes et renomme-les tous proprement :
- normal
- miam
- content
- dance1
- dance2
- dormir (bonus)
Premier code du Chat
Puis, dans lāonglet Code du Chat, crĆ©e le programme de dĆ©part :
- Quand drapeau vert est cliquƩ
- Aller Ć x:0 y:0
- Basculer sur le costume [normal]
Ce code permet de placer ton chat au bon endroit et de commencer la jeu avec le bon costume.
Nourrir le chat
Pixellisation de la nourriture
Ton chat a faim, alors on va lui crĆ©er Ć manger !
Clique sur āChoisir un spriteā ā āNourritureā ā sĆ©lectionne par exemple une pomme.
Va dans lāonglet Costumes, clique sur āConvertir en bitmapā
3. Puis sĆ©lectionne la pomme et rĆ©trĆ©cis beaucoup la pomme et agrandis-la Ć nouveau.
ā Ća lui donne un effet pixelisĆ©, parfait pour ton jeu !
Tu peux choisir un nouveau sprite, comme des banane ou un autre aliment et les pixellisĆ© pour crĆ©er plusieurs aliments (poisson, banane, gĆ¢teauā¦).
Mouvement de la nourriture
Place la nourriture en bas de lāĆ©cran, sur un cĆ“tĆ©.
Puis dans le code de la pomme, fais en sorte que :
- au drapeau vert, elle aille Ć sa position de dĆ©part et sāaffiche.
On va crĆ©er le code qui s’applique lorsqu’on clic sur la pomme, Ć savoir aller jusqu’Ć la bouche du chat pour se faire mangerĀ :
- quand le sprite est cliquƩ
- Glisser jusquāĆ la position de la bouche du chat
- Puis se cacher (car elle est mangƩe)
- Attendre
- Ensuite, elle change de costume (pour prƩsenter une nouvelle nourriture)
- Elle revient Ć sa place de dĆ©part
- Et pour finir rƩapparaƮt !
Changer le costume du chat
Puis dans le code du chat, fais en sorte que son costume de chat change pour celui oĆ¹ il mange :
- au drapeau vert, rƩpƩter indƩfiniment
- si toucher par la [nourriture]
- Basculer sur [miam]
- Dire [ miam miam] pendant 2 secondes
- Basculer sur le costume [normal]
Et voilĆ , ton chat mange ! šŗ
Caresser le chat
Ajoute la main
Ton chat adore les cĆ¢lins, on va donc lui permettre dāĆŖtre caressĆ©.
Tu peux en dessine-en une toi-mĆŖme.
Ou ajoute un nouveau sprite d’un personnage qui aĀ une main visible. Puis dans les costume sĆ©lectionne l’entiĆØretĆ© du corps du personnage sauf la main et supprime le tout,Ā pour ne garder que la main.
Fais aussi le petit effet pixel (convertir en bitmap ā rĆ©trĆ©cir ā agrandir).
Le code la Main
Place-la oĆ¹ tu le souhaite sur l’Ć©cran.
Puis dans le code de la Main, programme :
- Quand on clique sur la main, elle glisse vers le ventre du chat,
- Elle bouge un peu Ć gauche et Ć droite (comme une vraie caresse)
- Elle attend entre chaque mouvement
- Puis elle revient Ć sa place.
Le code du chat
Puis dansĀ le code du chat, fais en sorte que son costume de chat change pour celui oĆ¹ il mange :
- auĀ drapeau vert, rĆ©pĆ©ter indĆ©finiment
- si toucher par la [main]
- Basculer sur [content]
- Dire [ Ron Ron] pendant 2 secondes
- Basculer sur le costume [normal]
Maintenant ton chat ronronne de plaisir !
Faire danser le chat
Ajoute l’instrument de musique
Ton chat sait danser !
Ajoute un sprite de radio ou instrument de musique.
Fais aussi le petit effet pixel (convertir en bitmap ā rĆ©trĆ©cir ā agrandir).
Le codeĀ l’instrument de musique
Place-la oĆ¹ tu le souhaite sur l’Ć©cran.
Puis dans le code de l’instrument, programme :
- Quand on clique sur l’instrument,
- Elle bascule sur le costume suivant (si il y a un autre costume)
- Elle envoie le message [DANCE]
- Elle attend 2 secondes
- Puis elle revient sur son costume de dƩpart.
Le code du chat
Puis dansĀ le code du chat, fais en sorte que son costume de chat change pour celui oĆ¹ il danse :
- Quand je reƧois [dance]Ā
- Basculer sur [dance1]Ā
- Attendre 1 secondeĀ
- Basculer sur [dance2]Ā
- Attendre 1 secondeĀ
- Basculer sur [dance1]Ā
- Attendre 1 secondeĀ
- Puis basculer sur [normal]
Et voilĆ , ton chat se dĆ©hanche sur la musique š¶
Bonus
CrƩe le mode jour/nuit
Ton chat doit aussi dormir de temps en temps.
Ajoute deux arriĆØre-plans : un clair (jour) et un sombre (nuit).
CrĆ©e un bouton āJour/Nuitā (par exemple un petit soleil/lune).
Dans son code du bouton :
Quand on clique dessus, il il bascule sur dāarriĆØre-plan suivant et sur le costume du bouton suivant.
DĆ©termine Ć©galement si tu veux commencer avec l’arriĆØre-plan de jour ou de nuit lorsque le drapeau vert est cliquĆ©.
Et voilĆ il y a un mode jour et nuit !
Avoir un sprite de chat endormi ou non
Pour pousser encore plus loin tu peut faire changerle costume de ton chat si c’est le jour ou la nuit! Pour se faire tu devra comparrĆ© le nom des arriĆØre plan et en fonction envoier unĀ message ājourā ou ānuitāĀ selon celui affichĆ©.
Dans le code du chat, ajoute :
- Quand je reƧois [jour] ā Basculer sur [normal]
- Quand je reƧois [nuit] ā Basculer sur [dormir]
Ton chat sāendort quand la nuit tombeā¦ et se rĆ©veille auĀ matin āļø
