Yodajr
10/04/2006, 03h16
Jour 7 : Effets spéciaux sur les images
Pour se reposer du tuto précedent et economiser ses forces pour les prochains (:P), on fait une petite pause pour s'amuser avec les sprites et faire tout ce qui nous faisait réver sur snes (enfin moi oui :D)
Au menu : Zooms, rotations et transparence :)
1) Les images
Bon aujourd'hui pour ce tuto, on n'a besoin comme pour le jour 4 que de 2 images : un fond et un sprite.
Ouf ! :p
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, *boo;
//variables
int zoom = 160;
int alpha = 128;
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_boss.png", OSL_IN_RAM, OSL_PF_5551);
boo = oslLoadImageFile("boo.png", OSL_IN_RAM, OSL_PF_5551);
//plus de transparence
oslDisableTransparentColor();
//vérification
if (!fond || !boo)
oslDebug("Verifiez que tous les fichiers sont bien copiés dans le répertoire du jeu.");
//centre du sprite
boo->centerX = boo->sizeX / 2;
boo->centerY = boo->sizeY / 2;
//on le place au centre de l'écran
boo->x = 240;
boo->y = 136;
//boucle principale
while (!osl_quit)
{
//Permet de dessiner
oslStartDrawing();
//Lit les touches
oslReadKeys();
//deplace le sprite de boo
if (osl_keys->held.down) boo->y += 2;
if (osl_keys->held.up) boo->y -= 2;
if (osl_keys->held.left) boo->x -= 2;
if (osl_keys->held.right) boo->x += 2;
//effectue une rotation sur boo
if (osl_keys->held.L) boo->angle -= 2;
if (osl_keys->held.R) boo->angle += 2;
//zoome le sprite de boo
if (osl_keys->held.square && zoom < 400) { boo->stretchX++; boo->stretchY++; zoom++; }
if (osl_keys->held.circle && zoom > 0 ) { boo->stretchX--; boo->stretchY--; zoom--; }
//reglage de la transparence
if (osl_keys->held.triangle && alpha > 0) alpha--;
if (osl_keys->held.cross && alpha < 255) alpha++;
//dessine nos images
oslDrawImage(fond);
//active la transparence
oslSetAlpha(OSL_FX_ALPHA,alpha);
oslDrawImage(boo);
//desactive la transparence
oslSetAlpha(OSL_FX_RGBA,alpha);
//Fin du dessin
oslEndDrawing();
//Synchronise l'écran
oslSyncFrame();
}
//on quitte l'application
oslEndGfx();
oslQuit();
return 0;
}
3) Explications
boo- >centerX = boo- >sizeX / 2;
boo- >centerY = boo- >sizeY / 2;
Ici je définit le centre du sprite. Par défaut, il s'agit du point 0,0 de l'image. En plus ici, en faisant appel aux valeurs SizeX/Y de la structure de l'image, je suis sur de pointer le centre quelque soit la taille de l'image, si je doit la modifier, etc... ;)
if (osl_keys- >held.L) boo- >angle -= 2;
Ici je "rotationne" le sprite ^_^
Il suffit en effet de modifier la valeur du membre "angle" de la structure de l'image pour le faire tourner autour de son centre (voila la raison du changement de centre au début, sinon le sprite aurait tourné autour de son angle haut droit).
if (osl_keys- >held.square && zoom < 400) { boo- >stretchX++; boo- >stretchY++; zoom++; }
Ici je "zoome" le sprite :)
Pour ce faire, nous n'avons qu'a modifier les valeurs des membres "StretchX" et "StretchY" de la structure de l'image.
Ces membres contiennent au tout début la taille exacte de l'image, donc en les augmentant, j'agrandis l'image, et en les réduisant, je rend l'image plus petite. Pas plus compliqué que ca :)
Ici j'effectue les modifications sur les 2 membres en même temps, histoire d'avoir un zoom, mais rien ne vous empeche de seulement modifier StretchX par exemple, l'image ne fera que s'élargir.
Sinon niveau prog, la presence de la variable zoom est juste pour mettre des barrières, elle n'est pas indispensable.
if (osl_keys- >held.triangle && alpha > 0) alpha--;
Ici je modifie la transparence de mon sprite (en fait ici, je modifie juste une valeur, la vraie modif se fait plus bas).
Pareil que tout à l'heure, je met des barrieres, sinon c'est moins cool... essayez de les enlever, vous verrez ;)
oslSetAlpha(OSL_FX_ALPHA,alpha);
Ici j'applique le niveau de transparence que je viens de modifier plus haut. Remarquez la position de cette commande, je la place juste avant le dessin de mon sprite et après celui du fond. Vous comprendrez aisément que si j'avais placé cette commande en haut, mes 2 images auraient subies le même degré de transparence simultanément (space l'effet, essayez ^_^).
A noter tout de même que la transparence sprite sur sprite est gérée parfaitement (clin d'oeil au dev sur GBA/DS ;)) : si vous rendez transparents 2 sprites et que vous les surperposez, vous arriverez à voir le fond, mais également le sprite placé au dessous :)
L'effet d'alpha utilisé ici est un effet de transparence classique. Mais d'autres effets sont possibles, consultez la doc pour avoir plus de renseignements sur OSL_FX_ADD (effet "fantome"), OSL_FX_SUB ("cache"), ou encore OSL_FX_COLOR (pour teinter l'image).
oslSetAlpha(OSL_FX_RGBA,alpha);
Ici j'annule l'alpha pour dessiner correctement la prochaine mon fond.
4) Screen et eboot
Voila, vous devez obtenir un truc comme ça :
http://hothmoon.free.fr/psp/dev/jour07_screen.png
Téléchargez l'eboot compilé pour 1.5 ici (http://hothmoon.free.fr/psp/dev/jour07_eboot.zip)
Pour se reposer du tuto précedent et economiser ses forces pour les prochains (:P), on fait une petite pause pour s'amuser avec les sprites et faire tout ce qui nous faisait réver sur snes (enfin moi oui :D)
Au menu : Zooms, rotations et transparence :)
1) Les images
Bon aujourd'hui pour ce tuto, on n'a besoin comme pour le jour 4 que de 2 images : un fond et un sprite.
Ouf ! :p
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, *boo;
//variables
int zoom = 160;
int alpha = 128;
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_boss.png", OSL_IN_RAM, OSL_PF_5551);
boo = oslLoadImageFile("boo.png", OSL_IN_RAM, OSL_PF_5551);
//plus de transparence
oslDisableTransparentColor();
//vérification
if (!fond || !boo)
oslDebug("Verifiez que tous les fichiers sont bien copiés dans le répertoire du jeu.");
//centre du sprite
boo->centerX = boo->sizeX / 2;
boo->centerY = boo->sizeY / 2;
//on le place au centre de l'écran
boo->x = 240;
boo->y = 136;
//boucle principale
while (!osl_quit)
{
//Permet de dessiner
oslStartDrawing();
//Lit les touches
oslReadKeys();
//deplace le sprite de boo
if (osl_keys->held.down) boo->y += 2;
if (osl_keys->held.up) boo->y -= 2;
if (osl_keys->held.left) boo->x -= 2;
if (osl_keys->held.right) boo->x += 2;
//effectue une rotation sur boo
if (osl_keys->held.L) boo->angle -= 2;
if (osl_keys->held.R) boo->angle += 2;
//zoome le sprite de boo
if (osl_keys->held.square && zoom < 400) { boo->stretchX++; boo->stretchY++; zoom++; }
if (osl_keys->held.circle && zoom > 0 ) { boo->stretchX--; boo->stretchY--; zoom--; }
//reglage de la transparence
if (osl_keys->held.triangle && alpha > 0) alpha--;
if (osl_keys->held.cross && alpha < 255) alpha++;
//dessine nos images
oslDrawImage(fond);
//active la transparence
oslSetAlpha(OSL_FX_ALPHA,alpha);
oslDrawImage(boo);
//desactive la transparence
oslSetAlpha(OSL_FX_RGBA,alpha);
//Fin du dessin
oslEndDrawing();
//Synchronise l'écran
oslSyncFrame();
}
//on quitte l'application
oslEndGfx();
oslQuit();
return 0;
}
3) Explications
boo- >centerX = boo- >sizeX / 2;
boo- >centerY = boo- >sizeY / 2;
Ici je définit le centre du sprite. Par défaut, il s'agit du point 0,0 de l'image. En plus ici, en faisant appel aux valeurs SizeX/Y de la structure de l'image, je suis sur de pointer le centre quelque soit la taille de l'image, si je doit la modifier, etc... ;)
if (osl_keys- >held.L) boo- >angle -= 2;
Ici je "rotationne" le sprite ^_^
Il suffit en effet de modifier la valeur du membre "angle" de la structure de l'image pour le faire tourner autour de son centre (voila la raison du changement de centre au début, sinon le sprite aurait tourné autour de son angle haut droit).
if (osl_keys- >held.square && zoom < 400) { boo- >stretchX++; boo- >stretchY++; zoom++; }
Ici je "zoome" le sprite :)
Pour ce faire, nous n'avons qu'a modifier les valeurs des membres "StretchX" et "StretchY" de la structure de l'image.
Ces membres contiennent au tout début la taille exacte de l'image, donc en les augmentant, j'agrandis l'image, et en les réduisant, je rend l'image plus petite. Pas plus compliqué que ca :)
Ici j'effectue les modifications sur les 2 membres en même temps, histoire d'avoir un zoom, mais rien ne vous empeche de seulement modifier StretchX par exemple, l'image ne fera que s'élargir.
Sinon niveau prog, la presence de la variable zoom est juste pour mettre des barrières, elle n'est pas indispensable.
if (osl_keys- >held.triangle && alpha > 0) alpha--;
Ici je modifie la transparence de mon sprite (en fait ici, je modifie juste une valeur, la vraie modif se fait plus bas).
Pareil que tout à l'heure, je met des barrieres, sinon c'est moins cool... essayez de les enlever, vous verrez ;)
oslSetAlpha(OSL_FX_ALPHA,alpha);
Ici j'applique le niveau de transparence que je viens de modifier plus haut. Remarquez la position de cette commande, je la place juste avant le dessin de mon sprite et après celui du fond. Vous comprendrez aisément que si j'avais placé cette commande en haut, mes 2 images auraient subies le même degré de transparence simultanément (space l'effet, essayez ^_^).
A noter tout de même que la transparence sprite sur sprite est gérée parfaitement (clin d'oeil au dev sur GBA/DS ;)) : si vous rendez transparents 2 sprites et que vous les surperposez, vous arriverez à voir le fond, mais également le sprite placé au dessous :)
L'effet d'alpha utilisé ici est un effet de transparence classique. Mais d'autres effets sont possibles, consultez la doc pour avoir plus de renseignements sur OSL_FX_ADD (effet "fantome"), OSL_FX_SUB ("cache"), ou encore OSL_FX_COLOR (pour teinter l'image).
oslSetAlpha(OSL_FX_RGBA,alpha);
Ici j'annule l'alpha pour dessiner correctement la prochaine mon fond.
4) Screen et eboot
Voila, vous devez obtenir un truc comme ça :
http://hothmoon.free.fr/psp/dev/jour07_screen.png
Téléchargez l'eboot compilé pour 1.5 ici (http://hothmoon.free.fr/psp/dev/jour07_eboot.zip)