Overall view

Nape

This month was annonced the 2.0 version of nape. Nape is an open-source Haxe/AS3 physics engine that lets you do cross platform applications. It’s fast and powerful (actually I prefer nape over box2d, it’s much easier to use, and really fast). See by yourself : http://napephys.com/samples.html.

Just download it through haxelib :

haxelib install nape

Tilelayer

To quote the github description :

A lightweight and very optimized wrapper over NME’s powerful but lowlevel ‘drawTiles’ which offers the best rendering performance (ie. batching) on native platforms.

To install the haxelib version :

haxelib install tilelayer

Simple implementation

So now to use these two great libraries :

import nape.phys.Body;
import aze.display.TileSprite;
 
class Entity
{
    // The tilelayer's sprite
    public var sprite(default, null): TileSprite;
    // The nape's body
    public var body(default, null) : Body;
 
    public function new(){}
 
    /**
     * Update the positions and the rotation
     **/
    public function update()
    {
        if(sprite != null && body != null)
        {
            sprite.x = body.position.x;
            sprite.y = body.position.y;
            sprite.rotation = body.rotation;
        }
    }
}

All the entities will have to be updated on each frame, as well as the nape’s space and the layer :

var _space : Space;
var _layer : TileLayer;
var _entities : List<Entity>;
 
public function new()
{
    var tilesheet = new SparrowTilesheet(
        Assets.getBitmapData("assets/spritesheet.png"), 
        Assets.getText("assets/spritesheet.xml")
    );
    _layer = new TileLayer(tilesheet);
    addChild(_layer.view);
 
    _space = new Space( new Vec2(0, 600));
}
 
public function update()
{
    _space.step(1/60);
    for(entity in _entities)
        entity.update();
    _layer.render();
}

Now to define a simple rectangular entity :

class Box extends Entity
{
    public function new(pSpace: Space)
    {
        super();
 
        // Nape's data
        body = new Body(BodyType.DYNAMIC);
        body.shapes.add(new Polygon(Polygon.box(50, 50)));
        body.position.setxy(10, 10);
        body.space = pSpace;
 
        sprite = new TileSprite('box');
    }
}

And simply add it to the stage :

var box = new Box(_space);
_entities.add(box);
_layer.addChild( box.sprite );

The post A quick start with nape and tilelayer appeared first on RevoluGame.

For example, we are going to add the Nape support.

For those of you who don’t know, Nape is a Haxe/AS3 physics engine. Since Nape is really close to Box2D, it will be simple to understand how box2d has been added to AGE.

The behavior

Since AGE is based on a behaviors system, we are just going to create a new behavior, that we will call NapeMovementBehavior :

class NapeMovementBehavior implements IBehavior
{
    private var _entity : BasicEntity;
    public var enabled(default, null) : Bool;
 
    public function update():Void {}
 
    public function enable()
    {
	enabled = true;
    }
 
    public function disable()
    {
	enabled = false;
    }
 
    public function destroy():Void {}
}

Now we are going to initialize the data needed by Nape for the behavior’s entity :

private var _body : Body;
public static var world : Space;
public function new(pEntity: BasicEntity, pDynamic:Bool)
{
    if(world == null)
        world = new Space( new Vec2(0, 500) );
 
    _body = new Body( (pDynamic ? BodyType.DYNAMIC : BodyType.STATIC), 
                       new Vec2(pEntity.x + pEntity.halfWidth, pEntity.y + pEntity.halfHeight)
                   );
 
    var block:Polygon = new Polygon(Polygon.box(pEntity.width,pEntity.height));
 
    _body.shapes.add(block);
    _body.align();
 
    _body.space = world;
 
    _entity = pEntity;
}

If you need more information on how Nape is working, go check the documentation.
So for now, we have a basic entity initialized for working into Nape.

We have to update the entity position into the game based on the Nape’s one :

public function update():Void
{
    #if cpp
    _entity.x = _body.position.x;
    _entity.y = _body.position.y;
    #else
    _entity.x = _body.position.x - _entity.halfWidth;
    _entity.y = _body.position.y - _entity.halfHeight;
    #end
 
    _entity.rotation = _body.rotation * 57.2957795;
}

