Journal de bord

Journal de bord

Par Swing Swing Submarine Blog créé le 08/01/10 Mis à jour le 05/04/15 à 22h03

Ajouter aux favoris
Signaler
Seasons after Fall

Hein ? Quoi ? Comment ?!  Plus d'un mois sans article autour de Seasons after Fall ?

Mais que fait-on ? Que fait Buster ?

Nous avons été quelque peu occupés durant ce mois de novembre, vous découvrirez le pourquoi du comment dans de futurs posts.

Pour l'heure, laissez moi tenter de réparer ce manquement avec un article légèrement technique décrivant une fonctionnalité que nous avons fraichement ajouté à notre moteur maison : l'animation par spritesheet.

Avant de déployer mon plus beau Prout (le penchant maléfique et chiant de Proust), passons au crible quelques termes qui pourraient être utiles à la compréhension. Les gens bien au fait ou pressés peuvent directement passer la section suivante (sans passer par la case "roh mais l'autre il me prend pour qui") !

 

>> Vocabulaire

Vertex

Un vertex est un point dans l'espace tri-dimensionel. A ne pas confondre avec un Game Object (cf. le tutoriel Unity). Non, un vertex c'est l'élément de base qui sert à modéliser des objets (2D ou 3D).

Généralement, un vertex possède une position (x, y, z) ainsi qu'une couleur (rouge, vert, bleu, transparence) mais aussi des coordonnées de texture (u, v). Je passe sur les propriétés qui ne nous intéressent pas (comme la normale nx, ny, nz).

Autant d'information dans un si petit corps : le vertex !

 

Quadrilatère (Quad de son petit nom)

Un quad est un assemblage de deux triangles (je ne vous fais pas l'affront de décrire un triangle). Le tout constituant une forme parallélépipèdique. Vous l'aurez compris, un quad est composé de 4 vertices (pluriel de vertex), les 2 triangles le composant ayant un côté en commun. 

Deux triangles siamois forment un quad

 

Texture

Une texture est une image que l'on vient plaquer sur des triangles (ou des quads) pour leur donner un peu de gaieté et éviter qu'ils n'arborent une bien triste robe de couleur uniforme.

Revoici notre quad, cette fois-ci vêtu d'une texture de sous-marin (et oui, on est corporate ou on ne l'est pas !)

C'est pas la plus belle texture que vous ayez jamais vu ? Hein ? Hein ?

 

Coordonnées de texture (UV)

Les coordonnées de texture (souvent décrites comme "UV", rien à voir avec le soleil et le bronzage) sont une des propriétés des vertices. On trouve 2 coordonées : U et V (haha, je vous avais dis que ça avait rien à voir avec le bronzage).

Ces deux coordonnées indiquent un emplacement dans une texture (une sorte de coordonnée GPS dans une image), elles vont permettre à un vertex d'obtenir une couleur issue d'une texture.

La texture est alors appliquée à un triangle grâce à l'interpolation des coordonnées de textures des 3 vertices composant le triangle.

Revoici notre quad habillé pour l'hiver, mais cette fois-ci les coordonnées de textures sont différentes des précédentes et le quad arbore une sous-partie de la texture du sous-marin.

Les UV sont bien utiles pour habiller des quads comme vous le voulez

 

>> Construire une spritesheet

Préparation

Disons que nous voulons animer le personnage de Braid (Tim). Si vous voulez réaliser ça chez vous, vous trouverez les images de Tim sur le site du graphiste.

Pour obtenir un personnage animé, vous prenez un artiste 2D talentueux et vous le laissez dessiner une séquence d'images représentant le personnage en pleine action.

Voici quelques étapes issues de la course de Tim :

Uno, dos, très

Tel un animateur 2D ancestral, l'artiste dessine une étape donnée en la superposant avec une étape précédente, grâce à l'usage de calques. C'est une technique d'animation largement utilisée dans les dessins animés traditionnels impliquant une planche à dessin, un crayon, du papier calque, du scotch, une gomme et pas mal de patience :

