Lazarus

Programming => Graphics => Graphics and Multimedia => BGRABitmap and LazPaint => Topic started by: pixelink on April 02, 2020, 05:51:29 pm

Title: [SOLVED-WORKAROUND] SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: pixelink on April 02, 2020, 05:51:29 pm

Hi,

I can get a horizontal sprite (3 frames) anim to work fine.

But how do I animate a sprite sheet that is 4 columns (horz) by 3 rows (vert) - 12 frames???

I can't seem to make it work out of the box.

Is there any example/tutorial that demonstrates this behavior?

Thanks in Advanced.

Title: Re: SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: pixelink on April 02, 2020, 11:15:59 pm

Anyone have any info... documentation I can lookup?

Title: Re: SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: circular on April 02, 2020, 11:25:33 pm

Hi

What method are you using to display sprites? What surface and what tools do you have at your disposal?

Title: Re: SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: pixelink on April 02, 2020, 11:38:13 pm

Quote from: circular on April 02, 2020, 11:25:33 pm

Hi

What method are you using to display sprites? What surface and what tools do you have at your disposal?

I just used the small tutorial on the wiki. Works fine.
It uses the horizontal image.

Using SprintAnimation control.
No fancy code... the animation works out of the box with just basic speed wxh code.

But, how do i do a sprite with rows and columns image.

Tried to get it to work out of the box using just the control, but it shows the whole sprite each frame.
Have not tried any other code because I don't even know what methods to use.

Title: Re: SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: pixelink on April 02, 2020, 11:47:43 pm

This is a sample sprite I am trying to animate.

Title: Re: SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: lainz on April 03, 2020, 01:26:04 am

just modify the image to fit the requirements of the control, in other words, resize the image canvas to fit all the rows horizontally, cut and paste the rows and resize the image canvas to fit one row

Title: Re: SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: pixelink on April 03, 2020, 01:57:58 am

I don't want to do that.

Do a search on G images... most all sprites sheets have rows and columns.

I want the app I am making to account for sprite standards which is rows and columns.

I am not doing this just for myself.
If I were I would of already put all sprites on one row.

So, can the SpriteAnimation do that or not?
If not, that would be a major feature you have to have... its industry standard.

Title: Re: SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: Roland57 on April 03, 2020, 03:30:31 am

Hello!

@pixelink

By taking a look at bgraspriteanimation.pas (https://github.com/bgrabitmap/bgracontrols/blob/master/bgraspriteanimation.pas), you can see that the component isn't made to do directly what you wish.

You could follow what lainz suggested, and write a little procedure to convert pictures.

You could also modify the component.

Title: Re: SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: winni on April 03, 2020, 04:03:18 am

Hi!

If you don't like the instructions of Lainz, then there is a harder way:

Copy all your sprites to a GIF-file. That was discussed here some time ago.

And then you can place that GIF anywhere and at any time you like with BGRAspriteAnimation.

Works nice and fluent with animated GIFs.

Winni

Title: Re: SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: lainz on April 03, 2020, 04:44:17 am

Quote from: pixelink on April 03, 2020, 01:57:58 am

I don't want to do that.

Do a search on G images... most all sprites sheets have rows and columns.

I want the app I am making to account for sprite standards which is rows and columns.

I am not doing this just for myself.
If I were I would of already put all sprites on one row.

So, can the SpriteAnimation do that or not?
If not, that would be a major feature you have to have... its industry standard.

You need to do that only once before loading the image into the component.

Is easy to do, just a few lines of code to do the conversion.

Title: Re: SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: Roland57 on April 03, 2020, 04:55:34 am

Quote from: lainz on April 03, 2020, 04:44:17 am

Is easy to do, just a few lines of code to do the conversion.

As I was interested in the problem, I tried to do it. The result doesn't look perfect. I don't know if it comes from my method or from the original picture. :-\

Title: Re: SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: pixelink on April 03, 2020, 12:38:38 pm

Well, seeing the control can't do this out of the box (which it should in a future release)

My second thought was to manually display on a canvas or something) using BGRABitmap.

Thanks, Roland57,
The only I see I need to add some spacing on your code
I will work on this some more.

Thanks all!!!

Title: Re: SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: pixelink on April 03, 2020, 01:33:50 pm

Did a test... something didn't look right.

The sprite output is out of order.
Should read 1st row, 2nd row, 3rdrow (from left to right in order 1-12

See screen.
@Roland57... good start.

Now, I need to figure out how to get them in the correct order.

Thanks buddy!!

Title: Re: SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: circular on April 03, 2020, 06:53:15 pm

I can't imagine how you scrambled them unintentionally.

Title: Re: SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: Roland57 on April 03, 2020, 07:10:51 pm

Yes, that's right. Pictures aren't in the good order. I have made a mistake somewhere.

https://opengameart.org/content/good-fruits-m484-games

Title: Re: SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: Roland57 on April 03, 2020, 07:22:31 pm

Here is the correction:

Code: Pascal [Select][+]

    //y := (i div ARowCount) * LElementHeight;
    y := (i div AColCount) * LElementHeight;

Title: Re: SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: pixelink on April 03, 2020, 07:32:46 pm

I have it narrowed down to this line...
Everything else is outputting correctly.

BGRAReplace(LElement, LOldFile.GetPart(Rect(x, y, x + LElementWidth, y + LElementHeight)));

For my 123456789101112 sample.
x.y outputs 0,200,400,600

So those go through the grid correctly

UPDATE: This line wasn't the problem.
See the solution below

Title: Re: SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: pixelink on April 03, 2020, 07:37:42 pm

Quote from: Roland57 on April 03, 2020, 07:22:31 pm

Here is the correction:

Code: Pascal [Select][+][-]
//y := (i div ARowCount) * LElementHeight;
y := (i div AColCount) * LElementHeight;

I guess I got that wrong...

Your code worked.
y := (i div AColCount) * LElementHeight;

Thanks for helping me on this Roland!!!
Great Job

Title: Re: SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: Roland57 on April 03, 2020, 08:21:27 pm

Quote from: pixelink on April 03, 2020, 07:37:42 pm

Thanks for helping me on this Roland!!!
Great Job

You're welcome. I have cleaned my project. Here it is.

Title: Re: [SOLVED-WORKAROUND] SpriteAnimation Ctrl - Animate sheet w/multiple Rows
Post by: circular on April 03, 2020, 11:35:08 pm

Perfect now 8-)