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)