(116 comments, 103 posts)

Interactive developer.

Home page: http://www.aymericlamboley.fr

Posts by Aymeric

Sophie the Girafe 2


I’m glad to present you a new app with the famous girafe: The Safari of Sophie la Girafe!

screen568x568A fun and educational puzzle game for children between 2 and 6 years old! This adventure contains 18 original puzzles for you to enjoy with your child!
Travel to the great plains of Africa with the famous Sophie la Girafe! Introduce your child to lions and giraffes! Soar alongside eagles and pink flamingos and fly over herds of zebra and groups of crocodiles as you explore the mythical world of Sophie la Girafe.

All the scenery and environments have been especially designed with your child in mind. Your child will find it easy to move the puzzle pieces around by dragging them on-screen. The howls and roars of the savannah have been used to bring each animal to life.
Your child will be captivated by the clear, interactive interface, especially designed for younger children.

Thomas, in a previous blog post, related our issues using Adobe AIR GPU mode for a large project & how we switched to Starling. The Safari of Sophie la Girafe, is made with the GPU mode. As usual I made it with the Citrus Engine. Due to the complexity of some animations and finally because of bones/layer number I used DragonBones for running lots of them at full speed. The app works great but you may encounter some performance issue on iPhone4 due to this Adobe’s bug.

Is it my latest project with the GPU mode? Not certain, however for future apps I will focus on performances (even if on all my GPU apps there were pretty acceptables) rather than loading time. Obviously it depends primarily of the app content ;)

Silly Family available on the Mac App Store


Hey, I’m glad to share with you that Silly Family is now available on the Mac App Store! Don’t hear anything about Silly Family? Have a look there.

Thanks to Adobe AIR technology, with exactly the same code base we released the game on iOS, Mac, Android & Amazon. We could also release it to PC, but not sure where to sell it… I hope AIR would work on Windows 8 modern UI mode and so sell it via Windows store, but that’s an other story.

The first time you’re looking for putting your AS3/AIR game on the iOS store, you will find lots of tuts. However for the Mac App Store, that’s an other story. This one is the most concrete that I found.

Here is my bash script, FromAirAppToMacAppStore, working for AIR 13:

#!/usr/bin/env bash
#$ -N $2
DIR="$( cd "$( dirname "$0" )" && pwd )"
cp $DIR/Info.plist $DIR/"$1".app/Contents
cp $DIR/Icon.icns $DIR/"$1".app/Contents/Resources
rm $DIR/"$1".app/Contents/Frameworks/Adobe\ AIR.framework/Versions/Current/Resources/WebKit.dylib
rm -rf $DIR/"$1".app/Contents/Frameworks/Adobe\ AIR.framework/Versions/1.0/Resources/AdobeCP15.plugin
rm -rf $DIR/"$1".app/Contents/Frameworks/Adobe\ AIR.framework/Versions/1.0/Resources/Flash\ Player.plugin
rm -rf $DIR/"$1".app/Contents/Frameworks/Adobe\ AIR.framework/Versions/1.0/Resources/adobecp.plugin
chmod -R 777 $DIR/"$1".app/
#codesign -f -v -s "$2" $DIR/"$1".app/Contents/Frameworks/Adobe\ AIR.framework/Versions/1.0/Resources/AdobeCP15.plugin
#codesign -f -v -s "$2" $DIR/"$1".app/Contents/Frameworks/Adobe\ AIR.framework/Versions/1.0/Resources/Flash\ Player.plugin
#codesign -f -v -s "$2" $DIR/"$1".app/Contents/Frameworks/Adobe\ AIR.framework/Versions/1.0/Resources/adobecp.plugin
codesign -f -v -s "$2" $DIR/"$1".app/Contents/Frameworks/Adobe\ AIR.framework/Versions/1.0
codesign -f -v -s "$2" $DIR/"$1".app/Contents/Frameworks/Adobe\ AIR.framework
codesign -f -v -s "$2" --entitlements $DIR/entitlements.plist $DIR/"$1".app
codesign --display --entitlements - $DIR/"$1".app
productbuild --component $DIR/"$1".app /Applications $DIR/"$1".pkg --sign "$3"
codesign -v --verify $DIR/"$1".app
exit 0
#sh FromAirToMacAppStore.sh "SillyFamilyDesktop" "3rd Party Mac Developer Application: DaVikingCode (XXXXXXXXXX)" "3rd Party Mac Developer Installer: DaVikingCode (XXXXXXXXXX)"

For more instructions (and latest update) have a look on my Github’s repository. Note that I’m moving some repositories to Da Viking Code‘s Github account, the Citrus will move too ;)

Unity, Flambe & OpenFL Skeletal animation libraries performance


Hey guys, I concluded my AS3 performances test saying that AS3 math performances are still a bit low and that with other technology, we should have better performances. So here we go!

Again I remember that it’s really hard to compare different Skeletal animation engines using different models (and so an engine/a tech). I would really enjoy to have the same model available for each soft…

Using Flump with AS3 implementation I had very good performances 30 mascots for 54 FPS. Since Haxe optimized AS3 code, we could imagine that we would win a bit more fps. However using Flambe (which is awesome) and its own Flump runtime I didn’t save FPS. Worst, I lost many! I had 30 mascots at 30FPS. Bad surprise.

OpenFL still use Haxe for coding however it may export native code! On mobile we could suppose that we would win some fps too. I tried several libararies, but the only one I succeed to make working was this one from Lugludum studio. They didn’t try it a lot on mobile, they focus on desktop, but for a first mobile run it wasn’t bad at all: 34 FPS for 30 animated characters.

For Unity I searched a free library, and I was really glad to see there is an implementation (no official, there was missing an eye with my model) of DragonBones. I put 30 dragons, damn I had 60 FPS! And finally 40 dragons at 46 FPS.

So what to conclude? I was sad to see that OpenFL didn’t save me some FPS relatively to my AS3 benchmark. But we can’t judge a technology on this test. Unity math performances seems to be really good. Is it the best tool for making 2D game? Maybe, without any doubt they are on the good road.

Download sources.

P.S. Gaming for change? Have a look on A Blind Legend! A really nice mobile project using binaural tones! Oh and my colleague and me will work on it. So stay tuned ;)

AS3 Skeletal animation libraries performance test


Update: part2.

Right after Silly Family (the Android & multiplayer version will be out at the end of the month!), we are already planning our next game. It will be more for gamer, a bit less family, it will be a tower defense kind of game (I enjoyed so much Bardbarian). We’ve already some fresh ideas, so it’s already time for making test implementation!

On Silly Family we used DragonBones for animations. The graphic designer enjoyed to be able to make them right in Flash, and for me the .dbswf exported file is really optimized (less than 1Mb for 6 * 5 * 16 animations and multi resolutions friendly)! However in our future game, we will have at least 30 animated characters at the same time, and in my quick prototype DragonBones wasn’t able to handle them. So it’s time for a benchmark!

Ok, first thing to consider: since I’m not a graphic designer (nor an animator) I wasn’t able to use the same graphics for each library. So I used their default model. Some may be more complex than others and so impact performances. The goal was to see if I can reach 60 FPS on my iPhone 4S (using iOS 7.1.1) in release mode obviously with AIR 13 using ASC 2.0 compiler and Starling framwork.
If you want to have a quick look on what the benchmark looks like, go there.

DragonBones has the easiest workflow since it is used directly into Flash. This is the library with which I’m the most familiar. For 30 Dragons on screen, I reached 34 Fps using version 3.0 beta and its new cacheFrameRate feature!

Flump is an other library using Flash for making animations. I found it harder to use (in Flash editor) than DragonBones when making Witchcraft Works (I used Flump with Haxe and Flambe). Making this simple performances test was a bit complicated since they don’t provide external libraries (fzip, react) directly, or I missed something. Anyway, I had 30 of their mascot running at 54 Fps!

Spine has its own software for making animations. It also has its official runtime for AS3/Starling. I had 30 orcs at 25 Fps.

Spriter also has its own software for making animations, it also has its official AS3 implementation but when I tested it performances was really, really bad. I didn’t have 30 objects at 60 FPS on my computer! Lucky me, since Spriter is very popular (it was one of the first Skeletal animation software on KickStarter) there are several implementations. And the one made by TreeFortress is pretty solid concerning performances. Have a look on Shawn’s article. I reached 45 fighters at 52 Fps!

After this benchmark, I already know that I won’t use Spine. It’s the most expensive software and concerning performances point of view, there aren’t very good. Spriter Shawn’s implementation sounds very performant however sadly it doesn’t sound to be updated and supported with latest Spriter update. We enjoyed working with DragonBones for our previous game, however for this new one it may be a bad deal. Performances aren’t enough good, but since the graphic designer and me are very familiar with it, it may worth spending time on the library to optimize it (and damn I love this .dbswf format). And finally Flump sounds like a way to gve a serious try, performances seem to be pretty good and for the graphic designer he should feel at home using Flash!

Download sources & Scout reports.

Using an other technology?:
As you can see in the Scout reports, this is really the AS3 code which is limiting performances. It reminds me Philippe Elsass blog post about the fail of AS3/AIR. For my game I won’t need 100 characters à 60 FPS, but it isn’t a reason to have a look on other tech:
- I enjoyed using Flambe, however it’s using AIR on mobile. Thanks to Haxe optimization, it should be more optimized than AS3 directly, however I doubt having so much different performances.
- OpenFL may be the solution concerning performances. However I’m a bit afraid of its constant evolution.
- And finally, why not Unity? Related to my old article, here I’m facing Unity’s bad side: all Skeleton animation libraries aren’t free even for testing their runtime. It’s really sad… Smooth Moves doesn’t sound bad at all.

And you what do you think?

Silly Family, being an indie dev


The game.

Hey guys, this blog post is very special for me :
- it’s my hundredth article!
- my first game as an indie dev is out!

100 blog articles
When I started blogging 4 years (already!) ago, I didn’t imagine that someday I’ll reach the hundredth article. I started mostly as an exercice in style, improving my english communication skills and coding different things for sharing (unpretentious). I continued and now when I give a look in the past I’m smiling : I can see my evolution, how I’m better as a programmer, and all the different things I did in 4 years.
Also thanks to this blog I had my first client as a freelancer! I would recommand to any programmer to have a blog and post each month an article (that’s what I’m doing since 3 years) on what he is doing.

With some friends we created a new company, Apptoonomy. So does it mean that I’m not anymore a freelancer at Da Viking Code? No way! What does a programmer on his spare time? He is programming. With Apptoonomy we mainly focus on making our own games. Let me introduce the first one!

Silly Family
silly1Silly Family is a familly-fun Puzzle Game! Do you know Suzan? Of course you do! Suzan is my father’s son’s sister’s mother’s mother! Suzan is my grandma!!!

In Silly Family, you train your logic by resolving more and more complicated enigmas about increasingly crazier families! You’ll have to find the family relationship or run through the family tree.

We offer 3 different gameplays, 5 families (maybe more) and crazy designs… not to mention the animations! Also a multiplayer mode to defeat your friend!

Obviously questions are generated dynamically, I wrote the algorithm using (family) trees and recursivity. That was funny especially managing the different languages (the application is currently available in English, French, Spanish and Italian). We’re waiting a little bit for German, it won’t be easy ;)

Being an indie dev
Silly Family is the first (finished and published) game that I made as an indie dev. It’s really a longest process than programming games for clients. A client has to be sure (or at least should) that his game design is strong and developer implementation won’t show design flaws. Otherwise programmer’s bill may be painful. I started to develop Silly Family in October 2013 so six months ago. And obviously we already had a game design document. But so many things changed during its developement. Also you can add the fact that you must be satisfied with your game’s direction, and to still have the will to work on. Anyway, it’s a very interesting experience and it improved my skills as a game designer. We’re already looking forward for the next game!

Obviously I used my beloved Citrus Engine for making this game and Starling framework. The IPA size (before submitting to Apple) is less than 17Mo! How did we achieve this size? It’s thanks to DragonBones and its awesome .dbswf format. AS3/AIR technology was perfect for making this game!

Flambe versus the World!


The game.

The (HTML5) engines war
You probably didn’t miss the engines war of the previous month: Unity announced Unity5 with WebGL support (which I already pre-ordered hurrah!) and Unreal Engine 4 did the same with an incredible price. That was for the big guys.
From a more indie friendly point of view, PixiJS continue to kick ass with awesome new features (cacheAsBitmap, blend mode for canvas, SpriteBatch…). Phaser using PixiJS as its rendering engine, is becoming much more popular every day and obviously more stable. PixiJS has really the wind in its sails because OpenFL switched to it for its HTML5 rendering engine!

Witchcraft Works
wwI had to make a new HTML5 game, Witchcraft Works, available through (iOS, Android wasn’t required) devices browser. Since Unity5 isn’t available yet and even if they will support WebGL it can’t be used on a mobile game browser while WebGL isn’t available on mobile yet (iOS I’m looking at you!). So I needed an engine working with Canvas.
In my latest HTML5 project, I summarized my first experience with PixiJS and the issue with performances (certainly not the engine’s fault). Since StarlingJS sounds like abandonned to me, and I wanted to test something new, CreateJS just has WebGL support, I didn’t feel confident with that engine (and add JavaScript coding…). It was finally time to give a try to Flambe, and I fell in love! I heard about it some years ago when I was most active in the Haxe community with a Citrus Engine‘s port.

With the same code base, coded in Haxe, Flambe enables to export Flash/AIR (web, mobile applications), Canvas (old browser, device mobile browser) & WebGL (web) builds!

As you probably know, I hate coding in JavaScript. With my previous project I found TypeScript not bad at all, but I’d to make a TypeScript definition file for feeling comfortable with PixiJS. Using external libraries in the project, I didn’t have TypeScript support for them, that was a mess… Using Flambe I’m able to benefit from lots of Haxe’s libraries, and yeah coding in Haxe is lovely!

When I played with NME, 2 years ago we were fighting with the lack of IDE support. There is an excellent plugin for Sublime Text, but I can’t feel enough comfortable, I needed an IDE. But now even if you’re not on Windows (and its awesome Flash Develop), you have cross platform Haxe IDE support with FDT which isn’t bad at all and IntelliJ (I prefered FDT).
Flambe works with a command line interface, but you can also have easily a .hxml file for your IDE ;)

Getting started with Flambe might be a bit complicated. Be sure to read its installation guide, have a look on the examples and on its official Cookbook. Holy crap we’re seriously missing documentation here! Don’t panic have a look on Mark Knol‘s one and you can already be grateful! Also be sure that Flambe will match with your project requirements (add no video support).

Entity component system
The first thing you will notice with Flambe is its entity component system. Unlike many frameworks which cloned Flash display list, Flambe works with an entity component system even for rendering stuff! Basically that means if you create a Sprite object, you can’t addChild children directly. You have to create a new Entity, add it a display object, and addChild this entity to a parent entity! It’s really troubling at first, but once you get it it works like a charm.
It’s sad that you can’t extend an Entity, it will be very useful for creating lots of custom objects, instead of that we are creating many Components for a project. I understand the design choice, but I find it too restrictive for making frameworks on top of Flambe. Also it would be cool to have getEntityAt method & I didn’t find an easy way to identify Entity/Component like we do with their name in Flash.
Anyway it’s very pleasant to use its entity component model once you get it.

With Flambe you will have to use Flump for your animations. Seems it sounds like a correct way for manipulating animations (you will write some JSFL for speeding your workflow), it’s crazy that Flambe can’t load SpriteSheet in any format provided by TexturePacker! I may have missed something but that means even for making a SpriteSheet of images you will have to import them in Flash and export them with Flump. What the fuck?

Ok here we go. On my latest HTML5 games I fought a lot with bad performances on mobile… Here it just works… like a charm! I didn’t have to fight with anything. I have a strong 60 fps on my iPhone4S and iPad3. Nothing to add. So kudo Bruno!!

I don’t need at all a Flash target, so why bother with Flambe?
Me neither, but having a Flash support will help you a lot with debugging your code!

Still not convinced by Flambe? Have a look on its showcase and see games made by big firms (Disney, Nickelodeon)!

Finally I’m back in the Haxe world and that’s very pleasant! Using Flambe at Da Viking Code gives me without any doubt a strong weapon for future HTML5 project! Feeling even more like a Viking ;)

Finally I made a serious game


After several years in the gaming industry making mostly casual games, it was about time to give a try to serious game, right?

mef-gameMon Exploitation Forestière, only available in French at the moment, offers to the player to grow a forest. He will have to manage different tree species having their own properties (life duration, units collected, …) and cope with natural elements (fire, storm, …). The client wanted to responsibility players about the fact that a forest need to be maintain.
As cool features to develop there were saving players game in database, facebook connect and tiles’ OOP management.

Let’s start for some explanations with the latest one:
Each tile is designed into Flash Pro and inherit from a class with its properties (tree or empty tile for example). This way it’s very easy to modify it in real time, switch or even save it!
For saving the game, I’ve basically create a JSON with each tiles informations (+ score etc.), since everything is OOP it’s very easy to read its data and save it. For loading a save game it’s the same process. Load the JSON with all tiles informations and create objects.
Concerning the Facebook connect, I didn’t use at all the AS3 SDK but the php one. It’s very useful since you may use it for UI combined with JavaScript SDK. And using the php one in the backend is very safe ;)



Hey guys! Time flies, February is already finished.

It’s time for a very short blog post! I made many AIR Native Extensions this last months, playing with ads, analytics, sounds… it’s awesome the number of amazing SDKs you find on mobile. Unfortunately all my ANEs are private due to NDAs.

Here are some links to learn how to write your own:
- never played with ANEs? Get started with an Adobe tutorial.
- before coding your first ANE, have a look on the ones provided by StickSports. Richard Lord’s made an excellent work! He provides the best template ;)
- developing your ANE, be sure to read his tips!
- and yes, obviously you can add an Objective-C view on top of your Flash View but you unfortunately you can’t do the reverse.
- for a long run have a look on this Adobe’s PDF.

Hope this links will help!

Da Viking Code, one year of freelancing!


Hey guys, happy new year (better late than never!)!!

We’re already in 2014… and now I worked more than one year as a freelancer and it’s still awesome! I’ve detailed most of the projects made on this blog and my personnal website. Give them a look!

So what is coming up?
Now, I’ve a company name, Da Viking Code (you probably got the joke), and a new website! Thank you my friends at Curious Label for this awesome logo & design!

An other very exciting news: Thomas aka Gsynuh joins me on Da Viking Code’s crew in February!! He’s the best Citrus Engine’s contributor and it will be awesome to work together daily at the same place!

So now we’re two freelancers for your services, playing with AS3/AIR, Unity and Canvas/WebGL technologies!

Best wishes for 2014 and see you between two lines of code!

Working with multi-resolutions assets


When we’re making mobile apps we have to support lots of resolution from 480 x 320 to 2048 x 1536 if you only target iOS. Adding Android support you have to extend it to 2560 x 1600 (for the Nexus 10)!

If your graphic designer made its design into a vector format, it will be easy to fit exactly to your screen size, and you will only fight with the different ratios format.
However if your design is made with bitmaps, you have to, firstly, be sure they have been made for the highest resolution you would like to support! When this is done, you will use a SpriteSheet to have all of your assets in one (or a little more) place.

