Starling 1.3

Daniel Sperl on January 14, 2013

A new year has started — it’s about time that our little Starling bird was updated to the next version, to show off all that it has learned over the past months!

2012 has been an amazing year for our little bird. I’m especially happy to see how the community around it is getting bigger and bigger. Have you looked at the forum lately? There are dozens of new posts every day, and it’s constantly getting more. Thanks a lot for all who pay us a visit to help out!

Furthermore, many amazing games have been created with Starling — just look at Angry Birds Star Wars, Smart Aliens, Rollercoaster Mania or Gangster Squad (to name but a few)!

Last but not least, extensions and libraries built with or for Starling are popping out like mushrooms in a Super Mario game! Definitely have a look at DragonBones, the 2D skeleton animation plugin for Flash. Feathers makes the step to version “1.0” just these days, and the Citrus Game Engine is getting more amazing with each update.

Starling 1.3

But back to the main reason for this blog post: a new Starling version is out! It contains many new features that make it even more powerful, while keeping the performance just as fast as before. I hope you like the new features!

Filters

Starling finally contains one of the most-wanted features since day one: filters. They work very similar to the classes you’re used to from classic Flash — which means they are very straight-forward to use: display objects have a new property “filter”, on which you can assign a filter instance.

Here’s a sample on what you can do out-of-the-box. The top row shows various uses of the “BlurFilter”; the bottom row makes use of the “ColorMatrixFilter”.

Here’s some source code that shows you how to do it:

// the blur filter handles also drop shadow and glow
var blur:BlurFilter = new BlurFilter();
var dropShadow:BlurFilter = BlurFilter.createDropShadow();
var glow:BlurFilter = BlurFilter.createGlow();

// the ColorMatrixFilter contains some handy helper methods
var colorMatrixFilter:ColorMatrixFilter = new ColorMatrixFilter();
colorMatrixFilter.invert();                // invert image
colorMatrixFilter.adjustSaturation(-1);    // make image Grayscale
colorMatrixFilter.adjustContrast(0.75);    // raise contrast
colorMatrixFilter.adjustHue(1);            // change hue
colorMatrixFilter.adjustBrightness(-0.25); // darken image

// to use a filter, just set it to the "filter" property
sprite.filter = anyFilter;

Since filters are executed directly by the GPU, they are really fast. Furthermore, the filter API is easily extensible: with a little AGAL code, you can write your own filters in no time. I will add a tutorial on how to do that in the Starling Wiki within the next days.

Tween Enhancements

The last Starling update saw an enhancement of the event system; now it’s time to give the Tween API some love.

While the separation between tween and juggler is a very powerful tool, it sometimes just stands in the way, forcing you to write a lot of code for simple tasks. That’s why I have added a convenience method to the Juggler that allows you to work with Starling tweens in almost the same way as it’s done by other tweening libries (e.g. GTween or Tweener). Here’s a sample call:

Starling.juggler.tween(object, 1.5, {
   transition: Transitions.EASE_IN_OUT,
   repeatCount: 3,
   onComplete: function():void { startButton.enabled = true; },
   x: 300,
   y: 360,
   rotation: deg2rad(90)
});

This will grab a tween object from a memory-pool and adds it to the juggler right away. In the {}-parameter, simply list all the properties you want to animate, as well as the properties of the Tween itself.

Did you notice the repeatCount property in the code above? That’s one of several new features of the Tween class:

  • The repeatCount and reverse properties let you repeat an animation several times (optionally in yo-yo style).
  • The nextTween property makes it easy to chain tweens together.

These simple additions should remove a lot of boiler-plate code, without sacrificing any flexibility.

Asset Management

Every game or application needs certain assets — be it textures, sounds, bitmap fonts, or various other objects. Those assets can be either embedded (which makes sense for browser games to have everything in one file) or referenced via their path (good for mobile games to save the RAM required by embedded objects).

The big number of options in how to reference your assets makes it difficult to access them in a uniform way. The AssetManager helps you with that. It’s a class that allows you to add assets in all kinds of ways, and access them easily.

To get started with this new class, have a look at the Starling Wiki: it already contains an article with sample code.Furthermore, the “Scaffold” and “Demo” projects that come with Starling are using this class. Have a look at them to see how you can utilize it in your games.

Scale Modes

Before the advent of Stage3D, Flash Developers used the “StageScaleMode” to define how the stage should be displayed within the bounds of the Flash Player. Now it is back — at least in spirit. In Starling, you define the area that is rendered into via the viewPort rectangle. Now, a new helper method makes it easy to assign the viewPort using one of the scale modes you’ve known from the past.

Let’s say you want to automatically scale up your game so that it fills the complete Flash Player window while maintaining the original aspect ratio (without cropping anything away). Just listen to “Event.RESIZE” on your stage and update the viewPort like this:

private function onResize(event:Event, size:Point):void
{
    Starling.current.viewPort = RectangleUtil.fit(
        new Rectangle(0, 0, stage.stageWidth, stage.stageHeight),
        new Rectangle(0, 0, size.x, size.y),
        ScaleMode.SHOW_ALL);
}

If you use NO_BORDER instead, your game will be cropped; NONE just centers it within the player window. This is especially useful for mobile development, where you need to support a plethora of different resolutions.

Final Words

As always: a single blog entry can’t show you all that has changed in this version. Starling 1.3 contains numerous bugfixes and lots of small enhancements and refinements here or there. To see the complete list, head over to the ChangeLog on GitHub.

Finally, I have to thank all the people who made this release possible. I’ve received many bug reports via the forum or the issue tracker; people have taken part in lots of discussions about different commits; new ideas for changes arrive literally any day. I never stop to be amazed by how much time many of you invest in Starling, simply to help out. I can’t thank you enough!

Now, have fun with Starling 1.3 and leave some feedback in the comments below!

P.S.: Before anyone asks: Next up — Sparrow 2.0! :-)