darlingjs

v0.7.2

Published

2 years ago

Component & Entity based javascript game engine. Decoupled from any visualization, physics, and so on. With injections and modules based on AngularJS.

Downloads

0High
0Medium
0Low

hyzhak

entity gamedev engine

darlingjs ![Gitter](https://badges.gitter.im/Join Chat.svg)

Lightweight entity, component, system based game engine. With flexible architecture. Decupled from any dependecy. So all interaction with Box2D, Render system, Particle System and so on put in pluggable modules. Use fluent API Crafty.js, jQuery like.

Support

Examples

Game of Pong with sources;
In Progress Red Cabrioler with sources;
Repo with other sources;

Quick Start

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');
        }
    }]
});

Inspired by

AngularJs - dependecy injections;
Ash - component, entity, system architecture;
CraftyJS - fluent api;

Pluggable darlingjs Modules

2D Renderering uses pixi.js;
Physics uses emscripted box2d 2.2.1 or box2dweb 2.1a;
Performance (FPS/Mem) metter uses Stats.js;
Flatland (2D components);
Generators (systems of procedural generation of infinity world);
Particles (systems and components for emitting particles);
Player (components for store player state: score, life);

Comming soon Modules

Advanced Particle System;
AI
FlashJS, EaselJS Rendering;
Sound;
and so on.

Example of Usage

Game Engine now in active developing and here is just proof of concept.


var world = darlingjs.world('myGame', ['ngModule', 'flatWorld'], {
    fps: 60
});

world.$add('ngDOMSystem', { targetId: 'gameID' });
world.$add('ngFlatControlSystem');
world.$add('ng2DCollisionSystem');

world.$e('player', [
    'ngDOM', { color: 'rgb(255,0,0)' },
    'ng2D', {x : 0, y: 50},
    'ngControl',
    'ngCollision'
]);

for (var i = 0, l = 10; i < l; i++) {
    var fixed = Math.random() > 0.5;
    world.$e('obstacle_' + i, [
        'ngDOM', { color: fixed?'rgb(0, 255, 0)':'rgb(200, 200, 0)'},
        'ng2D', {x : 10 + 80 * Math.random(), y: 10 + 80 * Math.random()},
        'ngCollision', {fixed: fixed}
    ]);
}

world.$e('goblin', [
    'ngDOM', { color: 'rgb(255,0,0)' },
    'ng2D', {x : 99, y: 50},
    'ngRamble', {frame: {
        left: 50, right: 99,
        top: 0, bottom: 99
    }},
    'ngScan', {
        radius: 3,
        target: 'ngPlayer',
        switchTo: {
            e:'ngAttack',
            params: {
                switchTo:'ngRamble'
            }
        }
    },
    'ngCollision'
]);

world.$start();

Create Module


var ngModule = darlingjs.module('ngModule');

ngModule.$c('ngCollision', {
    fixed: false
});

ngModule.$c('ngScan', {
    target: 'ngPlayer'
});

ngModule.$c('ngRamble', {
    frame: {
        left: 0, right: 0,
        top: 0, bottom: 0
    }
});

ngModule.$c('ngPlayer', {
});

ngModule.$c('ngDOM', {
    color: 'rgb(255,0,0)'
});

ngModule.$c('ng2D', {
    x: 0.0,
    y: 0.0,
    width: 10.0,
    height: 10.0
});

ngModule.$c('ngControl', {
    speed: 10,
    keys:{ UP_ARROW: -90, DOWN_ARROW: 90, RIGHT_ARROW: 0, LEFT_ARROW: 180}
});

ngModule.$system('ng2DRamble', {
    
    $require: ['ngRamble', 'ng2D'],

    _updateTarget: function($node) {
        $node._target = {
            x: 4 * Math.random() - 2,
            y: 4 * Math.random() - 2
        };

        $node._target = this._normalizePosition($node._target, $node.frame);
    },

    _normalizePosition: function(p, frame) {
        if (p.x < frame.left) {
            p.x = frame.left;
        }

        if (p.x > frame.right) {
            p.x = frame.right;
        }

        if (p.y < frame.top) {
            p.y = frame.top;
        }

        if (p.y > frame.bottom) {
            p.y = frame.bottom;
        }
    },
    
    _distanceSqr: function(p1, p2) {
        var dx = p1.x - p2.x;
        var dy = p1.y - p2.y;
        return dx * dx + dy * dy;
    },

    $update: ['$node', function($node) {
        if (!$node._target) {
            this._updateTarget($node);
        } else if (this._distanceSqr($node.ng2D, $node._target) < 1) {
            this._updateTarget($node);
        } else {
            var dx = Math.abs($node._target.x - $node.ng2D.x);
            var dy = Math.abs($node._target.y - $node.ng2D.y);
            if (dx > dy) {
                $node.ng2D.x+= $node._target.x > $node.ng2D.x?1:-1;
            } else {
                $node.ng2D.y+= $node._target.y > $node.ng2D.y?1:-1;
            }
        }
    }]
})

