Aller au menu - Aller au contenu

Icône La 2D de base

Avatar
Avatar
Mise à jour : 14/10/2009
Difficulté : Intermédiaire Intermédiaire
282 visites depuis 7 jours, classé 354/786
Les jeux de DS sont autre chose que des écrans noirs :lol: . Nous allons donc apprendre, à ce stade, à créer des arrière-plans et des sprites.
Et pourquoi pas des Coca-Cola ? :-°

Les sprites ne se boivent pas, mais ce sont des images comme celle du personnage principal d'un jeu, par exemple.
Sommaire du tutoriel :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant

Outils nécessaires

On va travailler en 2D.
Pour cela, rendez-vous dans devkitpro\PAlib\Tools\PAGfx et copiez PAGfx.exe.

Allez dans le dossier de votre jeu et créez-y un répertoire nommé gfx et copiez-y l'exécutable. Dans ce même dossier, créez un fichier nommé PAGfx.ini, il contiendra les instructions pour convertir vos images.
Si vous êtes sous Linux, il faut aller dans devkitpro\PAlib\Tools\PAGfx - Linux et décompresser PAGfx - Linux.tar.gz.


Syntaxe du fichier PAGfx.ini


Ce fichier doit être composé de 3 parties commençant par un dièse (#) :
  • Couleur transparente (#TranspColor NomDeLaCouleur). La couleur transparente que nous utiliserons toujours est Magenta (#TranspColor Magenta). Sa valeur RGB est 255 ; 0 ; 255.
  • Sprites (dessins) : #Sprites :. Pour ajouter des sprites, il suffit d'aller à la ligne après cette démarquation et de faire cette syntaxe :
    nom_du_sprite.extension 256colors nom_du_futur_fichier_contenant_le_sprite. Nom_du_sprite.extension est votre image. 256colors est le maximum pour des sprites, pour avoir un rendu excellent. Nom_du_futur_fichier_contenant_le_sprite est le fichier que PAGfx.exe créera. Vous pouvez mettre plusieurs sprites dedans.
  • Arrière-plans (#Backgrounds :). Pour ajouter des arrière-plans, il suffit d'aller à la ligne après cette démarquation et de faire cette syntaxe : nom_de_l_arriere_plan.extension type_d_arriere_plan. Nom_de_l_arriere_plan.extension est l'image que vous avez créée. Type_d_arriere_plan déterminera le code source (que nous apprendrons plus tard) :
    -EasyBg : arrière-plan aux dimensions de l'écran (256*192) ou plus, peut subir un défilement
    -LargeMap : arrière-plan aux grandes dimensions (les plus courantes sont 1024*1024), surtout utilisé pour les DualBackgrounds (arrière-plan sur les deux écrans simultanément o_O )
    -TileBg : arrière-plan principalement utilisé pour les polices, composé d'une multitude de "tuiles" (tiles) de 8*8
    -RotBg : arrière-plan utilisé pour être tourné dans tous les sens, pour subir des zooms, voire même de la 3D :) .


Exemple de PAGfx.ini :
Citation

#TranspColor Magenta

#Sprites :
hero.PNG 256colors sprites
jouer.PNG 256colors sprites
njeu.PNG 256colors sprites
fleche.PNG 256colors sprites
oui.PNG 256colors sprites
non.PNG 256colors sprites

#Backgrounds :
newfont.GIF TileBg
fontscreen1.GIF TileBg
bg_menu.PNG LargeMap
bg1.PNG LargeMap
confirmer.PNG EasyBg

Les arrière-plans

On va s'attaquer aux arrière-plans. :pirate:
Après avoir utilisé PAGfx, il faut coder (on est bien là pour ça :lol: ).
Au code minimal, il faut rajouter, dans la partie des includes :
Code : C
1
#include "all_gfx.h"

Ce simple header permet d'inclure les images que vous avez faites auparavant.

Code pour EasyBg


Voici la fonction PA_LoadBackground :
Code : C
1
void PA_LoadBackground(u8 ecran,u8 numero_bg,const PA_BgStruct* nom_bg);

Nom_bg est le nom de votre image sans l'extension.

Code : C
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
#include <PA9.h>
#include "all_gfx.h"
 
int main (int argc, char **argv)
{
    PA_Init();
    
    PA_LoadBackground(0,1,&bg);

    while (1)
    {
        PA_WaitForVBL();
    }
   
    return 0;
}

Nous allons nous amuser à faire défiler l'arrière-plan (scroll). Voici le prototype de la fonction PA_EasyBgScrollXY :
Code : C
1
void PA_EasyBgScrollXY(u8 ecran,u8 numero_bg,s32 x,s32 y);

Voici le code pour un petit défilement :
Code : C
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
#include <PA9.h>
#include "all_gfx.h"
 
int main (int argc, char **argv)
{
    int scrollx=0,scrolly=0;
    PA_Init();
    
    PA_LoadBackground(0,1,&bg);
    while (1)
    {
        scrollx++;
        scrolly++;
        PA_EasyBgScrollXY(0,1,scrollx,scrolly);
        PA_WaitForVBL();
    }
    return 0;
}

Si votre défilement dépasse les dimensions de l'arrière-plan, vous aurez un drôle de rendu :lol: !


Code pour TileBg (seulement pour les polices)


Voici la fonction de PA_LoadText :
Code : C
1
void PA_LoadText(u8 ecran, u8 numero_bg, const PA_BgStruct* police);

Code : C
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
#include <PA9.h>
#include "all_gfx.h"
 
int main(int argc, char ** argv)
{
    PA_Init();
        
    PA_LoadText(1,0,&police);
    PA_OutputText(1,0,0,"Pas mal, la nouvelle police :) ");
    while (1)
    {
        PA_WaitForVBL();
    }
    return 0;
}

Gardez en tête qu'il n'y a que 4 couches d'arrière-plans disponibles (de 0 à 3) !

Les sprites

A présent, passons aux sprites.
Il faut toujours inclure :
Code : C
1
#include "all_gfx.h"


Code pour sprites standards


Tout d'abord, il faut charger la palette de sprites. On va utiliser cette fonction :
Code : C
1
void PA_LoadSpritePal(u8 ecran,u8 numero_palette,(void*)fichier_palette_cree_par_PAGfx);

Mais comment connaître Fichier_palette_cree_par_PAGfx ?

C'est simple, supposons que votre PAGfx.ini comporte :
Citation
#TranspColor Magenta

#Sprites :
mario.PNG 256colors sprites
wario.PNG 256colors sprites

#Backgrounds :

Le troisième mot est la palette. Pour le code, il suffit de rajouter _Pal.
Ce qui donne :
Code : C
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
#include <PA9.h>
#include "all_gfx.h"
 
int main(int argc, char ** argv)
{
    PA_Init();
 
    PA_LoadSpritePal(0,0,(void*)sprites_Pal);
 
    while(1)
    {
        PA_WaitForVBL();
    }
    return 0;
}

Et maintenant, on va créer le sprite avec PA_CreateSprite :
Code : C
1
void PA_CreateSprite(u8 ecran,u8 numero_sprite,(void*)nom_sprite_cree_par_PAGfx,u8 forme,u8 taille,u8 mode_couleurs,u8 palette,s16 position_x,s16 position_y);

Pour obtenir Nom_sprite_cree_par_PAGfx, il faut regarder ça dans PAGfx.ini :
Citation
#TranspColor Magenta

#Sprites :
mario.PNG 256colors sprites
wario.PNG 256colors sprites

#Backgrounds :

Il s'agit en fait du nom des images sans l'extension.
À ces noms, il faut rajouter _Sprite.
Il y a plusieurs tailles différentes (variables forme et taille), voici la liste complète :
  • OBJ_SIZE_8X8 : pour un sprite de 8*8 :)
  • OBJ_SIZE_16X16
  • OBJ_SIZE_32X32
  • OBJ_SIZE_64X64
  • OBJ_SIZE_16X8
  • OBJ_SIZE_32X8
  • OBJ_SIZE_32X16
  • OBJ_SIZE_64X32
  • OBJ_SIZE_8X16
  • OBJ_SIZE_8X32
  • OBJ_SIZE_16X32
  • OBJ_SIZE_32X64

Les constantes OBJ_SIZE_[...]X[...] remplacent les arguments forme et taille. Vous n'avez donc plus 9 mais 8 arguments à fournir.

Et si mon image faisait 20*10 ? Il n'existe pas de constante adaptée...

Il suffit de prendre la constante qui est juste au-dessus de la valeur (hauteur ou largeur) la plus grande. Ici, 20 est la plus grande valeur, donc il faudra créer un sprite de 32*16, et les pixels qui ne seront pas utilisés (après 20 dans les x et après 10 dans les y) devront être de la couleur transparente définie dans PAGfx.ini.
Gnein ? o_O

Bon, je vais faire une image :
Image utilisateur
C'est un rectangle de 20*10, qui doit être mis en 32*16 ou plus.
Et si une des valeurs de mon image dépassait 64 ?

Vous avez trois solutions :
  • Réduire l'image en format 64*64 (en conservant le ratio largeur/hauteur, mais la qualité diminuera).
  • Le transformer en arrière-plan (plus rare, mais possible).
  • Mettre plusieurs sprites côte à côte contenant chacun un morceau de l'image et la reconstituant une fois regroupés (pas très conseillé car il n'y a que 128 sprites disponibles par écran).

