1. Code
  2. 3D

Throwing Dice With the Jiglib Physics Engine and Away3D

Read Time:6 minsLanguages:

In this tutorial we'll build a box which we can throw dice into. To do this we'll use Away3D as the 3D engine and Jiglib as the physics engine. Let's get stuck in..

Step 1: New ActionScript 3.0 File

As the title suggests, first we'll create a new ActionScript 3.0 file.

away3d flash tutorialaway3d flash tutorialaway3d flash tutorial

Step 2: Edit Profile

In the Properties panel press the Edit button.

away3d flash tutorialaway3d flash tutorialaway3d flash tutorial

Step 3: Choose Flash Player Version

Choose Flash Player 9 profile and click OK.

away3d flash tutorialaway3d flash tutorialaway3d flash tutorial

Step 4: Get the Away3D Engine!

Save your file as "3D Dice.fla" in a new folder called "3D Dice". Now download the Away3D engine from Away3D Downloads. We'll use version 2.3.3 for Flash Player 9. Unpack an archive and copy all folders into the "3D Dice" folder.

Step 5: Get the Jiglib Physics Engine for Flash!

You need to install an SVN program to get these source files. Here's the SVN address. If you don't want to deal with all that you can also get them from the source files for this tut. After you move the Away3D and Jiglib classes to your 3D Dice folder your documents should look like this:

away3d flash tutorialaway3d flash tutorialaway3d flash tutorial

Step 6: Import Textures

I've drawn some textures for our dice. Of course, you can change these but they aren't bad :) You can find other textures in the source file.

Dice Textures:

away3d flash tutorial textureaway3d flash tutorial textures
away3d flash tutorial textureaway3d flash tutorial texture
away3d flash tutorial textureaway3d flash tutorial texture

Now we need to give them linkage names in order to attach them in runtime (do this for every image in your library one by one):

Select Image, then right-click > Properties

away3d flash tutorial

Export for ActionScript > Remove ".png" part

away3d flash tutorialaway3d flash tutorialaway3d flash tutorial

Step 7: Start Coding

OK, we're ready to start coding. First we import our classes:

Step 8: Setup Variables

After importing our classes we need to define our variables to use them in the coming steps.

As you may have guessed, the first ones are for Away3D. The variable names are simple, so you can guess what they are for.

diceTextures holds the dice face textures. We take dice texture images from the library and put them into WhiteShadingBitmapMaterial. We choose this material because it'll keep things light and to further improve performance it will also be flat. WhiteShadingBitmapMaterial is the best for our needs.

wallTexture and groundTexture use different images. Using either of these in our case would look terrible.

Step 9: Setup Away3D

Next we need to build Away3D.

The first line in this function creates our 3D scene, into which we add 3D objects. For the camera we choose HoverCamera3D. HoverCamera is the best way to turn the camera around the objects. Actually you don't need to use light for this project, but It makes the experiment cool :) We create the View and set it in the middle of the scene.

Lastly, we create new Away3DPhysics. The first paremeter is "View3D" and the second is "gravity" (I use 4 but If you want you can try another number).

Step 10: Creating Walls

It looks like a mess right :) Actually no. Click the walls of the box in the following demo to learn how we set their position:

We use Cubes as walls, but to do that we use physics.createCube, you can't set material in parameters directly. Jiglib Away3D plugin doesn't allow this (though you can change file to allow for it if you want). To change material we need to get the original Away3D object:

By using this we attach our textures to the faces of our walls. We set movable to false because we don't want them to be moved right? :) When we create ground we also set its pushback property to true, so the ground won't be able to jump over the walls.

Step 11: Creating a Die

As you can see it's really simple. We basically create a cube and attach textures to its faces. To attach different textures to different faces we use cubeMaterials. cubeMaterials have 6 properties that we use. These are:

  • front
  • back
  • top
  • bottom
  • left
  • right

You can set any material to them, but we use elements of diceTextures we created in step 8.

Step 12: Resetting Dice

In these functions we reset their positions. The first one is for beginning. The second one runs when the user click the stage. The second function also adds random forces to the dice. This makes our dice start to tumble.

Step 13: Adding Random Forces to Dices

First we get random values for our forces. With these values we apply forces in opposite directions to opposing sides of each die. This forces the dice to spin.

Step 14: Listeners

In this function we add MOUSE_DOWN and ENTER_FRAME listeners to the stage.

Step 15: Rendering

The first line of this function renders the 3D. Then we use true proportion in math to rotate the camera by using mouse positions. Then we equalize the direction of the light to the positions of our camera. This makes our light dynamic and makes our experiment looks pretty cool.

Step 16: Last Step

We call our functions one by one. I called createDice() function twice, so there are 2 dice in the demo. You can add however many you want.

Ok. We're ready. Test your work and click the stage :)


In this tutorial we learned how to use Jiglib with Away3D and build a simple experiment.

I hope you liked it, thanks for reading!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.