本篇會來討論 是否看得到 與 是否可互動 的關係

做了一個 Demo，右上角的 GUI 裡表示了整個方塊幾個屬性的開關

• visible
• renderable
• alpha

[ demo ]

截圖中看到指標變成手勢時，表示可互動

visible: 元件是否可以顯示，關掉時 無法互動

renderable: 元件是否會被運算，關掉時 可以互動

alpha: 元件的 alpha，設定為0 時 可以互動

就我自己而言，會搞混的是 renderable，
會覺得無法被運算時就無法互動，實際上是關掉時 仍可互動

PixiJS 裡實作上的差異：

從原始檔看來，覺得差異並不太大
visible、renderable、alpha 都是底層 DisplayObject 可視物件就有的屬性。
實作時由 PIXI.Container#render 覆寫掉 PIXI.DisplayObject#render 的 render() 抽象方法

    render(renderer: Renderer): void
    {
        // if the object is not visible or the alpha is 0 then no need to render this element
        if (!this.visible || this.worldAlpha <= 0 || !this.renderable)
        {
            return;
        }
        // ...
    }

由於運算時三個屬性之一讓結果不顯示就會不顯示
覺得效能上會有太大差異

所有的可視物件因為繼承，都會是相同的行為

實作上會用到的情形：

比按鈕還要大的感應區
類似於全站 popup，點畫面上任何一角都可以關掉 popup
可做全螢幕感應區蓋住畫面

[ Demo ]：
層級： bunny 與 popup 同層

1. 由於只有兔子開啟感應，點了會打開 popup

2. popup 本身也有感應，點了會關閉 popup
   透過感應區無法穿透的特性，蓋住畫面下方兔子的互動行為

3. 回復為原本狀態

bunny.on('pointerup', ()=>{
	console.log("hit: bunny, openPopup");
	hitArea.visible = true;
});

hitArea.on('pointerup', ()=>{
	console.log("hit: hitArea, closePopup");
	hitArea.visible = false;
});

今日小結：
利用 visible = false 時，無視 interactive、buttonMode 的特性
將上層元件使用 visible 控制是否看得到與是否可互動
就不需另外設定 interactive 與 buttonMode 了