Ensuite, mode_couleur peut prendre deux valeurs : soit 0 ; soit 1.
Mais comment on fait pour savoir s'il faut mettre 1 ou 0 ?

Il faut regarder :
Citation
#TranspColor Magenta

#Sprites :
mario.PNG 256colors sprites
wario.PNG 256colors sprites

#Backgrounds :

Il faut mettre 1 pour 256 couleurs, et 0 pour 16 couleurs.
Palette est le numéro de la palette (définie plus haut).
Voici un code récapitulatif (avec notre rectangle :p ) :
Code : C
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
#include <PA9.h>
#include "all_gfx.h"
 
int main(int argc, char ** argv)
{
    PA_Init();
 
    PA_LoadSpritePal(0,0,(void*)sprites_Pal);
    PA_CreateSprite(0,0,(void*)rectangle_Sprite,OBJ_SIZE_32X16,1,0,0,0);
    /* On crée un sprite sur l'écran tactile (0), son numéro est 0, c'est un sprite semblable à rectangle.png
       Vu qu'il fait 20*10, il faut le mettre en 32*16, 256 couleurs donc 1, utilise la palette 0, sa position dans
       les X est 0, comme dans les y. */
 
    while(1)
    {
        PA_WaitForVBL();
    }
    return 0;
}

