Starling Display Objects：Button 與 Sprite 實作重點

Starling Button 和 Flash SimpleButton 差在哪裡？

Starling Button 主要使用 upState 與 downState 兩個材質狀態。Flash SimpleButton 常見的 over 狀態在 Starling Button 中不是同樣設計，disabled 外觀可透過 `alphaWhenDisabled` 控制。

監聽 Button 點擊時，Starling 常用 `Event.TRIGGERED`：

```actionscript

menuContainer.addEventListener(Event.TRIGGERED, onTriggered);

private function onTriggered(e:Event):void {

trace(e.currentTarget, e.target);

trace("triggered!");

}

```

`currentTarget` 是掛監聽器的物件，`target` 是實際觸發事件的物件。這在容器裡有多個按鈕時特別重要。

如何建立 Starling Button？

Starling Button 需要把圖片轉成 Texture，再用 Texture 建立按鈕。按鈕通常會被放進 Sprite 容器，方便一起定位與管理。

基本範例：

```actionscript

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 {

var buttonSkinUp:Bitmap = new Button_UP();

var buttonSkinDown:Bitmap = new Button_DOWN();

var myButton:Button = new Button(

Texture.fromBitmap(buttonSkinUp),

"這是按鈕",

Texture.fromBitmap(buttonSkinDown)

);

var menuContainer:Sprite = new Sprite();

menuContainer.addChild(myButton);

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

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

addChild(menuContainer);

}

}

}

```

原稿的實務提醒是：按鈕素材不只要看視覺大小，也要確認互動範圍是否符合玩家直覺。

Starling 如何處理 hitTest？

Starling 沒有直接沿用 Flash hit area 的操作方式。若需要自訂點擊範圍，可以覆寫 `hitTest`，用 Rectangle 或其他邏輯判斷是否命中。

範例：

```actionscript

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

{

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

return null;

}

var result:DisplayObject = null;

if (_hitArea.containsPoint(localPoint)) {

result = this;

}

return result;

}

```

若需要偵測透明區域是否被點擊，可以回到原生 `BitmapData.hitTest` 思路。遊戲 UI 最好避免讓可點擊範圍和視覺範圍差太多，否則玩家會覺得操作不穩。

Starling Sprite 適合做什麼？

Starling Sprite 是標準顯示容器，適合放置多個 DisplayObject 並一起移動、顯示或移除。Sprite 繼承 DisplayObjectContainer，因此可用來組合 UI、角色部件與遊戲場景元素。

常見事件：

• `Event.ADDED`：物件被加入 parent。
• `Event.ADDED_TO_STAGE`：物件被加入連到 stage 的 parent。
• `Event.REMOVED`：物件從 parent 移除。
• `Event.REMOVED_FROM_STAGE`：物件離開 stage。
• `KeyboardEvent.KEY_DOWN`：按鍵按下。
• `KeyboardEvent.KEY_UP`：按鍵放開。
• `EnterFrameEvent.ENTER_FRAME`：影格更新。
• `Event.FLATTEN`：flatten 狀態改變。

Sprite 很適合當作功能單位。例如主選單、角色容器、粒子容器都可以各自是一個 Sprite。

flatten 屬性要注意什麼？

Starling Sprite 的 flatten 可提升靜態內容渲染效率，但 flatten 後的 alpha、rotation、位置變化不一定會如預期更新。flatten 適合靜態或少變動的顯示群組，不適合持續動畫中的物件。

使用判斷：

資訊增益建議：若畫面效能不佳，先用 profiling 確認瓶頸，再針對靜態顯示群組測試 flatten。不要把 flatten 當成通用效能開關。

常見問題

QStarling Button 點擊事件要聽哪一個？

Starling Button 常用 `Event.TRIGGERED` 監聽按下事件。若監聽器掛在容器上，要用 `target` 分辨實際觸發的按鈕。

QStarling Button 有 hover 狀態嗎？

Starling Button 的常見設計是 upState 與 downState。若要 hover 或更細緻狀態，通常需要自行擴充互動事件與材質切換。

QStarling Sprite 和 DisplayObjectContainer 差在哪裡？

Starling Sprite 是 DisplayObjectContainer 的常用子類別，適合直接作為容器使用。Sprite 額外提供 flatten 等功能，方便管理顯示群組效能。

QStarling 要怎麼做不規則點擊範圍？

可以覆寫 `hitTest` 或使用像素層級判斷。實作前要確認互動需求，因為像素級 hit test 可能增加計算成本。

Qflatten 可以提升所有動畫效能嗎？

flatten 不適合所有動畫。flatten 比較適合靜態內容，若物件位置、旋轉、透明度持續改變，flatten 可能造成畫面更新問題。

參考資料

• Starling Framework, Button API：<https://doc.starling-framework.org/core/starling/display/Button.html>
• Starling Framework, Sprite API：<https://doc.starling-framework.org/core/starling/display/Sprite.html>
• Starling Framework, DisplayObjectContainer API：<https://doc.starling-framework.org/core/starling/display/DisplayObjectContainer.html>
• Adobe, BitmapData hitTest：<https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html#hitTest()>

最後更新

2026-08-27

延伸閱讀

• Starling Display Objects：Quad 與 Image 物件解析
• Starling Display Objects：TextField 與點陣字型實作
• Starling Framework簡介
• Starling MovieClip 動畫：用 Juggler 驅動影格播放

關於作者 {#author}

Claire Chang ｜ 企業 AI 導入與流程轉型顧問。專注於 AI Agent 架構設計、ERP 系統整合與企業 AI 治理。

首次發布：2014-02-08