[MegaTuto] Fluidité

Page 4 sur 6 Précédent  1, 2, 3, 4, 5, 6  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

[MegaTuto] Fluidité

Message  FireFox le Mer 30 Mai 2007 - 15:14

Rappel du premier message :

Il s'agit, à l'instant où je poste, du plus gros tutoriel du forum  :)
J'ai mis pas mal de temps à le créer, j'espère qu'il vous aidera.
Certaines idées sont vraiment difficiles à exprimer, mais je pense m'en être assez bien sorti...

Attention : Il est possible que le tutoriel soit mis à jour, si c'est le cas je vous préviendrais.
(Tutoriel mis à jour par Sd')

Bon allez, place au tutoriel :

Fluidité

Vous en avez marre que l’on vous dise d’améliorer votre fluidité ? Et bien vous êtes tombés sur le bon tuto !
Ici vous sera expliqué étape par étape ce qu’il faut savoir pour avoir une animation fluide !


Chapitre 1 : Vitesse constante :

Avant de passer aux choses sérieuses, il faut connaitre la base : Ce qui joue le plus sur la fluidité ; garder une vitesse constante. C'est ce que vous aller apprendre dans ce chapitre 1.

Quand vous débutez, vos mouvements sont souvent saccadés (ce qui joue beaucoup sur la fluidité).
Vous ne savez pas pourquoi ? Et bien c'est parce que les mouvements ne sont pas réguliers !
Certains passages sont plus rapides que d'autres. Ce qui donne un mauvais résultat :



Schématisons le déplacement gauche-droite du stk de l'animation ci-dessus... ce qui donne quelque chose de ce genre :
|---->|->|----->|-->|----->|----->|->|--->|---->|----->|----->|--->|------>|

Vous remarquerez bien que les déplacements ne sont pas du tout réguliers !

Pour y remédier, il vous suffit juste de garder en tête l'espacement de votre stk la frame précédent, et de le reproduire au mieux dans la frame suivante, ce qui donne :



Schématisons le déplacement gauche-droite du stk de l'animation ci-dessus... ce qui donne quelque chose de ce genre :
|------>|------>|------>|------>|------>|------>|------>|------>|------>|------>|------>|------>|------>|

Le résultat est nettement meilleur. Donc n'oubliez pas : Garder toujours une vitesse constante à chaque mouvement.


Chapitre 2 : Vitesse des mouvements :

Quand vous débutez, vos mouvements sont souvent beaucoup trop rapides, ce qui donne un mauvais résultat.
Et vous êtes les seuls à comprendre votre anim !
Vous ne savez pas pourquoi ? Et bien c'est parce que vos mouvements sont trop espacés !

Alors vous avez tendance à baisser la vitesse d'animation : très mauvaise idée !! Ca ne fait qu'empirer la mauvaise fluidité !

Plus votre vitesse d'animation sera élevée, plus vos mouvements devront être serrés.
[La vitesse d'animation se change grâce à cette mini-bar de défilement :



Prenons 2 exemples :

Vitesse 7 : |------>|------>|------>|------>|------>|------>|------>|------>|------>|------>|------>|------>|------>|
Vitesse 16 : |-->|-->|-->|-->|-->|-->|-->|-->|-->|-->|-->|-->|-->|-->|-->|-->|-->|-->|-->|-->|-->|-->|-->|-->|

Pour une distance plus ou moins semblable, il est donc nécessaire, selon la vitesse, d'augmenter ou diminuer le nombre de frames par mouvement.

Il est préférable d'augmenter au maximum la vitesse et de serré au maximum les mouvements.

Maintenant, je vous laisse constater la différence de qualité entre la qualité maximale et la qualité minimale :

Qualité maximale (vitesse 33) (fichier .piv)


Qualité moyenne (vitesse 18) (fichier .piv)


Bon, ça crève les yeux : La différence est flagrante !

Avant de conclure sur ce chapitre, je tiens à vous prévenir qu'il faut être fou pour faire une animation vitesse 33 !
Pour être considéré comme "bon" à pivot (pour la fluidité) il faut faire des animations vitesse 18, ce qui donne de très bons résultats. Mais si vous débutez, augmentez petit à petit.


Chapitre 3 : Variation de vitesse :

Une fois que vous avez assimilé les 2 premiers chapitres, vos animations devraient être nettement plus fluides qu'avant.
Mais il existe d'autres moyens de rendre ses anims encore plus fluides : Il faut varier la vitesse !
C'est sûrement le chapitre le plus complexe, c'est pourquoi je vais le diviser en 2 sous-chapitres.

[1] Mouvements différents = vitesse différentes :

Je sais ce que vous vous dites : "Mais qu'est ce que ça veut dire ?!?! Dans le chapitre 1 tu nous dis de garder une vitesse constante, mais maintenant tu nous dis de la varier !?!?"
Et bien il y a une nuance là dedans : En fait il ne faut pas garder une vitesse constante pendant toute l'anim. Il faut garder une vitesse constante pour chaque mouvement !

C'est un peu flou pour le moment, je vous comprends ^^

Prenons un exemple simple : Lorsque vous courez, vous aller plus vite que lorsque vous marcher. Donc les déplacements seront plus espacés si vous faites courir votre stickman que si vous le faites marcher.

Je sais, ça a l'air stupide, vous allez croire que je vous prends pour des boulets ^^
Mais il vaut mieux commencer par quelque chose de simple avant de passer à quelque chose de plus complexe...

Prenons maintenant un exemple un peu plus compliqué et que nous allons donc schématiser ; un coup de poing :

L'exemple est pourrit, c'est juste pour vous montrer l'idée ^^
Je l'ai ralenti au maximum pour que vous puissiez bien voir la différence de vitesse :



Préparation du poing : |--->|--->|--->|--->|--->|--->|
Quand vous préparez votre coup de poing, le mouvement est relativement lent, il dure 7 frames sur cette anim.

Lancement du poing : |---------->|---------->|
Lorsque votre poing est lancé, il se précipite rapidement vers sa cible, ici 2 frames suffisent.

Tout ça pour dire que la préparation du poing est plus longue que son lancement. Ce qui n'empêche pas les mouvements d'être réguliers.

Je ne peux rien dire de plus.
C'est à vous de gérer la vitesse tout en gardant des déplacements réguliers en fonction des mouvements.

[2] Accélérations et Freinages :

Difficile de trouver les bons mots pour exprimer ça. C'est aussi assez difficile à expliquer et à mettre en pratique une fois compris.
Mais vous verrez, à force ça deviendra une habitude et vous le ferez machinalement.

En plus de devoir garder une vitesse constante par mouvements, certains mouvements nécessitent une "accélération" ou un "freinage".

Prenons un exemple simple : une voiture. Lorsque vous démarrez il vous faut un temps d'accélération avant d'arriver à votre vitesse de pointe, et pour freiner pareil : il vous faut un certain temps avant que votre vitesse atteigne 0.
Tout ça pour dire que vous ne démarrez pas tout de suite en vitesse de pointe pour vous arrêter en une fraction de seconde !

Pour beaucoup de mouvements il vous faudra un temps d'accélération / freinage.

Un autre exemple simple mais cette fois en image :



Schématisons le déplacement gauche-droite du stk, ce qui donne quelque chose comme ça :

|>|->|-->|--->|---->|---->|--->|-->|->|>|
Le stk accélère jusqu'à sa vitesse de pointe, puis freine et s'arrête complètement.


Maintenant, passons à un exemple beaucoup plus complexe. Regardez cette anim :



Vous remarquerez peut-être qu'en plein mouvement la vitesse varie.

Nous allons travailler sur cette anim pour que je puisse vous expliquer plus clairement.

Tout d'abord là-voici vitesse réduite (pour faciliter la compréhension) :



Pour commencer, la Flexion : |->|-->|--->|-->|->|>|
Lors de la flexion, la vitesse est progressive. Au tout début du mouvement il faut un temps d'accélération, ici 2 frames.
Ensuite il faut un temps de freinage, ici 3 frames. Tout cela doit être progressif : le stickman accélère progressivement et freine progressivement.

Maintenant, le Saut : |--->|--->|--->|-->|->|>|
Le saut démarre rapidement grâce à la flexion le précédent. Ensuite, au bout d'un moment, le stickman doit freiner dans les airs (c'est la gravité ^^), il freine progressivement pendant 3 frames.

Puis, la Chute : |->|-->|-->|--->|
Lorsque le stickman a atteint sa hauteur maximale il retombe en accélérant de plus en plus, ici 3 frames d'accélération.

Ensuite, une autre Flexion : |--->|--->|--->|-->|->|>|
Après le saut une autre flexion similaire à la première. Sauf qu'ici la vitesse de pointe est déjà atteinte, donc l'accélération n'est pas nécessaire, seul le freinage l'est.

Et pour finir, le stickman se relève : |->|-->|>|
Ici le stickman n'a pas le temps d'accélérer qu'il doit déjà freiner ^^

Bon, voilà, c'était un exemple assez long de l'utilité des accélérations / freinages.

Avant de conclure avec ce chapitre, si vous êtes encore sceptique, je vous montre l'anim si l'on ne prend pas compte des accélérations et freinages :



Fin du tuto

Voilà, c'est la fin du tuto, j'espère qu'il vous aidera beaucoup et qu'il est assez compréhensible  :D


Dernière édition par Sd' le Mar 11 Avr 2017 - 11:36, édité 7 fois (Raison : Mis à jour)

_____________________
avatar
FireFox
Administrateur

Masculin Nombre de messages : 3655
Age : 24
Date d'inscription : 22/10/2006

Voir le profil de l'utilisateur

Revenir en haut Aller en bas


Re: [MegaTuto] Fluidité

Message  Southh le Sam 29 Nov 2008 - 11:11

Et comme tout le monde, je dit merci beaucoup beaucoup pour ce magnifique tutoriel. Je vais m'entrainer pour bien arriver a maîtriser la fluidité ! :winkanim: Merci :winkanim: Merci
avatar
Southh

Masculin Nombre de messages : 31
Age : 23
Date d'inscription : 16/11/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  cobra le Lun 8 Déc 2008 - 21:16

firefox j'ai riien compris au tuto...(jcrois pa que je suis le seul) sii ??
avatar
cobra

Masculin Nombre de messages : 17
Age : 21
Date d'inscription : 05/12/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  Psycotik QC le Mer 10 Déc 2008 - 2:05

Merci pour les tutos :) !
Grace a toi je vais m'amilioré ! :)
avatar
Psycotik QC

