Fruit SnakeSECTION 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 offruit it eats. The game ends when the snake collides with the wall or when the snake collides with

its own tail.

SECTION OBJECTIVESBefore 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 yourProperties 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 of1280 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 expandingthe 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. Todo 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 forLayout 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'simportant 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 propernames 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 eventsheet 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, insidethe Event sheets folder and select Rename. Now type in the new name which will be esGame.

OBJECTIVE 1 - BUILD A MOVING SNAKE HEADNow that the project is set up you're ready to begin building the game itself! If you remember, thefirst 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 newobject.

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 clickInsert.

Once you click insert, a set of crosshairs will appear. Click anywhere on your blank layout tocreate the sprite.

You'll now see three windows popup. These three windows make up the sprite image andanimation editors.

At this point in creating the game don't worry about making everything look nice and polishedsince 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 testthe 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 theavailable 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 theEdit 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 tomake 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 dothis, 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 usingthe 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 oursprite 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 behaviorwindow 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 usedto 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 byadding the first event to your project.

Go back to Construct and click on the event sheet tab label esGame. This can be found in theProjects Bar.

To move the snake, you want to use the arrow keys on the keyboard to make the snake turn. Tobe 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. Scrolldown 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 Addevent link to bring up the Add event window.

This window is where the condition for the event is selected. Double-click on the keyboardobject, or select and click next.

The next screen will show the conditions you can use to trigger our action. To have the snake turnwhen 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 upthe Choose a key window. When this window appears, click the left arrow key. You'll see thatConstruct 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 anaction to. Click Add action next to the condition.

In the Add action screen, double-click the SnakeHead object. On the next screen, scroll down toBullet 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 anddouble-click SnakeHead

This will bring up all the available expressions within our SnakeHead object we can use in ouractions. 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'llsimply 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 rotateleft. 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 havethe snake turn right. You can add a whole new event like you just did for the left arrow, but sincethe 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 tomake 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 theParameters 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 nowthat the condition is set to Right arrow is down. Now to change the action, double-click the Setbullet 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 TIMEIf 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 itmoves.

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 WITHINLAYOUT

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" thesnake 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. ClickInsert when this is done

When the crosshairs appear, click near the top-left corner of the layout to insert the object andbring up the sprite editor.

For this wall sprite you won't have to worry about changing the size, this will be done in your layouteditor. 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 Baryou'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 valueswith 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 TIMEAssuming 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 anew 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 onthe 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 theprevious 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. Tomake 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 thesurrounding wall.

Now that the wall is created you need to set up an event to stop the game when the snake headhits 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 withanother object event.

In the Parameters window, click the button next to object and in the new window select the Wallobject. 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 goesoff the screen it's destroyed.

If you remember when we set the position of our wall objects they were located outside of thelayout. 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 FRUITNow 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 crosshairsappear 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 objectyou're going to select the snake head again and for the condition you're going to select the sameOn 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 theevent 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 eventselect Create object under the General section.

In the Parameters window, click the Object to create button and select Fruit object. For the x andy 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 containsthe 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 choosea 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 theninsert 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 outLayoutWidth 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'regoing 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 layoutand 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 visitingthe STEM Fuse Arcade.

PLAY SOME GAMES (http://arcade.stemfuse.com)