Help with animated sprites

[johnno56]

I am looking for a method of translating a strip (not a grid) of sprites so as to display an animated sprite. Sure, I can separate each cell, 'load' them, then display them as needed... But, I was wondering if QB64 had a method of loading the 'strip', 'read' each 'frame', then display each frame in sequence... I'm not sure if I have explained it very well... I hope someone may be able to 'point me in the right direction'...

[SMcNeill]

Just use _PUTIMAGE to put each frame onto the screen as needed, such as this little demo below:

Code: QB64: [Select]

1. Screen _NewImage(1024, 768, 32)
2. AnimatedStrip = _NewImage(10000, 100, 32)
3.  
4. _Dest AnimatedStrip
5. For i = 0 To 10000 Step 100
6.     Circle (i + i \ 100, 75), 25, &HFFFFFF00 'yellow ball moving as my animation, to create the animated strip
7.     Paint (i + i \ 100, 75), &HFFFFFF00
8. Next
9.  
10. _Dest 0 'restore our dest to the main screen
11.  
12. Do
13.     For i = 0 To 100 '100 frames of animation for this demo
14.         Cls
15.         _PutImage (0, 0)-(1024, 768), AnimatedStrip, 0, (i * 100, 0)-Step(100, 100)
16.         _Limit 25 '25 FPS, so a 4 second animation loop
17.         _Display
18.         If _KeyHit Then Exit Do
19.     Next
20. Loop
21.  
22. Cls
23. _PutImage (0, 0)-(1024, 100), AnimatedStrip, 0, (0, 0)-(1024, 100) 'show (a portion of) the animation image.

It's rather short, and seems quite straightforward to me, so I had no idea what exactly I might need to comment to help explain what it's doing here, if someone doesn't understand it.  If there's any questions at all, feel free to ask me about which part of this you don't understand, and I'll explain step by step what I'm doing if I need to.

[bplus]

@johnno56

This should look really familiar since I got the strip from you!

Code: QB64: [Select]

1. _Title "Walking Man #2 B+ 2018-09-22"
2.  
3. Const xmax = 800
4. Const ymax = 600
5. Screen _NewImage(xmax, ymax, 32)
6. _ScreenMove 360, 60
7.  
8. walk& = _LoadImage("walking720x146.png") ' 8 positions at 90 x 146   walk& is same as slot number
9. manW = 90 'width of man image
10. manH = 146 'height of man image
11.  
12. Type manType
13.     x As Single
14.     y As Single
15.     dx As Single
16.     dy As Single
17.     frame As Integer
18.     frameRate As Single
19. End Type
20.  
21. Dim man1 As manType
22. man1.x = 0
23. man1.y = ymax - manH
24. man1.dx = 1
25. man1.dy = -.625
26. man1.frame = 0
27. man1.frameRate = 1 / 8 'of loops per sec
28.  
29.  
30. Dim man2 As manType
31. man2.x = xmax + manW
32. man2.y = 0
33. man2.dx = -4
34. man2.dy = 2.5
35. man2.frame = 0
36. man2.frameRate = 1 / 2 'of loops per sec
37.  
38.  
39. manN = 0 'man number 0 to 7 as walks ie, manN = (manN + 1) mod 8
40. GLS = 30 ' Global Loops per Second
41. While 1
42.     Cls
43.     lc = (lc + 1) Mod GLS 'loop counter to the limit
44.  
45.     _PutImage (man1.x, man1.y)-Step(manW, manH), walk&, 0, (man1.frame * 90, 0)-Step(manW, manH)
46.     _PutImage (man2.x, man2.y)-Step(-manW, manH), walk&, 0, (man2.frame * 90, 0)-Step(manW, manH)
47.     man1.x = (man1.x + man1.dx)
48.     man1.y = (man1.y + man1.dy)
49.     If man1.x > xmax Then man1.x = -manW: man1.y = ymax - manH
50.     man1.frame = Int(man1.frameRate * lc) Mod 8
51.  
52.     man2.x = (man2.x + man2.dx)
53.     man2.y = (man2.y + man2.dy)
54.     If man2.x < -manW Then man2.x = xmax: man2.y = 0
55.     man2.frame = Int(man2.frameRate * lc) Mod 8
56.  
57.     _Display
58.     _Limit GLS
59. Wend
60.  
61.  

