Tutorial 02 Making a simple game

Written by Maaike on 13/05/2016 10:24:07

So you have an idea to build a game, but where to start? In this tutorial we will show you how you can use InCourse without coding skills to let your game come alive. The game we will be making is to catch the squirrel.
The tutorial is divided in three parts: 1) making the world; 2) adding a score and 3) taking the game to the next level.

In this lesson you will learn how to add images, how to make them move, adding scores to the game and as an extra: how to use the OnClick function.

Let’s start!

Final Game

Phase 1 – Making the world

We’re starting with an almost empty canvas, because there is already a camera. The camera is the block you see when you open a new InCourse game. Everything placed inside the camera will be shown during the game, everything that is placed outside the camera is invisible while you play.

Empty vancas

Step 1

First we are going to make a world and in our case, that will be a tree. In the upper left corner you find a bunch of elements. To add an image, you’ll need: Image. Click on the button and find a little black squire in the middle of your camera. This image will also appear on the left in the element list below ‘first camera’. Everything you add, will be shown here.

Okay, back to the little black square. We are going to transform it into a tree. When you click on the black square a little menu with four options appears. When you hover over the four options, the name of each button will show. For now we’ll need Change image.

Change image

A new menu appears when you click on change image. From here you can choose your image from already existing content or upload your own. You can find a tree at the bundle Tutorial. Click on the image you want and then it will appear in the small square we made earlier. Stretch it till it has the size of the camera. Also give the tree a name on the left side in the elements settings. Those settings will be shown while the image is selected.

Adding a tree

Because our tree is a little empty, we are going to give it some leaves. Repeat the steps of adding an image and find some leaves in the same bundle.

Don’t forget to give the leaves a name too! Better make a habit of naming your elements instead of losing sight when you have a bunch of different nameless items (can be quite confusing).

Tree settings

Step 2

So now we that have a tree, we also want some life in our game. Time to add a quick squirrel. We are going to repeat once again the steps about adding an image.

When you added the squirrel, you see that there are two squirrels in the image. That’s okay, because we want the squirrel to be running through the game and therefore we need two of them to make the movement possible.

Adding squirrels

With the squirrels placed, we are going to edit the image. Click on the squirrels and click on the first option: change image. Instead of choosing a new image, we are going for animation. You can click on the button with the “…”. Next, you click on Create new key frame.

Here you can fill in the settings for the movement of the squirrel. Key frame size gives you the opportunity to change the size of the square (with the blue line) where your image is standing in. I used 170 and 90.

Next is Keyframe count, here you choose how many key frames there are. In our chase we need two, because we have two squirrels.

Use Time span to create time between the two images. It’s based on milliseconds, so we’ll start with 200 milliseconds. You can change it at any time.

Keyframe start is used to position the image at a certain place, but for now we don’t need that.

Creating an animation

Click on close and watch how your squirrel is running on its place. If you lower the milliseconds to 100 the squirrel will run faster, make it higher like 300 and it will run slower.

Step 3

It’s really nice to have the squirrel running on its spot, but how about letting him run through the grass? To make that possible we’ll need a path. You can find the path between the elements at the left top. Click on it and a new square with a triangle appears.

If you select the path, it has four menu buttons. Click on add a key frame.

A new square appears (probably on top of the path) and you can move it around. As you do, you will see that it is attached to the path with a string. Moving the path around (the one with the triangle), will make the key frame move too.

Place the path somewhere outside the camera view on a spot where the squirrel has to start running. The key frame can be placed inside the camera on a spot where the squirrel is running towards. We used four key frames, so the squirrels hops through the game and becomes smaller when it runs to the back.

Making a path

Step 4

We now have a running on the spot squirrel and a path. Let’s connect the two of them. Click on the path you’ve made (the one with the triangle) and go to the element settings. In the middle of the settings on the left is “Attach” written, behind you see a little star button. Click on that and your arrow will be changed into a pointer. Click with your pointer on the squirrel.

Also click on the path again and turn off the circulair in the element settings. This will prevent that squirrel will run backwards.

Let’s play the animation we just made. Use the play button in the upper left corner besides the home button and see your squirrel run the path you’ve made.

