Render a Sprite with Starling

This article is about how to animate a resource using a 2D game Stage3D (such as a user's GPU) through the starling framework. Videos and articles are almost identical in content (although the path to the main game class is slightly different).

[Flash]http://player.youku.com/player.php/sid/xmzixmtezmzaw/v.swf[/flash]

See more videos in my Vimeo

I think I need to explain how to start the architecture Starling, a very obvious entry point is how to use the Starling and GPU (through Stage3D) to draw the animation. Fortunately, Starling the necessary cumbersome links in the background for you to complete, you can through it directly and stage3d interaction. Another benefit of using Starling is that it accesses a familiar API that adheres to the same API, which is used to point to traditional flash display lists. Movieclip,image,sprite,button and so on.

Start now

Let's see how you can start adding content and animating with Starling. First, after you create an ActionScript project that good one supports starling (if you don't know what to do, check out this article), the first thing to do is to create an instance of the Starling core engine. var _st:starling = new Starling (animationexample, stage);
_st.start (); Copy code visible when you create a starling () instance, you give it two parameters (it does require additional parameters but we will skip first). The first parameter is the root class you want to instantiate when Starling runs, and here is animationexample. The second parameter is the storage unit you want to attach to the root class instance, where we can just specify the stage instance.

After all this is done, the rest is to let Starling actually run, you can already know how to do. You only need to invoke the start () method of the Starling instance. With two lines of code above, your game document class has finished (at least one example) and it should look something like this: the package
{
Import Flash.display.Sprite;

Import starling.core.Starling;
Import Com.flashgen.examples.AnimationExample;

public class Starling101 extends Sprite
{
Public Function Starling101 ()
{
var _st:starling = new Starling (animationexample, stage);
_st.start ();
}
}
Copy the code to create the game document class

You might find that I missed the creation of the root class Animationexample, the class we passed into the Starling () constructor. Since I want to overwrite Starling with a special condition, it means that this class must inherit the starling implementation interface Displayobject class. Now it is clear that this is not the Displayobject class of Flash, it is a starling implementation interface with the same name. The most common implementation interface is to extend this class from the Starling Sprite class-You might extend the Starling Displayobject class. So your base class Animationexample as follows: Package Com.flashgen.examples
{
Import Starling.display.Sprite;

public class Animationexample extends Sprite
{
Public Function Animationexample ()
{
Super ();
}
}
Copy the code now you want to create a method called Init (). For this example, you can put most of the code here. The code is not put into the actual class constructor because we want to make sure that the class is placed on the stage before anything else goes into the process. To do this, simply add an event listener to the Animationexample class constructor, and wait until the class is completely added to the stage to execute. Public Function Animationexample ()
{
Super ();

AddEventListener (Event.added_to_stage, init);
The replication code needs to reiterate that the event we are listening to is not a flash.events.Event implementation interface, but a starling implementation interface, such as Starling.events.Event. I know the implementation interface for determining the class using Starling I'm a little verbose, but if you happen to use the Flash implementation interface, you will get an error.

Add a Resource

Compared to Flash, Starling is a bit different than the usual way of animating, but the main thing is that it uses texture Atlas and sprite Sheet * to render visual content and animate.

Texture ha. Sprite what.
Texture Atlas and Sprite sheet are very similar and are centered on a large image that contains many small images. But they are not the same in the main content range.

Sprite sheet generally includes only a single sprite type of bitmap information--Say a soldier--including all the animation frames it needs.

Texture Atlas contains all the required bitmap information for a whole game (or if the game is very large for each individual level), including sprites, static resources, and so on. It also tends to use a text document (typically XML), or "Atlas", to mark where each entry is in a large image. You can easily extract the entries you need by using the data in a text document, and if you're done faster, you can animate the current and next frames based on the sequence.

I have created a sprite Sheet and have called Texturepacker associated XML file with the app. I don't want to track the details of how to use the app in this article-I'll leave it to a dedicated blog post. The main thing to do now is to relate the two parts (PNG charts and XML documents) to each other. Because I mentioned earlier that the XML document contains a reference to each entry in the chart and gives each sprite a X,y,width,height property: <textureatlas imagepath= "Bilbo-walk.png" >
<subtexture name= "Bilbo0001" x= "0" y= "0" width= "215" height= "208" framex= " -33" framey= "0" framewidth= "295" frameheight= "212"/>
<subtexture name= "Bilbo0002" x= "215" y= "0" width= "215" height= "208" framex= " -33" framey= "0" framewidth= "295" frameheight= "212"/>