Citrus Engine on Nape and physics performance improvement

AS3, Box2D, Citrus Engine, Flash, Games, Haxe, Nape, NME, Physics, Programming, , , , , , , , , ,

Hi folks! Since my studies are over and my new portfolio online, I have time to focus on personal projects. Yep, it was time to contribute again to the Citrus Engine. I’ve worked 3 days at full time focusing on its big issue : mobile performances. I’m glad to say that now they are just an old memories!

6 months ago, I’ve made the CE compatible with Stage3D thanks to Starling and added some cool stuff. CitrusEngineV3 BETA 1 has been downloaded 3047 in 6 months, that’s not bad! However it didn’t see lots of Stage3D game, because it was missing the point : people wants to make mobile games.

You will find all the sources at the end.

Continue reading Citrus Engine on Nape and physics performance improvement →

New portfolio online

AngularJS, JavaScript, JQuery, KineticJS, Profile, , ,

Before starting to seek a new job, preferably at Lyon (France), it was about time to make a new portfolio! This last two years, I worked a lot with Flash, Php and Objective-C. I wasn’t up to date on the last web tools, so I decided to make my new portfolio in HTML5/CSS3 and try some new tools!

I’ve used the HTML5 Boilerplate as a template to start, resetting CSS style and offering a strong HTML5 base page. Then I gave AngularJS a try. It’s a JavaScript MVC framework powered by Google, very powerful. For the background, I used the canvas tag. At first, I started code it from scratch but there was an opportunity to test an other framework : KineticJS. It’s very easy to handle coming with a Flash background. I’ve also give a try to the new GreenSock Animation Platform which handles TweenLite/TweenMax for JavaScript! And finally using Signals in JavaScript.

The “classic” web has greatly evolved this last years, that was cool to play with those new features/tools!

Tribus, Graduation Project

Chipmunk, Games, iOS, Objective-C, Physics, Profile, Programming, Sparrow, , , ,

On Wednesday 20 th, I made my last orals for school. Some weeks ago, I’ve finished my training at Swad‘s web agency in Annecy. Since Wednesday my sandwich course at Gobelins school (Annecy) is finished, and now I’m in “holiday”. It means that I’m working on my new Portfolio and looking for a job probably at Lyon, France 😉

Let me introduce Tribus, the first game which use bus public transportation as gamification!
We were 4 people behind this project, Pauline the Graphic Designer, Coraline the Designer, Lory the Project Manager / Developer and me as the lead Developer.
Tribus is based on a simple observation : public transportation are boring time for many people. The idea was to play in real time with the bus public transportation and break the boredom thanks to the Gamification.
The Tribus’ concept is to gamify the bus route using its own elements : location, speed, line, bus stop… and offer a game!

The concept was there, but what type of game offer? A real time massive multi-players space opera? Impossible for a small team in 4 – 6 months, we aren’t Electronic Arts. A survival game with zombies? I loved this idea, it could have been awesome if we have worked on subway : safe point, network lost… all the ingredients were already present. However we wanted a game for everyone : fun, easy to play, stress-free… yep, one more casual game.

Tribus is a Canabalt type of game, it is close to Jetpack Joyride. But how are bus elements injected in the gameplay?
It is very difficult to have information on the bus, bus’ companies don’t disclose these informations. So we used the smartphone’s GPS. Thanks to it we could know our position and so the bus one. We have located bus stop in a database and so we knew if a user follow the bus route and then suppose that he is using the bus! The GPS is also used to know the bus speed and thus change the speed of the game.

We developed for iPhone, using Chipmunk and Sparrow for the game (not the app interface) and made a simple port of the Citrus Engine. Since this is my first project using Objective-C the port is not very “user friendly” and it can be improved a lot. Anyway, that was a very rewarding experience.
All the source code is available on GitHub.

A short video :

Screenshots :

Workspace & Workflow

Profile, Programming, , ,

A simple post to share my configuration and softwares that I mostly used.

Devices :
– an iMac on Mountain Lion and an Acer laptop running Windows 7.
– iPhone 4S.
– iPad 3.
– Nexus 7.

Programming
– Eclipse & FDT : Java – Android & AS3.
– Unity3D.
– IntelliJ : web stuff and Haxe.
– Xcode.
– Sublime Text 2 : quickly edit/view some code.

