Stop TilingSprite at specific position

[batman]

Hi everyone, 

I made a slot machine with three reels. And faced with "spinning reel problem". There are many articles on this issue. I think I am quite close to the solution but bumped into the wall with stopping TilingSprite on specific position. It is quite the same issue as below but with pixi.js.

 

 My evolution of "reels spinning" was the following (if not interested please go to point 4 with questions):

1. I pushed my slot icons (sprites) into array, and displayed on three rectangles (reels, drawn with Pixi.Graphics.). On pushing spin button I shuffled the arrays and display them again. I got randomness dsiplaying but no spinning animation. So tried next step ->
2. Try to make spinning effect with Tween.js. But as I treated every slot icon as single element, there were issues with spinning syncronizations and move directions. I believe with some advanced logic I can reach "spinning effect" here, but decided to find more simple solution ->
3. Here I come of with combining all reel icons into one rectangle (each element is array element which contain icon sprite (like apple etc)):

    this.rectangleReelThree.addChild(this.reelThree[0], this.reelThree[2], this.reelThree[1], this.reelThree[4], this.reelThree[3]);

    then, creating TilingSprite from this rectangle, and positioning it:

   this.tilingReelThree = PIXI.extras.TilingSprite.from(app.renderer.generateTexture(this.rectangleReelThree), this.rectangleReelThree.width, this.rectangleReelThree.height)
       this.tilingReelThree.position.set(363, 210);
       this.tilingReelThree.tilePosition.set(this.rectangleReelThree.position.x, this.rectangleReelThree.position.y);

   of course added it to the stage, then actually an issue. I came up with the following variables to control spinning: 

       this.y_3; // this one to pass value for moving sprite on y axis
       this.distance_3; // number to count down from, as soon as it reaches 0, this.y_3 -- 0, and spinning stops.

   realization is the following: 

   var position = function () { // this function is called from update()  main animating function
           if (this.y == 0) {
           } else {
               this.tilingReelOne.tilePosition.y += this.y_1 * 12;
               this.tilingReelTwo.tilePosition.y += this.y_2 * 13;
               this.tilingReelThree.tilePosition.y += this.y_3 * 14;
           }
           this.distance_1--;
           this.distance_2--;
           this.distance_3--;
   
           if (this.distance_1 <= 0) this.y_1 = 0;
           if (this.distance_2 <= 0) this.y_2 = 0;
           if (this.distance_3 <= 0) this.y_3 = 0;
       };
   
   //this one is trigerred on Spin button push
   var spin = function () {
           this.state = SLOT_STATE.SPINNING;
           this.y_1 = 1;
           this.y_2 = 1;
           this.y_3 = 1;
           this.distance_1 = 150;
           this.distance_2 = 220;
           this.distance_3 = 275;
       };

   As result I got nice reels spin, but they stop on different positions (not in line, or fixed position). Also from this point I can`t check if reels combination meet neither win nor lose combintaion, as TilingSprite treated as one whole object. 

4. So here are the questions:

• Can I set number of cycles for TilingSprite? I checked the docs and it seemed no, but maybe there are some useful hacks.
• How I can stop TilingSprite at specific predefined position? I think about manual coordinates calculation. But how to map icon on TilingSprite to predefined position on slot (like bottom, middle, top).
• Can I set "distance" of TilingSpite go/cycle? Close to the first question. From my example I come up with "time" distance.
• I tried to get this kind effect with grouping items into container and moved it (try to make it work now) but can`t get an effect as going out of visible area and immidiately appear from opposite side (like TilingSprite). Maybe some advise here?

Thank you in advance, 

[ivan.popelyshev]

Its more a coding problem, than pixi-related one.

Container with rectangular mask + container inside that will be scrolled.

To make things repeat, maintain two periods of elements.

[ivan.popelyshev]

By the way, its good problem for coding interviews. I certainly would not hire the person.who can't solve it using just common sense and not searching through all of renderer API.

[batman]

Ivan thanks for reply. Sorry maybe wasn`t clear and the question is not about employment.  I think it is quite easy to solve in .Net. I was asking  what kind of approach of Pixi.js (members/methods/correct usage) I can use. Please check one more time:

• Can I set number of cycles for TilingSprite? I checked the docs and it seemed no, but maybe there are some useful hacks. // The question is about cycles of TilingSprite, can we control them? 
• How I can stop TilingSprite at specific predefined position? I think about manual coordinates calculation. But how to map icon on TilingSprite to predefined position on slot (like bottom, middle, top). // The obvious one is to addChild on top of TillingSpriteLike this:

   this.tilingReelThree.addChild(this.reelThree[0], this.reelThree[2], this.reelThree[1], this.reelThree[4], this.reelThree[3]);

  but in this case I can`t see added elements. So can I addChild on TilingSprite so it "rotates" with it. Or I just missed something, and it should works fine.
• Can I set "distance" of TilingSpite go/cycle? Close to the first question. From my example I come up with "time" distance. // the same as first one
• I tried to get this kind effect with grouping items into container and moved it (try to make it work now) but can`t get an effect as going out of visible area and immidiately appear from opposite side (like TilingSprite). Maybe some advise here? // This one is actually could be treated as give me done solution, but just in case to save time, if there are a good hacks. 

One more time, my issues is not logic, it is actually correct usage of Pixi.js to reach appropriate effect. 

Thanks, 

[ivan.popelyshev]

Ok then, second post means that you really want complete answer

TilingSprite is just a sprite that can tile texture inside. It doesnt render every instance of texture, it just maps every point inside rectangle to some point inside texture. If you want to tile it only a multiple times, you have to modify its shader.

Look up https://github.com/pixijs/pixi.js/blob/dev/src/extras/TilingSprite.js and https://github.com/pixijs/pixi.js/blob/dev/src/extras/webgl/TilingSpriteRenderer.js and https://github.com/pixijs/pixi.js/blob/dev/src/extras/webgl/tilingSprite.frag

Your questions are valid only for hypothethical Tiling Container. There's no tiling container in pixi, you have to do it on your own. That kidn of container requires not just Camera support (which pixi doesnt have) but multi-camera support, and even phaser doesnt have it yet. I've made that kind of solution before but it was really difficult and not suited for open-source project: https://gameofbombs.github.io/pixi-bin/index.html?s=camera&f=mirror.js&title=2 bunnies 2 cameras

The best solution is to make outer container with a mask, inner scrolling container and put everything two times in it, like a1,b1,c1, a2,b2,c2. When the wheel repeats, container will show a few 1's and then 2's, and when its completely there, you just mod its position back so it shows 1's.

 

 

[Exca]

During flash days I made spinning reels by having 4 items and their coordinates would just be so that whenever a symbol went out of the reel, it got new texture and went back to top. Really simple and requires only 4 sprites/movieclips/whatever be rendered on screen at any time. Makes it really easy to apply blur filters and stuff like that also.

Though it also requires a separate logic where you have the correct wheels setup.

And if your symbols are something more complex than just sprites, then pooling them might be a good idea.

[batman]

Thanks guys. 

Indeed TilingSprite was partial solution. Both aproaches looks good. Experimenting with it now. One more thanks

[Exca]

I made an example of the method given above: http://pixijs.io/examples/#/demos/slots-demo.js

[batman]

Thanks Exca. Looks pretty cool)