Search the Community

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): 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 -> 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 -> 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. 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,