Quick Start

Eugene Krevenets edited this page Jun 30, 2013 · 2 revisions

Creating the World

Create the World for Box2D experiments

var world = darlingjs.world('myGame', [
    //inject some modules

    //get 2D components
    'ngFlatland',

    //get Common Physics components
    'ngPhysics',

    //get Box2D implementation of Physics components
    'ngBox2DEmscripten'
], {
    fps: 60
});

DarlingJS is lightweight framework so it's decoupled from any rendering, physics, sound, assets and so on libraries. And it possible to develop on pure javascript with your own simulation systems.

Every darlingjs modules start with prefix 'ng', for example: 'ngPhysics'.

Add systems

add physics simulation system

world.$add('ngBox2DSystem', {
    //define gravity of box2d world
    gravity: {
        x: 0,
        y: 9.8
    },

    //define properties of physics simulation
    velocityIterations: 3,    
    positionIterations: 3
});

add view port system for definition 2D camera position

world.$add('ng2DViewPort', {
    //centor of the camera
    lookAt: {
        x: width / 2, y: height / 2
    },

    //size of the camera view
    width: width,
    height: height
});

add box2d debug draw visualization

world.$add('ngBox2DDebugDraw', {
    //target div/convas element. For div element automaticaly create canvas element and place into the div
    domID: 'gameView', 

    //size of canvas
    width: width, height: height
});

add drugging support system.

world.$add('ngBox2DDraggable', { 
    //target div/convas element
    domId: 'gameView', 

    //width, height of it
    width: width, height: height 
});

Create Entity

Create entity of draggable box and add it to the world

darlingjs.$e('box', {
//define position
    ng2D: {
        x: 0.0,
        y: 0.0
    },

//define size of
    ng2DSize: {
        width: 10.0,
        height: 10.0
    },

//mark entity as physics object
    ngPhysics: {},

//mark entity as draggable object
    ngDraggable: {}
});

Here is alternative notation: When you have a lot of components in default state, it useful to count of components by array

darlingjs.$e('box', ['ng2D', 'ng2DSize', 'ngPhysics', 'ngDraggable']}

Start The Game

To run update of game the world 60 times in second just use:

world.$start();

One frame emulation:

world.$update(1/60);

Create custom system with custom component

Create system that automaticaly increase life of any entities with 'ngLife' and 'lifeHealer' components. So you if you want to heal some entity you can just add 'lifeHealer' component to it.

Usage

//start healing entity

entity.$add('healer');

//stop healing entity

entity.$remove('healer');

Define component and system

//define healer component

world.$c('healer', { 
    power: 0.1,
    maxLife: 100.0
});

//define and add healer system to the game world
//!ATTENTION! in next verstion $node and $nodes will be changed to the $entity and $entities

world.$s('healerSystem', {

    //apply to components:
    $require: ['ngLife', 'healer'],

    //iterate each frame for each entity
    $update: ['$node', function($node) {
        if ($node.ngLife.life <= this.healer.maxLife) {
            //heals entity
            $node.ngLife.life += this.healer.power;
        } else {
            //stop healing when life reach of maxLife
            $node.$remove('healer');
        }
    }]
});