Tanks Battle Field
Construct 2 HTML5 Game
I hope you find that guide helpful enough and if it is not, I will be glad to support you with whatever thing came across you with this product.
1. Construct 2 source file (.capx file) (made by Construct 2 version r233).
2. HTML5 game preview (index.html) (tested with IE, Chrome & Firefox browsers)
3. All graphics, textures & animation sprite-sheets used in the game (.png, .jpeg).
4. All sounds used in the game (.ogg).
P.S:
Sounds and graphics inside .capx file are either self created or royalty free from open sources.
All fonts used inside the game are standared fonts.
There are 5 levels provided inside the game, each level is a layout that consists of a number of local layers + the global layers that are common within all level-layouts. To change the map-structure for a level:
Hint: these steps requires basic knowledge about Construct 2 program.
1. open the ".capx" file.
2. from "projects" menu > select "layouts" > select any "level" (e.g "level 5") > double click to open
Note: if you found the entire layout is black just select the layer named "fog" uncheck its visibilty from "layers" menu.
3. Adding new sprites: (requires dealing with families & behviours)
-
If the sprite is an obstacle that prevents movement, you only need to add it to the "customObstacles" family.
-
If the sprite is a wall that collides with weapon shots, just add it to the "highObjects" family.
-
If the sprite has no effect, just add "Physics" & "BoundToLayout" behviours to it.
4. Make sure to place the sprites you add in the correct layers for Z-ordering.
5. If you want to enable fog of war (that darkens the map except around tanks), just select the layer "fog" and from layer properties tab change its initial visibility to "visible".
6. You can relocate the flags in the levels into any position without worrying about anything, once located it will always preserve that location as a base for each team.
7. feel free to add some eye candies or adjust the game appearance as you wish.
Tank skins are the shapes of the tanks in its different states, you can change tank skins as you like but its a hard work, just follow these instructions:
Hint: these steps requires dealing with sprite editor.
1. open the ".capx" file.
2. open the layout called "global layers", zoom out the layout sothat all objects are seen.
3. double click the "tank_body" sprite to open and add the tank skins into it:
Note: you should have 3 .png images for your tank body skin:
-
A .png image that is your skin in green tint, add a new frame inside "green" animation & load the png.
-
A .png image that is your skin in red tint, add a new frame inside "red" animation & load the png.
-
A .png image that is your skin in redish black tint, add a new frame inside "black" animation & load the png.
4. set the boundary box for each image in its frame.
5. set the image point for the tank's petrol tank that will spawn fire when its health is low.
4. do the same with the 3 .png file for your turret skin.
(note: set an image point at turret end from which weapon shots will spawn).
5. double click the "tank_body_shadow" sprite, and place a shadow .png for your tank skin at the same frame that corresponds your skin inside "tank_body" sprite.
6. do the same for the "tank_turret_shadow".
7. double click any "data_tanks" sprite, add a new frame inside the "Default" animation then loads to it another .png that shows your full skin preview image (body with turret).
8. copy/paste any "data_tanks" to create a new instance of it, open "instance variables" change its properties as you wish as following:
-
name = the name to appear in the stats mini menu.
-
health = tank health.
-
body_speed = movement speed of the tank.
-
turret_speed = how fast the turret revolve to aim.
-
range = the tank will fire from or sense enemies from.
-
weapon = the weapons name which is "bullet" or "missile" or "cannon" (3 types of weapons are included).
9. setting your tank to be ready for selecting:
-
open the "settings" layout
-
select layer "buttons"
-
copy/paste any "data_tanks" instance that is on the left and keep it inside the "drag & drop" section (x-position matters) for interaction.
-
from instance "properties" set its "Initial frame" to the frame that contains your tank skin.
10. run the game, drag and drop your new tank inside the team, test it.
There are 3 types of weapons included "bullets", "missile" and "cannon", to add new types (e.g. "bullets2") follow these instructions:
Hint: these steps requires dealing with sprite editor, families and dealing with event sheets.
P.S. Any weapon is created by creating 3~4 sprites:
-
a sprite that spawns when weapon is shot representing the animation of firing lets denote it "AA"
-
a sprite that spawns when the weapon is shot representing the shot it self lets denote it "BB"
-
a sprite that spawns when the weapon collides representing the animation of explosion lets denote it "CC"
-
a sprite that spawns during weapon life representing weapon trails lets denote it "TT"
1. add a new sprite name it "weapon_bullet2".
2. double click the sprite and load your BB shot graphics into it.
3. set the boundary box for the part that makes the shot explodes when collided.
4. adjust and add image points if necessary (adjust orign point so that it spawns correctly from the turret.
Image points are important incase of long graphics to determine the respawning point of BB and respawning point for the CC or trailing point for the TT if exists.
5. add a new CC sprite for explosion, name it "explosion_bullets2".
6. add a new AA sprite to play when "bullets2" is fired, name it "fire_bullets2".
7. add BB (named here "weapon_bullet2") to "weaponShots" family, to recognize collision with "tank_body" sprite and "high obstacles".
8. once added to "weaponShots" family, instance variables will be added automatic, open instance variables for "weapon_bullet2":
-
team = don't alter (used to store the "bullets2"-shooter-team to avoid friendly fire).
-
shooter_UID = don't alter (used to sets the stats for "bullets2"-shooter).
-
weapon = the name with which the weapon will be assigned to tanks (discussed in step 10) name it "bullets2".
-
reload = the ticks passed until next fire.
-
ammo = initial ammo.
9. add "explosion_bullets2" & "fire_bullets2" to "DestroyAfterFinish" family, to just remove them after the animation is finished.
10. open the event sheet named "Game Actions":
-
expand "attacking code" group > in "shot_weapon" function > duplicate the last weapon and change it to match your weapons name "bullets2".
-
open "Initialization" group > in "reset_ammo" function > open the action expression and add the ammo you wish to add upon reset.
Note: you can't call the "ammo" as a variable from the weapon sprite instance variables because the sprite won't be there all the time during the game (it is removed once the game start).
11. to test it, on the "Global layers" layout, select any "data_tank" instance, assign in "weapon" instance variable to "bullets2".
Event sheets are well organized into groups and breifly commented, each group contains its script that works for group purpose only, (e.g "flag game core" group contains only and every action that is required to set tank roles and flags conditions), so if you want to change something just got to its group change it inside and nothing more is needed to be done.