Home

Awesome

Canvas Engine

http://canvasengine.net

Description

Framework to create video games in HTML5 Canvas

Get Started

Follow the steps below to start:

  1. Download the code canvasengine-X.Y.Z.all.min.js on Github or this website

  2. Add this code in your page :

     <!DOCTYPE html>
 <script src="canvasengine-X.Y.Z.all.min.js"></script>
 <canvas id="canvas_id" width="640" height="480"></canvas>

  3. Initialize the canvas in your JS file :

     var canvas = CE.defines("canvas_id").ready(function() {	
  
 });

Method ready is called when the canvas is ready (DOM loaded)

Use development files

Development files allows you to improve or correct CanvasEngine. To do this, insert these two files:

    <!DOCTYPE html>
    <script src="core/engine-common.js"></script>
	<script src="canvasengine.js"></script>
	<canvas id="canvas_id" width="640" height="480"></canvas>

View other branches of CanvasEngine on Github, you'll other version under development

If you want to use features (Animation, Input, etc), add the appropriate files :

<script src="extends/Animation.js"></script>

If you develop or modify a feature, you can use the global variable Global_CE to use other features.

Example :

// In extends/your_feacture.js
Global_CE.Input.press(Input.Enter, function() {
});

Your code

Your code contains classe(s) :

Class.create("My_Class", {


});

The developer can use this class in his game. You can also add code like this:

var My_Class = {
	My_Class: {
		New: function) {
			return Class.New("My_Class");
		}
	}
};

it will use the namespace defined initially by the user :

var canvas = CE.defines("canvas_id").extend(My_Class).ready(function() {	
     canvas.Scene.call("MyScene");
});

canvas.Scene.new({
  name: "MyScene",
  ready: function(stage) {
     var foo = canvas.My_Class.New();
  }
});

Documentation

Try to properly document the code for developer :

/**
    @doc my_class
    @class Definition of "My Class"
    @example

        ...

*/
Class.create("My_Class", {

/**
  @doc my_class/
  @method foo ...
  @param bar {String} ...
  @example

        ...

*/
     foo: function(bar) {

     }

});

See http://canvasengine.net/doc

Features

Low-level API

Windows

Animations

Timeline (aka Tween)

Collision

Text

Sound

Effects

Scrolling

Level Design

Save & Load

Spritesheet Management

Input

Roadmap (in order)

v1.5

v2.0

Test performance

v1.0.6

Contributors

Changelog

v1.4.0 (dev)

v1.3.2

v1.3.1

v1.3.0

v1.2.7

v1.2.6

v1.2.5

v1.2.4

v1.2.3

v1.2.2

v1.2.1

v1.2.0

v1.1.1

v1.1.0

v1.0.8

v1.0.7

v1.0.6

v1.0.5

v1.0.4

v1.0.3

Not indicated

v1.0.2

Not indicated

v1.0.1

Not indicated

v1.0.0

Examples and Demos

http://rsamaium.github.com/CanvasEngine

License

MIT. Free for commercial use.