Tag Archives: flash

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

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!

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

Box2D Sound Spectrum

This week is really challenging : my second year school project has started this week. It’s a team project with a graphic designer, a designer, a project manager and me as a developer. Our concept sounds very promising!

No matter, this short introduction explained that I’m really busy, so this experimentation is not perfect due to a lack of time…
Anyway, click here to see a sound spectrum made with Box2D and the Citrus Engine using BitmapData.

Continue reading Box2D Sound Spectrum

From AS3 to Objective-C

Some days after my article about what is happening to Flash developers, I have started to learn Objective-C and I already like it!
In this post, I will try to compare ActionScript 3 to Objecitive-C. I’m really new to Objective-C so if you find any errors in what I say, please add a comment to correct me.

According to Wikipedia : Objective-C is a reflective, object-oriented programming language that adds Smalltalk-style messaging to the C programming language. Today, it is used primarily on Apple’s Mac OS X and iOS. Objective-C is the primary language used for Apple’s Cocoa API.

Continue reading From AS3 to Objective-C

My thoughts on Flash and its recent events

Update : Unity3D has set up an exporter to target Flash which works very well! Without doubt they are working on an exporter for HTML5 too. This technology seems to be promising, I’ve added it on my to learn list!

I wouldn’t come back on the Adobe announcements, everyone know what’s happened and it has already been discussed everywhere. I just would like to share my student point of view about the future.

Continue reading My thoughts on Flash and its recent events

Playing with BitmapData

At school, we made a cool exercise on Bitmap & BitmapData. That was great, I don’t work a lot with them.
The goal was to repeat a picture (make it roll and apply a blur) an on an enter frame without performance drop!

Nothing too complex, but a really nice post-it 😉

Click here to see the result.

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
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.MovieClip;
import flash.events.Event;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.geom.Rectangle;
 
var bmpDataStage:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight, true, 0);
bmpDataStage.draw(stage);
 
var bmpStage:Bitmap = new Bitmap(bmpDataStage);
addChild(bmpStage);
 
// Coming from the flash library
var flower:Flower = new Flower();
 
var bmpDataFlower:BitmapData = new BitmapData(flower.width, flower.height, true, 0);
bmpDataFlower.draw(flower);
 
var time:Number = 0;
 
addEventListener(Event.ENTER_FRAME, ef);
 
function ef(evt:Event):void {
 
	time += 0.3;
 
	var mat:Matrix = new Matrix();
	mat.translate(-flower.width * 0.5, -flower.height * 0.5);
	mat.rotate(time);
	mat.translate(flower.width * 0.5, flower.height * 0.5);
 
	bmpDataFlower.fillRect(new Rectangle(0, 0, flower.width, flower.height), 0x00000000);
	bmpDataFlower.draw(flower, mat);
 
	bmpDataFlower.applyFilter(bmpDataFlower, bmpDataFlower.rect, new Point(0, 0), getBitmapFilter());
 
	bmpDataStage.copyPixels(bmpDataFlower, bmpDataStage.rect, new Point(mouseX - flower.width * 0.5, mouseY - flower.height * 0.5), null, null, true);
}
 
function getBitmapFilter():BitmapFilter {
	var blurX:Number = 5;
	var blurY:Number = 5;
	return new BlurFilter(blurX, blurY, BitmapFilterQuality.HIGH);
}

In a next lesson, we will see Blitting… can’t wait!

PhysicsEditor template for the Citrus Engine

Some months ago, I bought two softwares from code ‘n’ web : TexturePacker to create SpriteSheet and PhysicsEditor to create easily box2d object from png file.

Today, I’m happy to share my first extension / template for PhysicsEditor’s software : I’ve created a template to export physics object for the Citrus Engine.

This is a quick usage example
.
Click on the physical object and press tab. The console is now open. Then write : set Box2D visible false and you will see its picture. It matches really well to the physical object!

Continue reading PhysicsEditor template for the Citrus Engine

Getting started with Away3D for FP11

It was about time to start working on 3D with flash. I was already looking at Papervision3D some years ago, but I have never worked with. Then I’ve followed differents 3D engine like Sandy, Five3D, and Away3D.

Now that Stage3D and FP11 are out, it is time to start working with 3D in flash. However, it’s funny that my first try on a 3D Engine was made with a JS engine : Three.js
So in this post I just adapt my previous 3D example made with Three.js and WebGL and see how it runs with Away3D.

Finally I have chosen Away3D instead of those 3D engine for FP11 : minko, alternativa, flare3D, and adobe proscenium because it is free and has a great community support.