On peut changer les coordonnées d'un sprite avec PA_SetSpriteXY :
Code : C
1
void PA_SetSpriteXY(ecran,numero_sprite,position_x,position_y);

Voici un petit jeu :
Code : C
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
#include <PA9.h>
#include "gfx/all_gfx.h"
 
int main(int argc, char ** argv)
{
    int x=100,y=100;
    PA_Init();
 
    PA_LoadSpritePal(0,0,(void*)sprites_Pal);
    PA_CreateSprite(0,0,(void*)rectangle_Sprite,OBJ_SIZE_32X16,1,0,0,0);
 
    while(1)
    {
        PA_SetSpriteXY(0,0,x,y);
        PA_WaitForVBL();
    }
    return 0;
}

Si vous devez gérer une IA, et que chaque élément contrôlé par ordinateur (ou par vous) est le même, vous pouvez utiliser la macro PA_CloneSprite(ecran,numero_du_sprite_a_creer,numero_du_sprite_qui_va_etre_cloné) pour cloner le sprite que vous voulez. Ainsi, si vous faites PA_CloneSprite(0,1,0); , vous créerez, dans l'écran 0, un clone du sprite 0 ayant pour numéro 1.
Vous pouvez aussi libérer la mémoire en détruisant des sprites qui ne servent plus à rien avec :
Code : C
1
void PA_DeleteSprite(u8 ecran,u8 numero_sprite);


Il ne peut y avoir que 128 sprites sur chaque écran, donc à vous de les utiliser à bon escient...

Q.C.M.

Quel est le nom des fichiers (exe et ini) que nous utiliserons souvent ?
Quel est, parmi ces réponses, le format d'image le plus adapté pour les sprites.

Statistiques de réponses au QCM

C'était un gros chapitre, qui pose les bases de la 2D, le suivant nous permettra de découvrir d'autres fonctions et utilités de la 2D ! :)
Chapitre précédent Sommaire Chapitre suivant

Partager

20 commentaires pour "La 2D de base"
Note moyenne : 3.57 / 4 (65 votes)
Pseudo Commentaire
Hors ligne anomage # Posté le 01/11/2011 à 13:34:06

Avis : Très bon

Je trouve la partie des sprites/backgrounds asser mal expliquée :/ Dans les exemples, il faut créer un .c dans le dossier bin, ce qui n'est pas exploiqué ici. Il faut aussi complèter le fichier all_gfx.h, on ne le dit pas ici, le build rapportera toujours des erreurs! SVp, mettez à jour votre tutoriel, car je suis bloqué, personne ne répond sur le forum.

Cordialement.

Ne fait pas l'amour dans ton jardin car l'amour est aveugle, mais ton voisin j'en doute fortement...

Attention, en cliquant ici vous perdrez 10 minutes de votre vie! : ici

Venez regardez mes créations en programmtion! :D : Anomage's créations
(Attention le site ne ressemble à rien pour le momment, mais je pense le modifier plus tard...)
 
Hors ligne Aire-One # Posté le 16/11/2011 à 13:11:23
<(¤v¤)>

