[help] Slot game - How to spin the reels

[palanolho]

HI everyone,

I'm trying to learn a bit more about pixiJS and for that, I'm trying to build a slot game.

I was looking at the example available in the PixiJS website (https://pixijs.io/examples/#/demos/slots-demo.js) and I get most of it and was able to build my own with some tweaks. But now I'm on the part where I actually need to animate the reels (to make them spin) but I'm not understanding the method/approach taken in that example so, I was hoping to understand first how it can be done and how I can do it.

(please see the attack for an example of what I have)

My first thought would be to make something simple (no need for fancy effects. That can come later).

• I have an array with all the sprites in the reel ordered in the same way as they should be displayed/rendered. And I have a container that inside has 5 containers (one for each reel) and it has the first 4 symbols drawn
• The slot will only occupy part of the screen (the white rectangle), and that means that, somehow, I need to define some "clipping" area so that the reels can spin behind it through the hidden area (?!)
• somehow I need to make the reels circular. This means that when the last symbol moves into the visible section, somehow the other end of the reels should come immediately after.
• I would like to try to make the reels accelerate the spin up to some points and then deaccelerate until it stops on the new position 

 

Do you think this is a simple (or the simplest) approach?

1. How can I do this clipping (so that the symbols that go under it get out of view)? or is there a better/easier way to do it?
2. how can I make the reels spin making them "circular"?
3. is there an easier way to handle the acceleration and deaccelerate of the reels (o have read some things about tweening but It's a new concept for me and I'm not understanding it very well...)

 

Many thanks in advance for any help you could provide

- Miguel

 

[jonforum]

this example are strange.
it would be much simpler and more efficient to use a mask.
and when the sprite is outside the mask, you change the texture with the next one.
this demo does not seem to use masks, it is a rather strange approach for the context.

[palanolho]

5 hours ago, jonforum said:

this example are strange.
it would be much simpler and more efficient to use a mask.
and when the sprite is outside the mask, you change the texture with the next one.
this demo does not seem to use masks, it is a rather strange approach for the context.

Do you know of any example I could check to see how it's done? I'm not yet familiar with masks :S

[Exca]

The example does not use mask as it's not needed in that as it uses full screen area for reels.

Adding a mask would be simple like:

var g = new PIXI.Graphics();
g.beginFill(0,1);
g.drawRect(0,0,maskWidth, maskHeight);
g.endFill();
reelcontainer.addChild(g);
reelcontainer.mask = g;

Making the reels look more circular requires either a shader with somekind of distortion or a bit easier way would be just changing the y scale a bit depending on the symbol position.

The proper way to handle easing is with tweening functions. You basically order the reels to move to certain position and instead of doing it with reelposition += fixed value you do it with a separate tweening function, which tells what the value should be at what time.

I'd suggest using a tweening library to help with that. For example tweenjs, tweenlite, etc. can handle those.

[palanolho]

8 minutes ago, Exca said:

The example does not use mask as it's not needed in that as it uses full screen area for reels.

Adding a mask would be simple like:

var g = new PIXI.Graphics();
g.beginFill(0,1);
g.drawRect(0,0,maskWidth, maskHeight);
g.endFill();
reelcontainer.addChild(g);
reelcontainer.mask = g;

Making the reels look more circular requires either a shader with somekind of distortion or a bit easier way would be just changing the y scale a bit depending on the symbol position.

The proper way to handle easing is with tweening functions. You basically order the reels to move to certain position and instead of doing it with reelposition += fixed value you do it with a separate tweening function, which tells what the value should be at what time.

I'd suggest using a tweening library to help with that. For example tweenjs, tweenlite, etc. can handle those.

 

Do in this case I need to draw all the symbols on each reel and then, instead of moving the symbols, I use the tweening to move the container itself?

How could I achieve the "rotating" effect, where when the last symbols become visible on the "mask area" the first one comes immediately after?

[Exca]

I'd do that by keeping the container on place and tweening a "virtual" position for that reel. Then update the position of invidual symbols based on that position.
Another option (if you want to move the whole container) would be to have two containers and move both of them, but have one of those be always above the first and then swap them when one gets hidden. That way you would have fixed order & continuous scrolling. It's a little bit more expensive method but works the same basically.

[palanolho]

20 minutes ago, Exca said:

I'd do that by keeping the container on place and tweening a "virtual" position for that reel. Then update the position of invidual symbols based on that position.

2

 

That seems to be the easiest and simplest way to handle it and I will try it. But I didn't yet understand how to make the reels spin like they were "circular" :S

Do I need to move the "first" symbol to the top of the "last" symbol once the last symbols go into the position where the first visible symbol should be ?

Example:
Looking at my screenshot and imagining that above the star on the first column there is a blue symbol. when the reel moves the that blue symbol becomes visible, the green symbol on the bottom of the reel needs to be moved to the top of that blue symbol (effectively changing the position of that particular sprite)??

 

 

[b10b]

Hey Miguel!  Another way to think about things is to see the Reels as a Stack of Cards.  We see 4 at a time, there are only 4.  The Reel spins when we add another Card to the top ("array.unshift"), everything moves down, the bottom Card drops away ("array.pop").  The transition / inbetweeing (or "Tween") occurs as an animation between these states - the y axis movement is just for effect, masking as described above is useful.  To make a non-glitchy animation we'll need an extra Card at the top of the stack (5 total).  Benefits of this Stack approach are that the circular nature of the Reels is resolved with a "modulus" index, and that the graphic memory used is optimised to just the 5 visible Cards per Reel (no need for really tall Reels, or 2 really tall Reels).  Excluding the Tween, this approach closely resembles retro-scrolling.

[palanolho]

Hey b10b

Hmmm ok ... I think I get it.

That means that I will be "removing" and "adding" Sprites to that "small [5]" arrays for each reels, and on the side, I need to track what is the position of the next symbols to add, correct?

[b10b]

Sounds correct.  On the side you'd store the full array of all Symbols.  They needn't be Sprites, they can just be a simple reference which can be used to create the Symbols' Sprites on demand.  The "current" index of that array is incremented to determine which are the displayed 5 Symbols.

[palanolho]

ok, I think I have a plan now, I just need to sort out how to name the reels move (and add the symbols on top of it)

Should I handle the moving of the reels as a loop that moves the symbols and adds new ones on top until they reel gets to the position it should stop?

Or should I do using app.ticker.add(...) ?

I don't really know yet where the tweening will come in this workflow but I assume I can think about that later and refactor the code accordingly? unless someone would be able to explain exactly how it works and how could use it in this case :S

 

Many thanks in advance

- Miguel

 

[palanolho]

I was able to sort things out.

This topic can be closed

[Yuliia]

Hi Miguel and everybody !

I just started to learn Pixi and I have the same problem. I don't know how to make reels and how to make them spin. Could you please show your decision please?

Thank you in advance!?

[palanolho]

I did this with what I learned.
Hope it helps

 

[ivan.popelyshev]

oh nice! thank you!

[Vcode]

Hi, maybe you can try with tilingsprite, you can simulate very well the spinning reel.

Kind regards.

[ZackMercury]

1 hour ago, Vcode said:

Hi, maybe you can try with tilingsprite, you can simulate very well the spinning reel

That's apparently the proper way to do it.

And to add something to it, I'd recommend to make the reel dynamically via code, creating a new texture and rendering items into it each at different levels.

Edited January 25, 2021 by ZackMercury