May 28, 2017
1089 Views
3 0

Make a 2D Science Video Game with Construct3 (Part 1 of 3: Background & Objects)

Written by

Welcome to a beginner’s tutorial on creating a science game in Scirra’s Construct 3! Currently, Construct 3 is in beta mode so you may encounter some bugs or unexpected “freezing” of the program. Therefore, please remember to save early and often. It’s a small sacrifice for the headache of losing lots of previous work.

This tutorial is on how to create a simple top-down perspective game for an anatomy lesson in a biology class. In the game, the player uses the arrow keys to control a white blood cell trying to destroy bacteria that are invading some muscle tissue. You can play it here to get an idea of what you’ll be making. The tutorial is divided into three parts (part 2, part 3) so check out those when you need to. It borrows heavily from Scirra’s Beginner’s Guide to Construct 2 so please check that out if you have a chance. In our game, we will illustrate how a white blood cell is used to combat a bacterial infection. The obvious use for this is in a biology class but the game template of a top-down style can be used on any topic. Without further ado let’s get to it!

Estimated Time: 2 hours total
Difficulty: Medium

Getting Started

1.  Go to www.construct.net and register to create a new account.

 

2. Once you’re logged in, click on the red “Get Started” button on the Construct webpage. On the next page, find the red “Launch Construct 3” button and click on that to get to the “Start page.”

 

On this page you can find pre-made game demos, open previous projects you may have, and begin new projects. Click on the gray “New Project” button to bring up the new project details menu.

 

3. Here you can choose a Name for your project, which size, resolution, and orientation you want your project to be. I want a larger play area for my project so I’m going to choose “1080p landscape”. Depending on the platform you are designing for (i.e. smartphones, web-only, XBox, etc.), different settings will be appropriate. Here is a helpful post on that. Continuing on, name your project, I called mine White Blood Cell Attack! and leave all the settings at the defaults for “1080p landscape”. For this project, leave the “Optimize for pixel art” box unchecked.

 

Now you will see the main layout page. On the left side is the Properties bar where details for objects in the game are displayed. The center window has a view of what you are currently working on, whether that is the Layout, Event sheet, or others. The upper right has the Project bar, which shows the different assets and folders for your project. The lower right bar is the Layers bar, where you can manipulate the different layers of your game you working on. More will come on that later.

 

Placing a Background
4. There many different types of backgrounds you can make in Construct (Sprite, Tiled Background, Tilemap). These all have their advantages and disadvantages depending on your use. In the case of this White Blood Cell Attack! game, a tiled background would be the most efficient but I couldn’t find a good image to use as a tile. So instead we are going to make a sprite be our background image. Double left-click on the middle blank window to bring up the “Create new object type” menu. (You can also do this by right clicking and selecting “Insert new object”.

 

5. Scroll down in the menu until you find the Sprite option. Double-click on it and you should now see the blank layout and your cursor is a “+” sign. Left-click anywhere in the blank layout window and the Animations Editor window should open for your Sprite.

 

6. Save the image I’ve linked to below or find your own image that you’d like to use for your background. [https://s-media-cache-ak0.pinimg.com/originals/28/b0/ef/28b0efce692c834389a38fe903de3c16.jpg] Now in the Animations Editor window find and click the icon for “Load an image from a file” (or just press “Ctrl + O”). Find where you saved the image and open it. Your Animations Editor should now have the image file showing.

 

 

 

7. Now go to the “X” in the upper corner of the Animations Editor and click on it. You should see your image in the middle of the layout. To make the image cover the entire layout you can either manually click and drag the corners of the image to the layout corners  or you can use the Properties bar. Since we chose the 1080p landscape size that means our layout is 3840px x 2160px. (You can see this is if you move the mouse cursor to the bottom right corner of your layout and look at the mouse coordinates in the bottom of the window.) Making sure you’ve still selected the background sprite, go to the Properties bar and change the size to 3840 x 2160. To center your image on the layout, change the position to be in the very center of your layout (1920 , 1080). Finally, in the bottom right Layers bar, rename “Layer 0” to “Background” and click on the open lock icon to close the lock. This will keep us from accidentally moving or modifying the background. Congratulations! You have just created and modified your first object!

 

Input Controls for the Game
8. Now, we need to  create the objects that hold how we will interact with the game. On the middle layout window, double click to insert another new object. Scroll down to the group “Input” and look for “Mouse”. Insert that and then repeat the procedure to insert a new “Keyboard” object. You don’t need to change the names.

 

9. Creating your Player – Our player will be a neutrophil, one of the most common types of white blood cells. We will be moving this around to attack bacteria in our game but we will do this on a separate layer than the background. So next, right-click in the Layers window and select Add layer at top. A new Layer 0 should be created. Rename this to “Main”.

 

10. Now, save the neutrophil image below to your computer. This will be the sprite for our player. Back on the layout window, double-click to create a new object. Scroll down to Sprite and double-click on it to insert. Now back on the main layout, with your “+” cursor, click near the middle of your layout to place your new sprite. The Animations Editor should open up. Go to the “Load an image from file” icon again and find your neutrophil file. Close the Animations Editor window by clicking on the upper right “X”. You should now see your neutrophil image on top of the background.

 

 

11. Our player image is a little big so lets change its size in the Properties bar to around 200 x 200. Also, the names of our objects will need to be changed so they will be easier to identify when it comes to the Event sheet. In the Project bar, click on the sprites and change their respective names to “Background” and “Player”. Your page should look like what I have below.

 

Behaviors for Objects

12. Behaviors are pre-packaged functionality in Construct 3. For example, you can add a Platform behavior to an object, and the Solid behavior to the floor, and you instantly can jump around like a platformer. You can do the same in events, but it takes longer, and there’s no point anyway if the behavior is already good enough! So let’s have a look at which behaviors we can use. Amongst others, Construct 3 has these behaviors;

  • 8 Direction movement. This lets you move an object around with the arrow keys. It will do nicely for the player’s movement.
  • Bullet movement. This simply moves an object forwards at its current angle. It’ll work great for the player’s bullets. Despite the name, it’ll also work nicely to move the monsters around – since all the movement does is move objects forwards at some speed.
  • Scroll to. This makes the screen follow an object as it moves around (also known as scrolling). This will be useful on the player.
  • Bound to layout. This will stop an object leaving the layout area. This will also be useful on the player, so they can’t wander off outside the game area!
  • Destroy outside layout. Instead of stopping an object leaving the layout area, this destroys it if it does. It’s useful for our bullets. Without it, bullets would fly off the screen forever, always taking a little bit of memory and processing power. Instead, we should destroy the bullets once they’ve left the layout.
  • Fade. This gradually makes an object fade out, which we will use on the explosions.
Let’s add these behaviors to the objects that need them.
Let’s add the 8 direction movement behavior to the player (i.e. our neutrophil). Click the player to select it. In the properties bar, notice the Behaviors category. Click Behaviors there. The Behaviors dialog for the player will open. Click Add new behavior. Then scroll down “8 Direction” and click Add

 

Do the same again and this time add the Scroll To behavior, to make the screen follow the player, and also the Bound to layout behavior, to keep them inside the layout. The behaviors dialog should now look like this:

 

 Congratulations! You’ve finished part 1 of the tutorial and now have a controllable player on a custom background. Try out your game and prepare for adding enemies and events in the next part!  Click here to go on to Part 2 of the Tutorial.

 

Article Tags:
Article Categories:
Game Design · Game Development · Tutorials


Leave a Comment

Your email address will not be published. Required fields are marked *