was successfully added to your cart.

Adventures in Articulate Storyline – Recreating Nokia’s Classic Snake Game – Part One

By 1st March 2017 May 31st, 2017 Articulate Storyline
Building Snake in Articulate Storyline Part One

The technology world was a buzz earlier in the month with the news that Swedish mobile phone maker Nokia were re-inventing their 3310 for the modern day market. This was one of the very first mobile phones that I ever owned when I was a teenager and continues to live long in the memory purely for the entertainment factor that came from the imaginative LCD graphic games that came bundled in the phone’s operating system!

This started an interesting conversation with fellow colleagues about whether it would be possible to re-create the classic Nokia game Game ‘Snake’ entirely within Articulate Storyline. When I am posed with this type of challenge, a very strange thing starts to happen in my mind! I can see myself programming the actions and variables in the SL interface, and I can envisage what the result could potentially be and whether it would work. In my mind, the main gameplay challenge could already be met with a new feature introduced in Storyline 360. Snake is all about collisions, and trying to avoid both the outer wall and the body of the snake itself, and this could be programmed in to our game using the new Object Intersect trigger! What would be most challenging is to program the logic in order to have the snake body move the way that it does within Storyline. Ultimately, as I started to explore this, it all came down to a bit of math and logic, which we will explore together now!

Step 1 – Creating The Graphics and First Movement

Snake in SL2 1

From the start I wanted my project to look a certain way, in order to capture that LCD ‘Game Boy’ graphic style that encapsulated that mobile era, so my colour palette stuck to the recognisable washed out greens and browns. I created the head of the snake on a new layer within Storyline in order to help seperate the triggers out a bit which will be required for each part of the snake a little later on. The movement itself is conducted by 4 motion paths that all move the square by one pixel in either direction, this actually took longer than anticipated because after the square has moved from one side of the board to the other it was very easy to overshoot or undershoot the exact position of the final square, so a little tweaking was required for both the board size and the motion path to line up exactly for each move.

And of course each motion path was assigned with the Relative Start Point in the Path Options which allows the movement to continue pixel by pixel from the square’s current position.

Snake in SL2 1

I created a text based variable which I called arrowdirection which would be changed to either U D L R dependant on when an arrow key has been pressed on the keyboard. I then needed to make 16 individual triggers which would play the corresponding motion path animation based on what the arrowdirection variable was assigned to. At this point the head was moving away and could be controlled by the player’s keyboard, but of course there is nothing to stop the head from disappearing off the board and out into oblivion, so we needed to do something about that a little later.

Step 2 – Creating The Snakes Body and Movement

So next up I wanted to prove that the snake movement could indeed be replicated in Storyline. I created a new layer to hold a second square which would become the back half of the snake. Of course, by duplicating the slide layer of the head, when launching the game, the body was automatically following the head one pixel movement behind the head, so we were already off to a good start! But of course as soon as the up key was pressed for example, the snake started moving upwards but sideways (if that makes sense!) so some more programming was required. What I realised I had to do was create a new variable, which I called Pos2, to hold the direction of the second snake piece seperately to the arrowdirection variable. The arrowdirection variable would be changed as soon as the key was pressed, but the Pos2 variable needed to change only after the first animation had completed, allowing the second piece to essentially catch up before assuming the new direction that the head was taking!

So 16 new variables were needed specifically for the body piece on its own layer, and then back on the head layer I needed to create 4 new variables that would change the Pos2 variable only once any of the 4 motion paths that could be playing at that time had completed, so if the up motion of the head had just finished playing THEN change the Pos2 variable so that the body moves the same direction on the next move, essentially looking like this!:

Snake in SL2 3

Step 3 – Adding More Body Parts and Food

So we now have a working formula for adding more body parts to the snake, essentially each part of the chain would be dictated by the square in front, so as soon as that particular’s square’s motion path has completed, then the one behind can be updated. So from this point on it was simply as case of duplicating the snake body layer, moving the square into position, and then adjusting the pre-written actions in Storyline to change the variable of Pos3 when the square in Pos2 has moved, and this is the way it will work throughout the project from here on out! Nice and simple.

After creating a snake that was three segments long I wanted to next start preparing my snake to only become bigger once a food item has been eaten. The way that I did this was to introduce a new series of True/False variables that would govern the ‘fruit’, or in this case lightning symbols!, once they has been eaten.

In order to know whether an item had been eaten by the snake, I would first need to know the exactly location of the snakes head on the board in order to track its exact position. To do this I created two new number variables for the X and Y axis of the snake. The snake in my game starts at position 4,9. The next step was then to add a series of triggers which would either add or subtract to these numbers dependant on the direction that the snake was headed. So to do this I once again used each of the 4 motion paths of the head, once the animation had completed a value of 1 would be added or subtracted at the end of each animation. So now I have two variables to tell me exactly where the head is, so all that remains is to get the location of the lightning bolt on the board and create a new trigger that says the the lighning bolt would become hidden when the head is at that same location, a new lightning bolt would also become visible, and the layer in which the next part of the snake is held would also become visible in order to increase the size of the snake.

I was also able to use the boundaries of the board (0 and 15 on the x axis for example) to say that if the head had gone past these points, then to stoop the game by loading a game over layer. We will be able to perfect this a little later using the new Object Intersect trigger built into Storyline 360.

Snake in SL2 4

This screenshot shows how the lightning bolt pictured will be made hidden if the head position matches its co-ordinates at 2,3. This trigger needed to be repeated 4 times for each of the Line Motion Paths of the head square.

Step 4 – Next Up, We Need To Switch Over To Storyline 360!

I will be intentionally breaking up this walk through into two parts because this is far as we can go in the process without the additional programming abilities available to us in the latest version of Articulate Storyline. In the next part we will be bringing the game together by introducing the collision physics of both hitting the wall and the body of the snake itself. This project is very much still a work in progress and there may well be some other improvements which can be made to other areas.

For now though, please enjoy this finished export of the game as it currently stands, where I have introduced two food items to give a flavour of how progressing through the game is going to look in the final version. See you in Part Two!

Chris Hodgson

About Chris Hodgson

Chris Hodgson is a Digital learning Solutions Developer and Director of Discover eLearning Ltd. He supports SMEs and large firms through the process of integrating eLearning into their organisation. Chris has over 10 years experience working in Higher Education, Independent Training Provider Sector and Charity Sector learning and development.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.