Masculin Nombre de messages : 59
Date d'inscription : 09/12/2008
Localisation : Sur mars.

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  Dreizen le Mer 10 Déc 2008 - 16:09

@cobra a écrit:firefox j'ai riien compris au tuto...(jcrois pa que je suis le seul) sii ??

J'ai bien l'impression que si.
Mais y'a qu'une seule solution dans tout ça, c'est de relire pour essayer de comprendre au max.
Parce que personne pourra te trouver des explications plus explicites que ce tuto.
Enfin, tu peux toujours demander des cours particuliers à Foux mais il est très occupé ces derniers temps !

_____________________
 Joker 
avatar
Dreizen
Retraité

Masculin Nombre de messages : 4623
Age : 23
Date d'inscription : 29/04/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  Tanatheld le Mer 10 Déc 2008 - 18:13

@Dreizen a écrit:
@cobra a écrit:firefox j'ai riien compris au tuto...(jcrois pa que je suis le seul) sii ??


Parce que personne pourra te trouver des explications plus explicites que ce tuto.

Héhé, si! C'est pas que je sois fier mais si un fait.
avatar
Tanatheld

Masculin Nombre de messages : 1105
Age : 22
Date d'inscription : 15/09/2008
Localisation : Vous avez pas fini de chercher!!

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

