CastleDoodle Game In HTML 5 Platform using GDevelop

Introduction

 
This article demonstrates how to build the CastleDoodle game in the HTML5 Platform “GDevelop” Software. Games exported with GDevelop are based on a native and HTML5 platform, and it's a cross-platform game creator.
 
Prerequisites
 
“Gdevelop” Software Environment version 4.0 (Free).
 
Exercise 1
 
Click on -> File, open a New Folder, then you will see:
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 
Exercise 2
 
Click Project -> New, Select -> HTML 5 Platform.
 
Open -> Empty Project and then create the new project. We can see this in the following template
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 
Step 1
 
Now, for opening a new scene, we need to open and set the following conditions:
 
Default set conditions:
  1. Scene
  2. Events
Right-hand side, Object editor.
 
Click on -> object bar and then Open -> Add an Object.
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 
Events -> how to object performs construct event conditions, given below
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop 

Insert Player Object

 
Open scene condition, Right-click on -> window stage,
 
Dialog box will appear and then, select -> insert new object.
 
Click on -> Sprite -> insert object,
 
Open object type window, Select->(hero) Player Object. After Click->Ok
 
Below are all the steps to this game.
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 

Animation Object Editor

 
Now object editor is added to the animation, but still, no animation images appear. must should add a player object image,
 
Drag an image from the image bank to the area below to add it to the animation. You can add and modify resources using the Animation Editor.
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 

Insert Bat Enemy Object

 
Again, Open scene condition, Right-click on -> window stage
 
Dialog box will appear and then, select -> insert new object
 
Click on-> Tiledbackground object -> insert object
 
Open object type window, Selec t-> (Bat) Enemy Object. After Click -> Ok
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 

Insert Text Object

 
In the current situation, let’s take a look and explain about the inserted text object property. It is being changed when we inserted in the scene condition. Right-click on the text object and a property window will appear. We can change the conditions as per our need predefined by default, such as text Condition( To Be Continued) and radius. Click -> Ok.
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 

Insert ADMob Banner Object

 
The insertion of the ADMob Banner Object can be done by adding the object from our own PC with the desired image, for that right click -> on the scene editor and select -> insert a new object to make it easy to refer your each object. You can change the object name using the object editor. Right-click on the object and choose to rename.
 

List Of Object Editors

 
Project preview on the below template, 
  1. Solid Platform object
  2. Camera object
  3. Background Object
  4. Bat enemy object
  5. Bat Creator
  6. Player health heart object
  7. Level panel
Then, add to group extensions.
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 

Event Conditions

 
For that, switch -> event tab -> add an event -> new scene condition window -> events here the event is represented as a sub-event.
 
Must follow the below conditions
  1. Link to Game Engine,
  2. Player is in collision with LevelEnd -> Do =1 to variable LoadTheNextLevel1
  3. Variable LoadTheNextLevel -> Do=0 to variable LoadTheNextLevel2
  4. Create objects from the external layout"Level" + ToString(variable(Current Level)).
  5. Ok, done.
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 

Enemy Events

 
Create object Bat at position BatCreator.X();BatCreator.y().
  1. Do =Bat.X() to the X position of the path of Bat Object
  2. Do =Bat.Y() to the Y position of the path of Bat object
  3. Do =2 to z-order of Enemy
  4. Ok, done.

Move the Camera Event Conditions

  1. Do =player.X() to the "x" position of camera
  2. Do =player.Y()-100 to the "y" position of camera.
  3. Hide the object level end. Ok, done. 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 
The output can be displayed.
 
Finally, run your project. Click on -> Preview create a CastleDoodle Game.
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 
CastleDoodle Game Make In HTML 5 Platform Using Gdevelop
 

Conclusion

 
I hope you understood this article. We have created a CastleDoodle Game using GDevelop IDE. Thanks for reading, and have a nice day. :)