Canvas 圖層

Viewport 與 Canvas 項目

一般的 2D 節點,如 Node2DControl ,都是從 CanvasItem 繼承來的。CanvasItem 是所有 2D 節點的基礎型別。CanvasItem 可以用樹狀形式進行排列。其中的各個項目都會繼承其母節點的變換。也就是說,當母節點移動的時候,子節點也會跟著移動。

CanvasItem 節點與從 CanvasItem 繼承來的節點,都是 Viewport 直接或間接的子節點,同時也會通過 Viewport 來顯示。

Viewport 有 Viewport.canvas_transform 屬性,這個屬性能用來將自定 Transform2D 變換套用到其層級上包含的 CanvasItem。有些如 Camera2D 的節點就是通過更改這個變換來運作的。

如滾動等效果可以通過操作 Canvas 的變換屬性來實現以達到最佳效果。這種做法比移動根 Canvas 項目 (也就是整個場景) 來得有效率。

Usually though, we don't want everything in the game or app to be subject to the canvas transform. For example:

  • 視察背景 (Parallax Background): 比畫面中其他部分動得慢的背景。

  • UI: Think of a user interface (UI) or head-up display (HUD) superimposed on our view of the game world. We want a life counter, score display and other elements to retain their screen positions even when our view of the game world changes.

  • 轉場: 在轉場 (淡入淡出、混合等) 使用的視覺效果上,我們會希望這些效果保留在畫面上固定的位置。

要如何在單一場景樹中解決這些問題?

CanvasLayer

這個問題的答案就是 CanvasLayer 。CanvasLayer 是一個可以為其所有子節點與次級子節點加上額外的 2D 算繪圖層的節點。Viewport 子節點預設會在第「0」層上進行繪製,而 CanvasLayer 則會在其他數字的圖層上繪製。較大數字的圖層會被繪製在較小數字的圖層之上。CanvasLayer 自己也有獨立的變換,並不收到其他圖層的變換影響。這樣一來,便可以讓 UI 繪製在畫面上固定的地方,觀看遊戲世界的更改便不受影響。

CanvasLayer 的其中一個例子就是建立視差背景。可以通過將背景放在 CanvasLayer「-1」上來實現。分數、生命計數器與暫停按鈕的畫面可以建立在第「1」層上。

下圖顯示了圖層的樣子:

../../_images/canvaslayers.png

CanvasLayer 與樹狀順序彼此獨立,其順序只會依據圖層數字來決定,因此可以依據需求來進行實體化。

備註

若要控制節點的繪製順序,也不一定要使用 CanvasLayer。要確保節點被繪製另一個節點的「前方」還是「後方」的標準方法是在場景面板中調整節點的順序。也許不太直覺,但在場景面板最上面的節點會在 Viewport 中會被繪製在下方節點的 後面 。2D 節點也有能控制繪製順序的屬性 (請參考 Node2D.z_index)。