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();
}
}
} |
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();
}
}
}
} |
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 !