Graphic Tools
– Adobe Flash Pro
– Adobe Photoshop
– ImageOptim : optimizes images by finding best compression parameters and by removing unnecessary comments and color profiles.
– Raskin : it may be useful when you have many big pictures (like levels) to have an overview of the project.

Software for games
– ParticleDesigner.
– GlyphDesigner : bitmap typo.
– TexturePacker : sprite sheets maker.
– PhysicsEditor : determine perfect collision shapes for Box2D, Chipmunk and Nape!

Modeling
– MySQL Workbench.
– SQLite Database Browser.

Utilities

– Dash : the awesome documentation browser tool!
– LiveReload : don’t press even more F5 on localhost websites!
– TotalFinder : how can you live without tabs on your finder ?
– Cinch : windows 7 management window for OSX!
– Droplr : quickly share files.
– Switch : audio sound converter.
– Adobe Shadow.

Sparrow Framework, AnimationSequence class

iOS, Objective-C, Programming, Sparrow, , , , ,

Coming from AS3 & Starling framework, it is really easy to handle Sparrow. I was surprised to don’t find a class to manage several animations (like the gotoAndPlay in as3) in Starling and it is the same with Sparrow. So I’ve ported the AnimationSequence class (used in the Citrus Engine V3) from Starling to Sparrow.

Basically, the class extends SPSprite with all SPMovieClip animations added into a Dictionary which are addChild/removeChild (with the Juggler).

An AnimationSequence is defined with a texture atlas, an array with animation states and a simple string with the first animation :

AnimationSequence *mc = [[AnimationSequence alloc] initWithTextureAtlas:[SPTextureAtlas atlasWithContentsOfFile:@"Hero.xml"] andAnimations:[NSArray arrayWithObjects:@"walk", @"jump", @"idle", nil] andFirstAnimation:@"idle"];

To change an animation :

[mc changeAnimation:@"walk" withLoop:YES];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#import "SPSprite.h"
 
@interface AnimationSequence : SPSprite {
 
    NSMutableDictionary *mcSequences;
 
    SPTextureAtlas *textureAtlas;
    NSArray *animations;
    NSString *previousAnimation;
}
 
@property (nonatomic) NSMutableDictionary *mcSequences;
@property (nonatomic) SPTextureAtlas *textureAtlas;
@property (nonatomic) NSArray *animations;
@property (nonatomic) NSString *previousAnimation;
 
- (id) initWithTextureAtlas:(SPTextureAtlas *) textAtlas andAnimations:(NSArray *) multiAnimations andFirstAnimation:(NSString *) firstAnim;
 
- (void) changeAnimation:(NSString *) animation withLoop:(BOOL)animLoop;
 
@end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

//
//  AnimationSequence.m
//  ChipmunkWrapper
//
//  Created by Aymeric Lamboley on 06/03/12.
//
 
#import "AnimationSequence.h"
 
@implementation AnimationSequence
 
@synthesize mcSequences, textureAtlas, animations, previousAnimation;
 
- (id) initWithTextureAtlas:(SPTextureAtlas *)textAtlas andAnimations:(NSArray *)multiAnimations andFirstAnimation:(NSString *)firstAnim {
 
    if (self = [super init]) {
 
        textureAtlas = textAtlas;
        animations = multiAnimations;
        mcSequences = [[NSMutableDictionary alloc] init];
 
        for (NSString *animation in multiAnimations) {
 
            if ([textureAtlas texturesStartingWith:animation].count == 0) {
                NSLog(@"One object doesn't have the %@ animation in its TextureAtlas", animation);
            }
 
            [mcSequences setObject:[[SPMovieClip alloc] initWithFrames:[textureAtlas texturesStartingWith:animation] fps:25] forKey:animation];
        }
 
        [self addChild:[mcSequences objectForKey:firstAnim]];
        [[SPStage mainStage].juggler addObject:[mcSequences objectForKey:firstAnim]];
 
        previousAnimation = firstAnim;
    }
 
    return self;
}
 
- (void) changeAnimation:(NSString *)animation withLoop:(BOOL)animLoop {
 
    if (!([mcSequences objectForKey:animation])) {
 
        NSLog(@"One object doesn't have the %@ animation set up in its initial array?", animation);
    }
 
    [self removeChild:[mcSequences objectForKey:previousAnimation]];
    [self.stage.juggler removeObject:[mcSequences objectForKey:previousAnimation]];
 
    [self addChild:[mcSequences objectForKey:animation]];
    [self.stage.juggler addObject:[mcSequences objectForKey:animation]];
    ((SPMovieClip *)[mcSequences objectForKey:animation]).loop = animLoop;
    ((SPMovieClip *)[mcSequences objectForKey:animation]).currentFrame = 0;
 
    previousAnimation = animation;
}
 
