Yodajr
10/04/2006, 02h28
Jour 4 : Affichage et manipulation des images
Vous connaissez par coeur comment utiliser les boutons de la PSP ?
Excellent, nous allons maintenant apprendre à afficher des images, qui pourront servir de background et (ceux qui ont l'habitude de la prog sur GBA ou DS seront surpris) de sprites !
Effectivement, sur PSP, pas de systeme de bg/sprites gérés en hard, donc aucune limitation en vue ;)
Par exemple, dans ce tuto nous allons afficher un background qui est une image de 480x272 et un sprite qui et lui aussi une image, mais de 17x31 (les mêmes que tout à l'heure sont de nouveau étonnés ^^ )
1) Les images
Pour cet exemple, nous avons besoin de 2 images.
Elles devront etre au format PNG car c'est pour l'instant le seul format exploitable par oslib.
Pour celle qui servira de fond, je vous conseille une image de 480x272, ce qui permettra de bien remplir l'écran car il s'agit de la résolution de la PSP ;)
Pour celle qui servira de sprite, c'est un peu plus complexe :
Utilisez une plus petite image, mais bon, ca c'est accessoire, le plus important est de choisir la couleur qui sera definie comme transparente.
Par exemple, voici l'image qui constitue le sprite de ce tuto : http://hothmoon.free.fr/psp/dev/jour04_img1.png
Comme vous pouvez le constater, les parties qui ne devront pas s'afficher dans le jeu sont colorés de rose (codé 255.0.255) car c'est une couleur relativement rare et que je n'utiliserai surement jamais dans mes sprites :P
Mais vous pouvez évidement choisir la couleur que vous voulez, depuis que vous ne l'utilisez pas dans le sprite lui même (retenez juste son codage, il servira plus tard).
Ces images, tout comme toute future ressource des prochains tutos, sont à copier dans le répertoire du jeu sur la PSP (le dossier sans les %)
Vous pouvez aussi également utiliser celles du tuto (dans l'archive en bas de page)
2) Le code
//La librairie principale OSLib
#include <oslib/oslib.h>
//les callbacks
PSP_MODULE_INFO("OSLib Sample", 0, 1, 1);
PSP_MAIN_THREAD_ATTR(THREAD_ATTR_USER | THREAD_ATTR_VFPU);
//definition des pointeurs vers nos images
OSL_IMAGE *fond, *chrono;
int main()
{
//Initialisation de la librairie
oslInit(0);
//Initialisation du mode graphique
oslInitGfx(OSL_PF_8888, 1);
//definition de la transparence
oslSetTransparentColor(RGB(255,0,255));
//chargement de nos images (oui, le "loading" :p)
fond = oslLoadImageFile("fond_zora.png", OSL_IN_RAM, OSL_PF_5551);
chrono = oslLoadImageFile("chrono.png", OSL_IN_RAM, OSL_PF_5551);
//plus de transparence
oslDisableTransparentColor();
//vérification
if (!fond || !chrono)
oslDebug("Impossible de charger un ou plusieurs fichiers. Verifiez que tous les fichiers sont bien copiés dans le répertoire du jeu.");
//boucle principale
while (!osl_quit)
{
//Permet de dessiner
oslStartDrawing();
//Lit les touches
oslReadKeys();
//deplace le sprite de chrono
if (osl_keys->held.down) chrono->y += 2;
if (osl_keys->held.up) chrono->y -= 2;
if (osl_keys->held.left) chrono->x -= 2;
if (osl_keys->held.right) chrono->x += 2;
//dessine nos images
oslDrawImage(fond);
oslDrawImage(chrono);
//Fin du dessin
oslEndDrawing();
//Synchronise l'écran
oslSyncFrame();
}
//on quitte l'application
oslEndGfx();
oslQuit();
return 0;
}
3) Explications
OSL_IMAGE *fond, *chrono;
On definit les pointeurs vers nos images. Creez en un pour chaque image et bien sûr au tout début :)
oslSetTransparentColor(RGB(255,0,255));
C'est ici que je dit au programme quelle couleur il ne doit pas afficher (mon beau rose en l'occurence :p ).
Doit être appelée juste avant le chargement des images.
fond = oslLoadImageFile("fond_zora.png", OSL_IN_RAM, OSL_PF_5551);
Je charge l'image avec son nom exact (attention à la casse, elle joue).
Le paramètre suivant indique qu'elle est chargée en RAM et non en VRAM (voir la doc pour plus d'explication).
Et le dernier renseigne sur le pixel format choisi pour afficher l'image (ici 16bits par pixels, conseillé pour les sprites simples)
Attention : on ne peut pas charger des images de résolution supérieure à 512x512. Pour afficher de plus grands trucs (niveaux,...) il faudra se tourner vers les maps, mais nous verrons ca plus tard ;)
oslDisableTransparentColor();
On stoppe l'effet de transparence au cas ou notre couleur serais affichée par un dégradé par exemple.
if (!fond || !chrono) oslDebug("Impossible...
Ici on teste si les fichiers ont bien été chargés, et dans le cas contraire affiche une fenetre à l'écran proposant au joueur de quitter ou de continuer.
Ne négligez pas cette étape dans vos programmes, il arrive souvent qu'on oublie de copier certains fichiers sur la MS et le plantage est alors assuré :rolleyes:
chrono- >y += 2;
Chaque image est une structure qui contient toutes les informations sur l'image. Il y a tout plein pour parametrer l'image dans tous les sens (rotation, taille,...) mais nous les laissons pour les tutos consacrés aux effets spéciaux (ou alors consultez la doc comme toujours ;))
Donc ici nous n'abordons que la plus utile pour moi : les coordonnées : x et y.
Vous pouvez donc placer votre image ou vous voulez sur l'écran, (en sachant que le point haut gauche est 0,0 et le point bas droite est à 479,271), en renseignant les 2 coordonnées image- >x et image- >y
oslDrawImage(fond);
Affiche l'image. Remarquez l'ordre qui n'est pas un hasard : du fond de l'écran vers le premier plan : je dessine d'abord le fond puis mon perso.
Vous pouvez utiliser aussi oslDrawImageXY(image,x,y) pour dessiner votre image à un endroit précis sans passer par le renseignement des valeurs image->x et image->y, pratique pour les icones fixes à l'écran (vies,...)
4) Screen et eboot
Voila, vous devez obtenir un truc comme ça (il fout quoi là lui ? :p) :
http://hothmoon.free.fr/psp/dev/jour04_screen.png
Téléchargez l'eboot compilé pour 1.5 ici (http://hothmoon.free.fr/psp/dev/jour04_eboot.zip)
Vous connaissez par coeur comment utiliser les boutons de la PSP ?
Excellent, nous allons maintenant apprendre à afficher des images, qui pourront servir de background et (ceux qui ont l'habitude de la prog sur GBA ou DS seront surpris) de sprites !
Effectivement, sur PSP, pas de systeme de bg/sprites gérés en hard, donc aucune limitation en vue ;)
Par exemple, dans ce tuto nous allons afficher un background qui est une image de 480x272 et un sprite qui et lui aussi une image, mais de 17x31 (les mêmes que tout à l'heure sont de nouveau étonnés ^^ )
1) Les images
Pour cet exemple, nous avons besoin de 2 images.
Elles devront etre au format PNG car c'est pour l'instant le seul format exploitable par oslib.
Pour celle qui servira de fond, je vous conseille une image de 480x272, ce qui permettra de bien remplir l'écran car il s'agit de la résolution de la PSP ;)
Pour celle qui servira de sprite, c'est un peu plus complexe :
Utilisez une plus petite image, mais bon, ca c'est accessoire, le plus important est de choisir la couleur qui sera definie comme transparente.
Par exemple, voici l'image qui constitue le sprite de ce tuto : http://hothmoon.free.fr/psp/dev/jour04_img1.png
Comme vous pouvez le constater, les parties qui ne devront pas s'afficher dans le jeu sont colorés de rose (codé 255.0.255) car c'est une couleur relativement rare et que je n'utiliserai surement jamais dans mes sprites :P
Mais vous pouvez évidement choisir la couleur que vous voulez, depuis que vous ne l'utilisez pas dans le sprite lui même (retenez juste son codage, il servira plus tard).
Ces images, tout comme toute future ressource des prochains tutos, sont à copier dans le répertoire du jeu sur la PSP (le dossier sans les %)
Vous pouvez aussi également utiliser celles du tuto (dans l'archive en bas de page)
2) Le code
//La librairie principale OSLib
#include <oslib/oslib.h>
//les callbacks
PSP_MODULE_INFO("OSLib Sample", 0, 1, 1);
PSP_MAIN_THREAD_ATTR(THREAD_ATTR_USER | THREAD_ATTR_VFPU);
//definition des pointeurs vers nos images
OSL_IMAGE *fond, *chrono;
int main()
{
//Initialisation de la librairie
oslInit(0);
//Initialisation du mode graphique
oslInitGfx(OSL_PF_8888, 1);
//definition de la transparence
oslSetTransparentColor(RGB(255,0,255));
//chargement de nos images (oui, le "loading" :p)
fond = oslLoadImageFile("fond_zora.png", OSL_IN_RAM, OSL_PF_5551);
chrono = oslLoadImageFile("chrono.png", OSL_IN_RAM, OSL_PF_5551);
//plus de transparence
oslDisableTransparentColor();
//vérification
if (!fond || !chrono)
oslDebug("Impossible de charger un ou plusieurs fichiers. Verifiez que tous les fichiers sont bien copiés dans le répertoire du jeu.");
//boucle principale
while (!osl_quit)
{
//Permet de dessiner
oslStartDrawing();
//Lit les touches
oslReadKeys();
//deplace le sprite de chrono
if (osl_keys->held.down) chrono->y += 2;
if (osl_keys->held.up) chrono->y -= 2;
if (osl_keys->held.left) chrono->x -= 2;
if (osl_keys->held.right) chrono->x += 2;
//dessine nos images
oslDrawImage(fond);
oslDrawImage(chrono);
//Fin du dessin
oslEndDrawing();
//Synchronise l'écran
oslSyncFrame();
}
//on quitte l'application
oslEndGfx();
oslQuit();
return 0;
}
3) Explications
OSL_IMAGE *fond, *chrono;
On definit les pointeurs vers nos images. Creez en un pour chaque image et bien sûr au tout début :)
oslSetTransparentColor(RGB(255,0,255));
C'est ici que je dit au programme quelle couleur il ne doit pas afficher (mon beau rose en l'occurence :p ).
Doit être appelée juste avant le chargement des images.
fond = oslLoadImageFile("fond_zora.png", OSL_IN_RAM, OSL_PF_5551);
Je charge l'image avec son nom exact (attention à la casse, elle joue).
Le paramètre suivant indique qu'elle est chargée en RAM et non en VRAM (voir la doc pour plus d'explication).
Et le dernier renseigne sur le pixel format choisi pour afficher l'image (ici 16bits par pixels, conseillé pour les sprites simples)
Attention : on ne peut pas charger des images de résolution supérieure à 512x512. Pour afficher de plus grands trucs (niveaux,...) il faudra se tourner vers les maps, mais nous verrons ca plus tard ;)
oslDisableTransparentColor();
On stoppe l'effet de transparence au cas ou notre couleur serais affichée par un dégradé par exemple.
if (!fond || !chrono) oslDebug("Impossible...
Ici on teste si les fichiers ont bien été chargés, et dans le cas contraire affiche une fenetre à l'écran proposant au joueur de quitter ou de continuer.
Ne négligez pas cette étape dans vos programmes, il arrive souvent qu'on oublie de copier certains fichiers sur la MS et le plantage est alors assuré :rolleyes:
chrono- >y += 2;
Chaque image est une structure qui contient toutes les informations sur l'image. Il y a tout plein pour parametrer l'image dans tous les sens (rotation, taille,...) mais nous les laissons pour les tutos consacrés aux effets spéciaux (ou alors consultez la doc comme toujours ;))
Donc ici nous n'abordons que la plus utile pour moi : les coordonnées : x et y.
Vous pouvez donc placer votre image ou vous voulez sur l'écran, (en sachant que le point haut gauche est 0,0 et le point bas droite est à 479,271), en renseignant les 2 coordonnées image- >x et image- >y
oslDrawImage(fond);
Affiche l'image. Remarquez l'ordre qui n'est pas un hasard : du fond de l'écran vers le premier plan : je dessine d'abord le fond puis mon perso.
Vous pouvez utiliser aussi oslDrawImageXY(image,x,y) pour dessiner votre image à un endroit précis sans passer par le renseignement des valeurs image->x et image->y, pratique pour les icones fixes à l'écran (vies,...)
4) Screen et eboot
Voila, vous devez obtenir un truc comme ça (il fout quoi là lui ? :p) :
http://hothmoon.free.fr/psp/dev/jour04_screen.png
Téléchargez l'eboot compilé pour 1.5 ici (http://hothmoon.free.fr/psp/dev/jour04_eboot.zip)