gamvas.State

Description

Game state class, overwrite for own states

Constructor

new gamvas.State(name);

Parameters

namea unique identifier as name

Example

A hello world state

myState = gamvas.State.extend({
    draw: function(t) {
        this.c.fillText("Hello World!", 10, 10);
    }
});
Summary
gamvas.StateGame state class, overwrite for own states
Variables
disableCameraBy default a state provides a full environment for game development.
nameThe name of the state, must be unique within all states
autoClearIf set to true, the screen will automatically cleared before drawing functions are called.
clearColorThe color to clear the screen, if gamvas.State.autoClear is enabled.
resourcea gamvas.Resource instance, to allow easy file loading
canvasThe DOM element of the canvas the game is running on.
ca HTML5 2D context of the canvas the game is running on.
dimensiona object holding the canvas dimension in {w, h}
cameraa gamvas.Camera instance, to modify camera.
Functions
initThe init function is called only once per state to initialize it.
enterThe enter function is called when the state is entered.
leaveThe enter function is called when the state is left.
clearScreenClears the screen.
preDrawThis function is called before camera is applied.
drawOverwrite this function to draw your game objects.
postDrawThis function is called after camera is applied.
loadingOverwrite for a custom loading screen
onKeyDownA key on the keyboard was pressed
onKeyUpA key on the keyboard was released
onMouseDownA mouse button was pressed
onMouseUpA mouse button was released
onMouseMoveThe mouse was moved
onTouchDownA finger starts touching the display
onTouchUpA finger stopped touching the display
onTouchMoveA finger is sliding over the surface
addActorAdd a gamvas.Actor to the state.
removeActorAdd a gamvas.Actor to the state.
registerInputEventsSend keyboard/mouse events to gamvas.Actor onKeyDown and similar functions
addSoundAdd a gamvas.Sound to the state.
getActorsreturns all the actors added with gamvas.State.addActor as array, sorted by their gamvas.Actor.layer

Variables

disableCamera

this.disableCamera

Description

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.

Default

false

name

this.name

Description

The name of the state, must be unique within all states

autoClear

this.autoClear

Description

If set to true, the screen will automatically cleared before drawing functions are called.

Default

true

See

gamvas.State.clearColor

clearColor

this.clearColor

Description

The color to clear the screen, if gamvas.State.autoClear is enabled.  It is a string in css color notation.

Default

’#000000’

resource

this.resource

a gamvas.Resource instance, to allow easy file loading

Example

var image = this.resource.getImage('myImage.png');

canvas

this.canvas

The DOM element of the canvas the game is running on.

c

this.c

a HTML5 2D context of the canvas the game is running on.  Use this to have low level access to the canvas 2D context.

Example

myState = gamvas.State.extend({
    draw: function(t) {
        this.c.fillText("Score: "+this.score, 10, 10);
    }
});

dimension

this.dimension

a object holding the canvas dimension in {w, h}

Example

console.log("Canvas width/height: "+this.dimension.w+"/"+this.dimension.h);

camera

this.camera

a gamvas.Camera instance, to modify camera.

Example

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);
    }
});

Functions

init

init: function()

Description

The init function is called only once per state to initialize it.

Overwrite this function to do things like loading images and sounds that are necessary for this state

enter

enter: function()

Description

The enter function is called when the state is entered.

Overwrite this function with code that should run when the state is entered, which can be at the beginning of the game or when the system switches between two states.

See

gamvas.State.leave

leave

leave: function()

Description

The enter function is called when the state is left.

Overwrite this function with code that should run when the state is left and a other state will be called after this.

See

gamvas.State.enter

clearScreen

clearScreen: function()

Description

Clears the screen.  This is usually called automatically unless you deactivate automatic screen clearing with gamvas.State.autoClear

preDraw

preDraw: function(t)

Description

This function is called before camera is applied.  Overwrite it to draw things after screen clear and before zoom/rotation/move of camera is applied.

Parameters

tthe time elapsed since the last frame

draw

draw: function(t)

Description

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.

Parameters

tthe time elapsed since the last frame

Example

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

postDraw: function(t)

Description

This function is called after camera is applied.  Overwrite it to draw things that are not under camera influence, like score or HUD elements.

Parameters

tthe time elapsed since the last frame

Example

myState = gamvas.State.extend({
    postDraw: function(t) {
        this.c.fillText("Score: "+this.score, 10, 470);
    }
});

loading

loading: function(t)

Description

Overwrite for a custom loading screen

Parameters

tthe time elapsed since the last frame

See

gamvas.Resource.status

Example

myState = gamvas.State.extend({
   loading: function(t) {
      this.c.fillText("Loading: "+(100*this.resource.status())+"%", 10, 10);
   }
});

onKeyDown

onKeyDown: function(keyCode,
character,
ev)

Description

A key on the keyboard was pressed

Parameters

keyCodeThe keycode of the key (e.g. gamvas.key.RETURN)
characterThe actual character (e.g.  ‘a’)
evThe JavaScript event object

Returns

true or false, depending if it handled the event or not

See

gamvas.key.exitEvent gamvas.State.onKeyUp

Example

myState = gamvas.State.extend({
    onKeyDown: function(keyCode) {
        if (keyCode == gamvas.key.SPACE) {
            this.firePlayerGun();
        }
        return gamvas.key.exitEvent();
    }
});

onKeyUp

onKeyUp: function(keyCode,
character,
ev)

Description

A key on the keyboard was released

Parameters

keyCodeThe keycode of the key (e.g. gamvas.key.RETURN)
characterThe actual character (e.g.  ‘a’)
evThe JavaScript event object

