Starling Framework help manual Chinese version "II"

Display list

It can be said that Starling followed the same rules as the native Flash display list. The display object in the Starling will not

Access its stage property until it is added to the display list. In previous programming, we have been more secure to visit
Ask the stage object, we need to use some important events (such as Event.added_to_stage), fortunately, in
In Starling we can also use these events (but these events are in the same package as before):
* event.added: Thrown when the display object is added to a container
* Event.added_to_stage: When a display object is added to a container that already exists on the stage, that is
Thrown when it becomes visible
* Event.removed: Thrown when the display object is removed from a container
* Event.removed_from_stage: When the display object is removed from a container that already exists on the stage,
Which is thrown when it becomes invisible
In subsequent experiments we will use these events to help us initialize something at the right time or to have a
To make the code perform more efficiently.
The following is a series of common methods provided by the Displayobject class in Starling:
* Removefromparent: Removed from parent object if it has a parent object
* Gettransformationmatrixtospace: Create one to represent the local coordinate system and another coordinate system transformation off
Matrix of the system
* GetBounds: Gets a minimum rectangle that can contain the display object in a reference system.
* Hittestpoint: Returns the highest-level (front-most) display object in the current coordinate system at a point position
* Globaltolocal: Converts a point from stage coordinates to the coordinates of the current coordinate system
* Localtoglobal: Converts a point from the coordinates of the current coordinate system to the stage coordinates
The properties provided in Dispobject are listed below, and as a Flash developer you will be happy to see the Starling
Displayobject retains most of the same name attributes as Displayobject in native Flash (features Also
Additional features, such as the Pivotx and Pivoty properties, allow developers to dynamically change at runtime
Displayobject's registration point:
* Transformationmatrix: The transformation matrix of the current display object position and its parent container
* Bounds: the rectangle (Rectangle) object of the current display object in its parent container
* Width, height, root, x, Y, ScaleX, ScaleY, alpha, visible, parent, stage, Root: No
Explains the same function as the native displayobject.
* Rotation: The rotation of the current display object around its registration point (non-angle)
* Pivotx, Pivoty: The registration point of the current display object, default to (0,0)
* Touchable: Specifies whether the current display object can accept Touch events (equivalent to native displayobject
Mouseenable, because all mouse events in Starling are defined as Touch events)
Like the native Flash API, in Starling, the Sprite class is also the most lightweight container you can use. Of course, its
As a subclass of Displayobject, Nature inherits the APIs that were previously mentioned in the Displayobject, which
Provides the ability to nest sprite objects between each other.
As a container, the Sprite object inherits from the Displayobjectcontainer class, and the following is Displayobjectcontainer
The API that is provided in the class:
* AddChild: Not explained, as in native Flash, the same
* Addchildat: Slightly
* Dispose: Completely destroys an object, frees its memory in the GPU, and removes all its events from listening.
* Removefromparent: Slightly
* RemoveChild: Slightly
* Removechildat: Slightly
* Removechildren: Removes all sub-objects in a container
* Getchildat: Slightly
* Getchildbyname: Search for a sub-object by name
* Getchildindex: Slightly
* Setchildindex: Slightly
* Swapchildren: Slightly
* Swapchildrenat: Slightly
* Contains: slightly
Once you have access to the stage property of a display object, you can use this property to set a series of
The stage object inherits from Displayobjectcontainer, so you can call it most
Displayobjectcontainer API, you can also change the color property of the stage object directly
Starling the color of the stage. By default, the color of the Starling stage is the same as the original Flash stage color, which means
It tastes. You can set the starling stage color indirectly by setting the native stage color directly from the [SWF] meta tag:
[SWF (width= ", height=" 752 ", framerate=", backgroundcolor= "#990000")]
If you want to reload this behavior (that is, I set the native Flash stage color to a color in the [SWF] meta tag), now I want to
To change the Starling stage color to another color), you just need to simply add it to the stage in any
You can access the stage property in Displayobject and set its Color property:

