Star Defender Section 1
For the first full Construct 2 game, you're going to create a space shooter game called Star Defender. In this game, you'll create a space ship that will be able to destroy the enemy ships and bosses as you go through the various game waves. You'll create power ups for your space ship and keep track of your score. The game ends when you run out of lives.
Section Objectives Before you start, read the section objectives below. These objectives will be completed at the end of this section. Create a simple moving ship that fires bullets Create simple enemy ships that fire bullets Add collision detection and multiple enemy ships
Section Objectives Continued Build game to automatically create enemies and control enemy movement Build a simple wave system to make the game progressively more difficult
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 Star Defender.
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. The window size sets the size of the viewable area when the game is played. Using 1280 x 720 ensures a aspect ratio (the ratio between width and height) of 16:9, which is common in many of today's devices.
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 you 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. You might have noticed the "es" in the event sheet. "es" is used as a naming convention to distinguish all of the events. So es = events.
Objective 1 - Build Working Player Space Ship 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 simple working space ship. To do that, you first need to add a new object to your game for the space ship.
The first thing you need to do is right-click on our blank layout (anywhere) and select Insert new object.
Doing this will load an Insert new object window. In this window, you're going to select Sprite. Below in the field titled "Name when inserted:" change Sprite to Player and then click Insert.
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 the player spaceship and to help test the game as it is built. To start making the space ship, first resize the sprite. To do this click the resize button.
In the "Resize image canvas" window set the width and height to 80 and click OK. This will set the available size to draw the sprite to 80 pixels by 80 pixels.
With the resized canvas visible, notice the image toolbar on the left of the Edit image window. This toolbar allows you to use various tools such as a pencil tool, brush tool, eraser tool, fill tool, and more to design or edit an image. If you click on the pencil tool this will bring up the color palette. The color palette allows you to select the color for your currently selected tool.
There are many useful tools to use when creating or editing images. Below is brief description of some of the tools. Icon Tool Name Description Rectangle Select Select a rectangular region of the image Eraser Erase a part of the image Pencil Draw the image with a thin line Brush Draw the image with a configurable and resizable brush Line Draw the image with a straight line tool Rectangle Draw a rectangular box with the selected color Fill Fill a region of the image with the selected color Color Picker Choose a color from the image Zoom In Zoom in on the image Zoom Out Zoom out on the image Zoom to 100% Zoom the image to it's original size
On Your Own Now it's your turn to build your space ship image: Familiarize yourself with the various image tools Create a simple space ship for your Player object Use multiple colors on your space ship Do not spend too much time designing your space ship. You will be replacing your created image in an upcoming section.
On Your Own Example Your space ship colors and design may differ, but here is an example
Close the image editor to get back to the layout where you can see the newly created space ship. The next step is to get the space ship to move with the arrow keys. Construct 2 uses behaviors to add functionality to objects. In this case you will be adding a behavior to your Player object.
Click on the space ship 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 8 Direction behavior or select it and click Add. Click here to learn more about the 8 Direction Behavior https://www.scirra.com/manual/87/8direction
The 8 Direction behavior allows you to move an object left right and on diagonals. To see this in action, close the behaviors window and click the run layout button at the top of the screen. You can use the arrow keys on your keyboard to move the space ship around. You will notice that the space ship does not seem to move correctly.
In the 8 Direction behavior properties, click the box next to Directions and click Left & Right. Then click the box next to Set angle and click the No option. Re-run your layout by clicking the run layout button. If you have not saved your game yet, now would be a good time to do so. This will prevent you from losing your work.
To position the Player object on the bottom of the screen, click on the space ship sprite. In the properties section click the box next to Position and change the position to 600, 650. This will position the object 600 pixels in the X position (from the left side of the screen) and 650 pixels in the Y position (from the top of the screen). You can think of the entire layout as a grid with the 0,0 point located at the top left corner. You can always position objects by clicking and dragging the object within the layout. This means instead of entering the exact position, you can simply click on the space ship sprite and drag it to the bottom of the screen. You can also position objects using the arrow keys after selecting them.
On Your Own On the space ship you can modify properties of the 8 Direction behavior to change the movement speed: Change the Max Speed to see how it effects your ship. Change the Acceleration to see how it effects your ship. Change the Deceleration to see how it effects your ship.
On Your Own Example
Now that your space ship is moving correctly in your game, you now need to get the space ship to fire bullets. The bullets that will be fired from the space ship will need to be separate objects in your game. Create a new Sprite, entering PlayerBullet as the name of the new object. After clicking the Insert button click anywhere on your layout to get to the image editor.
On Your Own Now you can create your bullet image. Create your bullet image to have an 18px width and a 18px height. Make the bullet a solid colored square. Make the bullet any color you want.
On Your Own Example
Construct 2 has a bullet behavior that can be added to an object to make an object move with a set speed in a set direction. Close your image editor and make sure to have your bullet sprite selected. In the properties section click on the Behaviors link. Add the Bullet behavior to your bullet sprite. Click here to learn more about the Bullet Behavior https://www.scirra. com/manual/90/bullet
If you run your game now, you will notice your bullet object will move off to the right of the screen. In order to get the bullet to fire from your space ship, you will need to add your first Construct 2 event. Click on the event sheet tab label esgame. You want the bullet object you created to fire from the space ship when the spacebar is pressed. Construct 2 uses Events and Actions to tell your game how to run. Events are triggered by something happening in your game. Actions handle what to do when the specific event happens. You can think of this out loud as "If this happens, you want your game to do these things". In this example you could say "If the spacebar is pressed, then create a bullet and fire it from the space ship" Thinking of Construct Events and Actions in this way may help you better understand what your game is doing.
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. You are also able to add the Keyboard object from the Game layout. The Keyboard object can be added the same way the sprite objects were added to your game.
Now that you added the keyboard to the project, you now need to add an event. Click the Add event link on the esgame event sheet 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 the action. To have the space ship fire a bullet when the spacebar is clicked you'll want to use the condition of On key pressed. Double-click On key pressed, or select the Key is down event and click Next.
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 spacebar. 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 "On Space pressed" that you can add an action to. Click Add action next to the condition.
You will want to first create a new bullet each time the spacebar is pressed. Construct has an action that will create a new object relative to an existing object. In this case you want to create a PlayerBullet object relative to the Player object. In the Add action screen, double-click the Player object.
On the next screen, scroll down to the Misc section and double click Spawn another object and click Next.
On the Parameters for Player: Spawn another object screen, click the click to choose button. On the Pick an object screen, double click the PlayerBullet object or select the PlayerBullet object and click OK. Click the Done button to finish adding your action.
In order to make sure the bullet object you just created is moving the correct direction, you will need to add an Action to set the bullet angle of motion. Click the Add Action link and double click the PlayerBullet object. Under the Bullet section select Set angle of motion and click Next.
The angle is based off a 360 degree circle where 0 degrees will go right, 90 degrees will go down, 180 degrees will go left, and 270 degrees will go up. Since you want your created bullet to move in the up direction, enter 270 in the Angle box and click Done.
You can see on the event sheet that you have two actions running when the spacebar is pressed. Click the run layout button. You can now move your space ship left and right as well as fire bullets with the spacebar.
In order to finish the space ship movement you will need to add a few more things. Your space ship can currently go off of the screen. This can be fixed by adding another behavior to the Player object. Add the Bound to Layout behavior to your Player object. This will prevent your spaceship from leaving the layout. Click here to learn more about the Bound to Layout Behavior https://www. scirra. com/manual/89/b ound-to-layout
The next step is to make sure all the PlayerBullet objects that you create are destroyed when they leave the layout. Add the Destroy outside layout behavior to the PlayerBullet object to make this happen. Click here to learn more about the Destroy Outside Layout Behavior https://www.scirra.com/manual/94/destroy-outside-layout
The last step to complete your basic space ship movement is to make sure the initial PlayerBullet object is not displayed on the screen when the game loads. Construct 2 requires that this object be included in the layout in order to create new PlayerBullet objects while playing the game. In order to meet this requirement you can simply move your bullet object off the visible window. The bullet will be destroyed when the game starts but Construct can then create additional PlayerBullet objects in the future. You can zoom in and out of your layout by holding ctrl and using the mouse wheel, or changing the zoom controls on the View tab of Construct 2.
Quiz Time If instead you wanted the bullet to fly directly down which angle would you use? 0 180-90 90
Quiz Time (Answer) If instead you wanted the bullet to fly directly down which angle would you use? 0 180-90 90
Now when you run the game you can see you're able to move your space ship and fire bullets. Make sure to save your game. You don t want to lose all your work.
Objective 2 - Build Enemy Space Ships Now that the space ship is working, you now need to build some enemies into your game. To solve this problem, you are going to have to create two new objects. One object will be for the Enemy, and one will be for the EnemyBullet. You will also learn about the Turret behavior to allow your enemies to shoot bullets at your space ship. To get started, go back to the Game layout screen, right-click anywhere on the blank layout and select Insert new object.
On Your Own Now it is your turn to build your own enemy Sprite object. Create a new Sprite object called Enemy. Resize the enemy ship image to 64 pixels by 64 pixels. Design a simple enemy space ship in the image editor. Move the enemy space ship to the position 75,75 (the top left corner).
On Your Own Example
In order to get multiple enemies, you can copy and paste the original enemy space ship. You can do this by clicking on the enemy space ship then clicking the Ctrl key and dragging copies of the enemy ship. You can also right click on the enemy space ship and select copy, then right click on the layout and select paste. Create 9 enemies in the back row so you can adequately test the game.
Add a new Behavior to the Enemy object. Select the Turret behavior under the Movements section on the Add behavior screen. Click here to learn more about the Turret Behavior https://www.scirra.com/manual/152/turret
In the Turret behavior settings change the Rate of fire to 10 to increase how fast the enemy shoots.
On Your Own You now need to create the enemy bullet: Create a new Sprite object called EnemyBullet. Make the image a solid color and a size of 10 by 10 pixels. Position the enemy bullet so it starts off the screen. Add the Bullet and Destroy outside layout Behavior to the object.
On Your Own Example
In order to get your enemies to fire bullets, you need to add an additional event to your game. On your event sheet, click the Add event link and double click the Enemy object.
Scroll down to the Turret section and double click the On shoot condition. Click the Add action link inside the On Turret shoot event, and add an action to Spawn an EnemyBullet object. This is very similar to how the PlayerBullet is created.
Just like you were able to copy and paste the enemy space ship, you can also copy and paste actions. Copy the Set bullet angle action from the On Space pressed event and paste it into your On Turret shoot event.
Next you need to modify this action to change the object from the PlayerBullet to the EnemyBullet. Double click the action you just created and click the Back button. Click the Back button again and double click EnemyBullet.
Double click the Set angle of motion action in the Bullet section and enter 90 for the Angle. Click the Done button to finish editing the action. In this case it would have been just as easy to create a new action. However, it is important to know that it is easy to copy, edit, and remove actions after they are created.
If you run your game now, you will notice that the enemy ships still do not shoot the enemy bullets. You still need to tell the enemy ships to target your space ship. To do this, click the Add event link, double click the System object and then double click the On start of layout event located in the Start & end section. This event will run one time when the game starts up.
The next step is to add an action for the enemy ship to target your space ship. Click the Add action link in the On start of layout event, double click the Enemy object and double click the Add object to target action. In the add object to target settings, select your Player object and click Done.
The Turret behavior has a range property that controls how close the enemy has to be to their target in order to start firing. This property is currently set to 300 pixels. If you remember correctly you set the size of the game layout to 1280 by 720. In your game a Turret range of 300 will not work. You want your enemy ships to always be able to fire at your space ship. One option would be to guess and set a very high number for the range, however that will not be the most efficient way to determine the correct value.
Using the Pythagorean Theorem you can determine the distance from the top left corner of the screen to the bottom right. This is the longest distance an enemy would ever need for their turret range. This is labeled letter C in the image below.
Now using the Pythagorean Theorem, you can solve for C allowing you to calculate what your Turret range should be set too.
You can now round the value up to 1469 and add that value in for the turret range in the turret behavior for the Enemy object.
If you run your game now, you will notice that the enemy space ships will fire, however they are not firing from the front of the ship. Construct expects your image to be facing an angle of 0 degrees (right) when targeting using the turret behavior. You can fix this by double clicking one of your enemy ships and clicking the rotate anticlockwise button. After rotating the image so it is facing right, you can close out of the image editor.
Now your enemy space ships are all facing right. To default them facing down inside your layout, click on the empty layout and drag to select all your enemy space ships. With all of the enemy ships selected, change the Angle value of the enemy ships to 90. You can now play your game with your basic enemy space ship functionality set up. Feel free to modify the turret rate of fire and the enemy bullet speed to control how the enemy ships fire. You can even change the turret rate of fire to be different for each enemy space ship if you want.
Objective 3 - Collisions and Multiple Enemies Your ship is moving and firing and the enemies are firing back! Now you need your bullets to actually do something when fired. In order to get this working, you will have to add collision detection to your game. From this point forward it is assumed you know the basics of adding events and objects to your game. If you are having trouble understanding how events and objects work in Construct 2, you may want to review the lesson instructions up until this point. Make sure to save your game. You don t want to lose all your work.
On your event sheet, add a new event for EnemyBullet selecting On collision with another object as the condition. Select the Player object and click Done. Add an action for Player selecting Destroy.
On Your Own Play your game to see the result. Now it's your turn: Add an action to destroy the enemy bullet when it hits the Player object. Create a new event for when the PlayerBullet hits an enemy. Destroy the enemy ship and your bullet on collision with the enemy ship.
On Your Own Example
With the basics of your bullet collisions working, you now can spend a little time fixing some minor details. You may have noticed that the bullets seem to shoot from the center of the space ship. To change this, double click on your space ship to open the image editor. Click the set origin tool and click on the front of the ship to set the origin point of the sprite. This controls where the created bullets will originate from.
The same process can be completed for the enemy ships. Double click on any enemy ship and set the origin point in the image editor to the front of the ship. Close the image editor and test your game.
You will now add two additional enemy ships. You could add a new sprite for each enemy, however that would mean you would need to add additional collision detection rules and that would cause you to duplicate events. Instead you can add different animation frames on the existing Enemy object. Double click one of your enemy ships to open the image editor. In the Animation Frames pane right click on your enemy ship and click Duplicate. Do this two times so you have three frames created. Animation Frames are typically used to animate a sprite, however they can be configured to display static images as you are going to do in the Star Defender game.
On Your Own You can now build out some new enemy space ships. Using the two new animation frames, create new enemy space ship images. Set the origin points of each enemy space ship to a different location. This way each enemy will fire the bullet from a slightly different location on the ship. Copy the row of enemy ships and make it three rows.
On Your Own Example
Select the entire middle row of enemy space ships. In the properties pane in the bottom properties section change the Initial frame to 1. Change the turret rate of fire for this row to 5. Select the entire bottom row of enemy space ships. In the properties pane in the bottom properties section change the Initial frame to 2. Change the turret rate of fire for this row to 7.
If you play your game you will notice that all the enemy ship images change and eventually stop on the third animation frame image. You will need to turn off this animation behavior for the Enemy object. In your event sheet under the On start of layout event, add and a new action. Add the action for the Enemy object and under the Animations section select the Stop action.
It is a good idea to keep track of how many enemies are on the screen so you can eventually do something when the enemy count gets to 0. You can use a global variable to store information for later use. To add a global variable in your game, go to your event sheet, right click on some blank space and click Add global variable. A variable is simply a way to store important information. Examples of variables would be the number of enemies left, the score, the number of lives the player has left, and much more. You will use variables for a lot of different reasons in Construct, but once you figure out how they work, you will easily be able to use them over and over again. Click here to learn more about Global Variables https://www.scirra.com/manual/83/variables
Call your new global variable Enemies, make it a type Number, with an initial value of 27 (or however many enemies your game has). Click the OK button. There are two different types of global variables in Construct 2. The first is for storing numbers (examples include high score and number of lives). The second type of global variable is for storing text information (an example would be player name). Numbers are used more often as you can perform mathematical operations on the variable (adding or removing numbers to the variable), but both have their uses when building Construct games.
Add a new action under the PlayerBullet On collision with Enemy event. Select System as the object and Subtract from as the action. Leave the Variable set on Enemies and leave the value at 1. Click Done. This will subtract 1 from the Enemies variable every time you destroy an enemy ship.
The next step is to configure the game to restart after you destroy all of the enemy space ships. In order to do this you will need to learn about Construct sub events. A sub event is an event that sits inside another event. In this example you want to only want to check the sub event after an enemy is destroyed. You want to check if there are 0 enemies left. If so, you will want to restart the game. You can think of this example out loud as "If my bullet collides with an enemy ship, then destroy the objects and remove one from the Enemies variable". You can then think out this example as "If after removing one from the Enemies variable, the count is 0, then restart the game".
To add your first sub event right click the space below the PlayerBullet on collision with Enemy event, then go to Add, and click Add sub-event.
Quiz Time Where do you click to add a sub-event?
Quiz Time (Answer) Where do you click to add a sub-event?
Adding a sub event is similar to adding any other Construct event. Select System for the object and select the Compare variable condition. In the Compare variable screen set the variable to Enemies, Comparison to Equal to, and Value to 0. Click the Done button. This sub event will check if the Enemies variable is equal to 0.
Add an action to your new sub event. Select System for the object and Restart Layout as the action. Notice how the sub event is indented inside the PlayerBullet on Collision with Enemy event. This lets you know that this sub-event will only run if the parent event runs first. The sub event runs only after all of the actions in the parent event runs. Make sure to save your game. You don t want to lose all your work.
Your global variable will not reset when the layout is restarted. This is because global variables can be used with multiple construct layouts. This means you will need to reset your Enemies variable in the On start of layout event. Add a new action in the On start of layout event. Select System for the object and Set value as the action. Set the Enemies variable back to the original value of 27.
On Your Own If you play your game now you will see that the game continually restarts when you destroy all of the enemies. The next step is to provide a way to restart the game if your space ship is destroyed. Create an event that is triggered when the Enter or Return key is pressed. Add an action to the event to restart the layout.
On Your Own Example
If you left the game as is, the bullets would seem to destroy the enemies before they even hit the enemy. Double click one of your Enemy objects to open the image editor. To fix this, click the Set collision polygon tool. This is the last tool on the Image Editor toolbar. Click here to learn more about Collision Polygons https://www.scirra. com/manual/48/image-and-animations-editor
This tool will pop up the collision points of the Enemy object. Collision points make up the boundaries of a sprite. By default, the collision points are set to the width and height of the canvas. To make your collision points closer to the enemy ship you can Left click and Drag every red point to where you want it, or Right click and select Guess polygon shape. Do this with the first and second Animation frames in the Enemy object.
If you end up with dots all over the place and it seems hopeless, fear not, you can also right click your mouse and choose Set to bounding box. This will reset all the collision points back to the edge of the canvas and get rid of all points except the four corners.
Sometimes the Guess polygon shape can be way off the shape of your sprite and you'll have to move the collision points by yourself. Do this now with the third Animation frame for your Enemy object. You should end up with 7 to 10 collision points on each of your polygons. You can use the zoom if needed. To add points right click your mouse on an existing point and select Add point.
On Your Own Close your image editor for your Enemy object. You will now need to configure the collision points for the other sprites in your game. Add collision polygon points to your space ship Verify the collision polygon points for your PlayerBullet and EnemyBullet objects are correct
Recap of Help Links 8 Direction Behavior - https://www.scirra. com/manual/87/8-direction Bullet Behavior - https://www.scirra. com/manual/90/bullet Bound to Layout Behavior - https://www.scirra. com/manual/89/bound-to-layout Destroy Outside Layout Behavior - https://www. scirra.com/manual/94/destroy-outside-layout
Recap of Help Links Continued Turret Behavior - https://www.scirra. com/manual/152/turret Global Variables - https://www.scirra. com/manual/83/variables Collision Polygons - https://www.scirra. com/manual/48/image-and-animations-editor
Play the game! You can hit Enter or Return or restart the game. http://games-cdn.stemfuse.com/gameitintermediate/star_defender/section1/index.html
Pro Tips 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/