Avis : Très bon

Personnelement, je trouve le tuto bien expliqué! Il faut juste quelques temps de pratique ;)
Sinon, allez voir par là: sur le wiki de PAlib (j'ais mis le lien le chapitre sur les sprites, le suivant est sur les backgrounds)

MéoL@y:Code : C
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
// VOICI TA BOUCLE: (j'ais changé les commentaire pour expliquer
while(1)
    {
        PA_WaitForVBL(); // Rafréchissements
		
		scrollx += (Pad.Held.Right - Pad.Held.Left)*4; // scrollx est la variable de déplacement du backgroun en absisce
// On la change suivant les touches appuyées : Pad.Held.Right & Left sont des bool qui renvoyent 1 si appuyé! c'est donc une simple soustraction multiplié par 4 pour allé plus vite!!!)
		scrolly += (Pad.Held.Down - Pad.Held.Up)*4; // idem pour les ordonnées

		if(scrollx < 0) scrollx = 0; // On évite d'allé trop loin vers la gauche: si on est déja tout à gauche et que l'on est encors plus loin, on retourne au maximum possible vers la gauche
		if(scrollx > (2048-256)) scrollx = (2048-256); // idem à droite

		if(scrolly < 0) scrolly = 0; // idem en haut
		if(scrolly > (2048-192)) scrolly = (2048-192); // & en bas
		
		PA_EasyBgScrollXY(0, 3, scrollx, scrolly); // On affiche l'image avec les déplacements
        //Boucle infinie (inutile de l'utiliser puisqu'il n'y aura pas de changement)
// Si Si trés utile même!!!
    }


Et voilà! :magicien:

En éspérant avoir aidé de pauvres Zér0 en difficulté :ange:

EDIT: orthographe + rajout de précisions

Reflets d'acide, la saga MP3 culte !
N'hésitez pas à me contacter
C: SDL, FMOD, (PAlib)
C++: PAlib, Qt, OpenGL
Batch (Makefile)
(xHTML/CSS + (PHP, Javascipt) occasionnellement :-° )
 
Hors ligne Tangeek # Posté le 14/12/2011 à 16:34:26
Avatar

Ville : Bruxelles
Pays : Belgique

J'ai un problème à l'exécution de PAGfx. J'obtiens un crash du programme et l'erreur 0xe0434f4d.
Quelqu'un sait-il d'où cela provient ?

EDIT : My bad. Il semblerait que cela soit juste un problème de résolution de l'image. Je l'ai passée en 64*64, et ça marche niquel.
En espérant ne plus avoir à reposter ici, je continue donc ma lecture :p

When I see a bird that walks like a duck and swims like a duck and quacks like a bird, I call that bird a duck.
 
Hors ligne Ghost_anon # Posté le 11/03/2012 à 10:04:44
Avatar

Avis : Bon

Salut

Je vais pas descendre ce tuto, car il est bien fait, et c'est déjà du boulot pour seulement l'avoir créer,

cependant, je regrette un peu de ne pas avoir un petit ZIP d'images pour étudier le code en même temps.

sur les tutos de Matéo, des fois, ça me prenait la journée pour juste un chapitre, car j'aime bien prendre mon temps pour assimiler le cours!

là, ça va être le cas car je le passe plus dans ma DOC que sur le tuto! (recherche des bonnes fonctions oblige)

Gros chapitre, comme il est dis. Dommage qu'il ne soit pas plus détaillé avec un exercice à la fin !

++
Hors ligne snake_48 # Posté le 11/03/2012 à 13:09:46
Il me manque un bit.
Avatar

Études : INSA Lyon

Désolé pour le zip. Ensuite, pour suivre le tutoriel normalement il se suffit à lui-même (c'est le principe !). Le tuto a été fait il y a pas mal de temps, et nous n'avons plus le temps de le mettre à jour (fini le lycée). Donc j'ai fait une mise à jour partielle mais il reste encore pas mal de code basé sur une ancienne version de PAlib. Pour l'exercice, il est à la fin du chapitre suivant. En effet, il faut voir "La 2D de base" comme "La 2D (1/2)" et "La 2D avancée" comme "La 2D (2/2)".

Programmez sur votre Wii ! | Programmez sur votre Nintendo DS ! | Charger des fichiers .OBJ | Introduction au scripting avec Python
Création d'un moteur physique (en cours)
Code Lyoko Strategy Game Coder
Langages connus : AS3, Batch, C, C++, HTML, Java, Javascript, PHP, Python.
Programme sur : PC, Nintendo DS, Wii.
o----}=========>
 

Voir tous les commentaires