Malgré les efforts de l’État (etalab, data.gouv.fr), nous pouvons observer une grande disparité entre les initiatives des différentes communes françaises concernant l’open data.

De grandes villes ouvrent des portails accessibles par tous et mis à jour très régulièrement (pour ne pas tous les citer, on peut trouver Nantes, Montpellier, Toulouse et même Paris) alors que d’autres sont relativement en retard (non non, je ne parlerai pas de Lille…).

De mon point de vue, le partage de données publiques peut être d’une très grande utilité pour la collectivité. Des particuliers, voire même des entreprises, développent, depuis une initiative personnelle ou par le biais de concours (Dev’Kings, Dataconnexions…), des applications qui peuvent rendre la vie de tous les jours beaucoup plus simple.

Par exemple via des applications indiquant les emplacements de parking, les vélos en libre service, les transports en commun, etc. (la SNCF, la RATP, ou JC Decaux ayant ouvert leurs données récemment). Voire des applications touristiques, mais encore et surtout des statistiques.

Par exemple, voici une petite démo de ce qui peut être fait rapidement et qui pourrait être très utile dans certains cas, même si bien sûr je ne vous souhaite pas que ce genre de service vous soit un jour utile ;). J’ai décidé de prendre les informations concernant les défibrillateurs de la ville de Montpellier et de les afficher sur une carte, en y ajoutant la géolocalisation de l’utilisateur. Service tout bête qui ne m’a pas pris plus d’une heure (en comptant le nettoyage des données) pour afficher les positions des défibrillateurs sur une carte (via Leaflet).

Et pourquoi ne pas en faire une application mobile, et en y ajoutant un guide sur l’utilisation d’un défibrillateur, et un bouton pour appeler rapidement les secours ?
Voilà ce qu’il serait possible de faire, simplement en partant d’une liste de coordonnées GPS mis à disposition par la ville de Montpellier.

Pour prendre un exemple concret, récemment j’ai développé une application permettant aux utilisateurs du réseau V’Lille de vérifier la disponibilité de vélos proches de leur position (Lille Aux Vélos).
Il m’a été difficile de me procurer les informations dont j’avais besoin. A aucun moment Transpole ne fait mention de son API ni même de ses données alors que tout est accessible sans restrictions…

Pourquoi développer cette application me direz-vous ? Pour la simple et bonne raison que Transpole a jugé utile de développer une application sur iPhone, mais de simplement faire une application qui contient le site mobile (lent et pas vraiment utilisable) sur Android… Et puis, comme on dit : “on n’est jamais mieux servi que par soi-même” ;).

Alors on peut se demander pourquoi de grandes villes ou grands groupes ne font pas un petit effort qui irait certainement dans leur sens, en permettant à d’autres personnes de développer des services annexes aux leurs et donc de faciliter la vie de tous les jours à tant de gens …

• Trouver ma position (si inaccessible le centre de Montpellier est utilisé comme référence)
• Trouver le défibrillateur le plus proche

The post [FR] L’Open Data : un service pour tous appeared first on RevoluGame.

It’s a simple conquest game, my first targeting HTML5. So it was more an excuse to update my game engine, so that it can compile to js.

AGE is still an Haxe framework, but now NME is not required anymore.
The engine will be compatible Flash (again) soon.

Here is the link, if you want to test it.

The post Planets experiment appeared first on RevoluGame.

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…

The post Ludum Dare #26 : Post mortem appeared first on RevoluGame.

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)

The post Ludum Dare #26 : I’m in appeared first on RevoluGame.

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 post Pull-to-refresh with Phonegap appeared first on RevoluGame.

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 !!

The post One Game A Month Challenge appeared first on RevoluGame.

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.

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.

The post Case study: mobile app with Haxe appeared first on RevoluGame.