You want to make game? you have totally no experience in coding? But you still want to make game? Great! Construct 2 is just right for you.
In this tutorial, I will introduce to you a great HTML5 2D Game Engine – Construct 2. And, we will create a space shooting game with a template built inside the software.
Let’s start our journey! 😀
Tutorial Information
- Difficulty: Beginner
- Platform used: Construct 2
- Estimated completion time: 30 minutes
Construct 2 Installation
For reference purpose, I would recommend to download Construct 2 version r114 here. (the latest version when I was writing this tutorial)
However, if you want to download the latest one, you can download it here.
When you are downloading and installing Construct 2, I am also ready to give you a brief introduction about Construct 2.
What is Construct 2
Construct 2 is a HTML5 based game editor developed by Scirra Ltd.
Yay:
- Drag and Drop visual editor.
- Compatible with most of the web-browsers.
- Multi-intergration: Web, mobile, appMobi, ConcoonJS, Facebook, Window 8
- Many game template: Platformer, Top-down shooter, Vertical space shooting, etc
- Assets Store (we can buy graphic, music assets and many other through the the store here)
Nay:
- Only for 2D game.
- May create some restriction feeling for pure game programer in the beginning.
Now let’s make our game.
Step 1
Create a new folder and name it Construct 2 Intro.
Download my graphic assets:
I have written tutorial how to make these graphic here. Feel free to have a look.
Unzip it to folder Construct 2 Intro.
Open Construct 2. Then our interface should be like this:
There are 4 main panels that we should look at:
- Properties: where we can add, modify, delete the attribute of selected object.
- Layers: All of our objects are organized (stored) by these layers. With higher position of layer, the objects of that layer will cover the objects in lower layer and vice-versus.
- Objects: All the objects we import or add from Construct 2 Library are listed here.
- Scene: Where we work on the layer of the game.
Step 2
Create new project from template.
Go to File/ New.
Select Template: Verticle space shooter/Open
Great! Let add downloaded assets to scene.
Step 3
Load downloaded assets to template objects.
Double-click on the red triangle in the bottom of the scene.
There will be some pop-up windows for object modification.
Click Load an image from a file button icon.
Find and open player_frame0.png file.
Click Set orgin and image points icon on the side toolbar.
Click on the place of the space ship, where it shoot bullet from.
That’s easy right? Let add animation for our spaceship.
Step 4
Animation time!!
In the Animation Frames window, we Right-click in the space next to the frame 0, then click Add Frame.
The new frame we just created will be blank .
In the Edit Image window, find and open player_frame1.png file.
Again, click Set orgin and image points icon on the side toolbar, then click on the place of the space ship, where it shoot bullet from. (Same as step 3)
In the Properties Panel on the left, modify the animation values as below:
That’s all for animation part, we close Edit Image window.
Let’s test our game now!!
Step 5
Test game!!!
In the top toolbar, click Run Layout button.
Now it will run our web-browser and have the game run.
If everything is correct, the game should run as below:
Now, we can test our game. Explore it !!!
Notes:
- As default, our ship is invincible. That’s our good news.
- As default, (but bad news) each enemy has 10 health. Take your time to kill it ^^
Step 6
Load Enemy graphic asset.
Double-click the top triangle.
In the Edit Image window, find and open enemy.png file.
Close Edit Image window.
In the top toolbar, click Run Layout button.
Our game is finished !!!!!
Ending
Do you think Construct 2 is fantastically easy to create a game? I think it’s simply amazing!
We are trying to come up a lot more tutorial about Construct 2. What game do you want to do next? Please leave it in the comment below, we will get back to you ASAP.
Thanks!
