快訊!我的新書登上天瓏網路書店11月份暢銷榜第一名啦!看過的都說讚!歡迎大家前往訂購!
>>>> AI 職場超神助手:ChatGPT 與生成式 AI 一鍵搞定工作難題 <<<<

Starling的Display Objects介紹(三)

上一篇:Starling的Display Objects介紹(二)
下一篇:Starling的Display Objects介紹(四)

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

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);
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 >> 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 && (!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

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")]
  • Event.FLATTEN: 當開啟或關閉flatten功能時會觸發事件/li>

17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。

如果你認同我或想支持我的努力,歡迎請我喝一杯咖啡!讓我更有動力分享知識!