2D sprite animation
- falsam
- Messages : 7244
- Inscription : dim. 22/août/2010 15:24
- Localisation : IDF (Yvelines)
- Contact :
2D sprite animation
Je ne m'étais pas encore attaqué au jeu 2D avec Pure Basic et je suis effondré devant la complexité d'une animation de sprite ! (je posterais mon extrait de code dans la section adéquate).
■ La fonction LoadSprite pourrait avoir comme paramètre la taille d'un frame, le nombre de frames à prendre en compte ainsi qu'un paramètre indiquant à partir de quel frame commence le sprite.
LoadSprite(#Sprite, NomFichier, [Width, Height, frames, [framestart]])
Cette image est composé de 16 frames. La taille de chaque frame est de 64x64 pixels.
Le code de chargement de ce sprite serait :
LoadSprite(#Bird, "data/image/bird.png", 64, 64, 16)
■ Passons maintenant aux animations. Pure Basic utilise la fonction ClipSprite() pour changer la zone affichable du sprite par une nouvelle zone d'affichage. je trouve que c'est bien trop fastidieux à coder quand on a de nombreux sprites à gérer.
Une fonctionnalité sous cette forme serait bien plus plaisante.
LoadAnimation(#Animation, Frames.s, FrameSpeed, Loop=#True)
- Frames contient la séquence de frames à jouer.
- FrameSpeed le temps en ms
- Loop par défaut = #True pour une animation en boucle.
Exemple avec l'image de l'oiseau. Les deux premières lignes représente les animation gauche et droite de l'oiseau.
Le code de chargement des animations de ce sprite serait :
LoadAnimation(#BirdLeft, "0,1,2,3", 10)
LoadAnimation(#BirdRight", "4,5,6,7", 10)
Et pour finir, ajouter une fonctionnalité pour jouer l'animation.
SpriteAnimationPlay(#Sprite, #Animation) ou bien
AnimationPlay(#Animation)
Un autre point : Il est impossible d'utiliser des images avec canal alpha. je suis obligé de retravailler mes images pour définir une couleur de transparence et d'utiliser ensuite la fonctionnalité TransparentSpriteColor() pour définir la couleur de transparence. !
■ La fonction LoadSprite pourrait avoir comme paramètre la taille d'un frame, le nombre de frames à prendre en compte ainsi qu'un paramètre indiquant à partir de quel frame commence le sprite.
LoadSprite(#Sprite, NomFichier, [Width, Height, frames, [framestart]])
Cette image est composé de 16 frames. La taille de chaque frame est de 64x64 pixels.
Le code de chargement de ce sprite serait :
LoadSprite(#Bird, "data/image/bird.png", 64, 64, 16)
■ Passons maintenant aux animations. Pure Basic utilise la fonction ClipSprite() pour changer la zone affichable du sprite par une nouvelle zone d'affichage. je trouve que c'est bien trop fastidieux à coder quand on a de nombreux sprites à gérer.
Une fonctionnalité sous cette forme serait bien plus plaisante.
LoadAnimation(#Animation, Frames.s, FrameSpeed, Loop=#True)
- Frames contient la séquence de frames à jouer.
- FrameSpeed le temps en ms
- Loop par défaut = #True pour une animation en boucle.
Exemple avec l'image de l'oiseau. Les deux premières lignes représente les animation gauche et droite de l'oiseau.
Le code de chargement des animations de ce sprite serait :
LoadAnimation(#BirdLeft, "0,1,2,3", 10)
LoadAnimation(#BirdRight", "4,5,6,7", 10)
Et pour finir, ajouter une fonctionnalité pour jouer l'animation.
SpriteAnimationPlay(#Sprite, #Animation) ou bien
AnimationPlay(#Animation)
Un autre point : Il est impossible d'utiliser des images avec canal alpha. je suis obligé de retravailler mes images pour définir une couleur de transparence et d'utiliser ensuite la fonctionnalité TransparentSpriteColor() pour définir la couleur de transparence. !
Configuration : Windows 11 Famille 64-bit - PB 6.03 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Re: 2D sprite animation
Hello,
On s'y fait
Finalement, écrire une telle fonction globale n'est pas très compliquée. la rendre native risque de donner une fonction trop complexe :
Tu peux avoir des animations qui bouclent dans un sens, puis dans l'autre; d'autres qui repartent à la première image après avoir lu la dernière...
Il y a aussi le delay à prendre en compte entre 2 images...
Dans mon cas, je charge l'image puis je découpe dans des sprites avec GrabImage, CreateSprite et dessin dans la texture du sprite...je n'utilise pratiquement jamais ClipSprite()...
Pour la transparence, c'est un peu pénible, le gradimage ne gere pas le .png : je passe effectivement par TransparentSpriteColor...
Courage, a part ça, la 2D avec PB, c'est que du bonheur tellement c'est facile !
On s'y fait
Finalement, écrire une telle fonction globale n'est pas très compliquée. la rendre native risque de donner une fonction trop complexe :
Tu peux avoir des animations qui bouclent dans un sens, puis dans l'autre; d'autres qui repartent à la première image après avoir lu la dernière...
Il y a aussi le delay à prendre en compte entre 2 images...
Dans mon cas, je charge l'image puis je découpe dans des sprites avec GrabImage, CreateSprite et dessin dans la texture du sprite...je n'utilise pratiquement jamais ClipSprite()...
Pour la transparence, c'est un peu pénible, le gradimage ne gere pas le .png : je passe effectivement par TransparentSpriteColor...
Courage, a part ça, la 2D avec PB, c'est que du bonheur tellement c'est facile !
Only PureBasic makes it possible
- falsam
- Messages : 7244
- Inscription : dim. 22/août/2010 15:24
- Localisation : IDF (Yvelines)
- Contact :
Re: 2D sprite animation
Merci Cool Dji pour ton encouragement. Peut être que je me débrouille mal dans mon code.
Configuration : Windows 11 Famille 64-bit - PB 6.03 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
- falsam
- Messages : 7244
- Inscription : dim. 22/août/2010 15:24
- Localisation : IDF (Yvelines)
- Contact :
Re: 2D sprite animation
Comme promis dans le premier post, le code en question sur ce lien :
http://www.purebasic.fr/french/viewtopi ... =2&t=14286
http://www.purebasic.fr/french/viewtopi ... =2&t=14286
Configuration : Windows 11 Famille 64-bit - PB 6.03 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Re: 2D sprite animation
il y a des fonction animsprites qui trainent sur le forum, a un moment tout le monde en faisait
_________________________________________________
Mon site : CeriseCode (Attention Chantier perpétuel )
Mon site : CeriseCode (Attention Chantier perpétuel )
- falsam
- Messages : 7244
- Inscription : dim. 22/août/2010 15:24
- Localisation : IDF (Yvelines)
- Contact :
Re: 2D sprite animation
Je me suis inspiré de celui de comtois.graph100 a écrit :il y a des fonction animsprites qui trainent sur le forum, a un moment tout le monde en faisait
Configuration : Windows 11 Famille 64-bit - PB 6.03 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Re: 2D sprite animation
J'ai balancé quelque part des fonctions très complètes là-dessus, y compris de chargement/déchargement automatique de ressources. Mais souvent les dév préfèrent faire les leurs (moi y compris).
- falsam
- Messages : 7244
- Inscription : dim. 22/août/2010 15:24
- Localisation : IDF (Yvelines)
- Contact :
Re: 2D sprite animation
@djes : Perso je ne cherche pas à refaire complètement ce qui existe déja Mais là n'est pas le sujet.
Je trouve dommage que les fonctionnalités que j'évoque dans le premier message ne soit pas en natif. De même que je trouve bête de ne pas avoir la gestion du canal alpha (transparence) en natif. Pourquoi définir la couleur de transparence ? Pourquoi ne puis je pas utiliser directement des sprites sur fond transparent au format png par exemple ?
Dans le code qui suit j'utilise une image tirée des exemples PB.Le sprite est entouré d'un liseré mauve. !! Horrible.
Quand je colore mes fonds transparents j'obtiens aussi ce résultat voir même pire.
Je débute dans la 2D et peut être que je ne fais pas ce qu'il faut non plus. Mais je trouve dommage de ne pas pouvoir gérer les images png avec un canal alpha en natif.
Je trouve dommage que les fonctionnalités que j'évoque dans le premier message ne soit pas en natif. De même que je trouve bête de ne pas avoir la gestion du canal alpha (transparence) en natif. Pourquoi définir la couleur de transparence ? Pourquoi ne puis je pas utiliser directement des sprites sur fond transparent au format png par exemple ?
Dans le code qui suit j'utilise une image tirée des exemples PB.
Code : Tout sélectionner
If InitSprite() = 0 Or InitKeyboard() = 0 Or InitMouse() = 0
MessageRequester("Error", "Sprite system can't be initialized", 0)
End
EndIf
OpenWindow(0, 0, 0, 800, 600, "2D Test", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
If OpenWindowedScreen(WindowID(0), 0, 0, 800, 600)
LoadSprite(1, #PB_Compiler_Home+"examples\sources\data\Geebee2.bmp")
TransparentSpriteColor(1, RGB(255, 0, 255))
Repeat
; Inverse the buffers (the back become the front (visible)... And we can do the rendering on the back)
FlipBuffers()
ClearScreen(RGB(0,0,0))
DisplayTransparentSprite(1, 100, 100)
ExamineKeyboard()
ExamineMouse()
Until KeyboardPushed(#PB_Key_Escape)
Else
MessageRequester("Error", "Can't open a 800*600 - 32 bit screen !", 0)
EndIf
End
Quand je colore mes fonds transparents j'obtiens aussi ce résultat voir même pire.
Je débute dans la 2D et peut être que je ne fais pas ce qu'il faut non plus. Mais je trouve dommage de ne pas pouvoir gérer les images png avec un canal alpha en natif.
Configuration : Windows 11 Famille 64-bit - PB 6.03 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Re: 2D sprite animation
falsam a écrit : Dans le code qui suit j'utilise une image tirée des exemples PB. Le sprite est entouré d'un liseré mauve. !! Horrible.
tu deconnes ?
ton image est pourri , voila pourquoi tu as un liseret
regarde de pret le bord de l'aile gauche par exemple :
tu vois bien qu'il y a une bordure qui n'est pas de la bonne couleur ....
du reste c'est souvent fait expres sur les Sprites car on peu se servir de cette bordure pour detecter une collision
(pas avec Purebasic ) .. mais cela permet de tester une collision sans faire appel a une fonction lourde en temp machine ....
si tu veux un bord net , retire cette bordure ...
tiens essaye avec ce sprite :
- falsam
- Messages : 7244
- Inscription : dim. 22/août/2010 15:24
- Localisation : IDF (Yvelines)
- Contact :
Re: 2D sprite animation
héhé .... Ce n'est pas mon image mais celle qui est fourni avec les exemples Pure basicDobro a écrit :tu deconnes ? ton image est pourri , voila pourquoi tu as un liseret
Sinon je suis d'accord, avec une image dont la couleur de transparence est rempli uniformément, il n'y a pas de ce contour que j'ai pu constaté.
Configuration : Windows 11 Famille 64-bit - PB 6.03 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Re: 2D sprite animation
le code des sprite animé a été transferé ..... ici
http://www.purebasic.fr/french/viewtopi ... =6&t=14289
http://www.purebasic.fr/french/viewtopi ... =6&t=14289
Dernière modification par Backup le mer. 12/mars/2014 12:47, modifié 3 fois.
- falsam
- Messages : 7244
- Inscription : dim. 22/août/2010 15:24
- Localisation : IDF (Yvelines)
- Contact :
Re: 2D sprite animation
Merci Dobro. C'est un peu ce que je fais dans le code Kill Birds avec en plus une notion de FrameRate pour éviter que l'animation des oiseaux ou de l'explosion soit trop rapide.
http://www.purebasic.fr/french/viewtopi ... =2&t=14286
Je posterais un code simplifié avec une pièce qui tourne sur ce principe.
http://www.purebasic.fr/french/viewtopi ... =2&t=14286
Je posterais un code simplifié avec une pièce qui tourne sur ce principe.
Configuration : Windows 11 Famille 64-bit - PB 6.03 x64 - AMD Ryzen 7 - 16 GO RAM
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Vidéo NVIDIA GeForce GTX 1650 Ti - Résolution 1920x1080 - Mise à l'échelle 125%
Re: 2D sprite animation
ha bah , j'avais pas vu .....falsam a écrit :Merci Dobro. C'est un peu ce que je fais dans le code Kill Birds
il n'y a pas 36 façons de faire , de toutes manières
toutefois , j'ai mis ça dans des procedures dont les parametres permettent
d'etre peut etre plus Clair ...
mais bon chacun sa façon de coder , l'essentiel , c'est d'y arriver ...
ps: lorsque tu ecris :
ma façon est encore plus simple , puisqu'avec le meme numero de sprite je propose l'animation qu'on veux ...Le code de chargement des animations de ce sprite serait :
LoadAnimation(#BirdLeft, "0,1,2,3", 10)
LoadAnimation(#BirdRight", "4,5,6,7", 10)
meme pas besoin de donner les numeros de cellule ... le numero de ligne de l'animation suffit
la seule condition c'est que la planche d'animation soit de la forme
xxxxxxxxxx ; ligne d'animation chaque "x" représente une cellule de dessin Animé
uuuuuuuuuu
eeeeeeeeee
Re: 2D sprite animation
Pour utiliser la transparence de l'image, il faut mettre le flag "#PB_Sprite_AlphaBlending" lors du chargement, et ca devrait marcher.
Re: 2D sprite animation
Falsam> Oui, en fait, il y a un héritage à gérer. Les anciennes versions de PB n'utilisaient pas le canal alpha, mais uniquement une transparence sur une couleur (comme le sprite que tu as utilisé, avec le rose). Suite à l'insistance de quelques membres (dont moi), la "vraie" transparence avec couche alpha a été intégrée et maintenant cela ne pose plus de problème. Par contre il y a toujours les anciennes fonctions qui prêtent un peu à confusion. Fred a répondu, il faut juste un peu tester pour comprendre comment ça fonctionne.
Sinon, pour les planches de sprites, je pense aussi qu'il faut que tu te fasses TA routine perso, une routine générique serait trop contraignante dans d'autres situations. Par exemple, une planche de sprites rectangulaire est une horreur quand tu as des milliers d'animations.
Sinon, pour les planches de sprites, je pense aussi qu'il faut que tu te fasses TA routine perso, une routine générique serait trop contraignante dans d'autres situations. Par exemple, une planche de sprites rectangulaire est une horreur quand tu as des milliers d'animations.