html5 game ui,HTML5 Game (Canvas) - UI Techniques?

Try this :

With Visual js you can setup page like this :

Visual-JS multiplatform game engine windows GUI - source editor

OnPage editor - for design

You will get :

*99% canvas 2d

Add new object

Create webcam component (nui or normal)

Create coallision (basic - rect)

Create textBox (virtual keyboard for mobile)

Create particle

Atach player (basic movement)

MultipEER (Networking)*

localStarage

App created from visual js always work on all browsers(mobile / desktop). Networking - webRTC - multipeer

Try online at :

https://jsfiddle.net/user/zlatnaspirala/fiddles/

Api look like this :

Application Programming Interface Documentation for Visual JS 0.5 >

GAME_OBJECT is main object in this framework.

1) Adding new game object (name will be 'GO' ):

HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").NEW_OBJECT("GO" ,

x , y , w , h , speed )

HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").NEW_OBJECT( "GO" ,

45 , 45 , 10 , 10 , 10)

// 2) Adding image or animation :

// DRAW TYPE can be // 'DRAW_FRAME' no animation // 'LOOP' playing

animation // this number '1111123123' is ID can be any number

//ANIMATION ( surf ,TYPE_, FrameIndex ,source , PARENT , ID , blink_

, min_ , max_ , step , speed_ , opacity_ )

HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER").GAME_OBJECTS.ACCESS("GO").CREATE_ANIMATION(

SURF , "DRAW_FRAME" , 6 , RESOURCE.Tiles , 1111123123 , "no" ,

1,11,1,1,1)

3)Disable draging GO.DRAG = false;

// RESOURCE.NAMEOFFOLDERANIMATION

add folder "Tiles" with images in folder /res/ and run node res.js

// refresh page and you will get

RESOURCE.Tiles ready for use !

// MAKE MODULE ACCESS EASY var

STARTER = HELLO_WORLD.ENGINE.MODULES.ACCESS_MODULE("STARTER");

STARTER.GAME_OBJECTS.ACCESS("GO").CREATE_ANIMATION( SURF ,

"DRAW_FRAME" , 6 , RESOURCE.Tiles , 1111123123 , "no" , 1,11,1,1,1)

//DRAG initial value is true GO.DRAG = false;

//setup quard height = width GO.POSITION.DIMENSION.H = GO.POSITION.DIMENSION.W;

4) EVENTS FOR MOUSE AND MOBILE TOUCH HANDLED

//CLICK OR TOUCH START GO.TAP = function(){

//this make point directing to the game object instance

// this.NAME or this.ANIMATION.CURRENT_FRAME };

GO.TOUCH_DOWN = function(){

STARTER.DESTROY_OBJECT("GO") console.log("THIS MUST BE TERMINATED

ON MOUSE DOWN or TOUCH_DOWN : " + this.NAME);

//this.DESTROY_ME_AFTER_X_SECUND( 100 ); //console.log("THIS MUST BE

TERMINATED ON CLICK : " + this.NAME); };

GO.TOUCH_MOVE = function(){

console.log("HOVER ON OBJECT OR MOBILE TOUCH_MOVE : " + this.NAME); };

GO.TOUCH_UP = function(){

console.log("MOUSE UP ON OBJECT OR MOBILE TOUCH_UP : " + this.NAME); };*

Download git