2D Air Force Combat Game Using GDevelop Engine

Introduction

The following article demonstrates developing "Air Force Combat Game" in HTML 5 using “Gdevelop” IDE. The game development can be done by using several tools such as construct-2, Game maker, godot engine, etc. But what's amazing is, the development of the scene will use an open source game development environment.

Prerequisites

“Gdevelop” Software Environment version 4.0 (Free).

Windows 8.1, 10 (recommended).

Step 1

The application that is being developed using HTML5 environment works with both Linux and Windows platforms.

For creating a html5 application, select->project->new-> html5 platform-> empty project->create the new project.

 

 

 

 

Scene Conditions

 

Step 1

 

First, you insert a sprite object. Select-> sprite object from the default scene object bank list. Next, you will see the object properties in right-hand side dialog box. Insert new object in the Object editor and select “Edit object” from the image bank list.

 

 

 

 

Insert Player Object

 

The insertion of the player image can be done by adding the image from our own PC. For that right click-> on the scene editor and select->player object.

 

Finally, you want to add the animation to the player object. Click the “(+) animation” button in the properties dailog box.

 

You can now see the animation properties of the object.

 

 

 

List Of Object Editors

1. Etoile object
2. Camera
3. Rock Object
4. Player Bullet
5. Mini Rock object
6. Ok, Done.

 

 

 

 

 

 

 

Insert the Enemy Object

 

Open scene condition, Right click on->window stage, dialog box will appear and then, select-> insert new object.

 

Click on->sprite object->insert object,
 

Open object type window, Select->bad enemy Player. After Click->Ok

 

Project preview on the below template,
 

 

 

Inserting many objects

 

Now let’s take a look at adding more objects, for that double click->in scene condition and select->insert a new object in dialog box and now we can select and add more objects.
 

The scene condition template is shown below,

1. Bad Bullet Object
2. Health Panel
3. Health object
4. Power Panel
5. Power Object
6. ok,Done.

 

 

 

 

 

 

 

The explosion property is used to destroy the Bad Enemy object. To add this object, add a new sprite object, rename its explosion, and you can see plus button, add all the images to the animation before with Explosion.

 

Insert the Bad2 Enemy Object

 

With the help of scene condition window, we can insert a Bad Enemy Object that represents the moving of the player object with sequence movement of the camera.

For inserting an object, right click->in scene condition window and a dialog box will appear.

 

Now select->insert a new object-> and add the Bed Enemy object in the object type dialog box and click OK.
 

After inserting a new object, we can see the list of the objects that have been added on the right side of the window using Objects Editor.

 

 

 

 

Again, insert Life bonus Object in Scene Conditions. You will need a new “Life bonus” object. In the Scene  Condition objects, you can right click on the mouse“Life bonus” object. Choose add a new object.

 

 

 

Now, you will see below template all the object in need scene conditions

 

 

Event Conditions

As per my previous article, I explained that the scene window represents the insertion of the object and the event conditions represent the working principle of the object.

For that, switch -> event tab->add an event->new scene condition window->events here the event is represented as sub event.

By clicking the sub event a new window will appear for editing a condition and select->platform behavior and expand it and select the sub condition as->is moving and insert the objects with its behavior ->click->ok.

1. At the beginning of the scene-> Do = -5 to Z-order of Etoile->Hide the object Camera->Do =10 to global sound level.
2. At the beginning of the scene-> Do =Random(360) to the direction of Rock->Do =Random(50) to variable rotationSpeed of Rock.

            

Second Conditions

 

Must follow below conditions,

1. Create object playerBullet at position player.pointX(bullet1);player1.pointY(Bullet1).
2. Create object playerBullet at position player.pointX(Bullet2);player2.pointY(Bullet2).
3. Add to playerBullet a force of 500 p/s axis and 0 p/s on Y axis-> Do =1 to z-order of playerbullet.

 

 

Badbullet is in collision with player (pixel perfect)->Create object Explosion at position BadBullet.X();BadBullet.Y(),

1. Do -7 to variable Health
2. Do =0.5 to the height scale of explosion
3. Do =0.5 to the width scale of explosion
4. Ok,Done.

 

 

 

Output
 
Here comes the final stage of completion of the air force combat game and let’s take a look at the output of it.
 

After, press preview to run layout and the browser will display the following output.

 

 

 

 

 

 

 

 

Conclusion

 

Hence the Air Force Combat game output is by using html5. I hope this article will be useful and thank you for reading :)