- (void) dealloc {
 
    [self removeChild:[mcSequences objectForKey:previousAnimation]];
    [self.stage.juggler removeObject:[mcSequences objectForKey:previousAnimation]];
}
 
@end

Be careful, this version uses the ARC mode!

The Citrus Engine goes on Haxe NME, welcome to the CitruxEngine

AS3, Box2D, Citrus Engine, Flash, Games, Haxe, NME, Physics, Programming, , , , , , , , , , ,

One month ago I started to work on the CitruxEngine. I was very confident with Haxe performance on mobile and NME cross platform opportunities. And now, I can say those are awesome!

In April 14-15th, I was in Paris to assist to the Haxe conf 2012. It was really cool, Silex Labs has made a good job! Conferences were very interested and the community greatly friendly. And I had the opportunity to make a lightning talk concerning my contribution to the Citrus Engine 2D game framework and its port on Haxe NME. The presentation was a bit from scratch, but that was a good experience! I’m very happy to be the first to start the lightning talk, since there were very serious projects 😀

CitruxEngine Github.
CitruxEngine Demo. Simple demo which have been tested on Flash & CPP (using left/right key and spacebar) and iOS (touch & accelerometer). There are sound, animations (idle, walk and jump) and physics.
The port is currently not finished!

I will not present some code here. If you are already familiar with the Citrus Engine, there will be no problem. Take a look on the example on Github.

HTML5
When I started the port, I would the CitruxEngine be as cross platform as possible. HTML5 is promising, and Niel Drummond the man behind Jeash has made an incredible job! However I found that the Haxe NME Box2D port has not very good performance with HTML5. So I’ve dropped the HTML5 target at the moment, but I keep an eye on Jeash!

Box2D
Thanks to Haxe NME, Box2D runs very well on mobile! This is mostly the reason why I’ve started the CitruxEngine. The Citrus Engine uses the AS3 Alchemy version of Box2D which has some differences with the original. It seems there is a bug with the Haxe NME Box2D port : the beginContact & endContact listeners are fired all the time if a dynamic body is on a static body (like a hero on a platform), whereas it fires only once if there are 2 dynamics bodies. This behavior is blocking me.

SpriteSheets
I made my test with the spritesheet haxelib which uses SpriteLoq. At the moment it works well. I’ve not made serious test with animations.

Level Editor
I love how the Citrus Engine handles Flash Pro as a Level Editor. I would like the Haxe NME version handles it as well. But at the moment we can’t read AS3 code in a SWF file (it is the way that class and properties are defined), so I need to think to an external way. Maybe it’s time to reconsider the Level Architect!

Console
The console is really a cool feature of the Citrus Engine, it will be available in the CitruxEngine too. I’ve started to implement it, but it’s not ready yet.

I will continue to work on the CitruxEngine, but now I’ve to focus on my school project using Objective-C, it’s really hard to get back when you have tested Haxe power ! In less than two months I will be graduate and looking for a job, future is exciting.

Thanks to postite & elsassph for their help!

From Box2D to Chipmunk

Box2D, Chipmunk, Physics, ,

Hey there, I’ve been very busy this last weeks working hard on my 2nd school year project, a mobile game. In a few weeks, I will explain it, but for now let’s do some programming stuff!
The game is a side-scrolling 2D game. See Canabalt or Jetpack Joyride, they are great games!
Developing for iOS, I used Sparrow framework. It is awesome, and really easy to learn coming from AS3 & Starling.

Why did I develop in Objective-C since AIR 3.2 is out ? Refer to my previous post about my personal preference and the future of web development ; I decided to learn Objective-C and this project is really a good opportunity! I have followed the news about HTML5 and my opinion didn’t change… Moreover, for a long range project it is preferable to have the best workflow!

Since I used the Citrus Engine, I felt in love with physics engine and particularly Box2D. It is very useful & powerful for game development, but it has some hard constraints. With this project, I wanted to try an other physics engine. My choice was Chipmunk.

This post will not compare features, there are already a great post there, but how to move quickly from Box2D to Chipmunk. Thanks Scott Lembcke (Chipmunk’s author), for your clarifications.

