/CanvasEngine

Framework for HTML5 Canvas oriented 2D video games

Primary LanguageJavaScriptMIT LicenseMIT

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

  • Fullscreen support (Supported platforms).
  • Multiple image file formats: DDS, JPG, PNG and TGA.
    • Define a transparent color
  • Scene Structure
    • Overlay scenes
    • Pause scene
  • Multiplayer model
  • Preloading
    • Get the percentage of loading
  • Elements Manipulation
    • Manipulation : jQuery syntaxe
    • Draw : HTML5 Canvas API syntaxe
  • Utilities
    • merge object
    • class

Windows

  • Dialog box with the outline
  • Cursor

Animations

  • Set an animation from a spritesheet
  • Frequence and animation speed
  • Sequence of multiple image
  • Creating a custom animation with multiple sequences
  • Display once, loop or temporary

Timeline (aka Tween)

  • Easy to make interpolations effects
  • 29 Effects :
    • easeInQuad, easeOutQuad, easeInCubic, easeOutCubic, etc.
  • Loop

Collision

  • Entities model
  • Test collision with virtual grid
  • Polygon intersection and Contains Point.

Text

  • Set maximum line width
  • Display effect
    • Line by line
    • Character by character
  • font file formats : TTF, EOT
  • external fonts
    • Google Fonts
    • Fontdeck
    • Fonts.com
    • Typekit

Sound

  • Multiple sound file formats: OGG, WAV, MP3.
  • Fading effects
  • Web Audio or SoundManager2

Effects

  • Change tone screen
  • Perform a flash
  • Shake screen

Scrolling

Level Design

Save & Load

  • Encoding with BISON.js

Spritesheet Management

Input

  • Access to input types: Keyboard, Mouse, Xbox360 Pad, Joysticks
  • click, dbclick, mousemove, mouseup, mousedown, mouseout, mouseover*
  • Multi-Touch with Hammer.js :
    • hold
    • tap
    • doubletap
    • drag, dragstart, dragend, dragup, dragdown, dragleft, dragright
    • swipe, swipeup, swipedown, swipeleft, swiperight
    • transform, transformstart, transformend
    • rotate
    • pinch, pinchin, pinchout
    • touch (gesture detection starts)
    • release (gesture detection ends)

Roadmap (in order)

v1.5

  • Box2d
  • Synchronized multi canvas (local multiplayer)

v2.0

  • Users and Groups Management for multiplayer model
  • CSS drawing

Test performance

v1.0.6

Contributors

Changelog

v1.4.0 (dev)

  • Add functionality : User Interface
    • Preset
    • Button
    • Tooltip
    • Drag&Drop
    • Background
  • Add weather effects : rain(), snow() and storm()
  • Improves offset(). Possibility of using top and bottom to place events
  • Fix event mouse when canvas resized and center the canvas in full screen
  • Avoid event propagation of key pressed

v1.3.2

  • Add element:attrChange event
  • Add of called() method in the scene
  • Improves measureText(). Returns text height
  • Improves fillText(). Ability to center the text in an element
  • Improves each(). Possible to iterate an object
  • Improves set() in Spritesheet class. tile parameter is optional
  • Improves Scene.preload() and Materials.load() with a parameter material in callback function
  • Fix change size of a DOM element
  • Fix arguments of fillRect()
  • Fix using the method of traversing if index of an element is changed
  • Fix display elements in the preload() method of the scene
  • Input.restore() and Input.memorize deleted

