An HTML/JavaScript game creation engine. Includes support for Tiled maps.
The only external library that is required is jQuery.
canvas-game-engine is AMD-compliant, so you can use something like require.js to load it.
-
Create your base page with a container
divtag.<!doctype html> <html> <head> <title>My Game</title> </head> <body> <div id="container"/> <!-- put scripts here --> </body> </html> -
Load jQuery and canvas-game-engine using your favourite method.
Using require.js:
<script data-main="main" src="require.js"></script> //in main.js requirejs(['jquery', 'canvas-game-engine', function($, CGE) { //...(Note that in this case, jQuery will be loaded automatically even if it's not loaded by your script)
Manually loading:
<script src="jquery.js"></script> <script src="canvas-game-engine.js"></script> <script> //... </script> -
Instantiate a game manager:
var gameManager = new CGE.GameManager({ main: $("#container"), window: window }); -
Load a map, and make it active:
var map = gameManager.loadMap('maps/myMap.tmx'); gameManager.setMap(map);