QUICK OVERVIEW :
– Box2D : Box2D is an open source C++ engine for simulating rigid bodies in 2D. Box2D is developed by Erin Catto and has the zlib license. While the zlib license does not require acknowledgement, we encourage you to give credit to Box2D in your product. The manual.
– Chipmunk : Chipmunk is a fast and lightweight 2D rigid body physics library written in C. The documentation.

UNITS :
Box2D uses meter/kilogram/second (MKS), Chipmunk uses pixel. There is no units for the mass, you defined the value you want, but stay logical between objects. The time is not clearly mentioned in Chipmunk, it doesn’t express in seconds but floats. Box2D uses real world units because it has a number of tuning threshold values, and the default values are set to be sane values for life-sized objects. Chipmunk’s algorithms mostly avoid the need for tuning values so that you can use whatever arbitrary units makes most sense to you (pixels, meters, inches, etc). Likewise for time and mass.

SET UP WORLD :
Box2D uses the term “world” whereas Chipmunk uses “space”. Both defined gravity & iteration step. Body’s gravity is difficult to manage in Box2D and Chipmunk if you want your objects to have a different one. You may set up a gravity(0, 0) to your world/space and manage the gravity into each object using a variable and updating its velocity.

REGISTRATION POINT :
Both have body’s center as registration point.

RIGID BODIES :
Box2D uses two objects to define a body : body (user data, position, velocity, forces, torques, impulse…) & bodyDef (body type definitions, and init values). Chipmunk uses only one object defining mass (which is automatically calculated in Box2D) and moment which represent inertia for the body.
Box2D has 3 body types : static, kinematic, dynamic ; Chipmunk kinematic bodies are named rogue.

FIXTURES :
Box2D fixture/fixtureDef defined shape, density, friction, restitution and filters. There is no fixture in Chipmunk. Restitution is the elasticity property on shapes. It doesn’t store density on a per shape basis though. You have to calculate that into the mass manually..

SHAPES :
In Chipmunk, you can attach as many shapes to a single body as you need to in order to define a complex shape. Shapes contain the surface properties of an object such as how much friction or elasticity it has. It means than you can create a simple platform body and add all the shapes to it even if they are not close (a border bottom, a wall…).

COLLISIONS :
With Box2D you can know dynamically which is the other body you collide, in Chipmunk you may use this method too. You may also defined a collision handler’s function between the typeA and the typeB with function references defining collision start/end & pre/post solve. In Box2D you managed collision thanks to the fixture, in Chipmunk you add the “listener” to the space.

JavaScript slider made with haXe and JQuery

Haxe, JavaScript, , , ,

After playing with haXe and Php, it was time to try haXe and JavaScript! I used the JQuery library included in haXe. For more information on haXe JS take a look on its website.

Click here to see the slider in action. It uses keyboards and a timer. The slider centers a picture with a 50px margin, there is also a red or green filter.

Continue reading JavaScript slider made with haXe and JQuery →

Using native Php with haXe Php

Haxe, Php, , , ,

Recently I had some time to dig more with haXe Php. The major question was how does it integrate with existing native Php ? I’m glad to say that it works fine!
Let’s start a quick overview of our native Php file test (Simple.class.php) :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

<?php
function makeSimple($text) {
    return new Simple($text);
}
 
function affichText($text) {
    echo $text;
}
 
class Simple {
 
    public $text;
    public $tab;
 
    public function __construct($text) {
        $this->text = $text;
        $this->tab[0] = "index 0";
        $this->tab[1] = "index 1";
    }
 
    public function doPrint() {
        echo $this->text;
    }
 
    protected function changeText($text) {
        $this->text = $text;
    }
}
 
class Simple2 extends Simple {
 
    public function __construct($text) {
        parent::__construct($text);
    }
 
    public function makeChange($text) {
        $this->changeText($text);
    }
 
    public function associativeArray() {
 
        $tab["num1"] = "number 1";
        $tab["num2"] = "number 2";
        return $tab;
    }
}
?>

There are a simple function, some inheritance stuff and an associative array which is very common in Php.

Now the haXe part :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

package;
 
import php.Lib;
 
class Test {
 
    static function main() {
 
    	new Test();
    }
 
