cangaja - Canvas Game JavaScript Framework

cangaja is a javascript canvas project that i have started to explore the html canvas features.

Featurelist for now:

sound features using Buzz!
touch handling using Hammer
working with Ejecta on iOS, but Buzz! and Hammer don't work there!
Mediaasset class (preload and handle files/data)
Director class (with screen handling/fading)
Screen class
Bitmap class
Layer class
Sprite class
Animation class
Map class
Button class
Menu class
Collision handling (rectangle, circle, no pixelperfect collision at the moment)
Emitter class (point, line, rectangle, explosion)
Particle class
Morphing class
Translation class (linear, circle, bezier)
Sequence class (handles multiple Translations)
Tilemap support orthogonal/isometric (Tiled Map Editor .tmx files format xml or csv)
Font support (Glyphdesigner EZ Gui text files)
TexturePacker support (TexturePacker generic XML file)
Box2DHtml support (Box2DHtml5)
Destructible Terrain class
PhysicsEditor support (PhysicsEditor use Lime + Corona JSON format for use in Box2D Wrapper)

Todo / wish list / bugs:

Oneway/onesided Platforms Box2d http://www.box2d.org/forum/viewtopic.php?f=3&t=4985 http://www.emanueleferonato.com/2010/03/02/understanding-box2ds-one-way-platforms-aka-clouds/ http://gamedev.stackexchange.com/questions/47828/box2d-with-lines http://www.iforce2d.net/b2dtut/one-way-walls
implement Game into Cangaja as class?
develop something similar to DiddyData. A config file to define files to preload and screens an layers to generate
sprite positioning bug in slide demo?
eliminate Array.forEach
global renderer with webgl support and canvas 2d fallback?
additional options argument for Box2D wrapper classes for detailed configuration?
MapPolyLine and MapPolygon for use as b2ChainShape in Box2D Wrapper => oh, no! b2ChainShape not exists in box2dweb 2.1.x
Tilemap => decision what to prefer => xml or json format?
bugfixing Tilemap with tmx csv format is not animating correctly (tmx with xml and tilemap exported as json works!)
fix missing rotation when follower sprite using TPImage
add support for additional Tiled Map Editor features like object positioning(done!), object path and object group(done!)
support TexturePacker cropping option
class Sequence rewind feature
create new class Writer or Text for textblocks and textscroller using update/draw => then it can be an element of a layer
object pooling for all elements like sprites and so on...
better code documentation and what license to use?
clean up demo code ;o)
z-index for objects useful?
class bitmap method clearcircle is not working with Ejecta ;o(
class text => textblock, alignment, textticker, textscroller features
ParticleDesigner support?
are sprites and other objects out of the game screen (Game.bound) => no drawing and/or not updating of this object?
configurable handle for sprite, animation and button (maybe also button)
add more features to the font class
better input implementation, get rid of the global mousedown variable
use the object group as bound as collision object
additional method in map class for collision check

Changelog:

2013-10-17 [bugfix] - of terrain crash, the circle vertices has to be reversed to CCW(?)
2013-10-15 [added] - destructabel terrain class ;o)
2013-10-07 [added] - added libs Clipper and poly2tri
2013-10-07 [change] - removed box2dweb, added box2dhtml5 (Box2D 2.3.0), rework for box2dhtml5, misc updates
2013-04-17 [cleanup] - cleanup again
2013-04-08 [added] - added mode slide for director to switch screens
2013-04-07 [added] - started basic cangaja template for ejecta
2013-04-06 [added] - started basic cangaja template
2013-04-04 [cleanup] - a little folder structure cleanup
2013-04-02 [fixed] - preloader had wrong context
2013-03-05 [added] - apidoc generated with yuidoc
2013-02-22 [added] - added B2DLine class
2013-02-20 [added] - added working B2DBridge class
2013-02-13 [bugfix] - Box2D warpper => added name and uid to each object for correct deleting of objects
2013-02-10 [added] - dragging, deleting and apply impulse of/to Box2D objects
2013-02-05 [added] - first simple Box2D Wrapper with basic shapes: circle, rectangle and polybody
2013-01-24 [added] - Sprite to MapArea collision
2013-01-23 [misc] - purchased Webstorm JavaScript IDE, thats what i call a JS IDE!
2013-01-22 [change] - now finally rewritten for simple inheritance with no way back ;o)
2013-01-19 [added] - added a new scale transition mode between screens in Director class
2013-01-10 [change/bugfix] - rewrite of class Animation for more "inheritance style" and bugfix for correct midhandle
2012-12-30 [added] - added MapPoint and MapArea support to the loadMapXml method => this is also a todo for the json part
2012-12-29 [change] - changed comments to jsdoc style
2012-12-27 [bugfix] - found collision bug in AABB() method after rewrite of object positioning - found bug when a Button is rotated => wrong label rotation
2012-12-27 [change] - classes Emitter, Sprite, Button and Animation are now using a Point Object for positioning
2012-12-25 [change] - cleanup of some useless class inheritances
2012-12-25 [change] - further changes to work with bounds in sprites => possible bound of a tilemap?
2012-12-24 [change] - changed all sources of Game.width/Game.height with Game.bound.width/Game.bound.height
2012-12-22 [added] - added class Bound to work with sprites and specialy sprites and bounds in tilemaps
2012-11-26 [change] - changed class hierarchy. removed most of ejecta specific code
2012-11-17 [bugfix] - bug in method entity => setImage(): image.width/-height <=> image.cutwidth/-height where wrong if TPImage is used
2012-10-09 [feature] - added Bitmap class with some functions
2012-10-09 [change] - little rewrite to work with Ejecta
2012-10-09 [bugfix] - class Tilemap with json source is animating again => forgotten property ;o)
2012-10-09 [feature] - added json support to Map class
2012-10-09 [feature] - added json support to Texturepacker class (indeed Tiled Map Editor can export to json)
2012-10-08 [rewrite] - first rewrite of class map
2012-10-02 [feature] - sprites have now the properties offsetx/offsety for the attached objects - class animation/button inherits the attached object features ;o)
2012-10-02 [fix] particles in emitter pool now sorted correctly after particle reanimation ;o)
2012-09-27 [feature] sprites can have a attached object and control its position for now
2012-09-27 [cleanup] index.html
2012-09-22 [fix] class button now using the font size for centering the text. glypghdesigners lineheight vary very much.
2012-09-14 [feature] added type corona to the emitter class
2012-09-19 [cleanup] class translate
2012-09-16 [fix] fixed wrong width/height when using rotated tpimage
2012-09-16 [speed] for loops optimized
2012-09-14 [feature] added type rectangle to the emitter class
2012-09-14 [fix] Mediaasset last image is not preloading => bug in MediaAsset getImageByName()