v1.3.1

  • Possibility to use several times the commands for drawing - (TheOnly92)
  • Improves fillRect() and strokeRect() by adding rounded corners
  • Add multiple property in Context class
  • Add fillCircle() and strokeCircle() in Context class
  • Add cache() and uncache() in Element class
  • Add remove() and isStopped() in Animation class and add() improved
  • Marshal class compatible with Node.js
  • Add getStack() ind Marshall class and dump(), load() improved
  • Add exist() in Spritesheet class
  • Add html() and css() in Element class for DOM layer
  • Add next(), prev(), last(), first(), eq(), find(), findAttr() in Element class for traversing
  • Add support for tile image dimensions that differ from the tile layer dimensions in Tiled class (scottbw)
  • Add rotation and flip in Tiled class (TheOnly92)
  • Display objects in Tiled class
  • getLayerObject() changed in Tiled class
  • Fix getLayer() in Tiled class
  • Fix display when an object layer is present in Tiled class
  • Fix bug where variables would not properly reset in Animation class (SomeKittens)
  • Fix bug with IE if gamepad
  • Fix click event and scrolling in fullscreen
  • Fix textAlign and lineCap properties
  • Caching of sound already loaded

v1.3.0

  • Add transition effects in scenes
  • Add loading fonts, json and videos
  • Add using Google Fonts
  • Add Using WebCam
  • multiplayer model improved
    • emit to specific scenes
    • assignEvents()
    • loadEvents() in Scene Class
    • CE.connectServer() and CE.io
    • Using Tiled and Hit classes
    • Compatible with Express 3
    • Documentation Improved
    • Tested with Node.js > 0.10.0
  • Add getImageData(), putImageData(), createImageData() and toDataURL() in Canvas class
  • Add arcTo() and isPointInPath() in Context class
  • Add opaqueImage() in Materials class
  • Add toTimer() in CanvasEngine Core
  • Add toMatrix() and rotateMatrix() in CanvasEngine Core
  • Add remove() in Window class
  • Add to Tiled Map Editor : spacing, margin and tile offset
  • Add setPropertyByCell(), passableCell() and pathfinding() in Grid class
  • Fix invertColor() in Materials class
  • Fix flip an element
  • Fix click on transparent image
  • Removes forceEvent property and adding the method forceEvent()
  • Improve imageToCanvas() in Materials class
  • Improve getBasePath() in Materials class
  • Ability to use the DOM to display the canvas

v1.2.7

  • Add extend() in CanvasEngine Core (Doc)
  • Add soundmanager option in defines() (Doc)
  • Add ignoreLoadError option in defines() (Doc)
  • Removal addMethod() in Element class
  • Fix no recreating the sound if already created (with SoundManager2)
  • Rendering performance increased

v1.2.6

  • Add setSize() in Canvas class (Doc)
  • Add isFullscreen() in Canvas class (Doc)
  • Add mouse position in trigger parameters (Doc)
  • Disable context menu by default (Doc)

v1.2.5

  • Fix loop animation
  • Add patternSize property in Animation Class (Doc)

v1.2.4

  • Fix getMousePosition (Doc)

v1.2.3

  • Fix materials loading as {id: Number, path: String} (Doc)
  • Fix mouseover and mouseout (Doc)
  • Add mouveEvent property in Canvas class (Doc)
  • Force ready method of canvas if the DOM is already loaded (Doc)

v1.2.2

  • Fix scene reloaded
  • Fix sounds for iOS

v1.2.1

  • Add getBasePath method in Materials class
  • Add getFilename method in Materials class
  • Add mousedown et mouseup events
  • Add zIndex method in Scene class
  • Fix mulit-touch gestures on touchpads
  • Improve loading sounds

v1.2.0

  • Add Text feature
  • Add Effect feature
  • Add Cursor feature in Window class
  • Add off method in Element class
  • Add scroll method in Window class
  • Add invertColor method in Materials class
  • Add forceEvent property in Element class
  • Add hasCmd method in Context class
  • Add propagationOpacity property in Element Class
  • Add mouseScroll method in Scrolling class
  • Add random method in CanvasEngine Core
  • Add freeze property in Scrolling class
  • Add mobileUserAgent method in CanvasEngine core
  • Fix event "canvas:render" when element is hidden
  • Fix clip method in Context class
  • Fix name attribute in Element class
  • Fix value 0 in Timeline class
  • Fix press method in Input class
  • Fix load method in Materials class
  • Fix animation construct in Animation class
  • Fix load sound in cache
  • Fix scrolling
  • Fix measureText method in Canvas class
  • Fix draw map in Tiled class
  • Fix testCell method in Hit class
  • Fix intersectsWith method in Polygon class
  • Fix animation loop in Animation class
  • Improve children method in Element class
  • Improve position method in Window class
  • Improve append method in Element class
  • Improve clone method in Element class
  • Improve reset method in Input class
  • Improve load and dump methods in Marshal class
  • Improve new method in CanvasEngine class
  • Improve classes in Hit class
  • Improve isPressed method in Input class
  • Merge Hammer.js in CanvasEngine for multi touch feature

