Framework to create video games in HTML5 Canvas
Follow the steps below to start:
-
Download the code
canvasengine-X.Y.Z.all.min.json Github or this website -
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> -
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)
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 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();
}
});
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
- Scene Structure
- Overlay scenes
- Multiplayer model
- Preloading
- Animations
- Timeline
- Collision (beetween entities and grid)
- Keyboard and Gamepad
- Windows
- Sound
- Text and Game effects
- Scrolling
- Level Design
- Save & Load
- Spritesheet Management
- Mouse Control & Multi Touch
- Elements Manipulation
- Tiled Map Editor (http://www.mapeditor.org)
- Gleed 2d (http://gleed2d.codeplex.com)
- Transition
- UI
- Box2d
- Synchronized multi canvas (local multiplayer)
- Users and Groups Management for multiplayer model
- CSS drawing
- Add
extend()in CanvasEngine Core (Doc) - Add
soundmanageroption in defines() (Doc) - Add
ignoreLoadErroroption in defines() (Doc) - Removal
addMethod()in Element class - Fix no recreating the sound if already created (with SoundManager2)
- Rendering performance increased
- Add
setSize()in Canvas class (Doc) - Add
isFullscreen()in Canvas class (Doc) - Add mouse position in
triggerparameters (Doc) - Disable context menu by default (Doc)
- Fix loop animation
- Add
patternSizeproperty in Animation Class (Doc)
- Fix
getMousePosition(Doc)
- Fix materials loading as
{id: Number, path: String}(Doc) - Fix
mouseoverandmouseout(Doc) - Add
mouveEventproperty in Canvas class (Doc) - Force
readymethod of canvas if the DOM is already loaded (Doc)
- Fix scene reloaded
- Fix sounds for iOS
- 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
- 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
- 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
- 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)
- Add multi-tilemap in Tiled Class (robwalch)
- Add origin points in Spritesheet Class (robwalch)
- Fix keyUp method in Input Class (https://github.com/RSamaium/CanvasEngine/issues/4)
- Fix NPM problem (https://github.com/RSamaium/CanvasEngine/issues/7)
- Fix identifiers keys in Input class
- Fix addKey method in Input class
- Fix set method in Spritesheet class
- 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
- 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
- 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
- Fix animated images
- Improving documentation
Not indicated
Not indicated
Not indicated
- Initial Release
http://rsamaium.github.com/CanvasEngine
MIT. Free for commercial use.