Returns

true or false, depending if it handled the event or not

See

gamvas.key.exitEvent gamvas.State.onKeyDown

onMouseDown

onMouseDown: function(button,
x,
y,
ev)

Description

A mouse button was pressed

Parameters

buttonThe mouse button that was pressed (e.g. gamvas.mouse.LEFT)
x/yThe position on the screen the mousepointer was while pressed
evThe JavaScript event object

Returns

true or false, depending if it handled the event or not

See

gamvas.mouse.exitEvent gamvas.mouse

onMouseUp

onMouseUp: function(button,
x,
y,
ev)

Description

A mouse button was released

Parameters

buttonThe mouse button that was released (e.g. gamvas.mouse.LEFT)
x/yThe position on the screen the mousepointer was while released
evThe JavaScript event object

Returns

true or false, depending if it handled the event or not

See

gamvas.mouse.exitEvent gamvas.mouse

onMouseMove

onMouseMove: function(x,
y,
ev)

Description

The mouse was moved

Parameters

x/yThe position where the mousecursor was
evThe JavaScript event object

Returns

true or false, depending if it handled the event or not

See

gamvas.mouse.exitEvent

Example

myState = gamvas.State.extend({
    onMouseMove: function(x, y) {
        this.mousePointerImage.setPosition(x, y);
        return gamvas.mouse.exitEvent();
    }
});

onTouchDown

onTouchDown: function(id,
x,
y,
ev)

A finger starts touching the display

Description

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

Parameters

idA unique integer to identify certain fingers
x/yThe screen position, where the finger was put down
evThe JavaScript event object

onTouchUp

onTouchUp: function(id,
x,
y,
ev)

A finger stopped touching the display

Parameters

idA unique integer to identify certain fingers
x/yThe screen position, where the finger was put down
evThe JavaScript event object

onTouchMove

onTouchMove: function(id,
x,
y,
ev)

A finger is sliding over the surface

Parameters

idA unique integer to identify certain fingers
x/yThe screen position, where the finger was put down
evThe JavaScript event object

addActor

addActor: function(act)

Description

Add a gamvas.Actor to the state.  Actors added to a state are drawn automatically.

Parameters

acta gamvas.Actor object

Example

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

removeActor: function(act)

Description

Add a gamvas.Actor to the state.  Actors added to a state are drawn automatically.

Parameters

acta gamvas.Actor object or a string with the actor name

registerInputEvents

registerInputEvents: function(act)

Description

Send keyboard/mouse events to gamvas.Actor onKeyDown and similar functions

Parameters

acta gamvas.Actor object

Example

// 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

addSound: function(snd)

Description

Add a gamvas.Sound to the state.

Parameters

sndeither a url to the sound file, or a gamvas.Sound object

Returns

A gamvas.Sound object

Example

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

getActors: function()

Description

returns all the actors added with gamvas.State.addActor as array, sorted by their gamvas.Actor.layer

Note

sorting is expensive, try to avoid this function by processing <gamvas.State.actors> directly or cache the result

this.disableCamera
By default a state provides a full environment for game development.
this.name
The name of the state, must be unique within all states
this.autoClear
If set to true, the screen will automatically cleared before drawing functions are called.
this.clearColor
The color to clear the screen, if gamvas.State.autoClear is enabled.
this.resource
a gamvas.Resource instance, to allow easy file loading
Class for resource handling, aka loading images and other game data
this.canvas
The DOM element of the canvas the game is running on.
this.c
a HTML5 2D context of the canvas the game is running on.
this.dimension
a object holding the canvas dimension in {w, h}
this.camera
a gamvas.Camera instance, to modify camera.
The camera class.
init: function()
The init function is called only once per state to initialize it.
enter: function()
The enter function is called when the state is entered.
leave: function()
The enter function is called when the state is left.
clearScreen: function()
Clears the screen.
preDraw: function(t)
This function is called before camera is applied.
draw: function(t)
Overwrite this function to draw your game objects.
postDraw: function(t)
This function is called after camera is applied.
loading: function(t)
Overwrite for a custom loading screen
onKeyDown: function(keyCode,
character,
ev)
A key on the keyboard was pressed
onKeyUp: function(keyCode,
character,
ev)
A key on the keyboard was released
onMouseDown: function(button,
x,
y,
ev)
A mouse button was pressed
onMouseUp: function(button,
x,
y,
ev)
A mouse button was released
onMouseMove: function(x,
y,
ev)
The mouse was moved
onTouchDown: function(id,
x,
y,
ev)
A finger starts touching the display
onTouchUp: function(id,
x,
y,
ev)
A finger stopped touching the display
onTouchMove: function(id,
x,
y,
ev)
A finger is sliding over the surface
addActor: function(act)
Add a gamvas.Actor to the state.
The actor class is the most important class in gamvas.
removeActor: function(act)
Add a gamvas.Actor to the state.
registerInputEvents: function(act)
Send keyboard/mouse events to gamvas.Actor onKeyDown and similar functions
addSound: function(snd)
Add a gamvas.Sound to the state.
A class for sound and music files.
getActors: function()
returns all the actors added with gamvas.State.addActor as array, sorted by their gamvas.Actor.layer
this.layer
Integer value used for z-sorting on automatic draw through gamvas.State.addActor
gamvas.Resource.prototype.status = function()
Get the status of all loading resources
exitEvent: function()
return from a unhandled keypress on onKey* functions
exitEvent: function()
return from a unhandled mouseevent on onMouse* functions
Information and functions for the mouse.
Close