OK, so you’ve been getting the hang of AS3 and you’ve abandoned MovieClip in favor of its lightweight cousin, Sprite. But don’t stop there. If all you need to do is draw some graphics with the drawing API, check into the Shape class.
Shape is also part of the flash.display package, and inherits from DisplayObject, so you create it and add it to the display list the same way:
[as]
var myShape:Shape = new Shape();
addChild(myShape);
[/as]
In fact, the only thing Shape seems to add to DisplayObject is the graphics property. So you can draw in it with the drawing API methods.
Note that it does not extend InteractiveObject or DisplayObject container, so you’re not going to get any mouse or keyboard events off it, and you can’t add any other display objects as children of the shape. But because of those limitations, its going to use less memory and probably take less cpu power.
The obvious use of Shapes is for component skins, but you can extend that to any graphical UI element. I’ve been playing around with some AS3 interface stuff and will post a nice example soon.
Gone are the days when you just used movie clips for everything!
I don’t know why this went onto MXNA three times. Maybe when I edited the post and resaved a couple times to fix some typos, it resent the ping. Sorry.
Hi Keith,
your post made me curious, so I just ran a few tests to find out exactly how much memory a Shape, Sprite and MovieClip take respectively. If my test (the code for which you can find below) is to be trusted, these types take the following amount of memory if added to the display list of another DisplayObject:
Shape: ~320 bytes
Sprite: ~700 bytes
MovieClip: ~800 bytes
So it seems like the difference between using a Shape vs. a Sprite is much bigger than that between a Sprite and a MovieClip.
Also, you are correct about saving cpu cycles as well. Just moving the mouse over the projector running the test case takes my cpu to 100% when using Sprites and MovieClips, whereas it stays at about 40% when using Shapes.
Test code:
package {
import flash.display.Sprite;
import flash.display.Shape;
import flash.display.MovieClip;
public class ShapeMemoryTester extends Sprite
{
public function ShapeMemoryTester()
{
/* memory usage after starting the standalone player, without any interaction:
none:
7848 kb (This is the baseline to be subtracted from the usage in each test case)
Shape:
total: 10975 kb
baseline subtracted: 3127 kb
usage for each instance: ~320 b
Sprite:
total: 14724 kb
baseline subtracted: 6876 kb
usage for each instance: ~700 b
MovieClip:
total: 15712 kb
baseline subtracted: 7864 kb
usage for each instance: ~800 b
*/
//enable one of the following lines to test for memory usage with each respective type:
// testShape();
// testSprite();
// testMovieClip();
}
private function testShape () : void
{
for(var i:Number = 0; i
Looks like your blog doesn’t like long comments 🙂
Here’s the rest of the code, you’ll have to staple it together, I guess:
private function testShape () : void
{
for(var i:Number = 0; i
Damn you, html entities! Oh well, I should have seen this coming …
I really hope that the code makes it through and is still readable this time:
private function testShape () : void
{
for(var i:Number = 0; i < 10000; i++)
{
var shape:Shape = new Shape();
this.addChild(shape);
}
}
private function testSprite () : void
{
for(var i:Number = 0; i < 10000; i++)
{
var sprite:Sprite = new Sprite();
this.addChild(sprite);
}
}
private function testMovieClip () : void
{
for(var i:Number = 0; i < 10000; i++)
{
var mc:MovieClip = new MovieClip();
this.addChild(mc);
}
}
}
}
Keith, maybe you could clean this up a little bit? ;(
Sorry about the formatting, but I got the point. Makes sense since Sprite has most of what MovieClip has, but Shape really only has the graphics property (beyond DisplayObject stuff).
The Shape class is just so Keith Peters. It’s probably the best class to make random shapes and then rotate them. 😉
In my view, it’s a huge oversight and inexcusable omission that there is no built-in RandomShape class. Oh well, maybe in Apollo.