Package    
{   
     import starling.display.Quad;   
     Import Starling.display.Sprite;   
     Import starling.events.Event;   
   
     public class Game extends Sprite   
     {   
       private var Q:quad;   
       
         Public Function Game ()   
         {    
       AddEventListener (event.added_to_stage, onadded);   
         }   
       
     Private Function onadded (e:event): void   
     {   
       //Set the background color to blue   
       Stage.color = 0x002143;
  q = new Quad (n/a);   
       Q.setvertexcolor (0, 0x000000);   
       Q.setvertexcolor (1, 0xaa0000);   
       Q.setvertexcolor (2, 0x00FF00);   
       Q.setvertexcolor (3, 0x0000FF);   
       AddChild (q); 
     }   
     }   

We used to simply use a pair of triangles to form a block that didn't use any textures, and
It just sets a different color for each vertex, which causes the GPU to automatically fill the gradient with its inner padding. Of course
If you want to create a solid block, you only need to set the color property of the Quad object:

Package    
{   
     import starling.display.Quad;   
     Import Starling.display.Sprite;   
     Import starling.events.Event;   
   
     public class Game extends Sprite   
     {   
     private var Q:quad;   
       
         Public Function Game ()   
         {    
       AddEventListener (event.added_to_stage, onadded);   
         }   
       
     Private Function onadded (e:event): void   
     {   
       q = new Quad (.);   
       Q.color = 0x00FF00;   
       q.x = stage.stagewidth-q.width >> 1;   
       Q.Y = stage.stageheight-q.height >> 1;   
       AddChild (q);   
     }   
     }   

You will then get the following results:

Figure 1.12
A solid green block.

We will now start listening on the Event.enter_frame event and add the current block to the event handler function
A color-changing motion tween that makes its color change between different random colors:

Package {import Starling.display.Quad; 
Import Starling.display.Sprite; 
Import starling.events.Event; 
public class Game extends Sprite {private var q:quad; 
private var r:number = 0; 
private var g:number = 0; 
private var b:number = 0; 
private Var Rdest:number; 
private Var Gdest:number; 
private Var Bdest:number; 
Public Function Game () {AddEventListener (event.added_to_stage, onadded); 
} Private Function Onadded (e:event): void {resetcolors (); 
Q = new Quad (200, 200); q.x = stage.stagewidth-q.width >> 1; 
Q.Y = stage.stageheight-q.height >> 1; 
AddChild (q); 
S.addeventlistener (Event.enter_frame, onframe); 
Private Function Onframe (e:event): void {R-= (r-rdest) *. 01; 
G-= (g-gdest) *. 01; 
B-= (b-bdest) *. 01; var color:uint = r << 16 | G << 8 | 
b 
Q.color = color; When reaching the color, pick another one if (Math.Abs (r-rdest) < 1 && math.abs (g-gdest) < 1 &amp ;& Math.Abs (b-bdest)) reSetcolors (); 
} Private Function Resetcolors (): void {rdest = Math.random () *255; 
Gdest = Math.random () *255; 
Bdest = Math.random () *255;
 } 
} 
}

After

, in order for our blocks to spin again, we need to use the Rotation property, not
too notable, the rotation attribute of Displayobject in Starling is in radians, not native
In Flash, in degrees. Starling is designed to be consistent with the rules of its predecessor, Sparrow. If you insist on using the angle as the unit, you can use the Starling.utils.deg2rad method to convert the angle
to radians:
Sprite.rotation = Deg2rad (Math.random () * 360);
because all displayobject in Starling have Pivotx and Pivoty properties, we can easily change their registration point at
Runtime to meet our needs for scaling, rotating. Here we will let the box rotate with the
Center point as the pivot, so you need to place its registration point in its central position:
Q.pivotx = q.width >> 1;
Q.pivoty = q.height >> 1;
for flash developers, the programming philosophy in native Flash is almost identical in Starling. As a subclass of the
Displayobject, the Quad object we now use can be added to a
Sprite object with a nested Textfield object, and some of the actions we have done on this Sprite object, such as scaling, displacement, and so on, will affect both br> all the sub-objects, like the rules in native Flash, right.

Package {import Starling.display.DisplayObject; 
Import Starling.display.Quad; 
Import Starling.display.Sprite; 
Import starling.events.Event; 
Import Starling.text.TextField; 
public class Game extends Sprite {private var q:quad; 
private Var S:sprite; 
private var r:number = 0; 
private var g:number = 0; 
private var b:number = 0; 
private Var Rdest:number; 
private Var Gdest:number; 
private Var Bdest:number; 
Public Function Game () {AddEventListener (event.added_to_stage, onadded); 
} Private Function Onadded (e:event): void {resetcolors (); 
Q = new Quad (200, 200); 
s = new Sprite (); 
var Legend:textfield = new TextField (+, "Hello starling!", "Arial", 0xFFFFF s.addchild (q); 
S.addchild (legend); 
S.pivotx = s.width >> 1; 
S.pivoty = s.height >> 1; 
S.x = (stage.stagewidth-s.width >> 1) + (s.width >> 1); 
S.y = (stage.stageheight-s.height >> 1) + (s.height >> 1); 
AddChild (s); S.addeventlistener (Event.enter_frame, OnfraME); 
Private Function Onframe (e:event): void {R-= (r-rdest) *. 01; 
G-= (g-gdest) *. 01; 
B-= (b-bdest) *. 01; var color:uint = r << 16 | G << 8 | 
b 
Q.color = color; When reaching the color, pick another one if (Math.Abs (r-rdest) < 1 && math.abs (g-gdest) < 1 &amp 
;& Math.Abs (b-bdest)) resetcolors (); 
(E.currenttarget as Displayobject). Rotation + = 01; 
} Private Function Resetcolors (): void {rdest = Math.random () *255; 
Gdest = Math.random () *255; 
Bdest = Math.random () *255;  } 
} 
}

We can now move the Sprite object containing our Quad object and Textfield object around its center point.
Rotation, the color is constantly changing oh ~

Figure 1.13
A Sprite object that contains Quad and Textfield objects is rotated

Our code now looks a bit messy, so let's wrap some of the code into a
Customsprite class. The following is the entire code:

Package {import Starling.display.Quad; 
Import Starling.display.Sprite; 
Import starling.events.Event; 
Import Starling.text.TextField; 
public class Customsprite extends Sprite {private var quad:quad; 
private Var Legend:textfield; 
private Var Quadwidth:uint; 
private Var Quadheight:uint; 
private var r:number = 0; 
private var g:number = 0; 
private var b:number = 0; 
private Var Rdest:number; 
private Var Gdest:number; 
private Var Bdest:number; Public Function Customsprite (Width:number, Height:number, color:uint=16777215) {//Reset the destination color Componen 
T resetcolors (); 
Set the width and height quadwidth = width; 
Quadheight = height; 
When the added to stage, activate it AddEventListener (event.added_to_stage, activate); } Private Function Activate (e:event): void {//Create a quad of the specified width quad = new Quad (quadwidth, Quadhei 
Ght); 
Add the legend legend = new TextField (+, "Hello starling!", "Arial", 0xFFFFFF); Add the Children AddChild (quad); 
AddChild (legend); 
Change the registration point pivotx = width >> 1; 
Pivoty = height >> 1; 
} Private Function Resetcolors (): void {//Pick random color components rdest = Math.random () *255; 
Gdest = Math.random () *255; 
Bdest = Math.random () *255; }/** * Updates the internal behavior * */Public Function update (): void {//easing on the components R-= (R- 
Rdest) *. 01; 
G-= (g-gdest) *. 01; 
B-= (b-bdest) *. 01; Assemble the color var color:uint = r << 16 | G << 8 | 
b 
Quad.color = color; When reaching the color, pick another one if (Math.Abs (r-rdest) < 1 && math.abs (g-gdest) < 1 &amp 
;& Math.Abs (b-bdest)) resetcolors (); 
Rotate it! 
rotation + = 01;  } 
} 
}

Now we have modified the Game class:

package {import starling.display.Sprite; 
Import starling.events.Event; 
public class Game extends Sprite {private var customsprite:customsprite; 
Public Function Game () {AddEventListener (event.added_to_stage, onadded); 
} Private Function Onadded (e:event): void {//create the custom Sprite Customsprite = new Customsprite (200, 200); Positions it by default in the center of the stage//We add half width because of the registration point of the Custo M sprite (middle) customsprite.x = (stage.stagewidth-customsprite.width >> 1) + (Customsprite.width customsprite 
. y = (stage.stageheight-customsprite.height >> 1) + (Customsprite.heig//Show it AddChild (Customsprite); Need to comment this one? 
;) Stage.addeventlistener (Event.enter_frame, onframe); 
} Private Function Onframe (e:event): void {//We update our custom sprite customsprite.update (); } 
} 
 } 

The interface for an update that is open in Customsprite allows external invocation to implement Customsprite settings

Package {import Flash.geom.Point; 
Import Starling.display.Sprite; 
Import starling.events.Event; 
Import Starling.events.Touch; 
Import starling.events.TouchEvent; 
public class Game extends Sprite {private var customsprite:customsprite; 
private var mousex:number = 0; 
private var mousey:number = 0; 
Public Function Game () {AddEventListener (event.added_to_stage, onadded); 
} Private Function Onadded (e:event): void {//create the custom Sprite Customsprite = new Customsprite (200, 200); Positions it by default in the center of the stage//We add half width because of the registration point of the Custo  
M sprite (middle) customsprite.x = (stage.stagewidth-customsprite.width >> 1) + (customsprite.width >> 1);
Customsprite.y = (stage.stageheight-customsprite.height >> 1) + (customsprite.height >> 1); 
Show it AddChild (Customsprite); 
We listen to the mouse movement on the stage Stage.addeventlistener (Touchevent.touch, OnTouch); //need to comment this one? 
;) Stage.addeventlistener (Event.enter_frame, onframe);  } Private Function Onframe (e:event): void {//easing on the custom sprite position customsprite.x-= (customsprite.x 
-MouseX) *. 1; 
Customsprite.y-= (Customsprite.y-mousey) *. 1; 
We update our custom sprite customsprite.update (); } Private Function OnTouch (e:touchevent): void {//Get the mouse location related to the stage var Touch:touch = e.ge 
TTouch (stage); 
var pos:point = touch.getlocation (stage); 
Store the mouse coordinates mousex = pos.x; 
Mousey = Pos.y;  } 
} 
}

It is worth noting that in this code we do not use any mouse  API (referred to as mouse events), in fact, in the
Starling there is no concept of designing the mouse, we will discuss later.
by listening to the Touchevent.touch event, we can detect the mouse/finger movement, and the
usage of this event is just like our classic Mousevent.mouse_move event. Each frame we can rely on the auxiliary APIs in
TouchEvent such as Gettouch and getLocation to get and save the current mouse position. In the
Onframe event handler, we use the stored mouse position as the destination and use a simple easing
equation to move the block to this point.
As we said before, Starling not only allows us to enjoy a more convenient coding process for GPU applications, but it also makes it easier for me
to clean up and reclaim objects. For example, if we need to remove this square
block object from the stage when the mouse clicks on it, you need to write the following code:

Logical loop.
Now, let's add another interactive function to our little test program: Let's move the box with the mouse
. Because we need to add some code (in bold) to implement it:

Package {import Flash.geom.Point; 
Import Starling.display.DisplayObject; 
Import Starling.display.Sprite; 
Import starling.events.Event; 
Import Starling.events.Touch; 
Import starling.events.TouchEvent; 
Import Starling.events.TouchPhase; 
public class Game extends Sprite {private var customsprite:customsprite; 
private var mousex:number = 0; 
private var mousey:number = 0; 
Public Function Game () {AddEventListener (event.added_to_stage, onadded); 
} Private Function Onadded (e:event): void {//create the custom Sprite Customsprite = new Customsprite (200, 200); Positions it by default in the center of the stage//We add half width because of the registration point of the Custo M s customsprite.x = (stage.stagewidth-customsprite.width >> 1) + (c Customsprite.y = (stage.stageheight-custom 
Sprite.height >> 1) + (//Show it AddChild (Customsprite); 
We listen to the mouse movement on the stage Stage.addeventlistener (Touchevent.touch, OnTouch); //Need to comment this one? 
;) Stage.addeventlistener (Event.enter_frame, onframe); When the sprite is touched Customsprite.addeventlistener (Touchevent.touch, Ontouche} private Function Onframe (e:eve 
NT): void {//easing on the custom sprite position customsprite.x-= (customsprite.x-mousex) *. 1; 
Customsprite.y-= (Customsprite.y-mousey) *. 1; 
We update our custom sprite customsprite.update (); } Private Function OnTouch (e:touchevent): void {//Get the mouse location related to the stage var Touch:touch = e.ge 
TTouch (stage); 
var pos:point = touch.getlocation (stage); 
Store the mouse coordinates mousex = pos.x; 
Mousey = Pos.y;  
} Private Function Ontouchedsprite (e:touchevent): void {//Get the touch points (can be multiple because of multitouch) 
var Touch:touch = E.gettouch (stage); 
var clicked:displayobject = e.currenttarget as Displayobject; Detect the Click/release phase if (touch.phase = = touchphase.ended) {//Remove the clicked Object 
RemoveChild (clicked); } 
} 
} 
}

Note that although we removed the object from the display list, we have not removed its event.enter_frame

The listener for the event. To prove this, we use the Haseventlistener API to do the Sprite object
A test.

Private Function Ontouchedsprite (e:touchevent): void 
{ 
//Get the touch points (can be multiple because of Multitou CH) 
var touch:touch = E.gettouch (stage); 
var clicked:displayobject = e.currenttarget as Displayobject; 
Detect the Click/release phase 
if (touch.phase = = touchphase.ended) 
{ 
//Remove the clicked Object 
re Movechild (clicked); 
Outputs:true 
Trace (Clicked.haseventlistener (E.type)); 
} 

It is visible that its event listeners are still remaining even if the object is removed from the display list. For a more secure and thorough
To remove an object, we need to set its second parameter to the RemoveChild method Dispose is true, so
Allows us to automatically remove all of its event listeners when removing an object from the display list:

Private Function Ontouchedsprite (e:touchevent): void 
{ 
//Get the touch points (can be multiple because of Multitou CH) 
var touch:touch = E.gettouch (stage); 
var clicked:displayobject = e.currenttarget as Displayobject; 
Detect the Click/release phase 
if (touch.phase = = touchphase.ended) 
{ 
//Remove and dispose all the Liste Ners 
removechild (clicked, true); 
Outputs:false 
Trace (Clicked.haseventlistener (E.type)); 
} 

We do this to ensure that an object is completely removed, and if there are child objects in this object, the child objects are also
will be completely removed. The Dispose parameter is present in the API for other objects to be removed, such as Removechildren,
Removechildat. It is important to note that a complete removal of an object not only removes its texture, but in the GPU
The occupied memory will also be released. If you just want to remove a texture, you can do so by calling Texture or
The Dispose method of the Textureatlas object to do this.
In addition to using the above mentioned series of remove methods to completely remove a sub-object, you can also directly
Calls a Dispose method of an Displayobject object to implement the object's self-removal.
Clicked.dispose ()
We first used the event mechanism in the Starling in just that little test, is it feeling and native Flash
How much difference does it have? So now let's take a little more time to get to the Starling.
Eventdispatcher this API.