My First Game - Snakes and Ladders

Jul 02, 2015

Hi all,

 

thought I would share with you my first attempt at a true 'game' built in Storyline 2. I spend most of my time troubleshooting my user's problems with the software and dont generally spend time developing modules myself but during a quiet period I thought I would put things to the test.

 

I decided to take a simple board game and see how well I could replicate it using Storyline so decided on snakes and ladders.

 

Firstly, I am no designer so below credits where I sourced the elements used in creating this project.

 

  • The game board, dice images & play button were sourced from a Google image search. Other elements are used from stock Storyline assets
  • The intro music, winning scene music were ripped from Sonic the Hedgehog (thanks Sega) and downloaded from a video games archive website
  • The text to speech was created here: http://www.fromtexttospeech.com/
  • There is a small JavaScript called to generate a random number between 1-6 which I initially created but a better solution was found after searching the forums and a more streamlined version was used. Thanks to Colin for posting your solution.
  • All Storyline creation and game planning is my own work.

 

The structure is very small, only a few slides, with multiple layers.

 

story view

 

Here is a quick run down of the processes created to make the game function

 

  1. Intro plays
  2. Number of players is selected (currently fixed at 2, but could be expanded. All that is needed to be done is to duplicate the player1board slide and replicate the variables for player3/4/etc)
  3. Players enter their names
  4. Player one clicks the dice, this initiates the script and creates a random number between 1-6. Dice face changes based on number generated and audio description of the number plays.
  5. The player piece changes state to illustrate the new position on the game board. This is calculated by an initial starting variable of 1 + the rolled dice value
  6. Timeline ends, switches to next player slide
  7. Repeat steps 4-6
  8. Player has to get to 30 exactly. Anything over 30 and it is not counted.
  9. Visual notification appears when the player is within a dice throw of winning
  10. The first player to get a game value of 30 in their variable triggers the winners slide
  11. Snakes and ladders animations are triggered by slide layers based and game board variables at the relevant values based on where a snake or a ladder is placed. Simple motion timeline plays to show game piece moving up or down.

 

And that pretty much is that! Each player board consists of many triggers and a few slide layers. I'll post some more detailed screen grabs as a reply to this message.

 

The game could be a little more polished, it isnt perfect but this was more an exercise in replicating functions, randomness and rules of a simple game. Ive tested it as much as I can and it appears to run as well as I had hoped for. I would be very interested to hear your comments and thoughts on this and opinions on what could be done to make it slicker. One thing I would add is a mute button as after endless tests I have now come to hate Sonic who was once a dear childhood friend!!

 

I realise now I have waffled on quite a bit so if you're still with me then thanks for reading !!!

 

http://prescript-dev.co.uk/storyline/snakes-and-ladders/story.html

 

21 Replies
Darren Heath

Hi Ashley,

I love a bit of 8 bit video game music!! 

I do have a look at the challenges, and to be totally honest, i just haven't had the time previously to participate in them. I hope this may change in the future  and I can submit more of my work.

Tracy, thank you for your comments. I haven't quite polished the game completely as I would like it, there are still some things I would like to perfect and change slightly.

I have though produced a document that explains the processes used to create the game. How I have used variables, states, triggers etc. I hope this is useful for you and shows you my way of thinking in creating the game and can give you an idea of how to go about creating something similar in the future.

David Anderson
Kelly Meeker

I just added to our Examples hub to make sure others got a chance to check it out:

What a great game concept! Thanks for sharing this one with the community.

I have one issue with this game: My kid beat me three times. I get that it's randomized but that's not so easy for 6-yr olds to understand.

Do you think you could add a keystroke, hot key or other Easter egg to the game to ensure that I won? It would really mean a lot to me, Darren.

Darren Heath

Morning Kelly, thank you for adding the game to your examples section.

@Dave:

Funny you should say that. You are not the first adult to ask for such a function after being beaten by their children!! My partner had the same frustrations after her 8 year old son kept winning.

Ive republished a new version here http://prescript-dev.co.uk/storyline/snakes-v2/story.html with a cheat added.

If you are player 1, discretely tap the Z key 3 times during your go (doestnt have to be at the same time, can be one press at various points in the game). At the third tap you will magically be announced as the winner. If you are player 2, it is the W key you need to tap.

Basically, added a new variable which increments by 1 every time the relevant key is pressed. When the variable is equal to 3, that person becomes the winner.

Enjoy!!

Gardner Fair

Hi Darren, thanks for sharing this really fun game!  The functionality works great for me and my daughter!  Its helped me keep on keeping on remembering to use variables and randomizing functions that I get skittish about doing!  Regarding more superficial ideas of how to make it look slicker, here are a few ideas:

1. At the very beginning, maybe first have the announcer slide in rather than fade in and change the expression/pose of the announcer each time she says something new to give more of a sense of live action.

2. Similarly, have the announcer slide in and out between turns, maybe just waste high and tilted like she's leaning in and out of view.

3. With the dice, while there is the sound of rolling, flash a quarter second images of the dice 4 or 5 times, maybe starting off larger and then getting smaller also to give a sense of dropping/depth.

You probably thought of all this but just in case that's how I'd go about adding some finising touches.  These are suggestions that first came to me with this incredible game: https://community.articulate.com/download/penalty-shootout-game by Ridgam Saglam.

Thanks again!

Gardner

Darren Heath

Thanks for your comments Gardner.

The whole project started off as a bit of a test for me on how far I can go within Storyline and was meant to be nothing more than a prototype and something for me to work on during a slow week at work .Im no designer, and this could look so much more slicker if I spend a little more time on it but my main aim for this was to get the functionality working.. Im hopeful that when the time allows it can be polished up and become more visually attractive. Your comments about character expressions/animations are something I would certainly look to utilise in a 'proper' version of the game.

With regards to point 3 I did use an animated gif of a rolling dice that would appear when the dice button was clicked/tapped. This worked great in everything but mobile safari on ipad and the animated gif just had a mind of its own so for this version I ditched it and just used sound effects instead.

Thanks once again for taking the time to comment, it is appreciated ;o)

Darren Heath

Hi Vishal,

It is really quite easy to make it a 1 player game and play against the 'computer'.

What I would do is add a '1 player' button at the start of the game, and on the scene for the second player and instead of having the dice throw action triggered by a user clicking a button I would have it triggered automatically when the timeline reaches a cue point instead.

All other triggers and events can run as normal.

I haven't really thought about adding LMS tracking to it to be honest but I guess that the slide the player gets to when they win the game could be a results slide and that reports back to the LMS from there.

Darren Heath

Hi Shruti,

Im still here !!!

It is simply a couple of lines of JavaScript to generate a random number between 1-6 and a change state of image trigger to show the correct dice face

I have attached the PDF document I created that goes into more detail about creating the game. Hopefully this will cover what you need to know. If you have any more questions feel free to post and I will try and help out where  Ican

Good luck with your development

Edit:

The JS for the random number generation is

var number=Math.floor(Math.random()*7);
GetPlayer().SetVar("varp2dice",number);

If a 0 is generated I used a trigger to add 1 to the value, so there is statistically a slightly higher chance of throwing a 1 than there is numbers 2-6

This discussion is closed. You can start a new discussion or contact Articulate Support.