The quick demo.

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
package {
 
	import away3d.cameras.Camera3D;
	import away3d.containers.ObjectContainer3D;
	import away3d.containers.Scene3D;
	import away3d.containers.View3D;
	import away3d.debug.AwayStats;
	import away3d.lights.DirectionalLight;
	import away3d.materials.ColorMaterial;
	import away3d.materials.methods.FilteredShadowMapMethod;
	import away3d.primitives.Cube;
 
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.geom.Vector3D;
 
	[SWF(backgroundColor="#FFFFFF", frameRate="60", width="1000", height="650")]
 
	/**
	 * @author Aymeric
	 */
	public class Main extends Sprite {
 
		private const _ORIGINE:Vector3D = new Vector3D(0, 0, 0);
		private const _NBR_ELEMENTS:uint = 250;
 
		private var _camera:Camera3D;
		private var _scene:Scene3D;
		private var _view:View3D;
		private var _container:ObjectContainer3D;
 
		private var _tab:Vector.<Cube>;
 
		private var _formOneElement:Boolean;
 
		private var _diffX:int, _diffY:int, _diffZ:int;
 
		public function Main() {
 
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
 
			_scene = new Scene3D();
			_camera = new Camera3D();
			_view = new View3D();
			_view.antiAlias = 2;
			_view.backgroundColor = 0xEEEEEE;
			_view.camera = _camera;
			_view.scene = _scene;
 
			addChild(_view);
			addChild(new AwayStats(_view, false));
 
			_container = new ObjectContainer3D();
			_scene.addChild(_container);
 
			var light:DirectionalLight = new DirectionalLight(-1, -1, 1);
			light.color = 0xFFFFFF;
			light.castsShadows = true;
 
			_container.addChild(light);
			light.x = -15000;
			light.y = -15000;
			light.z = -15000;
 
			_camera.lookAt(_container.position);
 
			_tab = new Vector.<Cube>();
 
			var cube:Cube;
			var colorMaterial:ColorMaterial;
			for (var i:uint = 0; i < _NBR_ELEMENTS; ++i) {
 
				colorMaterial = new ColorMaterial(Math.random() * 0xFFFFFF);
				colorMaterial.lights = [light];
				colorMaterial.shadowMethod = new FilteredShadowMapMethod(light);
 
				cube = new Cube(colorMaterial, 50, 50, 50);
				_container.addChild(cube);
 
				if (i == 0)
					cube.x = Math.random() * 1000;
				else
					cube.x = (Math.random() > 0.5) ? Math.random() * 1000 : -Math.random() * 1000;
				cube.y = (Math.random() > 0.5) ? Math.random() * 1000 : -Math.random() * 1000;
				cube.z = (Math.random() > 0.5) ? Math.random() * 1000 : -Math.random() * 1000;
 
				_tab.push(cube);
			}
 
			_formOneElement = false;
 
			addEventListener(Event.ENTER_FRAME, _ef);
			stage.addEventListener(Event.RESIZE, _resize);
 
			_resize();
		}
 
		private function _ef(evt:Event):void {
 
			if (!_formOneElement) {
 
				if (_tab[0].x < 1000) {
 
					for each (var cube:Cube in _tab) {
 
						_diffX = 0 - cube.x;
						_diffY = 0 - cube.y;
						_diffZ = 0 - cube.z;
 
						cube.x -= _diffX * 0.05;
						cube.y -= _diffY * 0.05;
						cube.z -= _diffZ * 0.05;
					}
 
				} else {
					_formOneElement = true;
				}
 
			} else {
 
				if (_tab[0].x > 2) {
 
					for each (var cubeOne:Cube in _tab) {
 
						_diffX = 0 - cubeOne.x;
						_diffY = 0 - cubeOne.y;
						_diffZ = 0 - cubeOne.z;
 
						cubeOne.x += _diffX * 0.05;
						cubeOne.y += _diffY * 0.05;
						cubeOne.z += _diffZ * 0.05;
					}
 
				} else {
					_formOneElement = false;
				}
 
			}
 
			_view.camera.x = 3 * (stage.mouseX - stage.stageWidth * 0.5);
			_view.camera.y = 3 * (stage.mouseY - stage.stageHeight * 0.5);
			_view.camera.lookAt(_ORIGINE);
 
			_view.render();
		}
 
		private function _resize(evt:Event = null):void {
			_view.width = stage.stageWidth;
			_view.height = stage.stageHeight;
		}
	}
}

Zip file.

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 !

Finally using SWC for art in the Citrus Engine

Two days ago, I introduced a way to target iOS with the Citrus Engine using the metadata tag Embed. Forget that way, it is really painful.

Instead of using Embed everywhere and probably rewrite method for the CE’s ObjectMaker, we will use a SWC file. Refering to Wikipedia, an Adobe SWC file is a package of precompiled Flash symbols and ActionScript code that allows a Flash or Flex developer to distribute classes and assets, or to avoid recompiling symbols and code that will not change. SWC files can be generated by the Flash authoring tool, and by Flex. They are sometimes referred to as class libraries and cannot be directly executed by the Flash Player.

So in this file, there will be our level with all its graphics, animations, sounds… We will not have anymore external datas. Moreover our level in the flash IDE will not contain only rectangle shape like previously, but our graphics and animations :
Screenshot of the level
It’s more user friendly isn’t it ? My hero is always a rectangle shape because I’ve not the orignal fla right now.

So to do that just import your graphics and animations into your fla’s library. I recommend to create a movie clip named Level and put it on the stage, name it and add a simple trace code into it to inform what is your current level. We will add all our layers and objects in!
Then put the graphics inside your original Background movie clip for example. Next, inside the movie clip’s properties check export for ActionScript3 and set as class Background. Finally add this code into the movie clip :

var className = "com.citrusengine.objects.CitrusSprite";
var params = {
	view: Background
}

Before, we had a background.jpg now we have a class!

For animation it’s the same, but be careful : if you use it in code after it may have a problem of duplicate name, so in my case with the “Roseau” animation, my view is set up as RoseauAnimation. My library :
library screenshot

Now that your level is set up export it as SWC, then import it in your project. And finally to create your level in the Citrus Engine :

package {
 
	import com.citrusengine.core.CitrusEngine;
 
	import LevelA1_fla.Level_1;
 
	public class Main extends CitrusEngine {
 
		public function Main() {
 
			super();
 
			state = new GameState(new Level_1());
		}
	}
}

Et voilà! You can download my zip. There is still the problem with hero deplacement coming from the new version, anyway if you start a new project from scratch with this one, all will work fine!

Now you just have to import sounds/videos in your SWC too…
Be careful if you use a SWC and target the Web, because the swf becomes heavy and if there isn’t an external preloader, people may leave before played your game!

Finally if you want to have great performance on your mobile game, you should take a look on CE blitting method. And you may use Embed metadata tags to add your assets to your game state. I recommend to add them directly in your class, don’t use the level editor. Programming is not always easy 😉