add animWidth and animHeight to limit frame cycles of individual anim…

[blurymind]

This adds the ability to (cheaply) limit individual animated frame cycles to their respective animated frame strips width and height.

The coin has 9 consecutive frames, the viking on the right has 5, the grass has three.
The viking in the middle is the edge case that I plan to fix with a different workaround - he is the one that has frames scattered at different locations on my tileset

It is a part of an effort to get #3 and #76 sorted to a pleasing level as well as bundle pixi-tilemap with gdevelop game engine
4ian/GDevelop#503

I explain why this is required here
#76 (comment)

Here is an entire tmx file data parsed scene (from a json file actually, exported by tiled), rendered entirely via pixi-tilemap

with several layers of animated and non animated tiles + objects and object groups

[blurymind]

I think my mod method or the way I increment time is not right.
The frames go like this(wrong order)
1,3,5,2,4,6

TILEMAP.addFrame(
                      TILESET.getFrame(tileUid),
                      xPos,
                      yPos,
                      1,
                      0,
                      tileFrameCount * tileWidth
                    );
....
app.renderer.plugins.tilemap.tileAnim[0] += tileWidth;

this could also be a case of me giving it wrongly parsed tiled data

Can you help me with the mod method? Does it seems correct to you? Or is this a case of me incrementing time wrong?

EDIT: apologies, I have made a piskae with how I was initiating my pixi scene. My update function was not nested properly. There is nothing wrong with the modulo frame cycling - it works as intended

[ivanpopelyshev]

Need more data. do you use both X and Y animations or only one of those directions?

[blurymind]

Need more data. do you use both X and Y animations or only one of those directions?

Sorry I just had realized that I made an error outside of this pr- with how I was initiating my pixi scene. Updated my previous post.

The feature here works as intended

[ivanpopelyshev]

PR looks fine but I'm too tired to merge and rebuilt it now :( i will try tomorrow

[blurymind]

Here is a sneak peek:

The coin has 9 consecutive frames, the viking on the right has 5,
The viking in the middle is the edge case that I plan to fix with a different workaround - he is the one that has frames scattered at different locations on my tileset

Sorry for choppines, my recording software sucks

Thank you in advance for the patience on my rantings and also for reviewing this. I really hope that we will be able to get gdevelop to become the second big game engine to use this library,potentially bringing more contributors like me to this tracker

[blurymind]

@ivanpopelyshev have youmanaged to find some time for this?
Here is an online demo
https://blurymind.github.io/yet-another-pixi-webpack-boilerplate/docs/
Its using pixi-tilemap with this patch

All the map data comes from an example tmx file

[ivanpopelyshev]

Nooo so many guys in need! Good demo though, i hope i can merge this thing soon

[blurymind]

It's strange, the grass breaks on windows, unless I change the modulo function to
vec2 anim = aAnim * mod(animationFrame + 1.0, vec2(aAnimWidth, aAnimHeight))

[ivanpopelyshev]

its a corner case, because those are floats, not ints. It can be different a bit in Intel HD :) I usually add 0.5 there. Basically, "4 = 0 * 4 + 3.9999" or "4 = 1 * 4 + 0 " . I just add 0.5 before and after the operation.

[blurymind]

will my change fix it for most hardware?

[blurymind]

Here is an updated tutorial repository
https://blurymind.github.io/pixi-tilemap-tutorial/
https://github.com/blurymind/pixi-tilemap-tutorial

You can add it to the readme if you like :)

[blurymind]

its a corner case, because those are floats, not ints. It can be different a bit in Intel HD :) I usually add 0.5 there. Basically, "4 = 0 * 4 + 3.9999" or "4 = 1 * 4 + 0 " . I just add 0.5 before and after the operation.

how would that look in the context of
vec2 anim = aAnim * mod(animationFrame, vec2(aAnimWidth, aAnimHeight))
where I have vec2? :)

just adding 1.0 to animationFrame seems to fix it completely without making a visual difference

Btw I'm glad I got to test in more hardware and catch this before it getting out

[ivanpopelyshev]

OK, gonna merge it but i'll fix stuff before i publish it.

[blurymind]

should I make the same PR to the 5.x branch? Or wait for you to fix stuff and then do so?

…

On Tue, Mar 3, 2020 at 9:42 AM Ivan Popelyshev ***@***.***> wrote: Merged #77 <#77> into v4.x. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#77>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABRRWVMNWXZBIMWNJBFZVWTRFTGHFANCNFSM4K3QQ7BQ> .

[ivanpopelyshev]

I'm working on it.

[blurymind]

Thank you =)

…

On Tue, Mar 3, 2020 at 10:42 AM Ivan Popelyshev ***@***.***> wrote: I'm working on it. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#77>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABRRWVLSYWZEH5MVDSTXQITRFTNH7ANCNFSM4K3QQ7BQ> .

[ivanpopelyshev]

gimme access to tutorial!

[blurymind]

gimme access to tutorial!

sent you an invite 👍