Let’s Make a Game: Snake

Note: this tutorial is out of date. You can use concepts from this tutorial, plus updated ones listed below:

 

snake

The classic game “Snake” is fun because of it’s simplicity and replayability. You start out as a small snake made up of one or two blocks, and you grow longer each time you eat something. You have to avoid colliding with yourself, which becomes progressively harder as your tail grows longer. The entire game only contains a few elements, but you can play it over and over – that makes it a perfect candidate for a “Let’s Make a Game” Tutorial!

screenie
Click to play Ghost Conga – this is what we will be building!

 

Here’s a brief rundown of the things we need to make:

  1. The head of the snake (I want to mix Snake and Pacman, so I’m going to use Pacman as the head)
  2. The “food” that appears in random places, and increases the score when eaten (I’m using a star)
  3. The body of the snake which needs to grow each time food is eaten, and ends the game if touched by the head (let’s use Pacman ghosts in a conga line!)

Let’s get started! Snake is a top-down game (no platforms or gravity), so go ahead and create a new blank top-down game in the Gamefroot Level Editor.

blanktopdown

 

To follow along with this tutorial, you can grab the “Ghost Conga” asset pack from the Marketplace.

market

 

It has a Pacman character, a star item, a ghost item, and a notepaper background which you can use in your game.

Once you’ve got the pack from the marketplace, open My Resources, click on the Ghost Conga pack, and then click “Add Pack to Game” or click the + button on the pack.

 

addpack

 

Now those assets will be available in the palette for you to use in your game.

1. The Head

First let’s put Pacman somewhere in the top-left corner of the level. Make sure you set him as the Player character.

pacman-corner

Now our character is in place, we might as well set the level background. Open the Level Properties from the File menu, and open the Environment tab to set the backdrop to the notepaper background.

bg

Click save changes, then we can move on to the star item.

 

2. The Food

Find the star in the Items palette, and place the star down somewhere close to Pacman.

star1

We will be creating a script for the star that will tell the ghosts to start chasing Pacman, increase the score, top up Pacman’s health, and teleport the star to a new random location. The great thing about scripts in Gamefroot is that you can create brand new functionality in your game without having to actually write any code! It’s so simple and fun, it’s like snapping lego blocks together.

To create the script, open the Behaviours palette and click Create…, then replicate the sequence of blocks below in the Script Editor.

create-script

script1
First, start by finding the block “When touch by (instance) starts:” and drag it out into the workspace

 

Here are the individual blocks you will need, and the tabs that you will drag them out from (the tabs are on the left):

blocks1

 

This is how the finished script should look:

star-script

This script will activate when the item (the star in our case) is touched by the player. It will send a message “start” to all other scripts in the game*, it will increase the player’s health by 100, it will increase the score by 100, and then it will teleport itself to a random new location from between 0 to 700 pixels across (on the x-axis), and from between 0 and 500 pixels down (on the y-axis).

*That start message will have a receiver in another script we make further on in the tutorial.

 

Name your script Star script (so you know what it’s for) by clicking Behaviour Properties, then typing the name in the top field. Also make sure Solid is not ticked (so the player can move easily through the star). Save that, then click Save Script and then close the script editor once it has saved.

star-script2

Now you should see your new script in the Behaviours palette. Click on it to select it, and then apply it to the star item on your level by clicking on the star. The coloured icon indicates that this item has a script applied to it.

star2

 

Phew! Let’s test it out and see if it does what we want. Save your level, then click Preview Game. Here’s what your game should look like so far:

tutorialgame1
Click to play the half-finished game

If your game looks like the above one, then good work! If you’ve gone wrong somewhere, go back and read it again – make sure you haven’t missed any steps.

 

3. The Snake’s Body

Well… it’s not really a snake. But it’s cooler! Our conga line of ghosts chasing after Pacman will actually only be one ghost item that gets recreated a whole bunch of times.

a) The Ghost

Find the ghost in the Items palette, and place it somewhere near the star.

ghost-on-stage

 

Then open the Behaviours palette and create a new script. Here is what we want to create for the ghost script:

script2

 

It might look complicated, but each sequence is doing pretty simple things:

  • When the ghost is first created it will be invisible, but then sends a message to itself to become visible in 400 milliseconds. Then it will die in (score x 2) milliseconds. If the score is 0, then it will die in 0 milliseconds (instantly), but if the score is 500, then it will die in 1000 milliseconds, which is 1 second. This means as the score increases, the ghosts will stick around longer, so the trail will become longer.
  • When it is touched by the player, if it is visible then it will damage the player’s health by 100.
  • The last sequence is constantly checking to see if the position of the player is the same as the position of the ghost (the ghost would be on top of the player). If it is, and the ghost is visible, then it will also damage the player’s health by 100.

If you don’t understand what each sequence does, just try to copy it so your version looks the same as the one above, and it will still work it’s magic.

Name this script Ghost, then save it and close the Script Editor. Then apply this script to the ghost item on your level, just like we did with applying the star script to the star item previously.

Now we have a ghost that will instantly die when the game starts. We need a way to keep spawning ghosts, and that’s where the spawner script comes in.

b) The Spawner

We want this ghost to be constantly spawned in a trail behind the player, so we will need to create another script independent of the ghost to do this. We can use any item from the items palette for this – I used the green potion. Don’t worry, we will make it invisible inside the game – we just need this item as a place for the spawner script to live.

 

potion

 

Place the green potion somewhere near the top-left corner of the level, then create a new script. Here’s how the spawner script should look:

spawner

To make sure the purple “type of (instance)” block chooses the ghost as its target, click on the red area where it says instance…

chooseinstance1

Then choose the ghost script from the selection box and click Select Instance.

chooseinstance2

 

Great! Now save this script, and apply it to the green potion.

 

Finish the level and Preview your game

Lastly, open the Level Properties from the File menu, and change the Level dimensions to 16 wide by 11 high. This will prevent the player from walking away from the action.

dimensions

 

This is what your level should now look like:

finished-level

 

Save your level, hit the Preview button, and play your completed game!

tut2img
Here’s the finished game! Click to play.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Congratulations on your newly improved game development skills, and thanks for sticking with it to the end! Give us your feedback by posting comments below, or hit us up on TwitterFacebook, and the support page.

Now go out there and make some more cool games.

– The Gamefroot Team

8 Replies to “Let’s Make a Game: Snake”

Leave a Reply