Category Archives: Starling

Create a game like Tiny Wings

Tiny Wings is really a cute game and very fun to play thanks to physics content! It uses Box2D. If you’ve never played the game, give it a quick look :

Generate those type of hills with a physics engine is complicated for a novice. You’ll find cool tutorials on Emanuele Feronato’s website using Box2D and an other on Lorenzo Nuvoletta’s website using Nape.

Someone asks me if it was possible to create this type of game with the Citrus Engine, absolutely! So let’s go for a quick tutorial.

Continue reading Create a game like Tiny Wings

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!

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

CitrusEngine goes Stage3D with Starling

Hey folks, happy new year! My previous post go back from 1st december, I’ve been really busy : adding Starling in the CitrusEngine, learning iOS and working on my 2nd year school project. And obviously some great holidays between christmas & the new year.

Today I’m very pleased to share with you the Citrus Engine working on Starling! For those who don’t know it, it’s a platformer game engine using Box2D Alchemy and Signal libraries. However, it’s not only made for platformer games, you can use it for every 2D contents even if it isn’t a game thanks to its great Box2D management. So before this update, it has supported : Box2D physics, Signals event, a Sound Manager, a Console for quick debugging & tools, Input management, lots of defined objects like Hero, Baddy, Platform, Coin, Sensor, Moving Platform…, parallax, a Loader manager, level editors thanks to its own (the Level Architect made with Air), or using Flash Pro, or Gleed2D. 2 views : the flash display list and blitting, and a layer management!

Thanks to this update, the CitrusEngine now support the great stage3d framework Starling and I’ve also added 3 new objects Cannon, Teleporter & Treadmill, a Level Manager and an abstract class to store the game’s data. This two last things are optional you may use it or not. In this blog post I will explain how I’ve adapted the CE for Starling, and my updates with some examples. For a quick getting start with the engine please refer on its website or to the tutorials on this blog.

But let’s stop chatting, it’s time to test the demo :
Click here for the demo.

Continue reading CitrusEngine goes Stage3D with Starling

Starling performance test

Thanks to the Flash Player 11 we have now a stage 3D accelerated graphics rendering. Stage 3D (formerly called “Molehill”) is a new architecture for hardware-accelerated graphics rendering developed by Adobe. Stage 3D provides a set of low-level APIs that enable advanced 2D/3D rendering capabilities across screens and devices (desktop, mobile, and TV). It gives 2D and 3D app and framework developers access to high-performance GPU hardware acceleration, enabling the creation of new classes of rich, interactive experiences.

Many 3D frameworks are already set up for FP 11 : away3d, minko, alternativa, flare3D, and adobe proscenium.
There are also 2D framewoks : ND2D and Starling.
That’s lots of things to test, certainly too much 😀

Today, I have given a try to Starling, it is easy to use ! To get start go on this Thibault Imbert page’s blog, there are some examples and a book!
Don’t forget to upgrade to the last version of the Flash Player.

Click here to find my Starling performance stress test.

There are 600 characters on the screen with animation, alpha and rotation! My FPS is 55/60 with the standard FP, and 40/60 with the Debugger FP. That’s a big difference. Also I have a 8600 Geforce with 256 MB ram on my macbook pro (2008). Starling uses the graphic card so this result may change a lot if you have a recent pc or not. However 55 FPS for a 3 years old computer, is really good. I’m impressed by Starling performance.

I used the Stats class of Nicolas Gans originally created by Mr. Doob.
Now take a look in my code. The Main class which set up Starling :

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
package {
 
	import starling.core.Starling;
 
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
 
	[SWF(backgroundColor="#999999", frameRate="60", width="640", height="480")]
 
	/**
	 * @author Aymeric
	 */
	public class Main extends Sprite {
 
		private var _starling:Starling;
 
		public function Main() {
 
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
 
			_starling = new Starling(StarlingTest, stage);
 
			_starling.antiAliasing = 1;
			_starling.start();
		}
	}
}
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
package {
 
	import fr.kouma.starling.utils.Stats;
 
	import starling.core.Starling;
	import starling.display.MovieClip;
	import starling.display.Sprite;
	import starling.events.Event;
	import starling.textures.Texture;
	import starling.textures.TextureAtlas;
	import starling.utils.rad2deg;
 
	import flash.display.Bitmap;
 
	/**
	 * @author Aymeric
	 */
	public class StarlingTest extends Sprite {
 
		private var _patches:Vector.<MovieClip>;
		private var _mc:MovieClip;
 
		[Embed(source="../assets/patch.xml", mimeType="application/octet-stream")]
		public static const SPRITESHEETXML:Class;
 
		[Embed(source="../assets/patch.png")]
		private static const _SPRITESHEET:Class;
 
		public function StarlingTest() {
 
			addEventListener(Event.ADDED_TO_STAGE, _init);
		}
 
		private function _init(evt:Event):void {
 
			removeEventListener(Event.ADDED_TO_STAGE, _init);
 
			addChild(new Stats());
 
			var bitmap:Bitmap = new _SPRITESHEET();
			var texture:Texture = Texture.fromBitmap(bitmap);
			var xml:XML = XML(new SPRITESHEETXML());
			var sTextureAtlas:TextureAtlas = new TextureAtlas(texture, xml);
			var frames:Vector.<Texture> = sTextureAtlas.getTextures("patch_");
 
			_patches = new Vector.<MovieClip>();
 
			for (var i:uint = 0; i < 600; ++i) {
				_mc = new MovieClip(frames, 60);
				addChild(_mc);
 
				if (Math.random() > 0.5)
					_mc.scaleX = -1;
 
				_mc.x = stage.stageWidth * Math.random();
				_mc.y = stage.stageHeight * Math.random();
 
				// Keep the Stats visible
				if (_mc.x < 150 && _mc.y < 150) {
					_mc.x += 150;
					_mc.y += 150;
				}
 
				_patches.push(_mc);
				Starling.juggler.add(_mc);
			}
 
			addEventListener(Event.ENTER_FRAME, _ef);
		}
 
		private function _ef(evt:Event):void {
 
			for each (var patch:MovieClip in _patches) {
				patch.rotation += rad2deg(Math.random());
				patch.alpha = Math.random();
			}
		}
	}
}

To compile for FP 11, download this playerglobal.swc 11. To create the png file of the patch’s character, I used TexturePacker software.

You can download my zip.

Starling is really an exciting framework, it is easy to learn (really close to the existing AS3 API sometimes too much), which enable to create rich graphics game. Stage3D should be able to target mobile device at the start of the new year!

I’m thinking to integrate Starling support to the CitrusEngine! That’s one of my project on a todo list which become bigger and bigger… all interesting stuff… so, stay tuned !