BRAVO

Message  Victortol le Dim 14 Déc 2008 - 10:49

TROP !! cool j'ai bien tout compris en plus bien ecrit bien présenter SUPER !!!!!!!!!! :(top):
avatar
Victortol

Masculin Nombre de messages : 1004
Age : 23
Date d'inscription : 14/12/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

fluidité

Message  steeven36 le Lun 22 Déc 2008 - 12:42

Super tuto tu as du beauco^p y trvaillé meme si j'ai du mal a l'aplliqué il m'a pas aidé merci
avatar
steeven36

Masculin Nombre de messages : 55
Age : 22
Date d'inscription : 20/12/2008
Localisation : Dans le 29

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  Dister le Mer 14 Jan 2009 - 19:14

Waaaaaaaw Vraiment bravo ! Merci beaucoup !
avatar
Dister

Masculin Nombre de messages : 162
Age : 21
Date d'inscription : 14/01/2009
Localisation : Montcuq (très jolie ville du Lot dailleurs)

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Super tuto

Message  Adoom le Mer 14 Jan 2009 - 20:55

Toutes mes félicitations a Firefox pour son mega tutoriel (bonjour la patience) même s'il me faudra beaucoup de temps pour arriver à maitriser toutes les notions ^^
J'espère tout de même améliorer mes anims' grâce a ça :study:
avatar
Adoom

