[Tutoriel] Utilisation de spritesheets

Utilisation avancée des sprites

Sommaire
1 - Introduction
2 - Création de notre sprite
3 - Gestion des évènements et découpage des sprites
4 - Le cas des rotations
5 - Fichiers d'exemples

1 – Introduction

J'écrit ce tutoriel car la plupart des utilisateurs de game maker n'utilisent pas les sprites proprement.
Je veux dire par la qu'une presonne qui programme un Zelda va par exemple utiliser un sprite pour le mouvement de link vers la droite, un autre vers la gauche ... et même des sprites a l'arret, ce qui nous donne juste pour les déplacement l'utilisation de 8 sprites (4 pour les mouvements et 4 a l'arret), et en plus de ça chaque sprite contient plusieurs sous images x_x.
Cette methode est vraiment à éviter et je vais vous montrer un moyen propre d'obtenir le même résultat seulement avec un sprite ne contenant qu'une seule planche image, de plus la gestion des animations seras vraiment simplifiée Smile

.

Update :
Voici un moteur qui permet l'utilisation de sprite sheets simplement : http://www.host-a.net/u/onilink_/spriteSheet_Anim.gm6

2 – Création de notre sprite

Tout d'abord il faut, pour que cette méthode sois simple, que le sprite soit constitué d'images de même tailles, a vous de vous en occupper.
Pour vous faire une idée voici quelques exemples de sprites :

[Tutoriel] Utilisation de spritesheets Spr4

[Tutoriel] Utilisation de spritesheets Spr4

[Tutoriel] Utilisation de spritesheets Spr3

[Tutoriel] Utilisation de spritesheets Spr1

[Tutoriel] Utilisation de spritesheets Spr2

3 – Gestion des evenements et découpage des sprites

draw_sprite_part , ça vous dit quelque chose ? Vous ne vous êtes pas demandés pourquoi elle existe ? C'est cette fonction qui est la base même de ce que je vais vous montrer.

Bon prenons l'image de Link (le petit gars vert pour les incultes), on va se dé***** a découper les cases correspondantes a l'action.
Si Link regarde vers le bas et qu'il est a l'arret, on va afficher le premier "carré" de notre planche sprite :

Code:: draw_sprite_part_ext(spr,0,0,0,16,16,x,y,1,1,c_white,1)

Le petit probleme ici c'est que l'image seras toujours la même, mais c'est juste un exemple.
Le but serais de faire de même mais avec de nombreuses variables pour changer notre "carré".
On aurais donc un truc du genre :

Code:: draw_sprite_part_ext(spr,0,left*16,top*16,16,16,x,y,1,1,c_white,1)

Ici les variables left et top nous permettrons de choisir les coordonnées de notre "carré" dans notre planche sprite.
Par exemple pour left = 0 et top = 1 on auras Link qui regarde vers le haut a l'arret...

Le but est donc de creer un systeme qui selon l'action du personnage, feras changer left et top en conséquence.
Nous allons définir une variable, qui nous permettras de récuperer l'action de Link, et faire des animations.
Exemple :

Code:: action = "BasStop"
/*
Possiblité d'actions :
"BasStop"
"BasMouvement"
...
*/

Selon notre planche sprite, il serais intelligent d'utiliser des nombres au lieux de chaines de caracteres, afin de pouvoir faire des boucles, pour avoir moins de code a écrire. Après c'est a vous de voir mais cette methode est la meilleure, surtout si l'on utilise des constantes pour la facilité et ne pas se perdre.
Exemple :

Code:: action = 0
/*
On va choisir action de façon intelligente selon notre planche sprite
action =
0 : bas arret
1 : haut arret
2 : gauche arret
3 : droite arret
4 : bas mouvement ...
...
*/

Vous l'aurais compris, l'ordre des actions est définie par notre planche sprite, ici : bas , haut , gauche , droite : [Tutoriel] Utilisation de spritesheets Spr1

Maintenant nous allons définir des constantes pour appeler plus simplement nos action.
Constantes :

Code:: BAS_STOP = 0
HAUT_STOP = 1
GAUCHE_STOP = 2
DROITE_STOP = 3
BAS_MOVE = 4
...

Maintenant il est temps d'animer notre personnage. Pour cela, rien de plus simple, nous allons créer deux variables. Une qui seras la vitesse de l'image, et une autre qui s'incrémenteras de la précédente au cours du temps afin de pouvoir faire nos animations.

