Pour commencer, tu peux suivre ce tuto pour créer la base de ton moteur d’animation !!
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.
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 :
On ajoute ensuite les déplacements du joueur !
On va créer une première boucle ‘répéter indéfiniment‘ pour l’axe haut-bas :
On va créer une seconde boucle ‘répéter indéfiniment‘ pour l’axe droite-gauche :
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’ !
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.
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 6 animations :
On ajoute les déplacements du joueur !
On crée 3 variables pour connaître l’état des animations. On a besoin de :
On va créer un nouveau bloc pour changer nos animations grâce à nos variables.
Il prendra comme paramètre :
Si l’animation voulue est différente de l’animation actuelle, on va définir nos variables pour joueur l’animation souhaitée.
On va maintenant créer un dernier bloc ‘choix_costume’. Ce bloc va vérifier sur quelle touche on appuie pour définir les animations à jouer et exécuter le bloc ‘changer_animation’ que nous avons créé juste avant.
Il nous reste seulement à gérer les moments où on n’appuie sur aucune touche !
Comme on en a une pour chaque orientation, on va regarder notre variable ‘anim‘ pour savoir sur quelle animation on était juste avant de s’arrêter et basculer sur la bonne animation !
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.
On commence par récupérer les graphismes pour notre animation.
Choisis 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 6 animations :
Qu’est-ce qu’une HitBox ?
Il s’agit d’un sprite invisible qui va gérer les mouvements et les interactions avec le clavier. Il nous permet de détecter les collisions facilement. On dira ensuite à nos graphismes de suivre cette boîte.
Commence par créer un nouveau sprite « HitBox ».
Oon va créer notre propre bloc Scratch. Pour cela, il faut aller dans la catégorie Ajouter blocs et cliquer sur Créer un bloc :
Le petit bloc déplacements permet de lancer le script que nous allons coder dans le gros bloc déplacements.
On va créer deux variables :
On se servira ensuite de ces variables pour connaître l’état des déplacements du joueur !
On va ensuite coder les déplacements haut-bas :
Avec ce code, si on maintient la touche haut appuyé, le personnage ira de plus en plus vite vers le haut. Pareil pour la touche bas. Et si on n’appuie sur aucune de ces deux touches, on ajoute 0 à y.
On va donc ajouter une ligne de frottements pour ralentir les déplacements du personnage.
A chaque étape, on diminue yvel, afin de ralentir progressivement.
Multiplier par un nombre plus petit que 1 va diminuer la valeur.
On fait pareil pour les déplacements gauche-droite avec xvel.
Essaye de le faire seul pour voir si tu as compris !
On a donc le bloc suivant pour les déplacements de la HitBox :
Pour finir avec notre HitBox, on ajoute :
On commence par dire à notre sprite qui contient nos graphismes d’aller tout le temps à notre HitBox.
On crée 3 variables pour connaître l’état des animations. On a besoin de :
On va créer un nouveau bloc pour changer nos animations grâce à nos variables.
Il prend comme paramètre :
Si l’animation voulue est différente de l’animation actuelle, on va définir nos variables pour jouer l’animation souhaitée.
On va maintenant créer un dernier bloc ‘choix_costume’. Ce bloc va regarder l’état de notre HitBox pour définir les animations à joueur et exécuter le bloc ‘changer_animation’ que nous avons créé juste avant.
Il nous reste seulement à gérer les moments où on n’appuie sur aucune touche !
Comme on en a une pour chaque orientation, on va regarder notre variable ‘anim‘ pour savoir sur quelle animation on était juste avant de s’arrêter et basculer sur la bonne animation !
Il ne nous reste plus qu’à exécuter notre bloc !!
Regarde les projets exemples pour trouver des idées et utilise les projets tuto pour reproduire des comportements dans ton jeu !
Sur ce studio, tu trouveras plusieurs tutos pour créer les comportements de ton jeu.
Maintenant que la base de ton jeu est finie, tu vas pouvoir améliorer ton jeu en ajoutant d’autres animations ou d’effets !!
Voici une liste d'idées :
Pour savoir comment faire, rendez-vous sur la page Tuto Scratch !