AnimatedSprite vs Texture Change Render Efficiency

[frankieboywonder]

Hi all, I am building some slot game reels and wondered if I might get an opinion on which of the following approached would be the fastest to render...

Let's say we have 8 different symbol graphics in 2 states, blurred for when the reels are spinning and not blurred for when they land - ie 16 textures. Then lets say I have 5 reels with 3 symbols each, plus another at the top and bottom of each reel that 'peeks' through, for a total of 25 required reel symbols.

The way the code is at the moment is that we create an object pool of 25 AnimatedSprite each with 16 frames and then animate these down on an update loop, so that as one drops off the bottom it gets re-added to the top and we gotoAndStop on the frame of the new symbol image we want to use.

I just wondered if this was efficient, and whether it might be more efficient to use 25 Sprites and just set the texture from an array pf pre-created Texture items instead - or maybe there's not much difference at all?

Getting a beautiful smooth action is the most important outcome, so any other suggestions also welcome!

Thanks

[ivan.popelyshev]

There's no difference. Might be slight different load on CPU (javascript).

[themoonrat]

Indeed. Go with whichever way makes it easier for you to manage in code. 

The issue I see with your first path is that it doesn't play well with wanting to animate symbols bouncing as they land, or animating wins. You may want to consider a custom class to deal with how symbols work rather than relying on a single animated sprite.

[ivan.popelyshev]

^^^ Slots expert

[frankieboywonder]

On 11/25/2020 at 6:10 PM, themoonrat said:

Indeed. Go with whichever way makes it easier for you to manage in code. 

The issue I see with your first path is that it doesn't play well with wanting to animate symbols bouncing as they land, or animating wins. You may want to consider a custom class to deal with how symbols work rather than relying on a single animated sprite.

OK, thanks @themoonrat I currently have the animations in a pixi-layer above the reels and just show them when needed. It works, but to be fair it is a bit complicated so I will consider this.

As Ivan so kindly billed you as the slots expert, don't suppose you have any high level advice about how to handle Megaways? ? I'm finding it an absolute b*tch to line up all the blurry fillers and then drop the result in smoothly due to all the different heights!

 

Cheers!

[themoonrat]

Ah haha the Megaways chestnut.

Still working in slots, so something high level. Hmmm.

The main advise would be to not try to make it work in the same visual code as normal reels. They move differently, they work differently.  When they are spinning, they all move the same amount of pixels per second, so giving them all that same velocity keeps them lined up there, but when they land, you know that the 'final' position will be adjusted depending on the height. You can either hard bake in these offset positions in, or pre-calculate them. Per size, per index. So imagining a center point of "0" 

Landing 2 symbols (both very tall): position index 0 = -200, position index 1 = 200

Landing 3 symbols (all of them tall): position index 0 = -150, position index 1 = 0, position index 2 = 150

etc.

In a similar way, when they are all together, spinning around with different heights, you can calculate the offset of each symbol based on how tall it is.