Gus89 Posted August 26, 2017 Share Posted August 26, 2017 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). Link to comment Share on other sites More sharing options...
Jackolantern Posted August 28, 2017 Share Posted August 28, 2017 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? Link to comment Share on other sites More sharing options...
Gus89 Posted August 28, 2017 Author Share Posted August 28, 2017 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. Alexalten 1 Link to comment Share on other sites More sharing options...
samme Posted August 28, 2017 Share Posted August 28, 2017 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 1 Link to comment Share on other sites More sharing options...
Jackolantern Posted August 28, 2017 Share Posted August 28, 2017 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. Link to comment Share on other sites More sharing options...
Jackolantern Posted August 28, 2017 Share Posted August 28, 2017 Ohhh, those animations @samme posted were nice. I would seriously try to work with those. Link to comment Share on other sites More sharing options...
satya4satyanm Posted July 2, 2018 Share Posted July 2, 2018 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 Link to comment Share on other sites More sharing options...
satya4satyanm Posted July 28, 2018 Share Posted July 28, 2018 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. Link to comment Share on other sites More sharing options...
Recommended Posts