Dice rolling with sprite

[Gus89]

I am trying to build a dice rolling animation with collision in a rectangular area (using a dice atlas), is there any example or starting code that could  be of use ?

I searched the Phaser examples and tutorials but couldn't find something similar (i'm kind of new to the Phaser dev community).

[Jackolantern]

The kind of difficult thing to a dice rolls are that they are 3D. Are you looking to make faux 3D dice or make a 2D animation of some kind. And if 2D, what exactly would it look like? 

[Gus89]

Thanks for your response @Jackolantern

Ultimately i'm looking to build something quite like this: https://drive.google.com/open?id=0ByODxxIVtyl9UGg1MWY1THhaMlU

Do you think it's possible to build using something similar using faux 3D ? Any starting tutorial/example would be helpful to start with.

Found this interesting project: https://github.com/Rinirihiriro/dice (2D but looks like 3D) however it's not using Phaser. It'd be interesting to have something similar but using Phaser with physics (velocity, collision, rotation) .

The atlas drawn here: https://github.com/Rinirihiriro/dice/blob/master/dice.png seems very close to 3D.

[samme]

I don't think you need an accurate physics simulation. Start with https://github.com/Rinirihiriro/dice/blob/master/dice.png, pick an end face at random (⚀⚁⚂⚃⚄⚅), then choose a "path" through the atlas frames.

[Jackolantern]

Okay, I think that is actually just some nice 2D animation where they have any number of dots showing on the dice as they are rolling, and then the animations would show blank faces up on the last frame and they lay over a graphic of the dots based on a random number generator. That is my guess. Faux 3D is tough, because it leaves a lot of math up to you. I have looked before and have not found anything for Phaser that handles that kind of math for you. There are a few posts about using something like Three.js with Phaser, but I honestly wouldn't go that route. 

 

Really, if I was approaching this, you know what I would do? I would get some real dice, get a table and then rig up a camera or smartphone with an app to take strings of pictures pointing down at the table. Then I would take some series of pictures of dice rolling, find the best ones and trace them in something like Photoshop to make them better fit with your art style. Then just leave those last frames blank so you can add a graphic of the dots. 

 

And this is if you can't find any dice roll graphics available that fit your needs. I would imagine a lot are out there. 

 

[Jackolantern]

Ohhh, those animations @samme posted were nice. I would seriously try to work with those. 

[satya4satyanm]

I am coming up with a 3d rolling Phaser 3 Dice Class very soon.

I have created the 3d dice already and need to make it a customizable, JavaScript class so that users can set parameters to it.

By the way,

A pure canvas 3d Rolling dice has been released today by me.

It has Object Oriented JavaScript Class.

It can take images for each side and a number on which it has to stop.

Have a look at it and grab your copy here https://codecanyon.net/item/dice-game-object-oriented-core-javascript-canvas-3d-dice/22174656?s_rank=9

Thank you

Have fun with games

[satya4satyanm]

Hi in Phaser you can render 3d using WebGl by which you can get realistic dice rolling look. have  a look at this https://codecanyon.net/item/phaser-3-3d-dice-class-customizable/22330393 link. This is a phaser 3d dice class for casino games.