tilesprite TileSprites: Spinning the slot reel and stopping on sprite part (64 x 64)

[slotuser]

Hi there,

I wonder if anyone can help. I have a custom graphic that I made which represents a reel on a slot / fruit machine. It contains 12 different images. Each image is 96 x 96. So you can imagine a long  graphic with a new image going vertically at every 96 pixels.

I need to display 3 graphics at a time and then emulate spinning of the reel. I was looking into the TileSprites which I thought should be able to get my reels spinning (or look like they are) using the tilesprites.

Looking at an example @ phaserjs, its pretty straight forward, I think :-)

 

               // Create tilesprite               
               tilesprite = game.add.tileSprite(0, 0, 800, 600, 'starfield');

Then could call  method x number of times to emulate scrolling ie.

               tilesprite.tilePosition.y += 8; // control the speed

 

The problem is that I would like to start  each reel at a different position to start off, otherwise, you would always have the same pictures next to each other. I notice I can pass in a frame to the add.tileSprite  and I can create the sprite as a atlas / spritesheet. Anyone know what I should be doing here ?

Once i have them spinning I would need to stop them, this is another task I can't seem to get my head around. If I just stop them spinning then I could stop the reels NOT being centred i.e. A graphics in between the win line and the line above.

Can anyone lend a hand ? I did try searching for some source code already available either free or paid but found none.

I am a little lost how to proceed, I should imagine phaserjs gives me the tools to do what i need to do but just unsure where I should go next.

Any help really appreciated

 

Thanks