DevStudent

Construct 2 html5 gaming tool

Steps to create game:

construct 2 used to create w8 game:

it is one of the engine to create.
gamemaker is alternative.

scirra.com to download construct 2

new project - new empty project

rename project name-bulbbattle
rename layout name-main
rename eventsheets- mainevents

you can have any no.of layouts and event sheets

one event should map one layout.

event sheet is used to write js code.

white place is layout. dashed line is the window. ctrl + for zoomin.select the project(bulbbattle and change the properties)

window size-1366,768
 and
same layout for main.

use corel draw x6 for designing assets.

open corel draw x6 - create a new black document with default size.

design object and export it in .png format(take care about the size and large size helps not to get blur).

bring the assets to game by simply drag and drop them to construct 2 window layout.

or right click - insert new object - sprite - enter name click on insert to open a windows - load a png image which is already created - click on last tool to set points for collision polygon.

click on second last option to set origin point - specify point and close it.

now after adding to objects on the window.

click on the object to select it. properties - behaviour - 8 direction (to move the character which is controlled by user using arrow keys on the keyboard).
to increase the speed - select object - prop - max speed, acceleration - increase

now click f5 to see the output on the browser and use arrow keys to control but character goes outside the window by default.
object - prop - behaviour - add - boundtolayout

events are programming logic of your game.
go to main events - add event - click on system - click on every x seconds(last)-interval=0.5; - create a condition with a  click on add action - select system- create an object -object to create  - layer 0,100,100

select second object - add behaviour - bullet motion to move it in linear.

now for every half second second object is created and moved with bullet behaviour.

now modify x,y by double click on create object and x=-100,y=-100 to move  object away from screen

right click on the window- add global variable - Name:spawnlocation,type:text - ok

click on add action below system event -system - next - set value(for global variable) - choose("T","R","B","L")

create sub event :

right click on the space before system(event) - add - add sub event - system -
compare variable - spanvariable - equalto - "T"

click on add action beside second system event - select second object - click on next - set postion
x= random(0,LayoutWidth)
y=0
click on add action below  set postion event - select second object - set angle of motion - random(45,135) - this is general downward direction.

now select the whole second event (system with spawnvariable="T",setposition,setbulletangle)

copy and paste it three more times and change spawnvariable =R,B,L
check the tree structure
-global variable with no number at top.
-system main event - 1
-sub events below system -2,3,4


forspawnlocation="R" -modifysetposition to
x: LayoutWidth
y: random(0,LayoutHeight)
angle of motion: random(135,215)

forspawnlocation="B" -modifysetposition to
x: random(0,LayoutWidth)
y:LayoutHeight
angle of motion: random(225,315)

forspawnlocation="L" -modifysetposition to
x:0
y:random(0,LayoutHeight)
angle of motion: random(45,-45)


right click on the window to create a global variable - name:initialsize, number, 4, constant

create another global variable -
name: scalemultiplier
intialvalue: 0.04, number, constant

now go to main windows - select first object-
properties - add instance variable -
name:size,number,0

select second object - prop - add instance variable -
name:size,number,0

Create a new main event with a click on new event link
-system - on start of layout - drag and drop this event to starting below global variable - no. as 1 above every 0.5 sec event

click on add action for on start of layout event - select first object- set value - size: initialsize

now to set the size of the second objects:

click on the link - add action - below - set spawnvariable to choose("T","R","B","L") ie., below every o.5 sec event

select object2 - next - set value - next - size,random(1,10) -done

create a new event(3) - system - every tick
add action to it - first object - set scale - scale_multiplier * self.size

add one more action for the same 3rd event - second object - set scale - scale_multiplier * secondobjectname.size


to implement collision - create a new event-
first object - on collision with another object - click to choose -
second object - done
create a sub event - system - compare two values - firstobject.size >= secondobject.size - add action - secondobject - destroy

to add else event:

right click on the space before system(size greater than other)
create add else event which comes under collision event - add action - first object - set value - size: initialsize
add action below destroy - object one - add to - size - 3

HTML5 Construct 2 game example with step by step explanation