Masculin Nombre de messages : 62
Age : 22
Date d'inscription : 01/01/2009
Localisation : Why sould I say it to you ?

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

THE Firefox mega super giga tuto fluidité

Message  vincent57 le Jeu 5 Mar 2009 - 16:23

QUEL TUTO !! Rien de mieux ( En tuto fluidité je parle ) !! Ce tuto nous appliqueront pour de meilleurs animations !!


Merci énormement !! :D
avatar
vincent57

Masculin Nombre de messages : 18
Age : 23
Date d'inscription : 24/02/2009
Localisation : Metz 57

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  alex72 le Lun 9 Mar 2009 - 18:28

super coll comme tuto, il explique super bien
avatar
alex72

Masculin Nombre de messages : 7
Age : 23
Date d'inscription : 07/03/2009
Localisation : le mans

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  Nevec le Ven 13 Mar 2009 - 17:39

Merci Firefox je pourai m'ameliorer :((o:
avatar
Nevec

Nombre de messages : 31
Date d'inscription : 13/03/2009

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  Noonoobs le Mer 8 Avr 2009 - 1:00

*Est embarassée*

J'dois r'connaitre... Ton tuto est bien fait et devrait m'etre secourable! Moi qui a les tuto en horreur!
avatar
Noonoobs

Nombre de messages : 15
Date d'inscription : 02/04/2009

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  Lycaon le Mer 8 Avr 2009 - 15:17