Class inheritance

Director
Entity
- B2DEntity
  - B2DCircle
  - B2DRectangle
  - B2DPolygon
  - B2DLine
  - B2DBridge
  - B2DRope
  - B2DChainShape
- Bitmap
- Bound
- Buffer
- Emitter
- Font
- Layer
  - B2DWorld
- Map
- Menu
- Morph
- Point
  - Vector
- Rectangle
  - Sprite
    - Animation
    - Button
    - Particle
- Sequence
- Screen
- Translate
MapPoints
MapAreas
MapTileLayer
MapTileProperties
MediaAsset
Atlas-Image
Atlas-TexturePacker

Framework logic

Game
- MediaAsset
- Director
  - Screen
    - Layer
      - Animation
      - Button
      - Emitter
      - Map
      - Menu
      - Sprite
      - B2DWorld
        
        B2DCircle
        
        B2DRectangle
        
        B2DPolygon
        
        B2DLine
        
        B2DBridge
        
        B2DRope
        
        B2DChainShape

Examples

Mediaasset preloading

//preload all needed files
Game.asset.addImage('media/img/rocket.png', 'rocket')
//image
.addImage('media/img/burst.png','burst')
//font glypgdesigner
.addFont('media/font/gill.txt','gill')
//tilemap xml
.addXml('media/map/map-diddy-csv.tmx','map-diddy-csv')
//texturepacker image
.addImage('media/img/texturepacker.png','texturepacker')
//texturepacker xml
.addXml('media/img/texturepacker.xml','texturepacker-xml')
//texturepacker json
.addJson('media/img/texturepacker.json','texturepacker-json')
//tilemap json
.addJson('media/map/map.json','map-json')
//start preload
.startPreLoad()


//getting asset stuff
Game.asset.getImageByName('name')
Game.asset.getFontByName('name')
Game.asset.getXmlByName('name')
Game.asset.getJsonByName('name')

Texturepacker example

var tp = new CG.AtlasTexturePacker()