v1.1.1

  • Add testCell method in Grid class
  • Add removeCmd method in Element class
  • Add origin points in parameters in set method in SpriteSheet class
  • Changing getEntityCells method in Grid Class
  • Fix imageToCanvas method in Materials class
  • Fix frequence in Animation class
  • Fix set method in SpriteSheet class for windows
  • getPropertyByCell method in Hit class returns undefined if column or row doesn't exist

v1.1.0

  • Add specific image param in animation
  • Add position param in animation
  • Add getStage method in Scene class
  • Add getEnabled method in Scene class
  • Add collision feature
  • Add Window feature
  • Add overlay scenes
  • Add moveArray method in CanvasEngine Object
  • Add offset method in Element Class
  • Add position method in Element Class
  • Add pack method in Element Class
  • Add unpack method in Element Class
  • Add detach method in Element Class
  • Add children method in Element Class
  • Add removeAttr method in Element Class
  • Add prepend method in Element Class
  • Add zIndex method in Element Class
  • Add zIndexBefore method in Element Class
  • Fix reload scene
  • Fix click on multi scene
  • Fix click on element witch opacity < 1
  • Improving draw performance
  • Improving documentation (markdown)

v1.0.8

v1.0.7

  • Move clear method (Context class -> Canvas class)
  • Change exit method in Scene Class
  • Add multi scenes feature.
  • Add togglePause method in Scene Class
  • Add pause method in Scene Class
  • Add isEnabled method in Scene Class
  • Add exitAll method in Scene Class
  • Add eventExist method in Element Class
  • Add alias for new method : New
  • Improves the performance of clicks
  • Fix Info of tile size
  • Fix "this_" in Marshal class
  • Improving documentation

v1.0.6

  • Change addLoopListener method
  • Ignore loading music if the type is not supported
  • Add getExtension method in Materials class
  • Add remove method in Marshal class
  • Add special events defined by a namespace (methods: refresh)
  • Add moveTo, lineTo, quadraticCurveTo, bezierCurveTo in Context
  • Add addMethod method in Context Class
  • Addition to loading the canvas for CocoonJS)
  • Fix save and load (IE9+)
  • Fix reference of image loaded (for CocoonJS)
  • Fix click on element
  • Fix Gamepad (Google Chrome)
  • Fix extend Context Class
  • Fix positions of a element's children resized
  • Fix origin point of element's children
  • Improving documentation

v1.0.5

  • Fix restart of animations (Animation Class)
  • Fix children elements opacity
  • Fix reading some element properties
  • Fix positions of a element resized
  • Add rgbToHex method in CanvasEngine object
  • Add pattern method in Spritesheet class
  • Add cropImage method in Materials class
  • Add transparentColor method in Materials class
  • Add imageToCanvas method in Materials class
  • Add getScene method in Element class
  • Add createPattern method in Canvas class
  • Add createLinearGradient method in Canvas class
  • Add createRadialGradient method in Canvas class
  • Add addColorStop method in Canvas class
  • Add measureText method in Canvas class
  • Improving performance click
  • Improving the get method in Materials class
  • Improving documentation

v1.0.4

  • Fix animated images
  • Improving documentation

v1.0.3

Not indicated

v1.0.2

Not indicated

v1.0.1

Not indicated

v1.0.0

  • Initial Release

Examples and Demos

http://rsamaium.github.com/CanvasEngine

License

MIT. Free for commercial use.