Cool mais c'est dommage que les exemples du saut n'aient pas été changés... :°(
avatar
Lycaon

Masculin Nombre de messages : 1591
Age : 22
Date d'inscription : 16/02/2008
Localisation : Into your glory of emptyness I send my lifeforce.

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  Fan le Mer 8 Avr 2009 - 15:30

Cool mais c'est dommage que les exemples du saut n'aient pas été changés... :°(
Ben si >< C'est le reste qui n'a pas été remplacé, coup de poing, course etc. Joli stick, à moins que ça soit un sprite...
Sinon, super les nouveaux exemples. En particulier le saut que perso, j'adore !

Bien joué ;)
avatar
Fan

Masculin Nombre de messages : 1317
Age : 23
Date d'inscription : 09/02/2009
Localisation : Avec Pepper', en train d'apprendre la vie sexuelle à Lonking. Ahah Rang : Low Expert

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  Chocks le Mer 8 Avr 2009 - 15:49

Ouai tout est fait en stick. PyVoT Il utilise pas de sprite (et encore heureux xP)

_____________________
"Les amis c'est comme les patates: si on les mange ils meurent"

Par OkoiaCeci est un message inutile, à ne lire que si on a du temps à perdre. Bonne journée!.
avatar
Chocks
Retraité

Masculin Nombre de messages : 6474
Age : 23
Date d'inscription : 07/04/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  Dreizen le Ven 10 Avr 2009 - 16:01

En même temps je vois pas ce qu'il aurait pu spriter, si ce n'est le diamant.
Finalement, appart le saut, y'a rien de mieux.
Les diamants à la place des barres, j'sais pas si c'était nécessaire mais c'est plus joli ^^
La course était vraiment belle, évidemment qu'il fallait la laisser.

_____________________
 Joker 
avatar
Dreizen
Retraité

Masculin Nombre de messages : 4623
Age : 23
Date d'inscription : 29/04/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  Intoxiked le Dim 26 Avr 2009 - 17:29

enh je savais pas que tu l'avais pris sur le forum de Darkdemon :/ j'croyai que tout était de toi lol ^^"
avatar
Intoxiked

Masculin Nombre de messages : 24
Age : 22
Date d'inscription : 22/04/2009
Localisation : Dérrière toi

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  Dreizen le Dim 26 Avr 2009 - 17:54

@Intoxiked a écrit:enh je savais pas que tu l'avais pris sur le forum de Darkdemon :/ j'croyai que tout était de toi lol ^^"

De quoi tu parles ?
Tout est de Firefox (et PyVoT)

_____________________
 Joker 
avatar
Dreizen
Retraité

Masculin Nombre de messages : 4623
Age : 23
Date d'inscription : 29/04/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  Intoxiked le Dim 26 Avr 2009 - 19:33

Je suis désolé de briser ta phrase mais il a du prendre sa ici :
http://www.darkdemon.org/viewtopic.php?t=7835
tu regarde vers le bas du tuto
je cite
"Notice the guy on the left's arm stays the same speed thruout the animation so its kinda of like this
|---|---|---|---|
Now look at the guy on the right . He is easing his arm movement so it looks like this
|-|--|-----|--|-|
As you can tell easing looks much better and can also be used as anticapation for a fast movement . "
:lol!:
avatar
Intoxiked

Masculin Nombre de messages : 24
Age : 22
Date d'inscription : 22/04/2009
Localisation : Dérrière toi

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  Dreizen le Dim 26 Avr 2009 - 20:27

@Intoxiked a écrit:Je suis désolé de briser ta phrase mais il a du prendre sa ici :
http://www.darkdemon.org/viewtopic.php?t=7835
tu regarde vers le bas du tuto
je cite
"Notice the guy on the left's arm stays the same speed thruout the animation so its kinda of like this
|---|---|---|---|
Now look at the guy on the right . He is easing his arm movement so it looks like this
|-|--|-----|--|-|
As you can tell easing looks much better and can also be used as anticapation for a fast movement . "
:lol!:

Et donc ?
Quel rapport avec les propos de Firefox ?

_____________________
 Joker 
avatar
Dreizen
Retraité

Masculin Nombre de messages : 4623
Age : 23
Date d'inscription : 29/04/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  Intoxiked le Lun 27 Avr 2009 - 0:01

-_-
Il a du copier l'idee des |--|---|-|---|--|
et autre,sa se voit pourtant :surprised:
avatar
Intoxiked

Masculin Nombre de messages : 24
Age : 22
Date d'inscription : 22/04/2009
Localisation : Dérrière toi

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  Dreizen le Lun 27 Avr 2009 - 12:31

@Intoxiked a écrit:-_-
Il a du copier l'idee des |--|---|-|---|--|
et autre,sa se voit pourtant :surprised:

Ha, si ce n'était que ça.
Ca s'emploie partout comme truc.

Dans les commentaires, on en parle aussi, en plus Firefox ne fait pas pareil, il fait avec des flèches.
Bon, j'arrête de chipoter, l'idée vient peut être de Darkdemon.

_____________________
 Joker 
avatar
Dreizen
Retraité

Masculin Nombre de messages : 4623
Age : 23
Date d'inscription : 29/04/2008

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  sogeking le Lun 27 Avr 2009 - 19:01

@Dreizen a écrit:
@Intoxiked a écrit:-_-
Il a du copier l'idee des |--|---|-|---|--|
et autre,sa se voit pourtant :surprised:

Ha, si ce n'était que ça.
Ca s'emploie partout comme truc.

Dans les commentaires, on en parle aussi, en plus Firefox ne fait pas pareil, il fait avec des flèches.
Bon, j'arrête de chipoter, l'idée vient peut être de Darkdemon.

moi perso ça m'énerve ce genre de trucs, j'm'explique :
(bon la je vais un peu raconter ma vie)

j'ai fait une blague suite à un évènement que l'on a vécu en angleterre (pas très précis =S)
et c'est la qu'un gars me dit "elle est connue ta blague"

et pourtant, je l'avais jamais entendue dans le passé, ce qui m'amène à la conclusion :


plusieurs êtres humains peuvent avoir la même idée sans pour autant avoir copié l'un sur l'autre


donc tant que j'ai pas de preuve sur mon écran, je crois absolument pas que fox et PyVoT aient copié quoi que ce soit
(en espérant avoir aidé =p)
avatar
sogeking
Retraité

Masculin Nombre de messages : 1385
Age : 23
Date d'inscription : 02/05/2008
Localisation : je suis dans ton dos, ne te retourne pas, je suis DANS ton dos è_é

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Re: [MegaTuto] Fluidité

Message  Angon Drage le Lun 27 Avr 2009 - 19:34

Oui, j'ai déjà remarqué la même chose. Mais c'est rare, quand même !

Et comme l'a si bien dit Dreizen, si ce n'est que ça ... alors moi aussi je suis plagieur, j'ai déjà recopié ce système une fois ou deux. Et on est nombreux à l'avoir fait. :roll:
avatar
Angon Drage

Masculin Nombre de messages : 2677
Age : 25
Date d'inscription : 30/11/2008
Localisation : Cherche un shuriken dans un tas de katanas

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Page 4 sur 6 Précédent  1, 2, 3, 4, 5, 6  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut


 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum