All posts by Aymeric

About Aymeric

Freelance Interactive & Game Developer.

Box2D Alchemy VS Nape, performance test on iPad3

Edit: The Box2D AS3 pure version is quicker than Box2D Alchemy! Take a look there

Hey folks! Today I’m glad to share an important performance test for AIR mobile developers which want to use a physics engine in their games and applications.
The Box2D Alchemy version is used rather than the “simple” Box2D because it has better performance. Test on Allan Bishop’s blog.
I’ve already made a quick performance test comparing Box2D Alchemy & Nape concluding that with Nape you could create 60% more objects than Box2D and have the same FPS!

That was a simple test without different objects behaviors. So now it’s time to test in the small project game : Live4Sales, made with the Citrus Engine using Starling & AIR 3.4. In a previous post there were already project/code explanations and good practice with Box2D. I will not make code comparison with Nape since all the source are available on the CE’s GitHub.

To compile for one or the other engine just change one line in the Main :

// select Box2D Alchemy or Nape demo
state = new NapeLive4Sales();
//state = new Box2DLive4Sales();

And it will works! Most classes are common, just physics one changed. With the CE version on the repository, Nape use the same coordinates system than Box2D. It has never be so easy to switch! I’ve the same physics behaviors for Box2D & Nape in the game apart I didn’t success to cancel easily forces after collision with Nape.

The game videos :

The test is categoric, yep, Nape is blazing fast!! The Citrus Engine made a really good move adding Nape support!

In conlusion, if you want to target Web only? It doesn’t matter, both are very performant on a computer. Since the API are very differents select the one you prefer! You will find more code example with Box2D than Nape, however Nape is easier to handle. Also you have to know that Box2D Alchemy involves Adobe “Tax” if you use Starling too whereas Nape doesn’t (with the Nape’s debug view I’ve chosen). Don’t forget, if you want Adobe keeps its good work on Flash you’ve to support them!
Perhaps your game will be a mobile game? Go Nape, directly!
We are closed to the Citrus Engine V3 BETA3 which will be the last one!

Finally I’ve quickly added Nape to the CitruxEngine (Haxe NME port). It was so easy to add it from the AS3 version. This port is in stand-by at the moment : I still haven’t found an easy way to display a SpriteSheet with NME – HTML5. I’m upset!

Live4Sales, a Plant vs Zombies clone

Edit : Nape version

One week after the Osmos demo, I offer a new game made with the Citrus Engine based on an other popular game : Plant vs. Zombies!

If you have never played this game, try it now!

This is my clone made with the CE working as a browser game, air application, and on mobile devices :
The web demo. I didn’t make a preloader, to have the same source code between each version.
There is no end in the game to be used as a stress test!
Sources are available on the CE’s GitHub.


Continue reading Live4Sales, a Plant vs Zombies clone

Create a game like Osmos

2 days ago, I’ve offered a new beta for the Citrus Engine. I had really good feedbacks, thanks guys for having regard on the engine!
This new beta also introduced a new demo which was again a platfomer game. It’s time to show, thanks to a quick case study, that the Citrus Engine is not only made for platformer games! For this first example, we will create a game like Osmos. I really love this game, it’s zen, gameplay mechanics are easy and powerful, definitely a good indie game.

In 4 hours of work, this is what I made. You can drag & drop atoms.
Source are available on the CE’s GitHub, in the src/games package.

Continue reading Create a game like Osmos

Citrus Engine V3 Beta2

Hey there! On this hot summer day, I’m happy to share a new major beta for the Citrus Engine! There are lots of new features, improvements, bug fixes and a new demo for mobile devices. It is also updated on the last version of each library.

Download it on Google Code or GitHub.

Continue reading Citrus Engine V3 Beta2

An entity/component system’s attempt using Box2D

One year ago, I heard about the Entity/Component Model for the first time. It seemed to be awesome for game design / development. This is 3 links/resources for a good introduction : Gamasutra the Entity Component Model, Entity Systems are the future of MMOG development, Entity Systems. Then Richard Lord has made a very good blog post with code example using his own framework : Ash. And finally, Shaun Smith’s experience using Ash.

All the code example is available on the new Citrus Engine’s GitHub repository. Compile the src/entity/Main.as

During this year, entity/component system has always been something I wanted to try… but that was scary : this is not OOP, that’s a new way of programming. I wanted to add this system to the Citrus Engine as an option to handle complex object. For basic object OOP is great and easy to set up, but for complex game object which may have new abilities on the fly, you’ve quickly a Class with 700 lines of code and conditions. Not easy to maintain some weeks later. The Citrus Engine handles physics engine (Box2D & Nape) & a simple math-based collision-detection system. However it comes built-in with a “platformer” starter-kit based on Box2D, so I made my entity/component system’s experiments using Box2D. And that was not simple.

Continue reading An entity/component system’s attempt using Box2D

Citrus Engine on Nape and physics performance improvement

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

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

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

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

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!