2D sprite animation

Vous avez une idée pour améliorer ou modifier PureBasic ? N'hésitez pas à la proposer.
Avatar de l’utilisateur
falsam
Messages : 7244
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :

2D sprite animation

Message par falsam »

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]])

Image

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%
Avatar de l’utilisateur
Cool Dji
Messages : 1126
Inscription : ven. 05/sept./2008 11:42
Localisation : Besançon
Contact :

Re: 2D sprite animation

Message par Cool Dji »

Hello,

On s'y fait :D
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
Avatar de l’utilisateur
falsam
Messages : 7244
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :

Re: 2D sprite animation

Message par falsam »

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%
Avatar de l’utilisateur
falsam
Messages : 7244
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :

Re: 2D sprite animation

Message par falsam »

Comme promis dans le premier post, le code en question sur ce lien :
:arrow: 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%
Avatar de l’utilisateur
graph100
Messages : 1318
Inscription : sam. 21/mai/2005 17:50

Re: 2D sprite animation

Message par graph100 »

il y a des fonction animsprites qui trainent sur le forum, a un moment tout le monde en faisait :lol:
_________________________________________________
Mon site : CeriseCode (Attention Chantier perpétuel ;))
Avatar de l’utilisateur
falsam
Messages : 7244
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :

Re: 2D sprite animation

Message par falsam »

graph100 a écrit :il y a des fonction animsprites qui trainent sur le forum, a un moment tout le monde en faisait :lol:
Je me suis inspiré de celui de comtois.
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%
Avatar de l’utilisateur
djes
Messages : 4252
Inscription : ven. 11/févr./2005 17:34
Localisation : Arras, France

Re: 2D sprite animation

Message par djes »

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).
Avatar de l’utilisateur
falsam
Messages : 7244
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :

Re: 2D sprite animation

Message par falsam »

@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.

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   
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.
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%
Backup
Messages : 14526
Inscription : lun. 26/avr./2004 0:40

Re: 2D sprite animation

Message par Backup »

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 ? 8O

ton image est pourri , voila pourquoi tu as un liseret

regarde de pret le bord de l'aile gauche par exemple :

Image

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 :

Image
Avatar de l’utilisateur
falsam
Messages : 7244
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :

Re: 2D sprite animation

Message par falsam »

Dobro a écrit :tu deconnes ? 8O ton image est pourri , voila pourquoi tu as un liseret
héhé .... Ce n'est pas mon image mais celle qui est fourni avec les exemples Pure basic :)

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%
Backup
Messages : 14526
Inscription : lun. 26/avr./2004 0:40

Re: 2D sprite animation

Message par Backup »

le code des sprite animé a été transferé ..... ici
http://www.purebasic.fr/french/viewtopi ... =6&t=14289
Dernière modification par Backup le mer. 12/mars/2014 12:47, modifié 3 fois.
Avatar de l’utilisateur
falsam
Messages : 7244
Inscription : dim. 22/août/2010 15:24
Localisation : IDF (Yvelines)
Contact :

Re: 2D sprite animation

Message par falsam »

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.

:arrow: 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%
Backup
Messages : 14526
Inscription : lun. 26/avr./2004 0:40

Re: 2D sprite animation

Message par Backup »

falsam a écrit :Merci Dobro. C'est un peu ce que je fais dans le code Kill Birds
ha bah , j'avais pas vu .....
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 :
Le code de chargement des animations de ce sprite serait :
LoadAnimation(#BirdLeft, "0,1,2,3", 10)
LoadAnimation(#BirdRight", "4,5,6,7", 10)
ma façon est encore plus simple , puisqu'avec le meme numero de sprite je propose l'animation qu'on veux ...
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
Fred
Site Admin
Messages : 2651
Inscription : mer. 21/janv./2004 11:03

Re: 2D sprite animation

Message par Fred »

Pour utiliser la transparence de l'image, il faut mettre le flag "#PB_Sprite_AlphaBlending" lors du chargement, et ca devrait marcher.
Avatar de l’utilisateur
djes
Messages : 4252
Inscription : ven. 11/févr./2005 17:34
Localisation : Arras, France

Re: 2D sprite animation

Message par djes »

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.
Répondre