Code:: im_speed = 0.1
tmp = 0

Maintenant dans step nous allons définir left et top en fonction de l'action du personnage.
Exemple pour une action sans animation :

Code:: if(action == BAS_STOP)
{
left = 0
top = 0
}

Exemple pour une animation simple :

Code:: if(action == BAS_MOVE)
{
top = 0
//Notre animation fait deux images donc on fait modulo 2
left = floor(tmp) mod 2
//On incrémente tmp
tmp += im_speed
}

Si notre animation est plus compliqué, et que nous devrions parcourir les cases de notre planche sprite d'une maniere non linéaire, nous aurions une definition de left et top a chaque "step"
exemple :

Code:: if(action = NAWAK)
{
var image;
image = floor(tmp) mod 5
if(image == 0) { left = 0 ; top = 2 }
if(image == 1) { left = 1 ; top = 0 }
...
tmp += im_speed
}

4 - Le cas des rotations

Dans le cas ou notre animation devrais subir un rotation, comme notre bon vieux image_angle, et ben un obstacle se dresse devant nous :

Code:: draw_sprite_part(sprite, subimg, left, top, width, height, x, y)
draw_sprite_part_ext(sprite, subimg, left, top, width, height, x, y, xscale, yscale, color, alpha)

Vous l'aurez remarqué, les fonctions draw_sprite_part n'ont pas le paramètre angle. Il existe draw_sprite_general mais par contre imposible de definir le centre de la rotation.... Nous allons devoir nous créer nous même nos fonctions

Je vous mache le travaille :
draw_sprite_part_rot

Code:: d3d_transform_set_identity()
d3d_transform_add_translation(-argument6-sprite_get_xoffset(argument0), -argument7-sprite_get_yoffset(argument0), 0)
d3d_transform_add_rotation_z(argument8)
d3d_transform_add_translation(argument6+sprite_get_xoffset(argument0), argument7+sprite_get_yoffset(argument0), 0)
draw_sprite_part(argument0, argument1, argument2, argument3, argument4, argument5, argument6, argument7)
d3d_transform_set_identity()

Fonctionne comme draw_sprite_part mais a un argument suplémentaire -> l'angle

5 - Fichiers d'exemples

Rien ne vaux quelques fichiers d'exemples pour bien comprendre ce que l'on viens de voir.
Voici justement un pac d'exemple plein d'animations qui utilisent une planche sprite.
Pack d'exemple d'animations :
http://host-a.net/onilink_/gm_animations.rar
ou
http://www.mediafire.com/?pfa36phjyah34j4

_________________

[Tutoriel] Utilisation de spritesheets Runningpotato1

[Tutoriel] Utilisation de spritesheets TvF6GED

[Tutoriel] Utilisation de spritesheets MdetltS

c'est sympa ce tutoriel, par contre pour les palettes : [Tutoriel] Utilisation de spritesheets Spr1

tu pourrait utiliser les primitives et les vecteurs textuels :

Citation :: draw_vector(x,y,0,0)
draw_vector(x,y,0.5,0)
draw_vector(x,y,0,1/4)

draw_vector(x,y,0.5,0)
draw_vector(x,y,0,1/4)
draw_vector(x,y,0.5,1/4)
pour dessiner le premier link de gauche

draw_vector_texture(x,y,0.5,0)
draw_vector_texture(x,y,1,0)
draw_vector_texture(x,y,0.5,1/4)

draw_vector_texture(x,y,1,0)
draw_vector_texture(x,y,0.5,1/4)
draw_vector_texture(x,y,1,1/4)
pour dessiner le premier link de droite

mais je pense que tu va le mettre, si tu la pas terminé rouge

_________________
GLEngine, la génération procédurale avancée !

Image:

oui gabin je comptait le mettre mais sur une partie qui touche a la 3d, car draw_sprite_part est beaucoup plus pratique que les vertex texturés pour la 2d =p

_________________

onilink_ a écrit:: oui gabin je comptait le mettre mais sur une partie qui touche a la 3d, car draw_sprite_part est beaucoup plus pratique que les vertex texturés pour la 2d =p

ah oui, tu as raison gnii

_________________
GLEngine, la génération procédurale avancée !

Image:

Tutoriel finis, je mettrais peut être une partie sur la 3d, mais si la 2d a été comprise, alors suffit de faire pareil avec une dimension supplémentaire et des vertex.
En espérant que se seras utilisé, car utiliser une planche sprite permet d'économiser de la mémoire, fait de la place, et allège le jeu. De plus en c++ c'est cette méthode qui est utilisé.
Bon courage =)

_________________

Utilisateur confirmé: Rang **** Messages : 977

J'me suis inspiré de sque t'a fait pour faire
ça, tu peux me dire sque t'en pense ? (genre les trucs nul où les truc à changer Yum!

)

_________________
suivez moi sur ig : @kostozbrr

Sujet: Re: [Tutoriel] Utilisation de spritesheets Lun 12 Sep 2011 - 22:36

Ben ça va, pis ça fonctionne :p

_________________

Utilisateur confirmé: Rang **** Messages : 977

Ah... ? Pas de systeme qui bouffe le pc ? Pas de solutions super simple. auquel j'aurais du penser ? Bon... snif

_________________
suivez moi sur ig : @kostozbrr

Sujet: Re: [Tutoriel] Utilisation de spritesheets Mar 13 Sep 2011 - 6:52

pan !

_________________

[Tutoriel] Utilisation de spritesheets Icone_114

Sujet: Re: [Tutoriel] Utilisation de spritesheets Jeu 13 Oct 2011 - 15:17

Bonjour,

J'ai lus le tutoriel et je lai bien compris mais il y a un truc qui me perturbe. Comment gérer les collisions avec ce système?
Il faut définir un masque? Si oui ça seras un masque unique alors que les positions du personnage quant a lui peut changer les collision. Comment remédier à ça avec ce système qui me plais par sa propreté et souplesse?

Sujet: Re: [Tutoriel] Utilisation de spritesheets Jeu 13 Oct 2011 - 15:24

bah généralement dans ce type de sprite, le masque n'est pas pixel perfect, mais plutot un carré( genre pokemon quand tu marche )

_________________

Sujet: Re: [Tutoriel] Utilisation de spritesheets Jeu 13 Oct 2011 - 15:34

Ok, donc effectivement il n'y a pas de solution performante pour avoir des masques en pixel perfect avec ce système?

J'ai essayé ça mais sans succès.

Code:: mask_index = draw_sprite_part_ext(spr,0,left*size,top*size,size,size,x,y,1,1,c_white,1);

Sujet: Re: [Tutoriel] Utilisation de spritesheets Jeu 13 Oct 2011 - 18:38

A la base c'est pour un masque unique, mais rien ne t’empêche de changer de masque quand tu change d'action, ou dans le step quand tu change d'image.

Dans ton jeu t'as besoin de masques différents selon l'image du sprite courant ?

_________________

Sujet: Re: [Tutoriel] Utilisation de spritesheets Jeu 13 Oct 2011 - 21:09

Bonsoir,

Citation :: mais rien ne t’empêche de changer de masque quand tu change d'action, ou dans le step quand tu change d'image.

Oui mais cette technique n'est plus appropriée du coup.
Car on va se retrouver avec huit masques pour les huit directions...

Citation :: Dans ton jeu t'as besoin de masques différents selon l'image du sprite courant ?

Non

Pour le moment j'ai mis mon projet de coter et je fait plein de petits trucs à droite et à gauche histoire de maîtriser correctement le GML.
Donc j'en ai pas besoin mais je me demandai si c'était possible, c'est tout.

Sujet: Re: [Tutoriel] Utilisation de spritesheets Jeu 13 Oct 2011 - 21:52

Ben la réponse est non.
De toute façon je connais aucun jeu ou les persos on des masques autres que des bounding box, ou des masques pour chaque frames.

_________________

Sujet: Re: [Tutoriel] Utilisation de spritesheets Jeu 13 Oct 2011 - 22:02

Citation :: Ben la réponse est non.
De toute façon je connais aucun jeu ou les persos on des masques autres que des bounding box, ou des masques pour chaque frames.

C'est bien ce que je pensai, merci pour la réponse Smile

» Utilisation de l'UC
» FTP DLL utilisation.
» Atelier GML 3 - Trigonométrie, utilisation des lengthdir
» Utilisation du DLL gmzip
» Utilisation de 39dll