La Chose est très à l'aise quand il s'agit d'animer

Cette technique devrait vous remémorer vos cours, pendant lesquels vous gribouilliez sur un coin de cahier de brouillon pendant de longues minutes avant de découvrir votre superbe animation 3 images par seconde à la sonnerie retentissante !

Imaginez le en mouvement, et ça éblouira votre esprit

 

Construction

Maintenant que nous avons les dessins des différentes étapes de notre animation, il est temps de construire cette fameuse "spritesheet".

Une spritesheet est simplement le rassemblement de toutes nos petites images dans une image plus grosse. Voici l'exemple de la course de Tim :

Une image pour les contenir toutes !

 

 

Vous remarquerez qu'il y a un gros espace vide en bas de l'image. C'est pas moi qui ait forcé sur le retour chariot tel un forcené, c'est juste un espace laissé vaquant dans la spritesheet. On peut facilement imaginer y insérer des images de Tim en train de bondir ou de chuter.

Dans cette spritesheet, j'ai décidé de laisser un espace régulier entre les images. On se retrouve donc avec une grille régulière d'images. 

Une grille régulière, et un espace vide (et non pas une armée de retours chariot)

 

Vous n'êtes pas forcés d'utiliser une répartition régulière, mais c'est plus facile pour gérer automatiquement la construction d'une animation. La vraie texture du jeu Braid n'utilise pas de grille régulière pour répartir les éléments. Regardez par vous-même !

C'est un peu l'anarchie

 

>> Pourquoi utiliser une spritesheet ?

Vous vous demandez surement pourquoi on s'embête à vouloir absolument rassembler toutes les petites images dans une plus grande (la spritesheet), alors que les animations de nos enfances dans les cahiers de brouillon fonctionnaient très bien avec des images séparées !

Il y a beaucoup d'avantages :

* Eviter le changement de texture :

Comme on utilise une grosse texture en contenant plusieurs petites, on réduit la nécessité de changer de textures lors du dessins 3D (ou 2D). Changer de texture lors du rendu a un coût non négligeable en terme de temps perdu. Eviter de changer de texture évite donc de perdre du temps (pour le perdre ailleurs).

* Chargement plus rapide :

C'est plus rapide de charger une grosse texture que plein de petites. On passe moins de temps à lire plein de choses différentes en utilisant des spritesheets... et on réduit par la même les temps de chargement.

* Les sprites peuvent être dimensionnées comme bon nous semble :

S'il est une chose difficile pour un graphiste, c'est bien d'avoir à redimensionner ses textures de sorte qu'elles soient d'une hauteur/largeur en puissance de 2 (32/64/128/256, etc...). Ceci pour maximiser le stockage, l'accès et la compatibilité sur un maximum de carte graphique (et vous savez comme moi qu'il y en a un paquet de différentes).

En utilisant une spritesheet, seule cette dernière nécessite d'être taillée en dimensions puissances de 2. Dès lors les sprites qui y sont inclus peuvent avoir des dimensions complètement loufoques, et tant pis si on ne remplit pas toute la spritesheet.

 

>> Animation avec une spritesheet

Pour animer un quad texturé avec une spritesheet, on opère simplement des glissements d'UV (coordonnées de texture) au cours du temps :

Elles sont pas belles et claires mes flèches moches ?

Au lieu d'aller de texture en texture (comme on irait en coin de cahier de brouillon en coin de cahier de brouillon), on habille simplement le quad avec une sous-partie de la spritesheet et on déplace cette sous-partie.

 

>> Atlas de texture/Tilemap

Un atlas de texture ou une tilemap sont des termes qui vous sont peut être déjà familiers. Ce sont des sortes de spritesheets, à la différence que ces textures ne servent pas à animer des choses, mais plutôt à bénéficier de quelques avantages des spritesheets comme la réduction du nombre de changements de textures et la rapidité de chargement.

Exemple d'une tilemap qui peut suffire à texturer un niveau entier ! (dans Pyramide, on dirait "en un !')

 

