iT邦幫忙

2023 iThome 鐵人賽

DAY 19
1
Modern Web

什麼!在網頁上也可以寫遊戲?系列 第 19

[Day 19] 建立圖層佈局介紹(續)

  • 分享至 

  • xImage
  •  

繼昨天我們介紹了圖層的觀念之後,今天要繼續來看動作裡的其他設定。

這三個欄位後面都有註解說明,我在這邊附上其文字說明,並再以我的方式額外補充。

父節點的物件ID

用來安置這個物件的父節點的 ID。 若未設定,則此物件會被安置於根節點。

首先我們必須先知道說明中的 這個物件 是指哪個物件,其實意思就是指下方圖片佈局中的所有物件,接著還記得昨天提到的父節點嗎?就是指兩個顯示物件之間的相互關係,只要將 A 物件加入於 B 物件之上,B 就屬於 A 的父節點。

因此這裡的意思其實就是指下方的物件們要加入到哪一個物件當中,我們昨天也提到了每一個物件都具有容器的屬性,都代表著一個圖層,因此任何顯示物件都可以做為父節點,但如果都沒有選擇的話,就會預設加入到根節點中,也就是 root

父節點的子物件順序位置

將此物件安插於父節點下的子物件順序位置。留白設定以安插於圖層頂部。設定 0 以安插於圖層底部。

在這裡,我們是直接以數字的排序去定義它們之間的前後關係,由於在程式中排序的開頭都是以 0 做起點,並非是 1,所以在這邊我們也是以 0 為底。

上圖中我新增了兩個容器,每個容器內都裝了一個方形和文字,並且我以文字去代表他們的排序,可以看到 0 在下,1 在上,這時我如果直接新增了一個 2,肯定也是在它們之上。

但若藉由這個欄位的設定,我們就可以將其他顯示物件安插在原本的 0 和 1 之間,例如我另外新增了一個建立圖層佈局,並且設定了順序位置為 1,而下方的圖片佈局中我同樣的新增了類似的容器,但數字為 2,完成後儲存動作並執行。

此時就可以看到 2 被排在了 0 和 1 之間,我們來解釋一下它們之間發生了什麼變化,原本的 0、1,在相同圖層之間的排序也是 0、1,但由於 2 的加入,強制替換掉了原本排序為 1 的 1,也就是將原本排序為 1 的物件變成了 2,那原本排序為 1 的 1 呢?此時它就會自動往後疊加,變成了排序 2,當然若是 1 後面還有其他物件的話也會自動往後排序,因此此時按照排序排列的話就會是 0、2、1。

圖層ID

定義圖層的 ID。
若有設定,則會產生新圖層節點,所有佈局中的圖片會被加到該圖層節點。
若未設定,則不會產生新圖層,所有佈局中的圖片會被直接加到父節點之下。

這個部分相對的就比較單純了一點,就是可以產生一個容器來容納圖片佈局內的所有物件,原本的提示內容就解釋得很清楚,唯一要補充的,就是在有設定產生新圖層之後,該圖層還會被加入到父節點當中,也就是第一個欄位所設定的對象。

CG 範例事件表

以上,關於建立圖層佈局中顯示物件的介紹就到此為止了,在動作目錄 更新/顯示 內,還有很多相關的動作,例如 更新顯示物件更新文字變更顯示物件的繪圖順序,這三個也都是我們很常會用到的,因為常常會需要更新物件的位置、大小、文字的顯示訊息,包括我們剛剛介紹的物件順序位置,也都是可以後續利用動作去更改的。

總結

今天我們補充介紹了建立圖層佈局內的其他設定,以及一些觀念補充,對於顯示物件的介紹算是正式告一段落了,從明天開始我們要來進入最後的階段了,也就是專案成品的實作篇,不同於之前 Day 10 時的實作只是介紹流程,這次會一步一步的帶各位從零完成一個成品,還敬請期待~


上一篇
[Day 18] 建立圖層佈局介紹-圖層觀念篇
下一篇
[Day 20] 射飛鏢實作篇-事前規劃、舞台設定
系列文
什麼!在網頁上也可以寫遊戲?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言