This time, with my coworkers from Atelier 801, we decided to work together, not on the same game, but at the same place, the company’s headquarters.
It was really a good experience, and it helped me to focus on working.

As I mention in my “I’m in” post, I’ve used Haxe to make a flash game.

You can find the game here : What the fish !! and the vote form here.

How I prepared

• For each theme in the final theme voting round, I’ve tried to come with a game concept. So before the beginning of the contest, I had lots of ideas.
• I went to bed early the day before, so I was able to get up in the early morning.

What went right

• I found a really simple (minimalist) game idea, where you have to kill fishing boats with potatoes (wait… what??). And of course, do not kill the pink salmons ;)
• I made all the sprites really quickly, because I didn’t want to lose time on this.
• I make flash games for a living, so the code is not really what’s bothering me the most.
• Working with other people also participating to the Ludum Dare contest sets up a really nice working atmosphere.

What could have been better

• The theme :D, because I had other (great?) ideas, but ideas that didn’t really fit with this theme
• To have a little more time…

This time I will be at Atelier801‘s headquarters (in Lille, France), with my coworkers who will also participate !

I will use :

• Haxe
• As3fxr for the sound
• Gimp for the graphics
• Tiled for the level design (if I need it)

For one of my apps using Phonegap and JQuery Mobile, I needed a list with the “pull to refresh” fonctionnality. After somes searchs and tests, I ended up using the Jquery Mobile iscrollview widget, that works pretty well.

So here is a quick start for this feature.

First of all, what is this widget for ?

This widget is a JQueryMobile version of the iScroll widget.

According to the autor website :

The script development began because mobile webkit (on iPhone, iPad, Android) does not provide a native way to scroll content inside a fixed width/height element.

By the way, this plugin allows you to use a lot of features like :

• Pinch / Zoom
• Pull up/down to refresh
• Improved speed and momentum
• Snap to element
• Customizable scrollbars

The code

Assuming that you have a Phonegap project already initialized, you need to add to your main html file :

<link rel="stylesheet" href="css/jquery.mobile.iscrollview.css"/>
<link rel="stylesheet" href="css/jquery.mobile.iscrollview-pull.css"/>
 
<script src="js/iscroll.js" type="text/javascript"></script>
<script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>

And a page like this :

<div data-role="page" id="main" data-position="fixed">
    <div data-role="header">
        <h1>Test iScroll</h1>
    </div>
    <div data-iscroll="" data-role="content" class="iscroll-wrapper">
        <div class="iscroll-pulldown">
            <span class="iscroll-pull-icon"></span>
            <span class="iscroll-pull-label"></span>
        </div>
        <ul data-role="listview">
            <li>Item 1 culpa aut nam qui</li>
            <li>Item 2 minima quam temporibus quidem</li>
            <li>Item 3 commodi sint facilis numquam</li>
        </ul>
        <div class="iscroll-pullup">
            <span class="iscroll-pull-icon"></span>
            <span class="iscroll-pull-label"></span>
        </div>
    </div>
</div>

The “list-view” inside the “data-iscroll” tag will now have the “pull to refresh” feature.
If you need to do some actions (like refresh the content, …) you have to listen for some events :

var document = untyped __js__("document");
document.addEventListener("deviceready", function(e) 
{
    new JQuery(function() 
    {
        new JQuery(".iscroll-wrapper").bind(
        {
            iscroll_onpulldown: onPullDown,
            iscroll_onpullup: onPullUp
        });
    });
});

Here is the complete list of events for the pull-to-refresh feature :

• iscroll_onpulldown
• iscroll_onpullup
• iscroll_onpulldownreset
• iscroll_onpulldownpulled
• iscroll_onpulldownloading
• iscroll_onpullupreset
• iscroll_onpulluppulled
• iscroll_onpulluploading

The event callbacks takes two arguments :

onPullDown(event: Event, data: Dynamic):Void

The event argument is a basic JQuery Event.
The data argument has only one member : iscrollview, that is the reference to the iscrollview object that made the callback.

And after that, if you want to hide the top or bottom part, just refresh the componant :

data.iscrollview.refresh();

Customization

You can also custom the pull label text. All these options has default values, but you can custom them all :

• pullDownResetText (default: “Pull down to refresh…”)
• pullDownPulledText (default: “Release to refresh…”)
• pullDownLoadingText (default: “Loading…”)
• pullUpResetText (default: “Pull up to refresh…”)
• pullUpPulledText (default: “Release to refresh…”)
• pullUpLoadingText (default: “Loading…”)

If you want to change those values from the html, just set the correct attribute :

