Rolling Dice interaction

Sep 13, 2015

I am working on a board game where I have set up a dice with a random number generator. However I have a very demanding client who want the dice to simulate a rolling effect. Is there a way that jarva script could be written to make the dice roll through states then show the random number.

Please help...

13 Replies
Matthew Bibby

Hi Sam,

That does sound like it would take a bit of work to set up. Have you seen this thread? There may be something helpful in there.

If I had to do this, here is how I'd approach it:

  1. I'd take a video of a dice being rolled onto a table. Then after it had stopped rolling, I'd carefully turn it to make sure I captured each side of the dice in the exact same location. 
  2. Then I'd split the video into two parts. The first would show the dice being rolled, and the second would contain the different sides of the dice.
  3. Then I'd convert the first video into a .gif and use this to show simulate the rolling effect in Storyline.
  4. Then I'd grab static images of each possible result from the second video, and bring these into Storyline as different states of one image.
  5. So, when people press the button to roll a dice, the .gif will show the dice being rolled on the table, then, at the right time, the JavaScript will run and pick a random number, which will be passed back to Storyline and used to determine which state of the final image should be shown (i.e. which side of the dice). 

Does that make sense?

I'd love to see the finished product if you're able to share.

Alexandros Anoyatis

Hi Sam,

You can achieve that with JS by following some simple steps.

1) Create a dice with all the states (normal (1), 2, 3, 4, 5.
2) Map states to a number variable (say dice1) - create 6 triggers in the form of Change state of dice to x when variable dice1 changes on condition that dice1(var) is 1, etc.
3) Create a layer (say roll dice 1) and execute a JS trigger to randomly select a number from 1 to 6 (see Storyline's JS practices for the code on how to achieve that). Make 10-15 copies of the JS trigger and use different time events to fire those actions - i.e. JS trigger 2 starts when timeline reaches 0.25 sec, trigger 3 at 0.5 sec, trigger 4 at .75, and so on.

Do the same for the second dice (using a different variable, this time dice2 and assign a 2nd layer for that dice.

Create an extra closing trigger (hide layer) on both layers in the end and uncheck the "hide other slide layers" option on both.

Then all you have to do is fire up(show) both layers at the same time when user presses a button.

Hope this helps,