displaying animated sprite

[moogle]

how would i draw an animated sprite to the screen?
like in blitz max how they do. the sprite like this


would be split into frames like this.


and the frame widht and height would be known and the number of frames. then you just create a loop to draw different frames.

how would this be done in purebasic? using this sprite? for example.

[Paul]

An easy way would be to download the "Pixel_Lib" from http://www.reelmedia.org/pureproject and use your image strip...

Code: Select all

InitSprite() 
If OpenWindow(0,0,0,400,300,#PB_Window_SystemMenu|#PB_Window_ScreenCentered,"") 
  If OpenWindowedScreen(WindowID(0),0,0,400,300,0,0,0)   
    SetFrameRate(75)  
    Pixel_LoadAnim(0,6,"flame6as.png")    
    
    Repeat   
    ClearScreen(0,0,0)  
    Pixel_DisplayAnim(0,180,40,-1,90) 
  
    x+6  
    If x>400:x=-20:EndIf  
    FlipBuffers()   
    Until WindowEvent()=#PB_Event_CloseWindow  
  EndIf   
EndIf

[Rings]

animsprite library in the PBOSL Collection at http://pbosl.purearea.net/

[Comtois]

how would this be done in purebasic? using this sprite? for example.

Have a look to ClipSprite(), here an example

Code: Select all

;PB4.0 beta 7

;Déclare les procédures
Declare GestionClavier()
Declare AnimationSprite()
Declare DeplaceSprite()

Structure s_Sprite
    ImageEnCours.l           ; Indique quelle image de l'animation est actuellement en cours 
    ImageMaxi.l              ; Nombre d'image maxi pour une animation , ici on a 3 images par direction
    TailleX.l                ; Dimension en X de chaque image 
    TailleY.l                ; Dimension en Y de chaque image
    TempsEnCours.l           ; Indique la durée d'affichage de l'image en cours
    TempsMaxi.l              ; Indique la durée maxi d'affichage d'une image avant de passer à la suivante
    x.l                      ; Position en X du sprite
    y.l                      ; Position en Y du sprite
    PasX.l                   ; Vitesse déplacement en X
    PasY.l                   ; Vitesse déplacement en Y
EndStructure 

;On déclare un personnage  
Global Gus.s_Sprite

Gus\ImageMaxi    = 5                       ; (0,1,2,3,4,5) ce qui fait bien 6 images
Gus\ImageEnCours = 0                       ; On se place sur la première image de l'animation
Gus\TailleX      = 95                      ; Taille d'une image 
Gus\TailleY      = 141                     ; Taille d'une image 
Gus\TempsEnCours = ElapsedMilliseconds()   ; Initialise la durée d'affichage de l'ImageEnCours
Gus\TempsMaxi    = 150                     ; Ajuster la vitesse de l'animation ici
Gus\x            = 200                     ; Position à l'écran en X
Gus\y            = 200                     ; Position à l'écran en Y


;Initialise l'environnement nécessaire au fonctionnement des sprites et pour ouvrir un écran.
InitSprite()

;Initialise l'environnement propre à la gestion du clavier. 
InitKeyboard()

;Ouvre un nouvel écran avec les caractéristiques Largeur, Hauteur et Profondeur. 
OpenScreen(640,480,32,"Tut Sprite")

;Active le support du format PNG (Portable Network Graphic)
UsePNGImageDecoder() 
    
;Charge en mémoire le sprite 
Fichier$="flame6as.png"
If LoadSprite(0, Fichier$)=0
    MessageRequester("Erreur","Impossible de charger le sprite " + Fichier$ ,0)
    End ; Quitte le programme
EndIf  

Repeat
    ;Inverse le buffer d'arrière plan avec le buffer visible à l'écran. 
    ;La partie invisible du buffer remplace alors complètement La partie visible. 
    FlipBuffers()
    
    ;Efface l'écran courant avec la couleur specifiée. 
    ClearScreen(RGB(0,0,150))
    
    ;Gestion du clavier
    GestionClavier()

    ;Anime le sprite
    AnimationSprite()
    
    ;Deplace et affiche le sprite
    DeplaceSprite()
    
Until KeyboardPushed(#PB_Key_Escape)

End

Procedure GestionClavier()
    
    If ExamineKeyboard()
        
        ;La touche haut du curseur est appuyée
        If KeyboardPushed(#PB_Key_Up)
            Gus\PasY = -1
            ;La touche droite du curseur est appuyée
        ElseIf KeyboardPushed(#PB_Key_Right)
            Gus\PasX = 1
            ;La touche bas du curseur est appuyée
        ElseIf KeyboardPushed(#PB_Key_Down)
            Gus\PasY = 1
            ;La touche gauche du curseur est appuyée
        ElseIf KeyboardPushed(#PB_Key_Left)
            Gus\PasX = -1
        EndIf
        
    EndIf    
    
EndProcedure

Procedure AnimationSprite()
    
    ;Test si la durée maxi d'affichage d'une image est dépassée 
    If ElapsedMilliseconds()-Gus\TempsEnCours>Gus\TempsMaxi
        
        ;Initialise la durée d'affichage
        Gus\TempsEnCours=ElapsedMilliseconds()
        
        ;Incrémente l'image en cours, pour afficher l'image suivante.
        Gus\ImageEnCours + 1
        
        ;On reboucle l'animation ici 
        If Gus\ImageEnCours>Gus\ImageMaxi
            Gus\ImageEnCours = 0 
        EndIf 
        
    EndIf
    ClipSprite(0,Gus\ImageEnCours * Gus\TailleX, 0, Gus\TailleX , Gus\TailleY)
    
EndProcedure    
Procedure DeplaceSprite()
    
    Gus\x + Gus\PasX  ; Ajoute le pas en X à la position courante du sprite
    Gus\y + Gus\PasY  ; Ajoute le pas en Y à la position courante du sprite
    Gus\PasX = 0      ; Initialise le pas , il faudra appuyer à nouveau sur une touche pour l'activer
    Gus\PasY = 0      ; Initialise le pas , il faudra appuyer à nouveau sur une touche pour l'activer
    
    ;Affiche le sprite à la nouvelle position
    DisplayTransparentSprite(0,Gus\x, Gus\y)
    
EndProcedure

[THCM]

Here is a little snippet how to do it without an external lib:

Code: Select all

#NumSpritesX		= 6
#SpriteSizeX		= 95
#SpriteSizeY		= 141

SpriteAnimPos.l = 0	;0-5

x = (SpriteAnimPos-((SpriteAnimPos / #SpritesX) * #SpritesX)) * #SpriteSizeX
y = SpriteAnimPos / #SpritesX * #SpriteSizeY
ClipSprite (#SpriteID, x, y, #SpriteSizeX, #SpriteSizeY)
DisplaySprite(#SpriteID, Xpos, Ypos)

This is the way I do it in my game. I have one large 960x2400 png with all sprites in one file.

[moogle]

Wow. thanks for all your replies. Now i Gotta try each one! thanks alot guys. This is the reason why Pure Basic is the best!

[Num3]

Here are my anim procedures, they work on all OS's:

Remember, all frames must be sequencial!
E.G.
Sprite 1 to 10 - Character moving
Sprite 11 to 20 - Characther Dying
etc...

Code: Select all

Structure anim
  x.l
  y.l
  first.l ; First image
  last.l ; Last image
  Delay.l ; Delay between images
  current.l ; Current image
  time.l
EndStructure

Global NewList Animation.anim()


Procedure Add_Animation(first,last,Delay.l); Add Animation to list, returns animation number
  AddElement(Animation())
  Animation()\x=0
  Animation()\y=0
  Animation()\first=first
  Animation()\current=first
  Animation()\last=last
  Animation()\Delay=Delay
  Animation()\time=ElapsedMilliseconds()
  ProcedureReturn ListIndex(Animation())
EndProcedure

Procedure Animate(); Execute the animation it's automatic
  
  ResetList(Animation())
  While NextElement(Animation())
    
    now=ElapsedMilliseconds()
    
    If now-Animation()\time>Animation()\Delay
      x=Animation()\current
      Animation()\current+1
      If x+1>Animation()\last
        Animation()\current=Animation()\first
      EndIf
      Animation()\time=now
    EndIf
    
  Wend
  
EndProcedure

Procedure Display_Animation(number,x,y) ; Display Animation 'number'
  
  SelectElement(Animation(),number)
  Animation()\x=x
  Animation()\y=y
  DisplayTransparentSprite(Animation()\current,Animation()\x,Animation()\y)
  Animate()
  
EndProcedure

Procedure Destroy_Animation(number)
  SelectElement(Animation(),number)
  DeleteElement(Animation())
EndProcedure

[IceSoft]

An easy way would be to download the "Pixel_Lib" from http://www.reelmedia.org/pureproject and use your image strip...

Where can I download it for PB4?