Les membres ayant 30 points peuvent parler sur les canaux annonces, projets et hs du chat.
La shoutbox n'est pas chargée par défaut pour des raisons de performances. Cliquez pour charger.

Forum Casio - Actualités


Index du Forum » Actualités » TDM n°6 – Principes d'animation
Drak Hors ligne Rédacteur Points: 1925 Défis: 40 Message

TDM n°6 – Principes d'animation

Posté le 05/09/2018 18:00

Le Tuto Du Mercredi [TDM] est une idée qui fut proposée par Ne0tux. Un mercredi sur deux, nous postons un tutoriel sur l'Utilisation de la calculatrice, le Transfert, les Graphismes, la Programmation, ou encore la Conception de jeu. L'attendue sixième édition est arrivée !

Comment réaliser des sprites animés :

Niveau : ★ ★ ★ ☆ ☆

Ce tutoriel va vous expliquer des principes de base d'animation dans les jeux, avec ce qu'on appelle les spritesheets. À quoi servent-ils, comment les réaliser, et comment bien simuler un mouvement en quelques images ? Suivez le guide ! Ce tutoriel fait suite au TDM n°5 qui porte sur le dessin de sprites. Je vous conseille de le lire avant !

Partie I – Principes de base

Le principe du spritesheet hérite de celui de la chronophotographie. Les travaux d'Eadweard Muybridge font exemple en la matière. Il a fait partie des premiers photographes à initier le principe de la chronophotographie, qui a précédé l'invention du film. Ses travaux sur la capture du mouvement consistaient à photographier, à intervalle régulier, un corps qui se meut, afin de capturer chaque étape de ce mouvement. Une image vaut mieux qu'un long discours :

Chronophotographies d'un cavalier, réalisées par Eadweard Muybridge

Les spritesheets se présentent de la même manière. Ils contiennent les images de chaque élément animé à chaque étape de leur mouvement. Voici un fragment de spritesheet tiré du jeu Final Fantasy VI :


Il s'agira donc de dessiner chaque étape du mouvement de votre sprite. Il peut y avoir seulement deux images (deux frames) pour simuler un mouvement, mais vous pouvez en avoir davantage si vous souhaitez pousser les graphismes de vos jeux. Attention toutefois : des animations comme celles-ci sont difficiles à appliquer en Basic Casio. Vous pouvez essayer, mais vous serez peut-être déçus !

Partie II – Animer son sprite

Lancez le logiciel GIMP, ou un équivalent tel que Photoshop (je le répète, bordel, Paint n'est pas un logiciel équivalent).

Commencez par créer un nouvelle image (Ctrl + N) aux dimensions souhaitées ou bien ouvrez votre sprite s'il existe déjà (Ctrl + O). Dans mon cas, je vais reprendre mon petit Shovel Knight.


Une fois que vous avez votre sprite (voir TDM n°5), vous allez pouvoir commencer à l'animer. Je vais créer un calque différent pour chaque frame de l'animation, ce qui va nous permettre de travailler avec efficacité. Voici la fenêtre des calques :


Cliquez sur l'icône en bas à gauche de l'image pour créer un nouveau calque vide. Vous pouvez aussi (et je trouve ça plus pratique, même) dupliquer le calque actif. Cliquez sur l'icône de duplication du calque (la cinquième icône en partant de la gauche dans l'image ci-dessus). Modifiez l'opacité pour voir le frame précédent et visualiser les pixels différents entre deux frames. Vous pouvez aussi cliquer sur l’œil à gauche de chaque calque pour les masquer/afficher. Un cliquer-glisser vous permet d'en modifier l'ordre.

Dans mon cas, je veux faire marcher mon personnage. La partie haute du corps ne bougera pas, je vais juste la décaler d'un pixel vers le haut pour simuler le mouvement du haut du corps pendant la marche. Pour cela, je réalise une sélection (R) de cette partie pour la couper/coller (Ctrl + X / Ctrl + V) et la décaler vers le haut.