In this blog post we will see how to manage multi-resolutions assets based on a Starling app.

When you’re building a game with Starling you have several way to handle the multi-resolution management and the Citrus Engine offers more. In this example, we will just fit Starling’ stage to always have the size of the device. And we will use our own scale factor!

I will override the CitrusEngine findScaleFactor with my custom one. Note it should be more or less the same even if you don’t use the Citrus Engine.

override protected function findScaleFactor(assetSizes:Array):Number {
	var minValue:Number = Math.min(screenWidth, screenHeight);
	if (minValue < 400) // iPhone3GS
		return 1; // 0.25 in TexturePacker
	else if (minValue < 640) // Lots of Android devices
		return 1.5; // 0.375 in TexturePacker
	else if (minValue < 1536) // iPhone4, iPhone5, iPad non retina
		return 2; // 0.5 in TexturePacker
	else  // iPad retina
		return 4; // 1 in TexturePacker

In my app I will support 4 sets of texture, we don’t want to create a lots more because it will request extra space. Also I don’t extend it to the Nexus 10, since the one provided by the iPad retina should be ok.

Now that I’ve my scaleFactor, I will load the correct set using Starling’s AssetManager:

Assets.assets.enqueue(File.applicationDirectory.resolvePath(formatString("assets/{0}x", scaleFactor)));
Assets.assets.loadQueue(function(ratio:Number):void {
	if (ratio == 1) {
		state = new GameState();

Bonus: you can easily combine it with DragonBones! Here you should export your design into the awesome .dbswf format, it will save you lots of space! Also if you’ve designed your DragonBones assets at the maximum resolution you will supported, it’s perfect you can easily resize the future spritesheet:

Assets.factoryDB = new StarlingFactory();
Assets.factoryDB.scaleForTexture = scaleFactor / 4; // models designed for 4X.
Assets.factoryDB.parseData(new Assets.DragonBonesAssets());

Ok, so this is great but how could I automate my way to generate SpriteSheets?
Firstly, you have to use the best SpriteSheets generator on the market: TexturePacker. Put all your bitmap assets at one place, and drag and drop them in TexturePacker. When you’ve selected the different options save it as a .tps file!
You could manually generate SpriteSheets one by one just changing the scale and it will do the job. But it will be very annoying to do it each time you change one asset.
TexturePacker provides a command line tool, so let’s use it with a bash script:

#!/usr/bin/env bash
DIR="$( cd "$( dirname "$0" )" && pwd )"
for i in 1 1.5 2 4
        TexturePacker --sheet "$DIR"/../bin/assets/"$i"x/assets.png --data "$DIR"/../bin/assets/"$i"x/assets.xml --scale $(echo "scale=3; $i/4" | bc) --format sparrow "$DIR"/assets.tps
        echo "pngquant image" "$i"x
        pngquant -f --ext .png "$DIR"/../bin/assets/"$i"x/assets.png
echo "TexturePacker and pngquant tasks done."
exit 0

Latest script version and instruction to run it.

It will generate you all the resolutions needed and applied the awesome pngquant! So it will greatly improve your final SpriteSheets weight!

Bonus: you will probably also use BitmapFonts into your game. I used to deal with the great GlyphDesigner, however I’m facing a strong issue: I’m not able to export a downscale BitmapFonts spritesheets (updated: in fact it’s only available via the command line). They all have characters to a different place. And I would enjoy to add this png generated to my main SpriteSheets… so how could I do that?

I switched to bmGlyph, and it enables me to downscale a BitmapFonts SpriteSheets. So thanks to this downscale, I generate them all (you will certainly don’t have to update this bitmap fonts often), add the 4x sizes to my bitmap assets folder, and remove all the others generated pngs. And then in the same repository than the future global SpriteSheet, I add the .fnt file. Now when Starling parse the SpriteSheet, it will also add the bitmap font. Powerful, isn’t it?

Aymeric's RSS Feed
Go to Top