StarlingManual:显示对象

显示对象

Flash的视觉基本组成部分是显示列表，它描述了屏幕中哪里绘制对象，以及如何绘制对象，Starling仿照了显示列表的模式，其框架中大量的类与函数与flash原生API都非常相似。

所有的显示对象基类都是DisplayObject。Quad类是继承自DisplayObject，Starling中的其他类也是如此，比如Image.textField等等。

下面这幅图是Starling框架中对象的类层次结构：

如果我们无需使用事件机制（后面会讲到），那么我们的顶层可以是DisplayObject类。正如前面说的一样，一切在舞台中显示的类对象其基类都是DisplayObject。当然DisplayObject是一个抽象了，你不可以直接实例化它，但是他提供了所有显示对象最基础的方法和属性

• position (x, y)
• size (width, height)
• scale factor (scaleX, scaleY)
• rotation
• opacity (alpha)
• etc.

如果你看到了DisplayObject这个类，你可以找到它的几个子类，如Quad,Image,TextField,Button和MovieClip。这些类的功能通过名称应该可以很清楚的知道它们都是做什么的了。

另外一个抽象类就是DisplayObjectContainer了。顾名思义，它是一个显示对象容器类，我们可以使用它来组织逻辑系统，并形成显示树。

显示树

很多时候你都需要扩展一些基本的类来创建更加复杂的对象。比如再图片中写入一些文字等等。当你将图像移动，那么文字也需要跟随它移动。同样的一些放大或者缩小操作，旋转和透明度的变化都需要进行处理。所以要将两个对象当作一个对象来看待。

所以，你需要使用DisplayObjectContainer或者Sprite。这些类大同小异，唯一的区别是DisplayObjectContainer是一个抽象类。

所以，我们将image和text组合再一起，让他们成为一个Sprite的子显示对象：

var sprite:Sprite = new Sprite();
var image:Image = new Image(texture);
var textField:TextField = new TextField(200, 50, "Hello World");
sprite.addChild(image);
sprite.addChild(textField);

我们先将image添加到sprite中，然后再添加textfiel。这样他们的显示顺序怎么后面的覆盖在顶部。

现在sprite有两个子显示对象，并且控制它会同时控制image和textfield。

// query the number of children
var numChildren:int = sprite.numChildren; // -> 2
// move everything 50 pixels to the right
sprite.x += 50; 
// 'width' and 'height' take into account the sizes and
// positions of the children:
var totalWidth:Number = sprite.width;
// rotate by 90 degrees (Starling expects radians)
sprite.rotation = deg2rad(90)

每一个显示对象都拥有自己的坐标系。比如你将图钉扎到一张纸片上。那么我们就有了系统坐标系和场景坐标系。

现在，当你旋转你的纸片，那么它将改变他的XY轴。但是坐标系统的根坐标系却始终保持不变。

相对于父坐标系（木板）图钉的位置代表坐标系的XY点。 牢记这个比喻，因为当你使用Starling框架时候，我们需要时常去关注这个非常重要的东西。 DisplayObjectContainer默认的很多方法来帮助我们处理子显示对象：

function addChild(child:DisplayObject):void;
function addChildAt(child:DisplayObject, index:int):void;
function contains(child:DisplayObject):Boolean;
function getChildAt(index:int):DisplayObject;
function getChildIndex(child:DisplayObject):int;
function removeChild(child:DisplayObject, dispose:Boolean=false):void;
function removeChildAt(index:int, dispose:Boolean=false):void;
function swapChildren(child1:DisplayObject, child2:DisplayObject):void;
function swapChildrenAt(index1:int, index2:int):void;

创建自定义显示对象

当你开始制作一个游戏的时候，你需要把它分解为多个逻辑模块。一个简单的国际象棋游戏可能棋盘，棋子，一个暂停按钮按一个消息提示框。所有的元素都将会显示在你的游戏场景中，这个时候你就需要从DisplayObject扩展你自己的显示类了。

下面是一个消息提示框的例子：

这个消息提示框有一个背景，图标，文字和两个按钮。最终你要将MessageBox类中的细节代码隐藏起来。

现在，创建一个名为MsgBox的类，并继承自Sprite。然后再他的构造器函数中初始化这个消息提示框：

public class MsgBox extends Sprite
{
    [Embed(source = "background.png")]
    private static const Background:Class;
 
    [Embed(source = "button_bg.png")]
    private static const ButtonBG:Class;
 
    public function MsgBox(text:String)
    {
        var background:Image = Image.fromBitmap(new Background());
        var textField:TextField = new TextField(100, 20, text);
 
        var buttonTexture:Texture = Texture.fromBitmap(new ButtonBG());
        var yesButton:Button = new Button(buttonTexture, "yes");
        var noButton:Button  = new Button(buttonTexture, "no");
 
        yesButton.x = 10;
        yesButton.y = 20;
 
        noButton.x = 60;
        noButton.y = 20;
 
        addChild(background);
        addChild(textField);
        addChild(yesButton);
        addChild(noButton);
    }
}

现在你已经拥有了一个消息提示框组件。要想使用它,只要创建一个MsgBox实列然后加到你的显示列表中：

var msgBox:MsgBox = new MsgBox("Really exit?");
addChild(msgBox);

现在你可以添加一些其他的功能（比如淡入淡出），并且你需要捕获用户点击按钮的动作！这就使用到了Starling框架的消息事件机制，后面的章节中会告诉你如何去做的！

翻译:张鑫磊(mebius.ashan)