//load texturepacker json file (recommended for ejecta use)
tp.loadJson(Game.asset.getJsonByName('texturepacker-json'))

//the same example for texturepacker xml file
tp.loadXml(Game.asset.getXmlByName('texturepacker-xml'))

//add Texturepacker TPImages to mediaasset images
Game.asset.images.push.apply(Game.asset.images, tp.getAtlasImages())

Font (Glyphdesigner) example

//create font and load font file
font = new CG.Font().loadFont(Game.asset.getFontByName('heiti'))

//draw some text
font.drawText('Hello world ;o)', xpos, ypos)

Director example

//create director
var director = new CG.Director()

//adding screen and layer object to director
director.addScreen(
    new CG.Screen('screenname').addLayer('layername')
)

//fade screen to another screen with duration 5
director.nextScreen('anotherscreen', 5)

//update all attached dircetor objects in game loop
director.update()

//draw all attached director objects in game loop
director.draw()

Sprite example

//create sprite
cloud = new CG.Sprite(Game.asset.getImageByName('cloud'), 150, 150)
cloud.name = 'cloud'
cloud.xscale = 0.75
cloud.yscale = 0.75
cloud.xspeed = 0.5
cloud.yspeed = -0.25
cloud.boundsMode = 'slide'

//add sprite to layer
director.getScreenByName('screenname')
    .getLayerByName('layername')
    .addElement(cloud)

//or add sprite direct to layer object
layersprites.addElement(cloud)

Animation example

//create animation object
expl = new CG.Animation('media/img/burst.png', mousex, mousey, 1, 256, 256, 256)
expl.yspeed = -1
expl.name = 'expl'
expl.loop = false
expl.delay = 2
expl.rotation = Math.floor((Math.random() * 180) + 1)
expl.rotationspeed = Math.floor((Math.random() * 3) + 1)

//add animation to layer
layermiddle.addElement(expl)

Bitmap example

bm = new CG.Bitmap(300,300)
//load and draw a image to the buffer
bm.loadImage(Game.asset.getImageByName('texturepacker'))
//adding buffer as element to a layer
Game.director.getScreenByName('menuscreen').getLayerByName('layerback').addElement(test)
//clear a circular region of the bitmap
bm.clearCircle(50,50,50)
//clear a rectangular region of the bitmap
bm.clearRect(0,0,50,150)
// clear the buffer
bm.clearBuffer()
// and draw the loaded image back to the buffer
bm.drawImageToBuffer()

Tilemap example

var map = new CG.Map(640, 480)

//loading a tiles tilemap as xml into map, supported is csv and xml
map.loadMapXml(Game.asset.getXmlByName("name-in-asset"))

//loading a tiles tilemap as json format (recommended for ejecta use)
map.loadMapJson(Game.asset.getJsonByName("name-in-asset"))

//example in game loop
map.drawMap(mousex*2>>0, mousey*2>>0, Game.bound.width, Game.bound.height, 0, 0, callbackMapCollision)

setting alternative bound instead of game bound (canvas) to sprite example

Game.director.getScreenByName('sprites')
    .getLayerByName('layersprites')
    .getElementByName('glow')
    .setBound(
        new CG.Bound (200,0,400,400)
    )

experimental Game object example

window.onload = function() {

    //create canvas element programaticaly
    can = document.createElement('canvas')
    can.width = 640
    can.height = 480
    can.id = 'canvas'
    document.body.appendChild(can)

    //mouse move handler
    can.addEventListener('mousemove', function(evt) {
        var rect = can.getBoundingClientRect(), root = document.documentElement;
        mousex = evt.clientX - canvas.offsetCG.LEFT;
        mousey = evt.clientY - canvas.offsetTop;
    }, false);

    //jump into the game object ;o)
    Game.preload()
};