ngModule.$system('ng2DCollisionSystem', {
    
    $require: ['ngCollision', 'ng2D'],
    
    _isLeftCollision: function(p1, p2) {
        return false;
    },
    
    _isRightCollision: function(p1, p2) {
        return false;
    },
    
    _isTopCollision: function(p1, p2) {
        return false;
    },
    
    _isBottomCollision: function(p1, p2) {
        return false;
    },
    
    $update: ['$nodes', function($nodes) {
        //TODO brute-force. just push away after collision
        for (var j = 0, lj = $nodes.length; j < lj; j++) {
            for ( var i = 0, li = $nodes.length; i < li; i++) {
                var node1p = $nodes[i].ng2D;
                var node2p = $nodes[j].ng2D;
                var node1Fixed = $nodes[i].ngCollision.fixed;
                var node2Fixed = $nodes[j].ngCollision.fixed;

                if (this._isLeftCollision(node1p, node2p)) {
                    //TODO shift nodes based on
                    node1Fixed, node2Fixed;
                } else if (this._isRightCollision(node1p, node2p)) {
                    //TODO shift nodes based on
                    node1Fixed, node2Fixed;
                } else if (this._isTopCollision(node1p, node2p)) {
                    //TODO shift nodes based on
                    node1Fixed, node2Fixed;
                } else if (this._isBottomCollision(node1p, node2p)) {
                    //TODO shift nodes based on
                    node1Fixed, node2Fixed;
                }
            }
        }
    }]
});

ngModule.$system('ng2DScan', {
    $require: ['ng2D', 'ngScan'],
    
    $update : ['$nodes', function($nodes) {
        //TODO brute-force. just push away after collision
        for (var j = 0, lj = $nodes.length; j < lj; j++) {
            for ( var i = 0, li = $nodes.length; i < li; i++) {

            }
        }
    }]
})

ngModule.$system('ngControlSystem', {
    $require: ['ng2D', 'ngControl'],
    
    _targetElementID: 'game',
    
    _target:null,
    
    _actions: {},
    
    _keyBinding: [],
    
    _keyBind: function(keyId, action) {
        this._keyBinding[keyId] = action;
        this._actions[action] = false;
    },
    
    $added: function() {
        this._keyBind(87, 'move-up');
        this._keyBind(65, 'move-left');
        this._keyBind(83, 'move-down');
        this._keyBind(68, 'move-right');

        this._target = document.getElementById(this._targetElementID);
        var self = this;
        this._target.addEventListener('keydown', function(e) {
            var action = self._keyBinding[e.keyID];
            if (action) {
                self._actions[action] = true;
            }
        });
        this._target.addEventListener('keyup', function(e) {
            var action = self._keyBinding[e.keyID];
            if (action) {
                self._actions[action] = false;
            }
        });
    },
    _speed: {x:0.0, y:0.0},
    _normalize: function(speed) {
        //TODO : ...
    },
    
    $update: ['$node', '$time', '$world', function($node, $time, $world) {
        var speed = this._speed;
        if (this._actions['move-up']) {
            speed.y = -1.0;
        }
        if (this._actions['move-down']) {
            speed.y = +1.0;
        }
        if (this._actions['move-left']) {
            speed.x = -1.0;
        }
        if (this._actions['move-right']) {
            speed.x = +1.0;
        }

        this._normalize(speed);

        $node.ng2D.x += speed.x * $time * $world.fps;
        $node.ng2D.y += speed.y * $time * $world.fps;
    }]
});

ngModule.$system('ngDOMSystem', {
    _targetElementID: 'game',
    
    _target: null,
    
    _element: null,
    
    _style: null,
    
    $require: ['ngDOM', 'ng2D'],
    
    $added: function() {
        if (this.target === null && this.targetId !== null) {
            this.target = document.getElementById(this.targetId);
        }
    },
    
    $addNode: function($node) {
        var element = document.createElement("div");
        var style = element.style;

        style.position = "absolute";

        $node._style = style;
        $node._element = element;
        this._target.appendChild(element);
    },
    
    $removeNode: function($node) {
        //TODO:
        this._target.removeChild($node._element);
    },
    
    $update: ['$node', function($node) {
        var style = $node._style;
        style.left = $node.ng2D.x + 'px';
        style.top = $node.ng2D.y + 'px';
    }]
});

Copyrights

Logo by Alena Krevenets (Burenka) http://burenkaz.daportfolio.com/