Oh here it is translated from SdlBasic or Naalaa, lots of comments:

Code: QB64: [Select]

1. _Title "Walking Man trans by bplus started 2018-06-30"
2. 'QB64 version 2017 1106/82 (the day before they switched to version 1.2)
3. Const xmax = 800
4. Const ymax = 600
5. Screen _NewImage(xmax, ymax, 32)
6. _ScreenMove 360, 60
7.  
8. walk& = _LoadImage("walking720x146.png") ' 8 positions at 90 x 146   walk& is same as slot number
9. manW = 90 'width of man image
10. manH = 146 'height of man image
11. manN = 0 'man number 0 to 7 as walks ie, manN = (manN + 1) mod 8
12. manY = (ymax - manH) \ 2 'place top man image at manY always as walks across the screen
13. manX = -manW 'start off screen by 1 manW  manX is x location on screen of man
14.  
15. While 0 = 0
16.     Cls
17.     ' blt(1, x*90, 0, 90, 146, movex, 45)
18.     '
19.     '   blt(sprite number,starting x position, starting y position, image width, image height, destination x, and y)
20.     '
21.     '   (I prefer a strip of characters. Others may use a 'grid' of characters.)
22.     '
23.     '   Sprite #1 is the 'walking' strip of characters
24.     '
25.     '   when x = 0 it will grab the first image locate at x*90 with a width of 90px and a height of 146px
26.     '   and display it at 'movex'x and 45y. Perform a short delay; increment to the next image; If the
27.     '   image grabbed is greater than 7 (the last image) then reset the image count to 0 (first image).
28.     '   move the curent image 5 pixels to the right. If the image moves off screen, make it reappear on
29.     '   the other side. Continue doing this until the escape key is pressed.
30.  
31.  
32.     '' _PUTIMAGE [STEP] [(dx1, dy1)-[STEP][(dx2, dy2)]][, sourceHandle&][, destHandle&][, ][STEP][(sx1, sy1)[-STEP][(sx2, sy2)]][_SMOOTH]
33.  
34.     'THE SKINNY: (notice the unintuitive positions of source handle and destination handle)
35.     'destination coordinates:  (x, y)-(x2, y2)  <<<< syntax
36.     'then source (image) handle (walk),
37.     'then destination handle = 0 for screening, then coordinates of image in
38.     'finally source coordinates off image of image handle:  (x, y)-(x2, y2)  <<<< syntax
39.  
40.     _PutImage (manX, manY)-Step(manW, manH), walk&, 0, (manN * 90, 0)-Step(manW, manH)
41.     manN = (manN + 1) Mod 8 'increase image index until hit 7 then back to 0
42.     manX = manX + 10
43.     If manX >= xmax Then manX = -manW 'move man back to left side of screen when hit right side
44.     _Display 'like   waitvbl(100) in sdlbas
45.     _Limit 10 'like wait(100) this limits displays to 10 per second
46. Wend
47.  
48.  

[johnno56]

SMcNeill[/member]]@SMcNeill

Thanks Steve. Very clear to follow... even for me... lol

bplus[/member]]@bplus

Yes. The images look vaguely familiar... lol  SDL and RC coding was simple enough, I just didn't know how QB64 did it.
But, thanks to both you and Steve, I should be able to cobble something together... lol

Thanks guys! Much appreciated.

[johnno56]

Apologies... I am having difficulty producing the hyperlinks...

[johnno56]

@johnno56

testing

[johnno56]

@SMcNeill and @bplus ,

