RESSOURCES SCRATCH DATA – Moteur animations

Crée ton moteur d'animation !!

Pour commencer, tu peux suivre ce tuto pour créer la base de ton moteur d’animation !!

Difficulté

 1/5

Dans cette section, tu vas programmer le changement d’animations d’un personnage !

Tu peux regarder à l’intérieur de ce projet exemple pour t’aider.

Créer les graphismes du personnages et programmer ses déplacements

On va commencer par récupérer les graphismes pour notre animation.

Commence par choisir la sprite sheet du personnage que tu souhaites.

Une Sprite sheet est une image qui contient toutes les Sprites d’une animation !

Tu peux trouver des sprite sheet sur des sites comme spriters-ressource ou OpenGameArt ou encore en ajoutant les mots-clés « sprite sheet » dans ta recherche Google.

Pour cet exemple, on a pris la sprite sheet d’Abra. Tu peux la trouver sur cette page.

Pour découper les sprites que l’on souhaite, on va utiliser le logiciel Sprite Splitter.

Ouvre Sprite Splitter et sélectionne les images qu’il te faut.

Tu peux le télécharger en cliquant ici, s’il n’est pas déjà installé. Une fois téléchargé, il faut l’extraire en faisant « Clic droit » -> « Extraire » puis cliquer sur le .exe !

On obtient des images séparées de nos animations.

Tips : on a pris une seule animation de marche de profil. On orientera le personnage dans le code ensuite.

Tu peux ensuite créer un nouveau sprite dans Scratch et importer tous tes costumes !

On va maintenant renommer chacun de nos costumes pour y accéder facilement depuis le code.

Ici, on a choisi la nomenclature :

« <animation>-<direction>-<numéro de l’animation>«

Pour cet exemple, on a 3 animations :

une marche de dos
une marche de face
une marche de profil

On ajoute ensuite les déplacements du joueur !

Programmer le changement d'animations

On va créer une première boucle ‘répéter indéfiniment‘ pour l’axe haut-bas :

Si on appuie sur la flèche du haut :
- on bascule sur le premier costume de notre animation ‘marche de dos’ et tant que l’on est pas sur le dernier costume de cette animation (le 12e costume du sprite) on passe au costume suivant

Si on appuie sur la flèche du bas :
- on bascule sur le premier costume de notre animation ‘marche de face’ et tant que l’on est pas sur le dernier costume de cette animation (le 8e costume du sprite) on passe au costume suivant

On va créer une seconde boucle ‘répéter indéfiniment‘ pour l’axe droite-gauche :

Si on appuie sur la flèche de droite :
- on oriente le personnage vers la droite
- on bascule sur le premier costume de notre animation ‘marche de profil’ et tant que l’on est pas sur le dernier costume de cette animation (le 4e costume du sprite) on passe au costume suivant

Si on appuie sur la flèche de gauche :
- on oriente le personnage vers la gauche
- on bascule sur le premier costume de notre animation ‘marche de profil’ et tant que l’on est pas sur le dernier costume de cette animation (le 4e costume du sprite) on passe au costume suivant

Pour éviter des petits bugs d’affichage d’animations quand on passe des flèches gauche-droite aux flèches haut-bas, on va tout mettre dans un seul ‘répéter indéfiniment’ !

LA BASE DU JEU :

Projet exemple

Créer ses graphismes et programmer ses déplacements
Programmer le changement d’animations

Difficulté

 4/5

Dans cette section, tu vas programmer le changement d’animations d’un personnage !

Tu peux regarder à l’intérieur de ce projet exemple pour t’aider.

Créer les graphismes du personnages et programmer les déplacements