Game state class, overwrite for own states
new gamvas.State(name);
name | a unique identifier as name |
A hello world state
myState = gamvas.State.extend({ draw: function(t) { this.c.fillText("Hello World!", 10, 10); } });
gamvas. | Game state class, overwrite for own states |
Variables | |
disableCamera | By default a state provides a full environment for game development. |
name | The name of the state, must be unique within all states |
autoClear | If set to true, the screen will automatically cleared before drawing functions are called. |
clearColor | The color to clear the screen, if gamvas.State.autoClear is enabled. |
resource | a gamvas.Resource instance, to allow easy file loading |
canvas | The DOM element of the canvas the game is running on. |
c | a HTML5 2D context of the canvas the game is running on. |
dimension | a object holding the canvas dimension in {w, h} |
camera | a gamvas.Camera instance, to modify camera. |
Functions | |
init | The init function is called only once per state to initialize it. |
enter | The enter function is called when the state is entered. |
leave | The enter function is called when the state is left. |
clearScreen | Clears the screen. |
preDraw | This function is called before camera is applied. |
draw | Overwrite this function to draw your game objects. |
postDraw | This function is called after camera is applied. |
loading | Overwrite for a custom loading screen |
onKeyDown | A key on the keyboard was pressed |
onKeyUp | A key on the keyboard was released |
onMouseDown | A mouse button was pressed |
onMouseUp | A mouse button was released |
onMouseMove | The mouse was moved |
onTouchDown | A finger starts touching the display |
onTouchUp | A finger stopped touching the display |
onTouchMove | A finger is sliding over the surface |
addActor | Add a gamvas.Actor to the state. |
removeActor | Add a gamvas.Actor to the state. |
registerInputEvents | Send keyboard/mouse events to gamvas.Actor onKeyDown and similar functions |
addSound | Add a gamvas.Sound to the state. |
getActors | returns all the actors added with gamvas.State.addActor as array, sorted by their gamvas.Actor.layer |
this.disableCamera
By default a state provides a full environment for game development. This includes a default camera under this.camera.
If you do not want this behaviour, because you need custom camera code, setting disableCamera to true will disable the default camera.
false
this.clearColor
The color to clear the screen, if gamvas.State.autoClear is enabled. It is a string in css color notation.
’#000000’
this.resource
a gamvas.Resource instance, to allow easy file loading
var image = this.resource.getImage('myImage.png');
this.camera
a gamvas.Camera instance, to modify camera.
myState = gamvas.State.extend({ draw: function(t) { this.actor.draw(t); // rotate 90 degrees per second (in radians 90 degrees is 0.5*PI) this.camera.rotate(0.5*Math.PI*t); } });
clearScreen: function()
Clears the screen. This is usually called automatically unless you deactivate automatic screen clearing with gamvas.State.autoClear
draw: function( t )
Overwrite this function to draw your game objects. All objects drawn in the draw function are drawn under camera influence, means the are drawn moved, scaled and rotated on the screen, depending on how the settings of this.camera are.
t | the time elapsed since the last frame |
Draw a actor moving 20 pixels per second along the x axis
myState = gamvas.State.extend({ draw: function(t) { this.myActor.draw(t); this.myActor.move(20*t, 0); } });
postDraw: function( t )
This function is called after camera is applied. Overwrite it to draw things that are not under camera influence, like score or HUD elements.
t | the time elapsed since the last frame |
myState = gamvas.State.extend({ postDraw: function(t) { this.c.fillText("Score: "+this.score, 10, 470); } });
onKeyDown: function( keyCode, character, ev )
A key on the keyboard was pressed
keyCode | The keycode of the key (e.g. gamvas.key.RETURN) |
character | The actual character (e.g. ‘a’) |
ev | The JavaScript event object |
true or false, depending if it handled the event or not
gamvas.key.exitEvent gamvas.State.onKeyUp
myState = gamvas.State.extend({ onKeyDown: function(keyCode) { if (keyCode == gamvas.key.SPACE) { this.firePlayerGun(); } return gamvas.key.exitEvent(); } });
onMouseDown: function( button, x, y, ev )
A mouse button was pressed
button | The mouse button that was pressed (e.g. gamvas.mouse.LEFT) |
x/y | The position on the screen the mousepointer was while pressed |
ev | The JavaScript event object |
true or false, depending if it handled the event or not
onMouseUp: function( button, x, y, ev )
A mouse button was released
button | The mouse button that was released (e.g. gamvas.mouse.LEFT) |
x/y | The position on the screen the mousepointer was while released |
ev | The JavaScript event object |
true or false, depending if it handled the event or not
onMouseMove: function( x, y, ev )
The mouse was moved
x/y | The position where the mousecursor was |
ev | The JavaScript event object |
true or false, depending if it handled the event or not
myState = gamvas.State.extend({ onMouseMove: function(x, y) { this.mousePointerImage.setPosition(x, y); return gamvas.mouse.exitEvent(); } });
onTouchDown: function( id, x, y, ev )
A finger starts touching the display
The id is a integer representing the finger used. Starts with 0 next finger would be 1, if the first finger would be removed from the display and another finger will be added, the new finger would become id 0 again, as id 0 was not used anymore, when the new finger was added
id | A unique integer to identify certain fingers |
x/y | The screen position, where the finger was put down |
ev | The JavaScript event object |
addActor: function( act )
Add a gamvas.Actor to the state. Actors added to a state are drawn automatically.
act | a gamvas.Actor object |
myState = gamvas.State.extend({ init: function() { this.myActor = new gamvas.Actor('myactor', 10, 20); this.addActor(this.myActor); }, draw: function(t) { // i dont need to draw this.myActor, it draws automatically } });
removeActor: function( act )
Add a gamvas.Actor to the state. Actors added to a state are drawn automatically.
act | a gamvas.Actor object or a string with the actor name |
registerInputEvents: function( act )
Send keyboard/mouse events to gamvas.Actor onKeyDown and similar functions
act | a gamvas.Actor object |
// default a actor state for the logic myActorState = gamvas.ActorState.extend({ onKeyDown: function(keyCode) { if (keyCode = gamvas.key.SPACE) { this.fireGun() } }, fireGun: function() { console.log(this.actor.name + ' shoots'); } }); // define a actor myActor = gamvas.Actor.extend({ create: function(name, x, y) { this._super(name, x, y); this.addState(new myActorState('standard')); this.setState('standard'); }, }); // now in our game state, create the actor and // register it for receiving input events myState = gamvas.State.extend({ init: function() { this.player = new myActor('player'); this.registerInputEvents(this.player); } });
addSound: function( snd )
Add a gamvas.Sound to the state.
snd | either a url to the sound file, or a gamvas.Sound object |
A gamvas.Sound object
myState = gamvas.State.extend({ init: function() { this.shotSound = this.addSound("shotsound.wav"); }, myState.onKeyDown = function(keyCode, character) { if (keyCode == gamvas.key.SPACE) { this.shotSound.play(); } } });
getActors: function()
returns all the actors added with gamvas.State.addActor as array, sorted by their gamvas.Actor.layer
sorting is expensive, try to avoid this function by processing <gamvas.State.actors> directly or cache the result
By default a state provides a full environment for game development.
this.disableCamera
The name of the state, must be unique within all states
this.name
If set to true, the screen will automatically cleared before drawing functions are called.
this.autoClear
The color to clear the screen, if gamvas.State.autoClear is enabled.
this.clearColor
a gamvas.Resource instance, to allow easy file loading
this.resource
The DOM element of the canvas the game is running on.
this.canvas
a HTML5 2D context of the canvas the game is running on.
this.c
a object holding the canvas dimension in {w, h}
this.dimension
a gamvas.Camera instance, to modify camera.
this.camera
The init function is called only once per state to initialize it.
init: function()
The enter function is called when the state is entered.
enter: function()
The enter function is called when the state is left.
leave: function()
Clears the screen.
clearScreen: function()
This function is called before camera is applied.
preDraw: function( t )
Overwrite this function to draw your game objects.
draw: function( t )
This function is called after camera is applied.
postDraw: function( t )
Overwrite for a custom loading screen
loading: function( t )
A key on the keyboard was pressed
onKeyDown: function( keyCode, character, ev )
A key on the keyboard was released
onKeyUp: function( keyCode, character, ev )
A mouse button was pressed
onMouseDown: function( button, x, y, ev )
A mouse button was released
onMouseUp: function( button, x, y, ev )
The mouse was moved
onMouseMove: function( x, y, ev )
A finger starts touching the display
onTouchDown: function( id, x, y, ev )
A finger stopped touching the display
onTouchUp: function( id, x, y, ev )
A finger is sliding over the surface
onTouchMove: function( id, x, y, ev )
Add a gamvas.Actor to the state.
addActor: function( act )
Add a gamvas.Actor to the state.
removeActor: function( act )
Send keyboard/mouse events to gamvas.Actor onKeyDown and similar functions
registerInputEvents: function( act )
Add a gamvas.Sound to the state.
addSound: function( snd )
returns all the actors added with gamvas.State.addActor as array, sorted by their gamvas.Actor.layer
getActors: function()
Integer value used for z-sorting on automatic draw through gamvas.State.addActor
this.layer
Get the status of all loading resources
gamvas.Resource.prototype.status = function()
return from a unhandled keypress on onKey* functions
exitEvent: function()
return from a unhandled mouseevent on onMouse* functions
exitEvent: function()