palanolho

[help] Slot game - How to spin the reels

Recommended Posts

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

 

Capture.PNG

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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)??

 

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.