>> Notre implémentation dans Blender

Comme à notre habitude, on use et abuse des courbes Blender pour faire tout et n'importe quoi. L'animation par spritesheet ne déroge pas à la règle !

Voici Tim dans notre Blender custom :

Ah il sait plus où il est le Tim là !

 

Comme vous pouvez le constater, les courbes (une rouge, une verte) sur la partie droite de l'image sont très simples puisqu'elles prennent la forme d'un signal "carré". Elles indiquent simplement le nombre de décalages de cases que l'on doit opérer en U (rouge, horizontalement) et en V (vert, verticalement) dans la spritesheet.

Dans l'exemple, la posture prise par Tim est due au fait que la courbe rouge indique un offset de 4 et la courbe verte un offset de 1, ce qui nous renvoie à la sous-image entourée en blanc dans la mini spritesheet reportée à l'écran.

Bien entendu, on dispose d'un wizard pour construire les courbes rouge et verte automatiquement. Le wizard demande juste des informations comme le nombre d'images de l'animation, la vitesse de défilement des images ou encore le point de départ de l'animation.

 

>> Utilisation dans le jeu

Pour le moment, Seasons after Fall utilise grandement l'animation par morphing de polygones. Mais ceci peut être coûteux si trop d'éléments à l'écran sont animés de la sorte.

Si nous devons animer un champ de petits brins d'herbe, alors l'utilisation d'une spritesheet sera bien plus efficace en terme de performances que notre classique morphing de mesh.

On pense aussi à utiliser les spritesheet pour réaliser de petits tutoriels animés. Notre modèle absolu pour en la matière est l'excellentissime Machinarium. Le but étant de limiter, voire d'anéantir, toute trace de textes à l'écran et ainsi rendre le tout plus universel (non, pas Vivendi, l'autre).

 

>> Résultat in-game

Voici un petit aperçu de ce que donne notre cher Tim dans le moteur de Seasons.

J'ai rajouté dans cette scène un blob animé lui aussi grâce à une spritesheet trouvée dans un tutoriel du blog de Retro Affect (les gars derrière le très prometteur Snapshot). J'ai aussi ajouté ma touche personnelle de programmeur avec des choses de toute beauté qui vous rendront épileptique (ne me remerciez pas).

 

Comme vous pouvez le voir, ça fait un paquet de Tim en même temps. Pour éviter que ces Tim n'aient l'air de faire une marche synchronisée disgracieuse, on inculque des petits temps de décalages dans les timelines d'animation de chaque Tim.

Pour finir, on note que les éléments animés en spritesheet peuvent très bien subir des rotations et autres déplacements ou changement d'échelles (cf. les trucs qui rendent épileptique sur la droite de la scène).

Et si vous voulez voir d'autres utilisations de spritesheets, je ne saurai que trop vous conseiller d'aller faire un tour sur le très bon blog GB de krys64 (Unity inside) !

 

A la prochaine, pour de nouvelles aventures pixelisées !

Guillaume

Ajouter à mes favoris Commenter (21)

Commentaires

Swing Swing Submarine
Signaler
Swing Swing Submarine
Félicitation à toi pour ton Flixel skills. Je trouve que ça pète!

Guillaume
Morphine
Signaler
Morphine
Si tu veux voir ou j'en suis : http://www.gameblog....pas-avec-flixel
Maintenant il me faudrait des tutos plus aboutis, ou plutot qui abordent d'autres trucs...

Et félicitations pour la récompense, vous devriez le dire haut et fort et être fiers !
Swing Swing Submarine
Signaler
Swing Swing Submarine
@Morphine: c'est clair que le temps, c'est chiant, y'en a jamais assez :-/