If you like to let your squirrel run quicker or slower, change the play time of the keyframe that are attached to the path. The play time of each keyframe can be found in the element settings. We set the play time to 1.

Great job! You finished the first phase of making a game. Now let’s start with catching the squirrel, think you’re fast enough?

Phase 2 – Adding a score

Moving squirrels are of course very cool, but without being able to do something in our game it’s a bit boring. How about adding a score, so we can track how many times you catched the squirrel?

Step 5

First we are going to add some text. You can find the text element in the upper left corner. In the element settings of the text, you can write the text down at text. Let’s go for ‘score’. You can only add or change the text in the element settings. Here you can also change its colour and writing style.

Place the text somewhere inside the camera view. We placed it in the upper left corner. Repeat the adding text part, to make room for the score. Here you can write down 0 (zero). Place the 0 next to the score.

Adding a score

Step 6

To make the score feature work, we’ll need the math element. Below the elements in the upper corner on the left you can find more elements, here you can find the math element.

Name the element ‘scorecount’ and set its value at ‘0’. We give the value a zero, so the game will start with zero points. The name we’ll be using for the coming formula.

To make that the score goes up every time you click on the squirrel we need to connect the squirrel and the math element. Click on the squirrel and choose the second option add action. An arrow is attached to your mouse, connect it to the math element. After connected, you will see the arrow between the squirrel and the math.

Now the two of them are connected, so we need to add the actual action. Because without an action, the score won’t go up. Click on the arrow between the squirrel and the math element and go to its element settings. If you don’t see the math element or the arrow, click on the squirrel. From there you will see the elements that are connected to the squirrel.

Put event on OnClick and the action on Add so the game knows that when someone clicks on the squirrel the value of the score goes up. Next thing to do is to fill in the value. We want that score goes up with one at a time, so the value will be 1.

Math action

Step 7

Next we want that the zero we wrote down earlier is going to rise each time we click on the squirrel. Click on the zero we placed next to the score inside the camera and go the element settings. We have given the math element an event and action, so now we are going to link those to the score. Therefore we add a formula, which you will write down in the text bar.

=#scorecount.value

The = we use to start the formula with. #scorecount addresses the text score we used and .value is connected to the value of the math element.

Text settings

Time to test the game.

Well done! You completed the second phase by making a rising score. Let’s start with the third and last phase of our little game.

Phase 3 – Catching the squirrel

Let’s polish our game a little more. How about letting the squirrel disappear and restart its course when you catch him? Are you ready for the last steps? Let’s go!

Step 8

We want the squirrel to disappear when we click on him. Select the squirrel and click on add action and click on the squirrel, because we want the action to be happing when we click on him. At the left you can now change the event to OnClick (because it has to disappear when we click on it) and you set the action on Hide (because the squirrel needs to disappear once clicked on).

Earlier we saw an arrow between the point A and B that we connected, now this line is too small to see. Though you might want to change the filled in information at some point; you can do this by going to the element settings of the squirrel. Scroll down and see the actions we added. Click on the little chain behind an action and it gives you access to the settings.

Step 9

Last thing to do is to make sure we see our squirrel once it starts running its path again. When we don’t do anything about that, our squirrel will be invisible from the moment when you click on it. So let’s go to the start of the path we created and add an action. This action will be connected to squirrel.

Click on the arrow and choose OnReached as event and choose Show as action, because when the squirrel reaches the begin point it has to be visible again.

Let’s test our game to see if it works. If not, repeat the steps again.

Congratulations!

You finished the third phase and now you have a game. Yes, it’s simple and sure thing no one will beat your high score, but it is a game! And you’ve made it all by yourself!

A little reminder before you close this tutorial: When you start making your own games, ask yourself when things need to happen and to whom it happens. For instance we wanted the score to go up, so when does that happen? Right, when we click on the squirrel. And to whom does it happen? To the score, because it needs to go up after clicking on the squirrel. So knowing those things will help you to make the right connections and add the events.

What you’ve learnt

• How to place and change images.
• How to make images move on the spot and from A to B.
• How to work with events and actions.

Please share your creations with us. We would love to see what other games you come up with.

Good luck!