本次教學筆記所使用的Godot版本為v4.2.1,程式語言為GDScript
============================================
【素材管理】
將同類型的圖檔整合進相同的資料夾,命名和分類方式可根據個人習慣調整,但建議都用英文名稱。
性質相近的圖片可再製作成圖集,使用前需要先右鍵 > 建立新的資源 > Atlas Texture,各別命名後儲存(像我是都放在Split資料夾)。雙擊選取要設定的資源,在右側的屬性面板指定好Atlas的來源,利用編輯區域 > 自動剪裁,會自動參考圖集的透明度分布,最後再手動點選需要圖片資源即可(記得存檔)。和直接使用多個圖片相比,圖集在實際使用前需要重新拆分零件,但方便一次替換同系列、但不同的介面風格(比如說:把橘色系換成藍色調)
【節點規劃】
Godot的遊戲畫面是由多個節點所串接的場景組成樹狀結構,也就是將想呈現的畫面拆成零件後,每個零件都根據需要的功能,找到最適合的節點來表現。命名一樣是以英文為主,沒有特別計較是不是有重複使用的名稱,只要確保能一眼認出這個節點對應到哪個UI零件就好。以下舉例幾個我自己有用到的節點及目前認為的使用方式:
- Node:最基礎的節點,可作為樹狀分枝的根節點,適合添加腳本來管理旗下的節點們。
- Node2D:讓同類型的場景串接後方便摺疊分類,擁有visible屬性可集體顯示 / 隱藏圖像。
- TextureButton:按鈕,支援Normal、Pressed、Hover、Disabled、Focused狀態下切換不同圖片。
- Label:文字標籤,在框選範圍內顯示文字,利用text屬性改變要顯示的內容。
- Sprite2D:替換texture顯示不同的圖片
補充:(2024/07/29)
- TextureRect:在Expend Mode選擇Ignore Size,再在Layout指定Custom Minium Size,所填入的texture就會自動調整成適合容器的尺寸。適合懶得將所有素材統一規格的時候使用
【代碼編寫-實例化場景】
因為是圖鑑,所以有些節點會用比較規律的方式來編排。為了省去對齊的時間,會將排版的步驟交給代碼來執行。首先製作一個較單純的按鈕,並保存成場景。
使用preload預先加載待會要實例化的場景,同時宣告幾個待會用來儲存節點路徑的陣列(避免每次尋找特定節點時都要重新搜索)
使用for i in range(6)讓下面這串代碼反覆執行6次
用Vector2來儲存圖片節點的座標(x,y)軸
將剛才預載入的場景節點使用instantiate()實例化
get_node("BtnPics")可抓取到現有場景中的這個Node2D節點,將新實例化的場景節點透過add_child()添加為子節點
set_position()設定子節點的座標
append()將新場景節點的路徑保存到陣列中
【代碼編寫-替換圖片】
creatureCollected是某個用來儲存這個小生物是否已經收集過了?的布林值陣列
也是透過get_node("")取得按鈕下的子節點Sprite2D(小生物的圖片節點)
利用visible和scale屬性讓圖片會顯示、且縮小成0.4倍
圖片路徑需參考素材管理時的資料夾,urlPic是要選用的圖片的名稱(之後會整合進資料庫)
print("")是除錯時很好用的一個語法,並不會顯示在遊戲畫面
最後透過set_texture(load(""))就可以順利使用路徑來替換圖片了
若需要將顯示的圖片反黑,可使用self_modulate這個屬性來加上一層濾鏡
【實際運行】
在經過一連串類似的代碼編寫後,就能完成場景惹。以成就頁面為例,現在只有純粹的畫面排版,還沒辦法透過按鍵或是滑鼠點選來切換頁面。可以期待下一部份的內容
-------參考資料-------
Godot學習筆記 - 在Godot 引擎中使用圖集資源 --- 慕雪の白羊 (2023/09/24)
節點與場景 --- Godot Engine
============================================
花了約一個星期,將3.0a~e的版面都排好了,不過因為是差不多的步驟、所以在筆記整理上真的不太好呈現ˊ~ˋ。很多Unity時期就很常用的語法和UGUI排版方式都可以在Godot找到類似的親切方法,唯一的困擾是節點種類真的超級多,而且都是要用了才知道這個是不是自己最需要的www