How to tween an image vertically with a smooth infinite tween?

[dhj]

Hello,

 

Thanks for taking a look, I am a huge fan of Phaser and I do have a game in development I plan on releasing soon, and another concept nearing completion, and I do have some useful code snippets about build tools and Phaser/Cordova I plan on sharing too - but something is posing me a bit of trouble.

 

I would like to create a slot wheel, and I want to be able to tween it, so to explain further.

 

I have a sprite which looks like this vertically (hypothetically);

 

 

[ 1 bar ]

[ cherry ]

[ apple ]

[banana ]

[ 3 bars ]

[ watermelon ]

[ coin ]

[ 2 bars ]

 

I want to tween it so that to a user they just see the following spinning by (until either a timeout passes or a button is pressed).

 

[ 1 bar ]

[ cherry ]

[ apple ]

[banana ]

[ 3 bars ]

[ watermelon ]

[ coin ]

[ 2 bars ]

[ 1 bar ]

[ cherry ]

[ apple ]

[banana ]

[ 3 bars ]

[ watermelon ]

[ coin ]

[ 2 bars ]

[ 1 bar ]

[ cherry ]

[ apple ]

[banana ]

[ 3 bars ]

[ watermelon ]

[ coin ]

[ 2 bars ]

 

When the tween stops it will just stop on whatever section is displaying (Imagine the UI shows a slice of say 5 at any one time.

 

I have tried a few options on tweens, but it always seems to just "drop" - how do I make it so the end of the sprite connects back to the first?

 

I have seen this done, but like I say some help is welcome. 

[lewster32]

Welcome to the forum! This is most easily done with a TileSprite, for which you can tween the tilePosition.y to achieve this effect. See the following example for how to set one up:

 

http://examples.phaser.io/_site/view_full.html?d=tile%20sprites&f=tiling%20sprite.js&t=tiling%20sprite&phaser_version=v2.0.7&

 

Note that when tweening you'll need to do it something like this:

// the following will not work// game.add.tween(wheel).to({tilePosition.y: 3000}, 5000, Phaser.Easing.Back.Out, true);// because the tilePosition is an object within the wheel, we have to tween that object rather than the wheel itself - this will workgame.add.tween(wheel.tilePosition).to({y: 3000}, 5000, Phaser.Easing.Back.Out, true);

[ZoomBox]

I would either use one sprite per symbol or 2 sprites with all symbols.

-With one sprite per symbol you just have to "stack" them on top of the machine and on they are under the machine screen you stack them on top again, one per one.

-With 2 big sprites containing all the symbols you do the samething, you stack the two on top of the machine and once one is under the machine screen you stack it on top again.

 

Edit: OR you simply use TileSprites that I didn't even know they exist.

[lewster32]

For the record I'd say for future-proofing so you can change the order of the symbols etc, it's definitely worth exploring Zoombox's route of having a 'conveyor belt' of symbols which are moved to the opposite side of the container as they scroll past its bounds. It's trickier to code but it's worth it in the long run.

[dhj]

I did look at the TileSprite, it did seem the best option, but I could get it to work very well at all.

 

I will have another stab and then post some code of either abject fail or mixed success!

 

Any input welcome in the meantime, but I'll aim to post something within a day or so.

 

Thanks all

[lewster32]

I've put together a crude little fiddle for you to demonstrate the effect via TileSprite: http://jsfiddle.net/lewster32/MXLkF/

[dhj]

Hello, 

 

Thanks for your help, I was able to take your example and make it work rather nicely into a cool wheel.

 

Does anyone know if its possible to scale tween just one particular "square" of a tilesheet, so say its a cherry in the middle of the wheels, i would love to be able to make it scale a little with a yoyo affect...

 

I understand a scale tween, and I use a few like so already, just never on a specific piece of a tileSprite;

 

game.add.tween(this.btnSpin.scale).to( { y: 1.2, x: 1.2 }, delay, Phaser.Easing.Linear.None, 0, 0, Number.MAX_VALUE, 1);

 

Any ideas?

[lewster32]

No unfortunately not - in this case you need to take Zoombox's suggestion and create your wheel out of individual sprites. You won't really be able to use any of the techniques from the TileSprite-based method either I'm afraid - instead of tweening you'll need to add an amount to each sprite's y position on each update, and when a sprite goes below a certain position, you'll need to re-position it back at the top. You'd then tween the amount down from some value to zero to get the same effect of the wheel slowing and stopping, probably using a 0 default value and doing Tween.from to set the initial speed.

 

See the attachment for a clearer explanation. This technique is also used by mobile frameworks to show the long scrolling lists - rather than have potentially thousands of items, they just recycle the same few items and change the labels on them.

[dhj]

Thanks for your help and input, much appreciated. Its also nice to see someone else active from NE England, as I am just in Newcastle.

 

I think the tween on the tilesprite works really well, so I will just focus on other areas to gloss up!

 

Many thanks

[lewster32]

Heh no problem There're a few northerners on here that I've talked to actually, a couple from up your neck of the woods too.