var Game = {
    path: '', //optional path depending on file/folder structure
    fps: 60,
    width: 640,
    height: 480,
    width2: 640 / 2,
    height2: 480 / 2,
    bound: new CG.Bound(0,0,640,480).setName('game'),
    canvas: {},
    ctx: {},
    b_canvas: {},
    b_ctx: {},
    asset: new CG.MediaAsset('media/img/splash3.jpg'),
    director: new CG.Director(),
    delta: new CG.Delta(60),
    preload: function(){
        //canvas for ouput
        canvas = document.getElementById("canvas")
        ctx = canvas.getContext("2d")

        //canvas buffer
        Game.b_canvas = document.createElement('canvas')
        Game.b_ctx = Game.b_canvas.getContext('2d')
        Game.b_canvas.width = Game.bound.width
        Game.b_canvas.height = Game.bound.height

        //preload images
        Game.asset.addImage('rocket','media/img/rocket.png')
        .addImage('bigexplosion','media/img/expbig1.png')
        .addFont('gill2','media/font/gill2.txt')
        .addXML('sewers','media/map/sewers.tmx')
        .startPreLoad()
    //after preload jump to Game.create
    },
    create: function() {
        //buzz: create/load sound objects
        mySound = new buzz.sound("media/sfx/serious", {
            formats: [ "ogg", "mp3", "aac", "wav" ],
            preload: true,
            autoplay: true,
            loop: true
        });
        myShoot = new buzz.sound("media/sfx/laser", {
            formats: [ "ogg", "mp3", "aac", "wav" ],
            preload: true,
            loop: false
        });
        mySound.play()

        //screen
        mainscreen = new CG.Screen('mainscreen')

        //layer
        mainlayer = new CG.Layer('mainlayer')

        //elements: buttons, animations, sprites, emitter
        //button
        button1 = new CG.Button(Game.asset.getImageByName('button'), 320, ybutton, 'Start', font, callBackFunction)
        button1.name = 'start'
        mainlayer.addElement(button1)

        //sprite
        sun = new CG.Sprite(Game.asset.getImageByName('sun'), 480, 100)
        sun.name = 'sun'
        sun.boundingradius = 150
        sun.xspeed = 1
        sun.boundsMode = 'slide'
        sun.xscale = 1
        sun.yscale = 1
        mainlayer.addElement(sun)

        //emitter
        mainlayer.addElement(new CG.Emitter()
            .setName('explodi')
            .activateFadeout()
            .setProtation(2)
            .setGravity(0)
            .initAsExplosion(Game.asset.getImageByName('powerstar75'), -2, 2)
            .setEmitterPosition(320, 240))




        //create needed stuff and add it to the director: screens => layers => elements
        Game.director
        .addScreen(mainscreen.addLayer(mainlayer))

        Game.touchinit()
        Game.loop()

    },
    loop: function(){
        Game.delta.update()
        requestAnimationFrame(Game.loop);
        if(Game.asset.ready==true){
            var last = new Date()
            //    delta = (now - then) / (1000 / Game.fps)
            Game.run();
            Game.touchhandler()
            delta = (new Date() - last) / 1000
        }
    },
    run: function() {
        Game.update()
        Game.draw()
    },
    update: function() {
        Game.director.update()
    },
    draw: function() {
        //clear ctx
        ctx.clearRect(0, 0, Game.bound.width, Game.bound.height)

        //place custom drawings here

        //draw all elements handled by the director or its screens/layers/elements
        Game.director.draw()

        //draw buffer to ctx
        ctx.drawImage(Game.b_canvas, 0, 0)
        //clear buffer
        Game.b_ctx.clearRect(0, 0, Game.bound.width, Game.bound.height)
    },
    touchinit: function() {
        hammer = new Hammer(canvas);
        hammer.on('tap', function(ev) {
            mousedown = true
            mousex = ev.position[0].x - canvas.offsetCG.LEFT //correct ontap value x
            mousey = ev.position[0].y - canvas.offsetTop  //correct ontap value y

        });
        hammer.on('dragstart', function(ev) {

        });
        hammer.on('drag', function(ev) {
            mousex = ev.position.x
            mousey = ev.position.y
        });
        hammer.on('dragend', function(ev) {

        });
        hammer.on('swipe', function(ev) {

        });

        hammer.on('doubletap', function(ev) {

        });
        hammer.on('hold', function(ev) {

        });

        hammer.on('transformstart', function(ev) {

        });
        hammer.on('transform', function(ev) {

        });
        hammer.on('transformend', function(ev) {

        });

        hammer.on('release', function(ev) {

        });
    },
    touchhandler: function(){
        mousedown = false
    }
}

Clonk-HTML5 / cangaja

cangaja - Canvas Game JavaScript Framework

Featurelist for now:

Todo / wish list / bugs:

Changelog:

Class inheritance

Framework logic

Examples

Mediaasset preloading

Texturepacker example

Font (Glyphdesigner) example

Director example

Sprite example

Animation example

Bitmap example

Tilemap example

setting alternative bound instead of game bound (canvas) to sprite example

experimental Game object example

About