Flash notes by Edzis

ActionScript programmer / Flash developer Edgars Simsons on professional stuff

Archive for March 13th, 2009

3D dice with rounded edges

with 13 comments

3D Dice. Click to view in action

3D dice. Click to view in action

This is a 3D dice I made in FIVe3D. It has rounded edges that animates with rotation to the next score.

A couple of weeks ago I had to add a dice for a game my colleague was developing. Scanning the net did not give any satisfactory results so I set off to make it myself. As I knew there will be vectors only I chose to use this task to check out FIVe3D. After dropping the idea to implement real physics I made the first static dice rather fast -  just a cube with 6 faces and circles on them.  The sharp corners just did not fit the the design requirements. So in a dirty way I squeezed in some extra rectangles and triangles between the 6 faces of the cube what made the corners appear rounded. For the outlines see the image on the side. Sadly this broke the shadows being drawn correctly; I tried to overcome this problem but did not succeed  (but maybe someone else wants to try it out).

Outlines of the cube edges

Outlines of the cube edges

The dice is easily customizable. You can change it’s size, view angle and light effects. The dice’s roll() method accepts a previously chosen target value, but can generate it on random. An event is dispatched after the roll animation has completed. It has a slightly different animation depending on mouse position.

View the example and download project source. Let me know if you find it useful.

Written by edzis

March 13th, 2009 at 3:31 pm

Posted in ActionScript 3