    public function new() {
 
        // import php file
    	untyped __call__("require_once", "Simple.class.php");
 
        // call a php function with an arg
    	untyped __call__("affichText", "first msg </br>");
 
        // create a php object with an arg
    	var myPhpObject:Dynamic = untyped __call__('new Simple2', 'second msg </br>');
 
        // manipulate the object
    	myPhpObject.doPrint();
    	myPhpObject.makeChange("some new text </br>");
    	myPhpObject.doPrint();
 
        // print an array
        Lib.print(myPhpObject.tab);
 
        // trace the index 0 value
        trace(myPhpObject.tab[0]);
 
        // make some native php
        untyped __php__("echo '</br>php native from haXe !</br>'");
 
        // we need a Hashtable to parse an associative array from php :
        var phpAssociativeArray:Hash<String> = Lib.hashOfAssociativeArray(myPhpObject.associativeArray());
 
        // trace the key value num2
        trace(phpAssociativeArray.get("num2"));
    }
 
}

The output log : 

first msg
second msg
some new text
["index 0", "index 1"]Test.hx:32: index 0
php native from haXe !
Test.hx:41: number 2

If you are using everyday libraries/tools written in Php, you may wrap them with haXe for more comfort. Take a look there : Wrapping External PHP Libraries & the haXe Magic.

Unfortunately, there isn’t lots of ressources/tutorials for haXe Php on the website, I will update this post if I go deeper in haXe Php development. It is very pleasant to write Php this way. Give it a try!
haXe API.

And because memes are fashion :

haXe workflow with Sublime Text 2, Php & nme examples

Haxe, NME, Php, Programming, , , ,

A good IDE is the developer’s best friend. FDT is my favorite one to code AS3 stuff, however I’m not very satisfied with haXe integration… it could be better. A good source code editor is also an amazing tool. I’ve found Sublime Text 2 some months ago, and it sounds always awesome to me. There is an extension which add Package control management to ST2 for adding new plugin, like haXe one.

Come on, download Sublime Text 2, install the Package control and haXe plugins!

That’s ok ? Now we can create a simple Php project.
Create a new file, save it as Test.hx and add this code :

package;
 
class Test {
 
    static function main() {
 
    	new Test();
    }
 
    public function new() {
 
    	var number:Float = 4;
 
        trace(number + 5);
    }
}

Then press ctrl (even if you use a mac) + shift + b. A new file called build.hxml is opened with some code generated to compile. You should just need that :

# Autogenerated build.hxml

# www
-php www
-main Test

Then press ctrl + enter. Your php files are generated. Pretty easy!

Now let’s make more stuff, a PDO connection with a simple query.

var cnx:Connection = PDO.open('mysql:host=localhost;dbname=igobelins', 'myUsr', 'myPwd');

If you press ctrl + space you have some greats auto-completion features! ctrl + i and the class is imported. If you make some mistake your code is highlighted in pink.

Our php stuff :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

package;
 
import php.db.Connection;
import php.db.Mysql;
import php.db.Object;
import php.db.PDO;
import php.db.ResultSet;
 
class Test {
 
	public var cnx:Connection
 
    static function main() {
 
    	new Test();
    }
 
    public function new() {
 
      cnx = PDO.open('mysql:host=localhost;dbname=igobelins', 'myUsr', 'myPWd');
 
      var sql:String = "SELECT * FROM configs";
 
      var results:ResultSet = cnx.request(sql);
 
      for (result in results) {
       	trace(result.user);
       }
 
       cnx.close();
    }
}

According that you have a field user in your database, it will show the names.

Ok that was pretty cool, what about nme ? Go on this page and download the haXe project. In ST2 go in File/Open Folder… and select the Folder you have just unzipped. It should show the different folders & files in a left panel. Browse the Source and open SimpleBox2DExample.hx and then press ctrl + enter. It is compiled for flash and open quickly the result in the Flash Player. Ok but with NME I would like to target cpp. No problem press ctrl + shift + b then select cpp and compile. This way you can quickly change the target.
He wait, there isn’t html5 target !? I don’t know the reason but it is not offered. But you can add it (thanks to Julien Roche for the tips) : on Mac open the file Users/YourUserName/Library/Application Support/Sublime Text 2/Packages/HaXe/HaxeComplete.py and add html5 to nme_targets on line 124. Restart ST2, press ctrl + shift + b select html5 then compile. You have a new target 😉

Sublime Text 2 and the haXe plugin are awesome, but so far it can not be as powerful as an IDE for debugging. No breakpoint for example, anyway it is already a great tool for a simple code editor!

Recently, JetBrains has released a haXe plugin for IntelliJ. We should keep an eye on it!