3D Action RPG 工作日誌

本章要來講講顯示人物屬性的視窗，主要是從背包內裝上裝備後，必須要更新人物屬性數值。首先，讓我們在Character Panel中新增一個UI/Panel。 新的Panel取名為Property Panel，然後在底下新增一個UI/Text，這是要用來顯示人數屬性的。 然後，Text的Anchor Presets請設定成stretch stretch。 然後請大家自己調整一下文字的大小、顏色。 最後，大致上做成如下圖的模樣，Property Panel的背景底圖就請大家自己找找吧。 接著，新增一個Script名為CharacterProperty.cs。 CharacterProperty.cs的原始碼如下： using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; namespace RPG.Inventory{ public class CharacterProperty : MonoBehaviour { [SerializeField] int baseStrength = 10; [SerializeField] int baseIntellect = 10; [SerializeField] int baseAgility = 10; [SerializeField] int baseStamina = 10; Text propertyText; InventorySystem inventorySystem; void Start(){ propertyText = GetComponent (); inventorySystem = GetComponentInParent (); } public void UpdatePropertyText(){ int strength = 0; int intellect = 0; int agility = 0; int stamina = 0; Slot[] slotList = inventorySystem.G

本章要來製作角色面板以及實作裝備穿戴功能，在背包介面按下滑鼠右鍵可以自動穿戴裝備，且裝備會自動放置到對應裝備類型的Slot。如果角色已經穿上了某個類型的裝備，則會與背包內的裝備交換。 首先實作前先解決一個Bug，我發現裝備的類型沒有正常解析，如下圖。靴子的裝備類型出現頭部，很顯然解析出錯。 請大家將Item.cs的OnAfterDeserialize方法設為virtual方法。 然後將Equipment.cs的OnAfterDeserialize方法設為override方法，這樣才能正確複寫父類別的OnAfterDeserialize。 接著來創建角色面板吧。首先，我們必須先新增一個Script名為EquipmentSlot，這個類別要繼承原本的Slot.cs。 在新的EquipmentSlot.cs中，我們會重新實作OnPointerDown方法，如下圖。先確認手上是否有裝備，且手上的裝備類型必須要跟Slot指定的裝備類型相同，才可以放進Slot。如果Slot內已經有裝備了，則會跟手上的裝備進行交換。如果是手上沒有裝備的狀態，則能直接取得Slot內的裝備。 然後，在裝備Slot內按下右鍵，就會自動脫下裝備放到背包中。 以下提供EquipmentSlot.cs完整程式碼： using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; namespace RPG.Inventory{ public class EquipmentSlot : Slot { [SerializeField] public EquipmentType equipmentType; public override void OnPointerDown(PointerEventData eventData){ // 使用滑鼠右鍵自動脫下裝備 if (eventData.button == PointerEventData.InputButton.Right && invetorySystem.isPickedItem

今天要來教大家製作『丟棄物品』和『控制介面顯示』的功能，將物品用滑鼠移動到背包外面並點擊滑鼠左鍵，該物品就會被丟棄，以及使用快捷鍵和介面右上角的叉叉按鈕，就可以開關介面。 首先，在InventorySystem.cs的Update中，額外增加下列的程式碼，使用EventSystem的IsPointerOverGameObject方法，可以判斷滑鼠左鍵有沒有點擊到GameObject，若沒有，則將PickedItem隱藏，並將isPickedItem設為false。下次滑鼠點擊背包的其他物體時，PickedItem資訊會被重整，相當於上一個狀態的物體被丟棄。 InventorySystem.cs的完整程式碼如下： using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.Assertions; using UnityEngine.UI; using UnityEngine.EventSystems; namespace RPG.Inventory{ public class InventorySystem : MonoBehaviour { [SerializeField] ToolTip toolTip; [SerializeField] ItemUI pickedItem; public bool isPickedItem = false; ItemList itemList; Slot[] slotList; void Start () { ParseItemsJson (); slotList = GetComponentsInChildren (); } void Update(){ // 測試程式碼，手動生成物品 if (Input.GetKeyDown (KeyCode.G)) { StoreItem (Random.Range(1,3)); } if (isPickedItem) { // 將滑鼠座標轉換成Canvas上的座標 Vector2 position; Canvas canv

今天要來做個簡單的箱子，由於前半段我們已經將程式碼都建構好了，這一步顯得非常簡單。首先，在Knapsack Panel按右鍵選擇Duplicate複製一份。 複製後的Panel取名為Chest Panel，另外由於箱子的Slot數量比較少，所以將後面幾個Slot都刪除。 然後稍微調整一下介面，如下圖的樣子。 接著最重要的一部，就是在Canvas新增我們寫的InventorySystem.cs，並設定好Tooltip和PickedItem參數。 原本的InventorySystem.cs是放在Knapsack Panel，請刪除。 最後執行遊戲測試看看吧，我們可以在背包跟箱子之間移動物品嘍！

本章要來完成背包系統點擊物品的功能，按住Z鍵點擊物品時僅會取得一半的物品，按住Z鍵放置物品時則會一個一個的放進去。若直接點擊物品則能取得所有物品，也能直接放置物品，同時必須顧慮到物品的容量上限。 本次修改只有動到Slot.cs，而且程式碼解說已經寫在註解中了，請大家自己看看吧！如果不懂這次修改的內容，請記得將前幾篇相關的文章都看一下唷！ 5-10 Click To Pickup Item https://rpgcorecombat.blogspot.tw/2018/01/5-10-click-to-pickup-item.html 5-11 Play Scale Animation When Getting Item https://rpgcorecombat.blogspot.tw/2018/01/5-11-play-scale-animation-when-getting.html Slot.cs： using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; namespace RPG.Inventory{ public class Slot : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler, IPointerDownHandler { [SerializeField] GameObject itemPrefab; public void StoreItem(Item item){ // 若Slot底下沒有Item，則Instantiate一個 if (transform.childCount == 0) { GameObject itemObject = Instantiate (itemPrefab, transform); itemObject.GetComponentInChildren ().SetItem (item); } else { // 已存在該Item，所以增加數量即可 transform.GetComponen

今天要介紹大家一個簡單的功能，就是當玩家獲取物品時，背包內的Item會有簡單的縮放動畫，這個設計是讓玩家能較清楚的看出取得物品的變化。 如下圖，剛取得物品的時候會較大。 然後物品會再慢慢縮減到正常大小。 這個功能不難，我們主要修改ItemUI.cs： using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; namespace RPG.Inventory{ public class ItemUI : MonoBehaviour{ public Item Item { get; set; } public int Amount { get; set; } [SerializeField] float smoothScaleMultiplier = 4f; float targetScale = 1f; Vector3 initialScale = new Vector3(1.4f, 1.4f, 1.4f); void Update(){ // 獲取物品動畫 if (transform.localScale.x != targetScale) { float scale = Mathf.Lerp (transform.localScale.x, targetScale, smoothScaleMultiplier*Time.deltaTime); transform.localScale = new Vector3 (scale, scale, scale); if (Mathf.Abs (transform.localScale.x - targetScale) < 0.01f) { transform.localScale = new Vector3 (targetScale, targetScale, targetScale); } } } public void SetItem(Item item, int amount = 1){ transform.localScale = in

本篇要介紹用滑鼠點擊背包內的物體後，會將物體選取起來，如果按住Z鍵再選擇物體的話，只會選擇一半的物體。選取起來的物體，會跟著滑鼠的鼠標移動。因為這個功能同時修改的部分比較多，所以會分多篇文章介紹，本篇先介紹選取，後續篇再介紹放下。 首先在Canvas底下創造一個PickedItem，這個物件是前面章節所介紹名為的Item的Prefab，如果不知道這個Prefab怎麼製作，請先看看以前的文章： 5-6 Knapsack User Interface  https://rpgcorecombat.blogspot.tw/2018/01/5-6-knapsack-user-interface.html   製作完成後，應該會在場景中看見如下圖的PickedItem物件，這是要用在滑鼠點擊物體後，會依照物體的資訊顯示在PickedItem上面，並將原本點擊的Slot上的Item移除。 PickedItem預設要不啟用，所以請大家在Inspector視窗中將勾勾取消。 首先簡單介紹一下Slot修改後的程式碼，主要是繼承IPointerDownHandler，並覆寫OnPointerDown方法，該方法可以偵測滑鼠按下的事件。 然後實作內容中，先用transform.childCount確認Slot內是否有Item，再用InvntorySystem類中的bool屬性isPickedItem判斷目前是否處於『Picked』狀態，如果為非，則可以將Slot內的物體取出來。其他行則有撰寫註解，請大家自己閱讀。 在InventorySystem類中，則主要新增了PickupItem方法，此方法用來將滑鼠點中的Item屬性設定到PickedItem上面。 以下提供本次修改的完整程式碼。 Slot.cs： using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.EventSystems; namespace RPG.Inventory{ public class Slot : MonoBehaviour, IPointerEnterHandler, IPointerExitH