<span class="iscroll-pull-label" 
      data-iscroll-loading-text="Custom loading text" 
      data-iscroll-pulled-text="Custom pulled text">Custom reset text</span>

For more informations, here is the place you want to go.

The goal is to publish at least one game by month for a year (so 12 games … if the calendar has not changed since the last time I checked).

Why ?

In my (short) indie developper’s life, finishing games is like the most difficult thing to do, mainly because of the lack of motivation. On my computer, I have a lot of prototypes … but not a real game (by real, I mean finished).
So I hope this challenge will help motivating me, by showing my work to the whole community, and will allow me to improve my skills.

I’m not really a good 2D artist, but I’m really trying to upgrade this skill, so that I can make games without being limited by the design. I am aware that I’m not going to become a real artist, but if I can make basic pixel assets, it will be a fantastic move !

Earn XP for doing what you love: making games!

This challenge has an XP system based on the achievements you won. All this system is juste for fun, there is no gain, just motivation and pride (at least if games are published ^^).

To show you all of my progress, I will post updates about my games on this page : http://revolugame.com/one-game-a-month/. Don’t hesitate to comment the games !

My profile page : onegameamonth.com/RevoluGame.

Let’s start with the first game !!

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 );

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.

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.

I needed to look for the best technologies to use for a cross platform mobile application.
I need to develop a simple application, linked with all Android/Iphone/Windows tools like the calendar, contacts, etc… and of course, the application must have a simple and integrated UI (as close as possible to the OS).

My first thought was to give NME a try for a non game application.

NME

NME is my favorite tool for a game or a big application (RIA) that needs good performances (when you compile, it produces C++ code and not Java or objective-C).

NME is not 100% integrated with all the OS. You can do it, but you have to code specific parts for each OS, and you have to know C++ and that’s not my case right now.

And finally, there is no simple UI framework that can be used with a cross platform mobile app (and for a commercial project, I’m not comfortable with using a young library like Cocktail or HaxeAsWing).

I’ve heard about PhoneGap, a simple tool that lets you code JavaScript and deploy it to all the most used mobile OS platforms. So why not give it a try?

What is PhoneGap ?

Developing with PhoneGap gives you the freedom to create mobile applications for iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian using the web code you know and love: HTML, CSS and Javascript.

How is PhoneGap working?

To deploy to a specific platform, you are going to need the SDK, and what’s best to compile and deploy (for Windows it’s Visual Studio, for the others you can just use the terminal with the SDK tools).

For each platform (I promise, that is the last time I’m saying that) you have to create a default project (look at the Getting Started Guide).

Now that you have the structure, we can start the JavaScript part.

Every JS (and html/css) files must be in the www directory.

Since I’m using Haxe, I need to generate all the externals for using code completion.
Here is an example of what you have to do :

@:native("window.device")
extern class Device 
{
	//public static var name	(default, null) : String;
	public static var cordova	(default, null)	: String;
	public static var platform	(default, null)	: String;
	public static var uuid		(default, null)	: String;
	public static var version	(default, null)	: String;
}

Now in your JS project, if you want to display your uuid :

js.Lib.document.getElementById("uuid").innerHTML = Device.uuid;

And the HTML part :

<h4>UUID: <span id="uuid"> &nbsp;</span></h4>

PhoneGap allows you access to all the device functionalities. Look at the documentation for more details.

So now we have a basic project working, we have to search for an UI framework. And since we can use any JS framework … we have plenty of choices.

JavaScript UI framework

I personally have selected SenchaTouch for its community and its maturity.

Like PhoneGap, you have to generate externals. But since it’s a bigger library, we must automate that. So I’ve searched on the web to see if someone had already done that, and I found on Github externals that has been generated by Joshua Granick.

But there are some errors that prevent the compilation. After some research (and thanks to the Google Haxe Group) I found how to fix all the errors. There are two problems :

• args: must be changed to ?args: Array< Dynamic >
• The Array and the String class must be removed

Just to be sure I have the last SenchaTouch version, I’ve generated them by using (thanks again to Joshua) BuildHX. Since this tool is only working on Windows, I’ve updated the sources to use the Linux version of JSDuck.

Here is the package with all the externals classes for the last version of the SenchaTouch Framework (2.0.1.1).

You can now test the Getting Started Project. You can download here the Haxe portage (hosted on haxejs).
There are some minor changes that need to be made for it to be working (It’s just some parameters that are missing).

Conclusion

From my point of view, PhoneGap is what’s better for me, mostly because of its HTML5 support.
For the rest, I prefer the SenchaTouch approach and of course Haxe JS.

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) :

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 …