Posts tagged Haxe

800px-Open_Data_stickers

[FR] L’Open Data : un service pour tous

0
2 weeks ago
by Adrien in

opendata1

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 …
(more…)

iconOneGameAMonth

Planets experiment

1
2 weeks ago
by Adrien in

So now, it’s officially the 1PAM (one prototype a month).

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.

screenshotsaturday

cordova_128

Pull-to-refresh with Phonegap

0
2 months ago
by Adrien in ,

It’s been a while since my last post. I’ve been working on some projects that are quite time-consuming; that’s why I can’t (despite having 3 prototypes) work much longer on games for the one game a month challenge.

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.

nape

A quick start with nape and tilelayer

0
5 months ago
by Adrien in ,

Recently, I started a mobile game with NME, and I wanted to give a try to nape. Since I’ve seen the NME’s runnermark, I’ve wanted to try the tilelayer library too. So why not dot it at the same time !

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

(more…)

AGE – How to support physic engines

0
7 months ago
by Adrien in ,

In the previous post, we have seen how to use the Box2D support into the AGE engine. Now I just want to show you how simple it is to add a new framework/engine support.

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.
(more…)

Box2D_logo

AGE – Box2D support

1
7 months ago
by Adrien in , ,

Since Box2D is one of the most used physics engine, I’ve started to implement it into the AGE game engine.

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

<haxelib name="box2d"></haxelib>

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.
(more…)

haxeJS

Case study: mobile app with Haxe

8
10 months ago
by Adrien in

Problematic

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.
(more…)

tree2

AGE – QuadTree implementation

3
11 months ago
by Adrien in ,

What is the QuadTree ?

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 :

The world has 1 entity, the entity is added to the root node (depth = 0).

 

A second entity is added, so the world has been divided. The first entity (the red one) is pushed down to the top left node, and the second one is pushed down to the top right node (depth = 1).

 

A third entity is added to the stage. This one is contained in the top left node. This node has already another entity, so we just divide this node in 4. Now the first entity (the red one) does not fit entirely in a sub node, so this entity is going to stay on the same node (top left at depth 1). But the other entity (the blue one) is pushed down to the bottom right node at depth 2. For the last entity, nothing has to change for now.

 

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).
(more…)

AGE project setup

2
11 months ago
by Adrien in

Since the 0.2 version, you can quickly and easily install AGE in haxelib, just by using the ant task :

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 …

AGE : Another Game Engine

12
1 year ago
by Adrien in ,

I’ve tried a lot of game engines since I’ve started making games. And I’ve never been completely happy with them… so I have decided to develop and share my new Haxe/NME game engine.

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.

Go to Top