Fruit Snake
SECTION 1
For the first full Construct 2 game you're going to create a snake game.
In this game, you'll have a snake that will "eat" fruit, and grow longer with each object or piece of
fruit it eats. The game ends when the snake collides with the wall or when the snake collides with
its own tail.
SECTION OBJECTIVES
Before you start, read the section objectives below. These objectives will be completed at the end
of this section.
A snake head that will move forward, and rotate based on input from the keyboard
The game will end when the snake collides with a wall
An object that will be "eaten" when it collides with the snake head
First things first, open a new Construct project by going to the file menu and selecting New
Select New empty project and click Open
Once the project is open it's time to change some information. In the About section of your
Properties bar, located on the left side of the screen, change the project name to Fruit Snake.
Also, in the Properties bar change the Window Size in the Project settings section to a width of
1280 and height of 720. Both of these numbers are using pixel units.
You can do this by typing the comma separated numbers in the Window Size box or expanding
the Window Size property and typing the width and height in their respective boxes.
Now that the window size is set you'll want to set the size of the layout to 1280 x 720 as well. To
do this go to the Projects bar, located on the right side, and select Layout 1 from inside the
Layout's folder.
Once selected go back over to the Properties bar, where it's showing the Layout properties for
Layout 1. Here set the layout size to 1280 x 720 just like you did for the window size.
With the Layout properties selected you now need to change the name of the layout. It's
important to keep all aspects of your games well documented with useful names and comments.
As you move forward in this class, the games you build become more complex. Without proper
names and comments it makes it harder to find and change different items within your game.
To change the name of the layout, simply click the box next to Name in the Layout properties.
This will highlight the current name of "Layout 1" which we will change to Game.
Now that the layout is renamed, you'll want to rename the event sheet also. Currently the event
sheet is named "Event sheet 1", you'll want to rename it to show that it corresponds with the
game layout.
To rename the event sheet, go back to the Projects bar. Here right-click on Event sheet 1, inside
the Event sheets folder and select Rename. Now type in the new name which will be esGame.
OBJECTIVE 1 - BUILD A MOVING SNAKE HEAD
Now that the project is set up you're ready to begin building the game itself! If you remember, the
first objective of this section was to build a moving snake head. To do that, you first need to add a
new object for the snake head.
First thing you need to do this right-click on our blank layout (anywhere) and select Insert new
object.
Doing this will load an Insert a new object window. In this window, you're going to select Sprite.
Below in the field titled "Name when inserted:" change Sprite to Snakehead and then click
Insert.
Once you click insert, a set of crosshairs will appear. Click anywhere on your blank layout to
create the sprite.
You'll now see three windows popup. These three windows make up the sprite image and
animation editors.
At this point in creating the game don't worry about making everything look nice and polished
since right now the focus is just on getting the functionality built.
With that being said, you still need some kind of image to represent a snake's head to help test
the game as it is built. To start making the snake head, first resize the sprite. To do this click the
resize button.
In the "Resize image canvas" window set the width and height to 40 and click OK. This will set the
available size to draw the sprite to 40 pixels by 40 pixels.
With the resized canvas visible, click the fill tool (looks like a paint bucket) located on the left of the
Edit image window, this will bring up the color palette. In the color palette, select any color
besides white for your snake head.
When you have your color selected, click inside the canvas located in the edit image window to
make your snake head your selected color.
You'll want to add eyes to your snake head so the player can see which direction it's moving. To do
this, you'll want to zoom in to enlarge the canvas area so you can add detail. This can be done by
clicking Zoom in a few times.
Once zoomed in, select the pencil tool and in the color palette set the color to white by using
the slider below the color picker and moving it all the way to the right.
Once the tool and color are set use the pencil tool create two eyes on the right side of our
sprite so it appears the snake is facing right. Not perfect? Don't worry about making the dots
perfectly aligned since this won't be the final image we use.
Close the image editor to get back to the layout where you can see the newly created snake head.
Click on the snake head sprite to bring up its properties in the property bar. Within the
Behaviors section click the Behaviors link.
In the Behaviors window, click the plus icon to add a new behavior. Then in the Add behavior
window scroll down to the Movements section and double-click the Bullet behavior or select it
and click Add.
The Bullet behavior moves an object forward at its current angle and at a set speed. This is used
to keep the snake continuously moving. To see this in action, close the behaviors window and click
the run layout button at the top of the screen.
As you can see, the snake moves but currently there's no way to control it. You can fix this by
adding the first event to your project.
Go back to Construct and click on the event sheet tab label esGame. This can be found in the
Projects Bar.
To move the snake, you want to use the arrow keys on the keyboard to make the snake turn. To
be able to do that, first you need to let Construct know to use the keyboard.
In the Projects panel, right-click on the Object types folder and select Insert new object. Scroll
down to the inputs section and double-click Keyboard to add it.
Now that you added the keyboard to the project, you now need to add an event. Click the Add
event link to bring up the Add event window.
This window is where the condition for the event is selected. Double-click on the keyboard
object, or select and click next.
The next screen will show the conditions you can use to trigger our action. To have the snake turn
when an arrow key is pressed down you'll want to use the condition of Key is down. Double-click
Key is down, or select and press next, the Key is down event.
In the Parameters window that appears, click the click to choose button next to Key to bring up
the Choose a key window. When this window appears, click the left arrow key. You'll see that
Construct detects this and will put it in the field below "Press a key:". You can then press OK to
close the window then Done to add our condition.
On the event sheet, you can now see the condition of "Left arrow is down" that we can add an
action to. Click Add action next to the condition.
In the Add action screen, double-click the SnakeHead object. On the next screen, scroll down to
Bullet actions and select Set angle of motion and click next.
For the condition of having the left arrow down, you'll want the snake to turn counter-clockwise.
When an object moves counter-clockwise in Construct we're decreasing it's angle. To properly
make our snake turn we will need to write an expression to calculate the new angle.
First clear out the text box next to Angle. Then go to the Objects with expressions window and
double-click SnakeHead
This will bring up all the available expressions within our SnakeHead object we can use in our
actions. The expression you'll want to use is Angle. Double-click angle and you'll see it will input
SnakeHead.Angle into the text box in the Parameters window.
This expression will give the current angle of the snake head. To make the snake turn left, you'll
simply subract from its current angle. At the end of the expression type -4 and click Done.
You can see on the event sheet that the condition and action created make the snake head rotate
left. Click the run layout button, and use the left arrow key to rotate the snake.
You now have the snake rotating left, but you still need to add the condition and action to have
the snake turn right. You can add a whole new event like you just did for the left arrow, but since
the event for the left and right arrows is so similar you can simply copy the left arrow event and
make a few adjustments to it.
To copy hold down the Ctrl key and click to the left of the condition to select the whole event.
Now hold the mouse button down and drag down until a black line appears below the event.
Now release the mouse and you can see a duplicate event is created.
To modify this event to make it so the right arrow rotates the snake clockwise you just need to
make two changes, one to the condition and one to the action.
First, double-click on the Left arrow is down condition in the new event to bring up the
Parameters window. Like you did with the first condition click the button next to Key that currently
says Left arrow. This loads the Choose a key window, this time press the right key.
Press Ok to close the window and then Done to get back to the event sheet. You can see now
that the condition is set to Right arrow is down. Now to change the action, double-click the Set
bullet angle action on the Right arrow event. In the Parameters window that appears, simply
change the action to +4 instead of subtracting and click Done.
QUIZ TIME
If instead you wanted the right key to run the snake directly down which angle would you use?
0
270
-90
90
Now when you run the game you can see you're able to turn the snake left and right as it
moves.
STOP! READ THIS BEFORE CONTINUING!
Make sure to save your game. You don't want to lose all your work.
OBJECTIVE 2 - CONTAINING SNAKE SPRITE WITHIN
LAYOUT
Now that the snake is moving, you want to make it so the snake is contained to the current layout,
so you'll tackle that issue next.
To solve this problem, you're going to create invisible walls around the layout that will "kill" the
snake when he/she collides with it. To get started, go back to the Game layout screen, right-click
anywhere on the blank layout and select Insert new object.
In the Insert New Object window, select the sprite again and change the name to Wall. Click
Insert when this is done
When the crosshairs appear, click near the top-left corner of the layout to insert the object and
bring up the sprite editor.
For this wall sprite you won't have to worry about changing the size, this will be done in your layout
editor. Instead, select the fill tool (paint bucket) and in the color selector select a yellow color
and click in the sprite to fill it. Go ahead and close the image editor when this is done.
To create your first wall piece, click on the sprite to make sure it's selected. In the Properties Bar
you're going to go to the Common section and change some values. First set the size to a width
of 10 and height of 720.
Next, you want to change the wall's position. The position of an object is based on x and y values
with the origin (0,0) located at the top-left. The x values increase left to right, and the y values
increase top to bottom.
For this sprite you want to set it to the left edge of the layout. So set the X to -5, and Y to 360.
QUIZ TIME
Assuming the layout is 1280px X 720px, which dot would represent the appoximate point of a
sprite image placed at (200,200)?
To create the rest of our surrounding wall you'll need to copy the current wall sprite to make a
new instance. Instances of sprites are able to share properties, but there's also times where they'll
have differnt values of properties. This is covered in more depth later in this section.
To easily create a new instance of a sprite hold down the CTRL button and then click and drag on
the sprite. Do this with our wall sprite to create a new instance of the sprite.
Click on the newly created sprite and in it's properties you'll see it kept the same size as the
previous sprite so all you'll have to do to make it the right-side wall is to change its position. Set the
position of the new sprite to 1285,360 (x value of 1285 and y value of 360).
Like previously, hold CTRL and click and drag one of the wall sprites to create a new one. To
make this new sprite our top-side wall you'll have to change its size and position. For the new
sprite, set the size to 1280,10 and its position to 640,-5.
Clone the top-side wall sprite and set its position to 640,725 to complete all four sides of the
surrounding wall.
Now that the wall is created you need to set up an event to stop the game when the snake head
hits the wall. To do this, go to the event sheet and add a new event. In the Add event window,
select the SnakeHead as the condition object and click Next.
For this condition you're going to go to the Collisions section and select the On collision with
another object event.
In the Parameters window, click the button next to object and in the new window select the Wall
object. Click Done to insert the condition.
Now you can add an action to the new condition. Click the Add action link next to the condition.
Select the SnakeHead as the object to which to add an action. In the list of actions, scroll down to
theMisc section and select Destroy.
If you run the layout now you'll see that in addition to being able to turn the snake, when it goes
off the screen it's destroyed.
If you remember when we set the position of our wall objects they were located outside of the
layout. Since these objects were not within the layout boundries they are not visible when the
layout is ran, but events associated with those objects still run.
STOP! READ THIS BEFORE CONTINUING!
Make sure to save your game. You don't want to lose all your work.
OBJECTIVE 3 - HAVING THE SNAKE EAT FRUIT
Now you just have one objective left to do to complete the first section of the game. That objective
is to add an object that will get eaten by your snake.
To start, go back to the layout and insert a new sprite object named Fruit. When the crosshairs
appear click on the right side of the layout to insert our spite and bring up the sprite editor.
In the sprite editor, click the resize button and make the sprite's height and width both 32. Next,
select the fill tool, pick a color you haven't used yet, and click on the sprite to fill it. You can close
the editor when you're done with these steps.
With the sprite inserted go back to the event sheet and add a new event. For the condition object
you're going to select the snake head again and for the condition you're going to select the same
On collision with another object action as used previously. In the Parameters window for the
collision object you're going to select the new Fruit object this time.
Now click next to the new condition to add an action to it. For the object select Fruit and for the
event you're going to use the Destroy event like previously.
If you run the layout now, you'll see that when the snake collides with the fruit the snake will
"eat" the fruit.
In the snake game when it eats a fruit we want a new fruit to appear that it can eat. To do this,
you're going to add another event to the snake head and fruit condition to make a new fruit
appear.
Back on the event sheet click the Add action link under the Fruit-Destroy action.
This time use a System event to create a new object. Select the System object and for the event
select Create object under the General section.
In the Parameters window, click the Object to create button and select Fruit object. For the x and
y values we want to have Construct create the new fruit at a random position on the layout. You
can do this using a couple expressions.
Clear the value in the X field and start to type random. You will see a box appear that contains
the functions you can use in this expression. When "random" is highlight you can press Enter to
insert it into the X value field.
Inside the parentheses after random you will insert two values to tell Construct a range to choose
a random value from. The first value in the parentheses will indicate the lower value for the range,
while the second value will indicate the upper value of the range. For the range in this expression
you will set it so the fruit will appear anywhere on the layout.
With random inserted into the field type an open parenthese (. For the first value type 0 and then
insert a comma. For the second value you want the width of your layout, which is 1280. But
instead of putting the value in yourself, you can tell construct to insert that value. Start to type out
LayoutWidth and when you see it appear and in the list, highlight it and press Enter (or double
click) to select.
Finish the expression in the X field by inputing a closing parenthese: ). Now for your Y value you're
going to do the same, but instead of LayoutWidth use LayoutHeight. When you're done, the
Parameters window should look as follows.
STOP! READ THIS BEFORE CONTINUING!
Make sure to save your game. You don't want to lose all your work.
Click Done to close your Parameters window which will insert a new action. Now run the layout
and you can see that you're able to eat a fruit object and a new one appears, and this will keep
happening as you eat fruit.
SUCCESS!
YOU'VE JUST FINISHED THIS SECTION.
I bet you didn't know that you can play this game, as well as all the Game:IT games by visiting
the STEM Fuse Arcade.
PLAY SOME GAMES (http://arcade.stemfuse.com)