There is some differences between c++ and flash: with the flash renderer, we must have the center point at the top left position (for now).

Now the destroy function (called after the behavior has been removed) :

public function destroy():Void
{
    world.bodies.remove(_body);
}

If you have noticed, the world variable is static, because we have to update it on each frame. So to keep the behaviors system intact, we are going to use the BehaviorsManager :

public function new(pEntity: BasicEntity, pDynamic:Bool)
{
    if(world == null)
    {    
	world = new Space( new Vec2(0, 500) );        
        BehaviorsManager.getInstance().registerUpdater(globalUpdate);
    }
    // [...]
}

Now the globalUpdate() function is going to be called on each frame :

public function globalUpdate():Void
{
    world.step(1/30, 10, 10);
}

How to use it ?

Now to use this behavior with an entity, just add the NapeMovementBehavior to the behaviors list :

var e : BasicEntity = new BasicEntity(0, 0);
e.makeGraphic(32, 32, 0xFFFF0000); // create a rectangle
e.addBehavior( new NapeMovementBehavior(e, true) ); // add the behavior
add(e); // add the entity to the game

Here is a quick demo (drag the blocks) :

You can see the NapeMovementBehavior class here and the NapeEntity class here.

The post AGE – How to support physic engines appeared first on RevoluGame.

I’ve used the box2d version from haxelib, so don’t forget to add the following to your nmml file :

<haxelib name="box2d" />

I’ve implemented it with the behaviors system. So now we have a Box2dEntity that has a special Behavior (Box2dMovementBehavior) which initialize and update all the Box2D stuff.

For example, to define an entity :

import com.revolugame.age.display.Box2dEntity;
 
class Block extends Box2dEntity
{
    public function new (pX: Int, pY: Int)
    {
        super(pX, pY);
        makeGraphic(32, 32, 0xFF000000);
        initBox2dStuff(30, true, 0, 0, 0);
//                                     ^ friction
//                                  ^ restitution
//                               ^ density
//                          ^ if the entity is dynamic
//                     ^ conversion meters to pixels
    }
}

add(new Block(10, 50));

And that’s it !

The Box2D support works with Flash and C++ but needs some optimization for now.

Here is a quick example (click on the blocks to remove them) :

You can also apply a force or an impulse on your entity :

_b2dBehavior.applyImpulse(1, 2); // x, y
_b2dBehavior.applyForce(1, 2); // x, y

Another example (click on the oranges to apply a random impulse) :

For more information on Box2D, check out the flash documentation.

The post AGE – Box2D support appeared first on RevoluGame.

If we look at the wikipedia page, we can find a small explanation (it’s the best one I have found so far) :

A quadtree is a tree data structure in which each internal node has exactly four children. Quadtrees are most often used to partition a two dimensional space by recursively subdividing it into four quadrants or regions.

Why would I add it ?

The first approach to detect collisions between entities was to check for each entity if it collided with one of the others entities in the world. So you can use this method for a really small game, because the number of tests is not that big. But if you have, for example, a game with 100 entities moving around the screen, which can collide with each other, the number of tests between entities will be 100×100 !! And at least half (probably more) of them are not necessary.
The Quadtree allows you to eliminate those unnecessary checks.

How does it work ?

Each time an entity is added to the stage, we just have to look into the tree and find where to put it. A node is simply a rectangular zone with entities and other nodes in it.

So basically, any node will be divided in 4 nodes if more than n entities are completely contained within the node. For AGE, I have decided to use n = 2.

Here is a more concrete example :

Now, our tree has been set. Before checking for collisions, we have to query the tree to determine which entities are worth testing for a rectangular zone (the rectangular zone can correspond to the theoretical position of an entity, to know if we can move it or not). So, the quadtree is going to return each entity contained in a node that have an intersection with our request zone (we have to return entities that are not entirely in a sub node too).

Here is a simple example: use the arrow keys to move the black entity, and look at the nodes (especially when near the entity at the right of the world) :