Your assistance with sprite animation worked like a charm. I seriously doubt that the work will be published... lol  I am still learning how to convert some of my old sdlbasic and rcbasic programs to QB64... Animation being part of it. Bplus may be familiar with, 'Attack! Attack!', and would probably agree with the non-publishing... lol

What I will do is post the 'test'... After seeing it, you too, will agree with my assessment... lol

  [ You are not allowed to view this attachment ]  

Again. Thank you for the assist. Much appreciated.

J

[bplus]

Nice @johnno56

Here is idea for applying scale to image:

Code: QB64: [Select]

1. _Title "UFO Animation Test"
2. '   Based on: "Walking Man trans by bplus started 2018-06-30"
3. Const xmax = 800
4. Const ymax = 300
5. Screen _NewImage(xmax, ymax, 32)
6. _ScreenMove 360, 60
7.  
8. ufo& = _LoadImage("ufo3.png") ' 15 positions at 32 x 16
9. W = 32 'width of ufo image
10. H = 16 'height of ufo image
11. N = 0 'ufo number 0 to 15, ufo3N = (ufo3N + 1) mod 15  << Frame might be better name?
12. Y = ymax / 2 'place top ufo image at ufo3Y
13. X = -W
14. scale = 1
15. While scale < 4
16.     Cls
17.     _PutImage (X - .5 * scale * W, Y - .5 * scale * H)-Step(scale * W, scale * H), ufo&, 0, (N * W, 0)-Step(W, H)
18.     N = (N + 1) Mod 15
19.     X = X + 4
20.     If X >= xmax Then X = -W: scale = scale + 1
21.     _Display
22.     _Limit 30
23. Wend
24. scale = 1
25. While _KeyDown(27) = 0 ' no escape pressed
26.     Cls
27.     scale = 4 * (1 - (Abs(X - _Width / 2) / (_Width / 2)))
28.     _PutImage (X - .5 * scale * W, Y - .5 * scale * H)-Step(scale * W, scale * H), ufo&, 0, (N * W, 0)-Step(W, H)
29.     N = (N + 1) Mod 15
30.     X = X + 4
31.     If X >= xmax Then X = -W
32.     _Display
33.     _Limit 30
34. Wend
35.  

I am keeping the x, y position in the middle of the image (I hope). :) so I start it back and up by half the image width and height modified by scale.

[johnno56]

Oh... Now you're just showing off... lol

Seriously. Cool example. The 'zoom' effect was brilliant... (it also showed up the lo-res quality of the sprite... lol)

Much appreciated.

J

[Cobalt]

One thing to keep in mind when scaling sprites with _PUTIMAGE is that your program will take a performance hit. Scaling with putimage, for what ever reason, is roughly 10.5x-11x slower than just a normal run. So depending on how many times your using it you could find a speed issue showing up. Especially if your one of those misbegotten weirdos that think you need 120fps for your program.

Just something to keep in mind.

[bplus]

One thing to keep in mind when scaling sprites with _PUTIMAGE is that your program will take a performance hit. Scaling with putimage, for what ever reason, is roughly 10.5x-11x slower than just a normal run. So depending on how many times your using it you could find a speed issue showing up. Especially if your one of those misbegotten weirdos that think you need 120fps for your program.

Just something to keep in mind.

Maybe so, but I had to refrain from using RotoZoom ;-))

I am already accused of showing off :)

[Cobalt]

Maybe so, but I had to refrain from using RotoZoom ;-))

I am already accused of showing off :)

HA! I can't imagine why. XD

But yeah I think even your rotozoom takes a hit in the speed too, but then you are manipulating stuff which always takes time.
Unless its like a one off event in your program it might be better, performance-wise to pre-render the sprites at the final sizes and stuff. That's kind of what I was getting at.

Your Roto Zoom is pretty good though, A lot of times I just remake my sprite sheets at the correct size or even at run time pre-render the sprites on special image layers.

[johnno56]

Oh... Not just 'accused'... Tried and convicted... Moo Ha Ha..