Les Sprites sur DS - partie 1

Comme promis, je vous ai préparé un petit tutoriel concernant les sprites. Nous verrons pour cela comment se fabriquer un curseur pour son stylet. Nous aborderons trois points : afficher un sprite, déplacer un sprite et pour finir la création de notre curseur final.

Nous partirons du principe que les points abordés dans les articles suivants sont connus : Introduction aux Sprites et Backgrounds avec PAlib et Préparer ses images pour la DS avec PAGfx.

Voici notre fichier main.cpp de départ (sources ici), nous y trouvons l’inclusion de la PAlib, mais également des fichiers qui contiennent nos sprites :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// Includes
#include <PA9.h>;       // Include for PA_Lib
 
#include "gfx/all_gfx.h"
#include "gfx/all_gfx.c"
 
int main(int argc, char ** argv)
{
 
	// Initializes PA_Lib
	PA_Init();
	PA_InitVBL();
 
	// Text Init
	PA_InitText(1,2);
	PA_InitText(0,2);
 
	// Infinite loop to keep the program running
	while (1)
	{
		PA_WaitForVBL();
	}
 
	return 0;
} // End of main()

Afficher un sprite

Pour afficher un sprite nous avons besoin de sa palette et de sa description. Par défaut avec PAgfx, un sprite nommé “image” aura “image_Pal” pour palette et “image_Sprite” pour description de sprite.

Nous allons commencer par créer notre curseur qui s’appelle “cercle”. Pour déclarer sa palette, nous allons utiliser la fonction suivante :

void PA_LoadSpritePal(u8 screen, u8 palette_number, void* palette);

Les paramètres sont respectivement :

• l’écran sur lequel sera affiché le sprite
• le numéro que vous attriburez à la palette pour la désigner par la suite (0 à 127)
• la variable contenant votre palette (par exemple variable_Pal)

1
2

	//Chargement de la palette de notre curseur
	PA_LoadSpritePal(0, 0, (void*)cercle_Pal);

Nous allons maintenant charger le sprite en lui-même avec la fonction PA_CreateSprite :

void PA_CreateSprite(u8 screen, u8 obj_number, void* obj_data, u8 obj_shape,
		u8 obj_size, u8 color_mode, u8 palette, s16 x, s16 y);

Les paramètres sont respectivement :

• l’écran sur lequel sera affiché le sprite (le même que sa palette)
• le numéro que vous attriburez au sprite pour le désigner par la suite (0 à 127)
• la variable contenant votre sprite (par exemple variable_Sprite)
• les dimensions du sprite (constante sous la forme OBJ_SIZE_32X32)
• le mode colorimétrique : COLORS_256 ou COLORS_16
• le numéro de palette (définit auparavent)
• position en X de départ
• position en Y de départ

1
2
3
4
5
6

	//Chargement de la palette de notre curseur
	PA_LoadSpritePal(0, 0, (void*)cercle_Pal);
 
	//Chargement du sprite de notre curseur
	PA_CreateSprite(0, 0, (void*)cercle_Sprite, OBJ_SIZE_32X32,
			COLORS_256, 0, 0, 0);

Vous devriez à présent obtenir ceci si vous lancez votre application dans un émulateur :

C’est pas exceptionnel mais c’est déjà une image ! Vous savez maintenant afficher un sprite sur votre DS.

Déplacer un sprite

Maintenant que votre sprite est afficher, il ne sert pas à grand chose s’il reste là sans rien faire. Nous allons voir maintenant différentes fonctions qui permettent de le déplacer.

Déplacer un sprite

PA_SetSpriteXY(u8 screen, u8 sprite, s16 x, s16 y);

C’est une fonction basique pour position un sprite à l’endroit souhaité sur l’écran

Suivre le stylet

1

PA_SetSpriteXY(0, 0, Stylus.X, Stylus.Y);

Voici un exemple qui permet de positionner notre sprite en fonction du stylet.

Rendre le sprite draggable (déplaçable quand touché par le stylet)

PA_MoveSprite(u8 sprite);

En touchant le stylet et en maintenant la pression, on pourra faire glisser un sprite comme l’on souhaite. Dès que l’on relache le stylet, le sprite redevient immobile là où l’on la laisser.

Sprite touché par le stylet

u8 PA_SpriteTouched(u8 sprite)

Permet de savoir si un sprite est touché par le stylet, renvoie 0 (non) ou 1 (oui).

Création d’un curseur

Nous allons réutiliser nos connaissances pour fabriquer un curseur simple. Celui-ci indiquera un pression du stylet et suivra celui-ci.

Nous commençons donc par charger notre image de curseur comme nous l’avons fait précédemment mais en faisant attention à le charger hors de la partie visible de l’écran (dimension des écrans).

1
2
3
4
5
6

	//Chargement de la palette de notre curseur
	PA_LoadSpritePal(0, 0, (void*)cercle_Pal);
 
	//Chargement du sprite de notre curseur hors de l'écran
	PA_CreateSprite(0, 0, (void*)cercle_Sprite, OBJ_SIZE_32X32,
			COLORS_256, 0, 300, 200);

Dans la boucle de notre programme, nous allons positionner notre sprite en fonction du stylet.

1
2
3
4
5
6
7
8

	while (1)
	{
		//On positionne le sprite en fonction du stylet
		PA_SetSpriteXY(0, 0, Stylus.X, Stylus.Y);
 
		//On attend un frame
		PA_WaitForVBL();
	}

On remarque alors deux choses : le sprite n’est pas centré par rapport au stylet et le sprite reste visible quand on n’utilise plus le stylet.

Pour centrer le sprite, nous allons utiliser un astuce pratique souvent utilisé quelque soit le langage. En sachant que l’origine d’un sprite est en haut à gauche de celui-ci, il suffit d’utiliser sa largeur et sa hauteur comme cela :

1
2
3
4
5
6
7
8
9
10
11
12

	//Dimension dynamique du sprite
	int sWidth = PA_GetSpriteLx(0,0);
	int sHeight = PA_GetSpriteLy(0,0);
 
	while (1)
	{
		//On centre le sprite par rapport à la position du stylet
		PA_SetSpriteXY(0, 0, Stylus.X-(sWidth/2), Stylus.Y-(sHeight/2));
 
		//On attend un frame
		PA_WaitForVBL();
	}

Pour finir nous cacherons le sprite quand le stylet ne touche pas l’écran :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

	while (1)
	{
		//Presse-t-on l'écran avec le stylet ?
		if(Stylus.Held){
 
			//Si oui, on centre le sprite par rapport à la position du stylet
			PA_SetSpriteXY(0, 0, Stylus.X-(sWidth/2), Stylus.Y-(sHeight/2));
 
		}else{
 
			//Sinon on cache le sprite hors de la vue de l'écran
			PA_SetSpriteXY(0, 0, 300, 200);
		}
 
		//On attend un frame
		PA_WaitForVBL();
	}

Voilà, nous avons un jouli sprite en guise de curseur pour le stylet !

Vous trouverez le code source final ici.

Il existe également des fonctions pour modifier l’image et même faire des animations mais nous verrons cela dans un prochain article