@MrMouche: hehe, on reconnait les lecteurs de Gamasutra :)
On était nous même surpris quand ils nous ont appelé pour annoncer ça. On gagne pas de thune, mais on était déjà invité à l'évènement et on a rencontré pleins de gens intéressants (on a pas eu le temps de voir toutes les personnes qu'on aurait voulu, une journée c'est court!).

Photo bonus pour ceux qui ont facebook. C'est peut être les barbes qui ont fait fortes impressions auprès du jury ^^

Guillaume
MrMouche
Signaler
MrMouche
hé, Meilleur nouveau Projet 2011 pour Seasons after Fall au "Game Connection Europe".
bravo Swing Swing !
Morphine
Signaler
Morphine
Oui faudra aussi que je teste unity :D Mais tout ça demande trop de temps, alors déjà, Flixel :D
Swing Swing Submarine
Signaler
Swing Swing Submarine
Désole, je radote ^^

Je trouve Flixel moins "compliqué" que Flashpunk. Après Flashpunk peut sûrement te permettre des trucs de ouf plus rapidement qu'avec Flixel, mais j'aime bien l'approche Flixel.

Quoiqu'il en soit, Flixel et Flashpunk ça se ressemble un peu au fond :)

Sinon y'a toujours Unity... mon bien aimé ^^ La v3 couplée avec Monodevelop pour éditer les scripts, y'a pas plus bonnard !

Guillaume
Morphine
Signaler
Morphine
Tu m'avais déjà parlé d'alkemi ;) Mais je pense laisser tomber Flash CS et essayer de coder sur flashdevelop et compiler avec le flex sdk, au pire je peux dessiner en vecto (j'avoue que je suis à l'aise sous flash cs pour ça, après ca depend du style choisi) et exporter en png (évidemment pour un gros spritesheet ça peut être long...).

Par contre Flashpunk je connaît pas, de toute façon faut déjà que je m'initie à Flixel !
Swing Swing Submarine
Signaler
Swing Swing Submarine
Hehe, happy AS3 coding :)

Si tu cherches un trucs qui -entre autre- peut te convertir des movieclip vectoriel en spritesheet, tu peux aller faire un tour sur le blog d'Alkemi (y'a des parties 2 et 3 sur le reste du blog).

Tu peux éventuellement faire un mix avec Flixel ou Flashpunk :)

Guillaume
Morphine
Signaler
Morphine
Pour ma part je bidouille mais j'essaie de ne pas trop céder à la facilité... Vous avez réussi à faire quelque chose de simple mais agréable à regarder, c'est du tout bon :D

Limbo est bien foutu de ce coté là, mais c'est pas le seul a exploiter le style "ombres chinoises", mais dans ce style ou un autre, c'est pas toujours une réussite...

PS : Ce soir je tente l'aventure Flixel, et j'en profite pour installer FlashDevelop ;)
Swing Swing Submarine
Signaler
Swing Swing Submarine
Ouep, moi le style de Seasons me plait bien aussi.
Après c'est sûr que c'est un style, et je sais pas si ça plait à tout le monde.
C'est des question épineuses ^^ C'est un peu comme dire à une mère que son nouveau né, bah il pourrait être plus comme si ou comme ça... ou encore que l'autre rejeton d'à côté il est plus comme si ou comme ça :D

Sinon c'est clair que les shapes unicolores nous servent pas mal pour "tricher" sur certains trucs (mais bon, c'est de bonne guerre ^^, Limbo est un maitre dans le genre).

Guillaume
Morphine
Signaler
Morphine
Disons que c'est un autre style :D
N'empêche que j'aime bien les graphismes de Seasons, ça a son charme et c'est très loin d'être moche (même la simplicité a d'autres "avantages").
Swing Swing Submarine
Signaler
Swing Swing Submarine
Vanillaware , :bave:

Ce qu'on a pu baver devant Muramasa.

Bref, on est loin de cette qualité là avec Seasons :)