Avec l'outil crayon (réglé à 1 pixel, appuyez sur X pour alterner entre le noir et le blanc), j'efface et je redessine les pieds à des positions différentes. Si vous avez du mal à dessiner votre animation, n'hésitez pas à faire le mouvement vous-même, ou même à faire des croquis sur papier. Vous verrez, ça devrait vous aider. Vous pouvez aussi faire des recherches de spritesheets déjà existants sur le net pour vous en inspirer !

Faites autant de calques qu'il n'y aura de frames dans votre animation. Faites en sorte que la dernière image se raccorde bien avec la première ! Pour avoir un aperçu du résultat, faites cette manipulation :


Un fenêtre s'affiche, où vous pouvez régler la vitesse, la taille d'affichage, etc. N'hésitez pas à changer la vitesse, elle influence sur la fluidité du mouvement et la façon dont vous le percevez.

Partie III – Résultats

Il est très important de voir le résultat de votre travail. Vous avez plusieurs possibilités. Il se peut que cette animation fasse partie d'un projet de jeu que vous voulez montrer à la RDP. On raffole de vos graphismes ! Pour cela, nous allons grossir l'image et l'exporter en .gif en tant qu'animation. Faites "Image" → "Échelle et taille de l'image...". Dans la fenêtre qui s'affiche, indiquez la taille voulue en pixels (attention, conservez les proportions et prenez un multiple de la taille actuelle de l'image !) et sélectionnez "Aucune" dans "Interpolation" :

Je prends 108*108px car mon image de base fait 18*18 px. 108 est un multiple de 18.

Votre image sera agrandie sans déformations (en principe) et pourra être fièrement montrée à la Revue Des Projets ! Faites l'export (Ctrl + Maj + E) en .gif. Chaque image du .gif correspondra à chaque calque. c'est parfait, on n'a pas à toucher à quoi que ce soit !

Pour ensuite conserver votre animation et l'utiliser dans votre jeu, vous pouvez choisir d'exporter chaque calque individuellement. Assurez-vous que les dimensions soient les bonnes (on ne va pas mettre un sprite de 108px² dans notre jeu, lôl.) et exportez votre image au format png, jpg ou bmp, selon vos besoins. L'image exportée sera le calque visible : masquez le calque du dessus pour afficher le suivant, puis exportez à nouveau (Ctrl + Maj + E). Recommencez l'opération jusqu'à avoir fait autant d'export que vous n'avez de frames.

Vous pouvez aussi décider de les présenter comme des spritesheets. Dans ce cas, dupliquez l'image ("Image" → "Dupliquer", ou Ctrl + D) pour redimensionner le canvas ("Image" → "Taille du canvas..."), puis utilisez l'outil de déplacement (M) pour replacer chaque calque dans un ordre logique. Exportez le résultat dans le format d'image voulu (png, bmp, jpg, etc. Je vous conseille le .png, si vous ne savez pas quoi choisir).

Pour ma part, voici le résultat !


Et vous, qu'est-ce que ça donne ? Fiers de vos superbes graphismes ?

Liens utiles :
Voir le TDM précédent : TDM n°5 .
Des exemples dans cette édition de la RDP !



Shadow15510 Hors ligne Administrateur Points: 5504 Défis: 18 Message

Citer : Posté le 05/09/2018 18:39 | #


Encore un TDM signé et bien fait !
J'aime beaucoup ce tuto , à quand l'application pratique en C ou en BASIC ?
Je m'y met
"Ce n'est pas parce que les chose sont dures que nous ne les faisons pas, c'est parce que nous ne les faisons pas qu'elles sont dures." Sénèque

Lephenixnoir En ligne Administrateur Points: 24621 Défis: 170 Message

Citer : Posté le 05/09/2018 19:29 | #


Oh, je suis agréablement surpris par ton résultat. C'est fluide et tout, bravo ! Je m'attendais à plus lent

Ajouté à la liste des TDM de qualité !
Mon graphe (11 Avril): ((Rogue Life || HH2) ; PythonExtra ; serial gint ; Boson X ; passe gint 3 ; ...) || (shoutbox v5 ; v5)
Drak Hors ligne Rédacteur Points: 1925 Défis: 40 Message