The post AGE – QuadTree implementation appeared first on RevoluGame.

git clone https://github.com/po8rewq/AGE.git
ant

For now, you can run the following command to setup a new project :

haxelib run AGE

This will generate a basic structure for your project, with the nmml file, and the MonoDevelop – FlashDevelop project files.

Here is the list of all arguments you can use :

• -help : the help screen
• -output : /your/project/directory (default: the current directory)
• -name : Your Project Name
• -main : MainProjectClass (default: Main)
• -size : WIDTH HEIGHT (default: 800×600)
• -fps : FPS (default: 30)
• -bgColor : COLOR (default: 0xCECECE, you can use both 0xFF0000 and #FF0000 syntax)

This tool has only been tested on Linux …

The post AGE project setup appeared first on RevoluGame.

Why another engine ?

For the past two years I have built game engines, first for AS3, then for Haxe just to learn how it works. I have made games with Flixel, Flashpunk (for the most known), but each time there is something I am not confortable with (how collisions are handled in Flixel for example). So as they say, if you want something done, it’s better to do it yourself: that’s why I decided to create my own game engine, in order to use a tool that’s best suited for me. Despite the specificities I wanted to add, I tried to keep it as simple and as generic as possible.

Basic concepts : the behaviors

Ever since I discovered this behaviors concept, it seems that I can’t do without it!

But what is this ? It’s a small concept, but it’s so simple that I don’t understand why no other game engines (that I am aware of) use it.

For example, you can have a default jump behavior, and if the player catches a power up, you can enable the jet pack behavior :

class Player extends Entity
{
    private var _jumpBehavior : JumpBehavior;
    private var _jetpackBehavior : JetPackBehavior;
 
    public function new()
    {
        super(0, 0);
 
        _jumpBehavior = new JumpBehavior(this);
        addBehavior(_jumpBehavior);
 
        _jetpackBehavior = new JetPackBehavior(this);
        addBehavior(_jetpackBehavior, false);
    }
 
    public override function update()
    {
        super.update();
        if( powerup )
        {
            _jumpBehavior.disable();
            _jetpackBehavior.enable();
        }
    }
}

And all the player needs to do is in the update() function of the Behavior Class.
So simple, and you can add it to any entity you like.

By default, there is two behaviors : Collisions and Movements.
You can decide not to use them. But if you want collisions and movement, just activate them:

solid = true;
movable = true;

Follow the work on github.

The post AGE : Another Game Engine appeared first on RevoluGame.

First of all, what’s Spriter?

Spriter is a powerful animation tool for creating highly detailed 2d real-time game characters and effects in an intuitive, visual editor. The characters are saved to a format that allows game engines to produce higher quality visuals, while also using less video ram, and requiring less disk space per frame than traditional 2d sprite animation.

Spriter also provides several game specific features like collision boxes, and sound effect triggering, and saves to an open format that will be useable across many different game engines and platforms.

Spriter is currently in an usable beta state, but it’s really subject to changes, so the various implementations might stop working from a version to another, and they will need constant updating. The file format may also get incompatible across future versions, and the application may cause some crashes. For these reasons, Spriter is not production ready, but you can test it and play with it if you want.

How to use it ?

To use it, just install it from haxelib :

haxelib install HxSpriter

In your NME file, you have to define a sprites directory (just rename the directory where you have all your Spriter’s animations).

<assets path="path/to/the/sprites/directory" rename="sprites" />

Now, if you want to use the library :

var spriter : BitmapSpriter = new BitmapSpriter('BetaFormatHero.SCML', 100, 300);
spriter.playAnimation('idle_healthy');
addChild(spriter);

Or with the Flixel port :

var spriter : FlxSpriter = new FlxSpriter('BetaFormatHero.SCML', 100, 300);
spriter.playAnimation('idle_healthy');
add(spriter);

Or with HaxePunk :

var spriter : HxpSpriter = new HxpSpriter('BetaFormatHero.SCML', 100, 300);
spriter.playAnimation('idle_healthy');
addGraphic( spriter );

You can also checkout the repository : https://github.com/po8rewq/hxSpriter.

The post HxSpriter released appeared first on RevoluGame.

Le rêve de tout développeur est en train de se réaliser : developper une application, et la publier sur toutes les plates formes ! C’est enfin possible grâce à haXe et NME.

Quelques précisions :

Avant d’aller plus loin, voyons un peu de quoi il s’agit. Si vous êtes familié avec haXe, vous ne l’êtes peut etre pas avec NME.

NME (pour Neko Media Engine) est un framework open source permettant de publier une application vers tout type de plate forme (windows, linux, android, ios, et j’en passe). Ce framework s’appui sur le langage haXe, ce qui permet d’avoir une syntaxe proche de l’Actionscript. NME s’occupe ensuite de mapper tout ca, et de publier pour la plate forme voulue.

Nous ne nous interresserons pour le moment, qu’à la plate forme android.

Voici un schéma permettant de comprendre le fonctionnement :

(source: www.haxenme.org)

NME va utiliser le compilateur haxe, avec la librairie HXCPP pour générer les classes C++. La compilation va se poursuivre via le SDK et le NDK Android.

Et pour terminer, en passant par une tache Ant, le processus de compilation va se terminer et lancer (si besoin) l’installation sur le périphérique Android.

Installation :

Voici la liste des étapes à suivre pour avoir un environnement de travail fonctionnel. Je suis sous linux, mais sous n’importe quelle plate forme, l’approche reste à peu de chose prêt la même.

Tout d’abord, haxe : télécharger l’installeur sur le site haxe.org, décompresser puis :

haxelib install hxcpp
haxelib install nme
haxelib install gm2d

Il nous faut maintenant récuperer le SDK et le NDK android (menu de gauche pour le NDK) :

wget http://dl.google.com/android/android-sdk_r12-linux_x86.tgz
wget http://dl.google.com/android/ndk/android-ndk-r6b-linux-x86.tar.bz2

Le JDK java :

sudo apt-get install openjdk-6-jdk

Et enfin, ant

sudo apt-get install ant1.8

Une fois que tout est téléchargé/installé, nous devons setter les variables d’environnements :

ANDROID_SDK
ANDROID_NDK_ROOT
ANDROID_HOST=linux_x86 [linux only]
JAVA_HOME=/usr/lib/jvm/java-1.6.0-openjdk

Petite application de test

Le code :

package ;
 
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.geom.Rectangle;
import flash.Lib;
 
class Sample extends Sprite
{
    public function new()
    {
        super();
 
        Lib.current.stage.align = StageAlign.TOP_LEFT;
        Lib.current.stage.scaleMode = StageScaleMode.NO_SCALE;
 
        trace('Hello World');
 
        var rect : Sprite = new Sprite();
        rect.graphics.beginFill(0xFF0000);
        rect.graphics.drawRect(0, 0, 200, 200);
        rect.graphics.endFill();
        addChild(rect);
    }
 
    public static function main ()
    {
        Lib.current.addChild( new Sample() );		
        #if nme
        Lib.current.addChild(new nme.display.FPS() );
        #end
    }
}

Le fichier de configuration (myConfigFile.nmml) :

<project>
    <app title="Sample from revolugame" main="Sample" />
 
    <window width="0" height="0" orientation="landscape" fps="60" 
            background="0xffffff" resizeable="true" hardware="true" />
 
    <set name="BUILD_DIR" value="Export" />
    <classpath name="src" />
 
    <haxelib name="nme" />
 
    <target name="android"/>
 
    <ndll name="std" />
    <ndll name="regexp" />
    <ndll name="zlib" />
    <ndll name="nme" haxelib="nme" />
</project>

Lancer la compilation :

haxelib run nme test myConfigFile.nmml android

L’option test correspond à build suivi de run, mais il est également possible de ne lancer que l’une de ces options.

Pour tester l’application en flash, suffit de remplacer android par flash.

The post NME – Premiers pas sous android appeared first on RevoluGame.