Guillaume
Morphine
Signaler
Morphine
Je me suis abstenu de trop dériver sur mon commentaire, mais c'est clair qu'en ce moment la 2D revient en force, grâce à tous ces jeux indépendants/amateurs qui arrivent à se faire un nom et quelques studios talentueux (Vanillaware <3). Finalement, vous y participez aussi (bon techniquement Seasons est en 3D, mais bon !).

Ah et Castle Crashers déchire oui, c'est certain :D Ce qui me bluffe c'est la qualité de la mise en scène, et l'identité super forte qui se dégage de l'ensemble.
Swing Swing Submarine
Signaler
Swing Swing Submarine
Merci pour ces retours positifs !

@Morphine:
Oué, pas plus tard que cet après midi, je jouais à Castle Crasher sur XBox... et je me disais que quand même, leur 2D déchire !
Sans parler de la "2D" de chez Ubi avec Rayman Origins. Les outils qu'ils ont bâtis autour de techno 3D est du juste renversante.

@Yao:
Mais si je suis sûr que tu as tout pigé :)

@Enimal:
Hehe oué, tu l'as même pratiqué il y a fort longtemps !

@Kinderpinguy (très sympa le pseudo au passage!)
Si y'a des points que je peux éclaircir, hésite pas. Les commentaires c'est fait pour ça aussi.

@hairaz:
Mince, je connais pas assez Godard :) J'ai pas trop de culture (oublie pas que j'écris du Prout)!
Sinon j'espère que le blog de krys64 a comblé ton après midi !

@Mayto:
Hehe, tu as vu ce smiley furtif, une sorte d'autoportrait :P

@MrMouche:
Désolé pour l'épilepsie passagère ;)
Pas de quoi pour le blog de krys64. Il est assez récent, c'est William qui me l'a pointé, sinon je serais peut être passé à côté aussi ! Et je le trouve très bon, et c'était raccord avec ce que je racontais aujourd'hui, alors pourquoi se priver ^^

Merci d'être passé lire et commenter ! Et sur ce bonne nuit/jour (haha, rayez la mention inutile) !

Guillaume
MrMouche
Signaler
MrMouche
voila j'suis épileptique, merci bien (je sais qu'on est pas obligé de remercier mais j'y tiens :) )
Merci pour le lien vers le blog de krys64, j'etais completement passé à coté.

Tout est tres bien expliqué, continu comme ça Guillaume, c'est top !
Mayto
Signaler
Mayto
Très bon article !
Mention spéciale pour le petit smiley de la vidéo (mais si, dans le carré rose tout à droite !)
Vivement le prochain :)
hairaz
Signaler
hairaz
Ma mère arrive derrière moi quand je regarde la petite vidéo de fin :
"Tu t'intéresses à Godard, toi ?"
Sinon, je pense que j'ai réussi à tout suivre. Merci beaucoup pour ce petit article, on l'attendait avec impatience !
(et merci pour le lien vers le blog de krys64, vous venez d'occuper mon après-midi !)
Kinderpinguy
Signaler
Kinderpinguy
Ben j'ai pas tous compris mais fichtre! C'était bigrement intéressant
Enimal
Signaler
Enimal
Moi j'ai tout pigé :)
ça fait plaisir de lire des articles aussi complets.
Yao
Signaler
Yao
Je ne suis pas d'avoir tout pigé mais c'est intéressant tout ça !!!
Morphine
Signaler
Morphine
Ca fait du bien en cette ère de la reine 3D de lire des articles qui parlent de sprites et compagnie.
Très intéressant en tout cas comme article :)

Édito

Grâce à ce mini-devblog en français, vous pourrez suivre l'activité de notre minuscule studio de développement indépendant Swing Swing Submarine.

Nous sommes une petite équipe d'hommes et de chats passionnés qui souhaitent partager de nouvelles expériences interactives avec les joueurs du monde entier, et ceux de Gameblog en font bien évidemment partie !

--------------------------------------------------------

Quelques liens utiles :

> Site officiel <

> Twitter <

> Facebook <

Archives

Favoris