Citer : Posté le 05/09/2018 19:49 | #


Shadow15510 a écrit :
Encore un TDM signé et bien fait !
J'aime beaucoup ce tuto , à quand l'application pratique en C ou en BASIC ?
Je m'y met


Alors là, intégrer un spritesheet à un jeu, ça n'est plus dans mon domaine de compétence... En C, en tous cas.
Eon the Dragon : version 1.2
Let's have a look!
Marre de ces RPGs qui t'imposent des classes, des compétences et des sorts ? Crée tes propres capacités sur Eon the Dragon ! Des monstres, des dragons et des combats aussi épiques que difficiles t'attendent !
Un RPG unique et immense t'attend ! Joue dès maintenant à Aventura, le Royaume Poudingue !
Vous aussi, soyez swag et rejoignez Planète Casio !
Massena Hors ligne Ancien rédacteur Points: 2244 Défis: 11 Message

Citer : Posté le 05/09/2018 20:30 | #


TdM <3
Intégrer des spritesheets en basic est compliqué, non ?
Shadow15510 Hors ligne Administrateur Points: 5504 Défis: 18 Message

Citer : Posté le 06/09/2018 06:50 | #


En basic c’est très dur et moche mais en C c’est vraiment magique
"Ce n'est pas parce que les chose sont dures que nous ne les faisons pas, c'est parce que nous ne les faisons pas qu'elles sont dures." Sénèque

Drak Hors ligne Rédacteur Points: 1925 Défis: 40 Message

Citer : Posté le 06/09/2018 15:56 | #


Si tu veux faire des animations en Basic, il faut choisir des méthodes alternatives, plus simples. Et encore, animer en Basic, c'est juste... Vite pas rentable.
Eon the Dragon : version 1.2
Let's have a look!
Marre de ces RPGs qui t'imposent des classes, des compétences et des sorts ? Crée tes propres capacités sur Eon the Dragon ! Des monstres, des dragons et des combats aussi épiques que difficiles t'attendent !
Un RPG unique et immense t'attend ! Joue dès maintenant à Aventura, le Royaume Poudingue !
Vous aussi, soyez swag et rejoignez Planète Casio !

LienAjouter une imageAjouter une vidéoAjouter un lien vers un profilAjouter du codeCiterAjouter un spoiler(texte affichable/masquable par un clic)Ajouter une barre de progressionItaliqueGrasSoulignéAfficher du texte barréCentréJustifiéPlus petitPlus grandPlus de smileys !
Cliquez pour épingler Cliquez pour détacher Cliquez pour fermer
Alignement de l'image: Redimensionnement de l'image (en pixel):
Afficher la liste des membres
:bow: :cool: :good: :love: ^^
:omg: :fusil: :aie: :argh: :mdr:
:boulet2: :thx: :champ: :whistle: :bounce:
valider
 :)  ;)  :D  :p
 :lol:  8)  :(  :@
 0_0  :oops:  :grr:  :E
 :O  :sry:  :mmm:  :waza:
 :'(  :here:  ^^  >:)

Σ π θ ± α β γ δ Δ σ λ
Veuillez donner la réponse en chiffre
Vous devez activer le Javascript dans votre navigateur pour pouvoir valider ce formulaire.

Si vous n'avez pas volontairement désactivé cette fonctionnalité de votre navigateur, il s'agit probablement d'un bug : contactez l'équipe de Planète Casio.

Planète Casio v4.3 © créé par Neuronix et Muelsaco 2004 - 2024 | Il y a 52 connectés | Nous contacter | Qui sommes-nous ? | Licences et remerciements

Planète Casio est un site communautaire non affilié à Casio. Toute reproduction de Planète Casio, même partielle, est interdite.
Les programmes et autres publications présentes sur Planète Casio restent la propriété de leurs auteurs et peuvent être soumis à des licences ou copyrights.
CASIO est une marque déposée par CASIO Computer Co., Ltd