Starling的Display Objects介紹（三）

上一篇：Starling的Display Objects介紹（二）
下一篇：Starling的Display Objects介紹（四）

這篇會介紹下圖裡的starling.display.Button以及starling.display.Sprite

Button物件介紹

官方手冊在此：http://doc.starling-framework.org/core/starling/display/Button.html

和Flash的SimpleButton的不同點，是它只有兩個狀態的圖檔，也就是upState與downState，而沒有over的狀態。它的disabled樣式可以經由alphaWhenDisabled的屬性去設定Disabled時的圖檔透明度。

另外，按下Button會觸發的事件是Event.TRIGGERED，因此若我們要監聽一個Button按下的事件，可用下面的方式去監聽：

menuContainer.addEventListener(Event.TRIGGERED, onTriggered);

1	menuContainer.addEventListener(Event.TRIGGERED, onTriggered);

private function onTriggered(e:Event):void {
    // outputs : [object Sprite] [object Button]
    trace ( e.currentTarget, e.target );
    // outputs : triggered!
    trace ("triggered!");
}

private function onTriggered(e:Event):void {

// outputs : [object Sprite] [object Button]

trace ( e.currentTarget, e.target );

// outputs : triggered!

trace ("triggered!");

}

這是starling.display.Button一個簡單的使用範例：

package {
	import flash.display.Bitmap;
	import starling.display.Button;
	import starling.display.Sprite;
	import starling.events.Event;
	import starling.textures.Texture;

	public class Game extends Sprite {
		[Embed(source = "../media/textures/button_up.png")]
		private static const Button_UP:Class;

		[Embed(source = "../media/textures/button_down.png")]
		private static const Button_DOWN:Class;

		public function Game() {
			addEventListener(Event.ADDED_TO_STAGE, onAdded);
		}

		private function onAdded (e:Event):void {
			// create a Bitmap object out of the embedded image
			var buttonSkinUp:Bitmap = new Button_UP();
			var buttonSkinDown:Bitmap = new Button_DOWN();

			// 創建按鈕
			var myButton:Button = new Button(Texture.fromBitmap(buttonSkinUp), "這是按鈕", Texture.fromBitmap(buttonSkinDown));

			// 創建Menu容器並把按鈕加上去
			var menuContainer:Sprite = new Sprite();
			menuContainer.addChild(myButton);

			// centers the menu
			menuContainer.x = stage.stageWidth - menuContainer.width &gt;&gt; 1;
			menuContainer.y = stage.stageHeight - menuContainer.height &gt;&gt; 1;

			// show the button
			addChild(menuContainer);
		}
}
}

package {

import flash.display.Bitmap;

import starling.display.Button;

import starling.display.Sprite;

import starling.events.Event;

import starling.textures.Texture;

public class Game extends Sprite {

[Embed(source = "../media/textures/button_up.png")]

private static const Button_UP:Class;

[Embed(source = "../media/textures/button_down.png")]

private static const Button_DOWN:Class;

public function Game() {

addEventListener(Event.ADDED_TO_STAGE, onAdded);

}

private function onAdded (e:Event):void {

// create a Bitmap object out of the embedded image

var buttonSkinUp:Bitmap = new Button_UP();

var buttonSkinDown:Bitmap = new Button_DOWN();

// 創建按鈕

var myButton:Button = new Button(Texture.fromBitmap(buttonSkinUp), "這是按鈕", Texture.fromBitmap(buttonSkinDown));

// 創建Menu容器並把按鈕加上去

var menuContainer:Sprite = new Sprite();

menuContainer.addChild(myButton);

// centers the menu

menuContainer.x = stage.stageWidth - menuContainer.width >> 1;

menuContainer.y = stage.stageHeight - menuContainer.height >> 1;

// show the button

addChild(menuContainer);

}

要注意的是，在starling裡面沒有hit area的設計，因為圖片有Bounds和Frame兩個屬性，所以要確定是否是碰到bounds的話，可以覆寫原有的hitTest函數，範例如下：

public override function hitTest( localPoint:Point, forTouch:Boolean=false ) :DisplayObject
{
	// on a touch test, invisible or untouchable objects cause the test to fail
	if( forTouch &amp;&amp; (!visible || !touchable) )
	{
		return null;
	}

	// otherwise, check bounding box of hitArea (which is a Rectangle here)
	var result:DisplayObject = null;
	if( _hitArea.containsPoint( localPoint ) )
	{
		result = this;
	}

	return result;
}

public override function hitTest( localPoint:Point, forTouch:Boolean=false ) :DisplayObject

{

// on a touch test, invisible or untouchable objects cause the test to fail

if( forTouch && (!visible || !touchable) )

{

return null;

}

// otherwise, check bounding box of hitArea (which is a Rectangle here)

var result:DisplayObject = null;

if( _hitArea.containsPoint( localPoint ) )

{

result = this;

}

return result;

}

若是要偵測是否碰到透明區塊，則要使用原生的BitmapData.hitTest去測試，使用方法如下：

public hitTest(firstPoint:Point, firstAlphaThreshold:Number, secondObject:Object, [secondBitmapPoint:Point], [secondAlphaThreshold:Number]) : Boolean

1	public hitTest(firstPoint:Point, firstAlphaThreshold:Number, secondObject:Object, [secondBitmapPoint:Point], [secondAlphaThreshold:Number]) : Boolean

Sprite物件

Sprite官方手冊在此：http://doc.starling-framework.org/core/starling/display/Sprite.html

DisplayObjectContainer官方手冊在此：http://doc.starling-framework.org/core/starling/display/DisplayObjectContainer.html

除了DisplayObjectContainer的功能以外，還多了一個flatten的屬性，這個屬性可以利用一些讓這個Sprite在播放動畫時更加的順暢，但若是開啟了flatten機制，所有之後對畫面的alpha、rotation和位置的改變都無法在畫面上被呈現。所以在使用此一屬性時要更加的小心。

Sprite一個專門用來放許多其他元件的標準容器，它可被偵聽下面這些事件：

Event.ADDED: the object was added to a parent.
Event.ADDED_TO_STAGE: the object was added to a parent that is connected to the stage, thus becoming visible now.
Event.REMOVED: the object was removed from a parent.
Event.REMOVED_FROM_STAGE: the object was removed from a parent that is connected to the stage, thus becoming invisible now.
KeyboardEvent.KEY_DOWN: 當按下按鍵時觸發
KeyboardEvent.KEY_UP: 當離開按鍵時觸發
EnterFrameEvent.ENTER_FRAME: 影格前進時觸發事件，根據frameRate的設定來決定一秒觸發幾次

[SWF(frameRate="60", width="1024", height="768", backgroundColor="0x000000")]

1

[SWF(frameRate="60", width="1024", height="768", backgroundColor="0x000000")]
Event.FLATTEN: 當開啟或關閉flatten功能時會觸發事件/li>

Claire's Blog

Starling的Display Objects介紹（三）

Button物件介紹

Sprite物件

One Reply to “Starling的Display Objects介紹（三）”