系列文章目录
麦田物语第十三天
文章目录
- 系列文章目录
- 一、实现根据物品详情显示 ItemTooltip
- 脚本编写
- 二、制作 Player 的动画
一、实现根据物品详情显示 ItemTooltip
脚本编写
首先创建Scripts->Inventory->UI->ItemTooltip脚本，然后将其挂载到ItemTooltip物体上，接着编写其变量并对这些变量进行拖拽赋值（所有的Text以及底部显示文字的物体）。因为拖拽赋值比在代码中的Awake获取Component更快。
变量编写如下：
[SerializeField] private Text nameText;
[SerializeField] private Text typeText;
[SerializeField] private Text descriptionText;
[SerializeField] private Text valueText;
[SerializeField] private GameObject bottomPart;
- 1
- 2
- 3
- 4
- 5
接着我们观察ItemTooltip中需要的数据，名字，类型，物品描述以及物品的价值，这些都是在ItemDetails中已经存在的，那么我们需要一个函数将这个变量进行一个赋值，同时需要两个参数，分别是物品信息和物品所处位置的类型。然后对这些变量进行赋值，同时我们需要对价格的数值进行一个Switch选择，因为对于斧头等工具是不可以进行交易的，因为我们通过工具类型选择其出售的价格，如果物品类型为工具等，那么这个物品的价格显示栏就会消失，此时就需要我们的bottomPart变量了；同时我们规定当物品在背包中时就只会按照其出售价格显示，而不是其原本的价格。
接下来当我们鼠标移动到UI上面时就会调用这个方法并显示ItemTooltip即可。
所以我们需要在InventoryUI上进行变量的编写和赋值。
同时我们需要给每一个Slot_UI添加一个脚本ShowItemTooltip来显示，同时将这个脚本添加到预制体上。
那么现在就是ShowItemTooltip脚本的编写，由于我们编写的ItemTooltip脚本中的那个UI赋值方法需要ItemDetails，同时SlotUI脚本中刚好存在ItemDetails变量，那么我们为了避免这个脚本被滥用，需要添加一些限制[RequireComponent(typeof(SlotUI))]以确保添加ShowItemTooltip的脚本上必须有SlotUI脚本，在ShowItemTooltip脚本中首先需要进行变量的编写，一个我们需要拿到SlotUI，另一个需要拿到Inventory变量，因为这个才可以获得ItemDetails变量和InventoryUI中定义的ItemTooltip的UI，同时在Awake方法中赋值。
因为我们要实现鼠标移进Slot_UI时显示ItemTooltip，那么我们引入相关的接口：IPointerEnterHandler,IPointerExitHandler并生成相应的方法，首先在OnPointerEnter方法中，我们只可以对数量不为0的UI进行查询（物品数量为0时我们会将该UI设置为空），所以如果判断成功的话，我们将inventoryUI激活并且调用其赋值方法SetupTooltip（ItemTooltip脚本中）对其进行赋值，如果我们鼠标移进空格（else），那么将ItemTooltip取消激活；同时我们移出UI时，调用OnPointerExit方法也对该UI取消激活即可。
但是我们实现之后运行游戏发现我们的ItemTooltip会显示在屏幕中间而不是显示在鼠标移动的位置，这样不是很方便观察，因此我们需要更改ItemTooltip的位置使其显示在我们鼠标移动位置的上方。
结果虽然我们已经将现实的位置向上移动了，但是还是会遮挡下方的UI，原因是什么呢？
因为我们ItemTooltip的UI锚点位置位于正中间的位置，而我们这个操作需要将锚点的位置移到正下方即可，所以我们只需要将ItemTooltip的Povit的y值改为0就好了，所以我们在更改其位置前先设置该UI的锚点位置就完成了我们想要实现的功能。
ShowItemTooltip脚本如下：
namespace MFarm.Inventory
{
[RequireComponent(typeof(SlotUI))]
public class ShowItemTooltip : MonoBehaviour,IPointerEnterHandler,IPointerExitHandler
{
private SlotUI slotUI;
private InventoryUI inventoryUI => GetComponentInParent<InventoryUI>();
private void Awake()
{
slotUI = GetComponent<SlotUI>();
}
public void OnPointerEnter(PointerEventData eventData)
{
if (slotUI.itemAmount != 0)
{
inventoryUI.itemTooltip.gameObject.SetActive(true);
inventoryUI.itemTooltip.SetupTooltip(slotUI.itemDetails, slotUI.slotType);
inventoryUI.itemTooltip.GetComponent<RectTransform>().pivot = new Vector2(0.5f, 0);
inventoryUI.itemTooltip.transform.position = transform.position + Vector3.up * 60;
}
else
{
inventoryUI.itemTooltip.gameObject.SetActive(false);
}
}
public void OnPointerExit(PointerEventData eventData)
{
inventoryUI.itemTooltip.gameObject.SetActive(false);
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
ItemTooltip显示的物品种类是英文的，但是为了游戏方便理解，我们通过方法GetItemType将其改成中文的就可以了。
按照我们往常的想法，我们需要使用Switch对其进行一一赋值，在这个方法中我们使用c#的语法糖来实现。
ItemTooltip的GetItemType代码如下
private string GetItemType(ItemType itemType)
{
return itemType switch
{
ItemType.Seed => "种子",
ItemType.Commodity => "商品",
ItemType.Furniture => "家具",
ItemType.BreakTool => "工具",
ItemType.ChopTool => "工具",
ItemType.CollectTool => "工具",
ItemType.HoeTool => "工具",
ItemType.ReapTool => "工具",
ItemType.WaterTool => "工具",
_ => "无"
};
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
那么我们只需要在SetupTooltip方法中调用这个方法对类型Text进行赋值就行了。
最后还有一个问题就是当我们的描述从双行变成单行时会出现延时渲染的情况，那么我们可以强制它实时渲染（采用（Transform））。
ItemTooltip脚本代码如下：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class ItemTooltip : MonoBehaviour
{
[SerializeField] private Text nameText;
[SerializeField] private Text typeText;
[SerializeField] private Text descriptionText;
[SerializeField] private Text valueText;
[SerializeField] private GameObject bottomPart;
public void SetupTooltip(ItemDetails itemDetails, SlotType slotType)
{
nameText.text = itemDetails.itemName;
typeText.text = GetItemType(itemDetails.itemType);
descriptionText.text = itemDetails.itemDescription;
if (itemDetails.itemType == ItemType.Seed || itemDetails.itemType == ItemType.Commodity || itemDetails.itemType == ItemType.Furniture)
{
bottomPart.SetActive(true);
var price = itemDetails.itemPrice;
if (slotType == SlotType.Bag)
{
price = (int)(price * itemDetails.sellPercentage);
}
valueText.text = price.ToString();
}
else
{
bottomPart.SetActive(false);
}
LayoutRebuilder.ForceRebuildLayoutImmediate(GetComponent<RectTransform>());
}
private string GetItemType(ItemType itemType)
{
return itemType switch
{
ItemType.Seed => "种子",
ItemType.Commodity => "商品",
ItemType.Furniture => "家具",
ItemType.BreakTool => "工具",
ItemType.ChopTool => "工具",
ItemType.CollectTool => "工具",
ItemType.HoeTool => "工具",
ItemType.ReapTool => "工具",
ItemType.WaterTool => "工具",
_ => "无"
};
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
最后的最后，还是发现视觉上不是很好看，我们因此想要将其限制一个最小的高度，我们可以使用Layout Element组件来实现，他有很多选项，首先我们常用的就是忽略布局（Ignore Layout），还有期望高度，最大最小高度等，我们给其勾选最小高度（Min Height）并设置高度为25（自己设计即可）。
二、制作 Player 的动画
本小节主要实现的是人物的动画，在Hierarchy窗口中我们会发现Player是由几个部分组成的，因此我们实现人物动画时需要先实现一个基本Animator Controller，然后应用到每一个身体部分即可。那么我们首先先创建M_Studio-> Aniamtor->Player->Base Controller，在素材中提供了空的Animator片段，所以我们可以将这些空的Animator片段放入Base Controller，之后可以应用到其他方面。
我们在Base Controller中要实现四个方向的走动，跑动以及静止，并且我们要使用Blender Tree的方式。
接下来我们按下鼠标右键，创建新的Blender Tree，然后为其改名为Idle，双击进入Idle中，点击左侧的加号创建Float变量InputX和InputY，同时删除初始的Blend变量，将右侧Blend Type由1D更改为2D simple Directional，并将变量值赋值为InputX和InputY，然后点击右侧的加号为其添加4个Motion Field，并设置其相应的空的动画片段和Posx和PosY的值，赋值结果如下：
接下来我们也要实现走路和跑动的动画，所以我们需要在左侧新建一个Bool类型的变量isMoving，同时创建一个新的Blender Tree改名为Walk Run，为Idle和Walk Run之间Make Translation，当isMoving为true，Idle切换为Walk Run，同时取消勾选Has Exit Time和Fixed Duration，并将Transition Duration改为1（快速进行切换）；当isMoving为false时切换回来，同时取消勾选Has Exit Time和Fixed Duration，并将Transition Duration改为0。
同样的，Walk Run也是应用的InputX和InputY两个变量，然后我们进入这个Blender Tree，将右侧Blend Type由1D更改为2D simple Directional，并将变量值赋值为InputX和InputY，然后点击右侧的加号为其添加4个new Blender Tree而不是简单的Motion Field，因为我们想要通过人物移动速度实现跑动和走动的动画切换，Blender套Blender就实现了这个功能，并更改这四个Blender的名称和右侧的Parameter，Up和Down应该为InputY，Left和Right应该为InputX，如下：
然后更改这四个Motion的PosX和POSY的值，赋值结果如下：
然后对于每一个Blender Tree的参数进行更改，首先需要取消勾选Automate Thresholds，然后更改WalkUp和RunUp的Threshold分别为0.5和0.7。左侧右侧下侧都用同样的方法来添加，只不过左侧和下侧都要改为负值。
这时我们最基本的Animator就创建好了，我们只需要通过Base Controller来创建身体各个部位的Animator了，我们首先创建Animator Override Controller在不打乱逻辑的情况下创建新的Controller并改名为Body，在Inspector面板的Controller面板拖拽Base Controller上去即可，接下来我们就可以在下面看到动画片段的赋值位置，接下来的工作会有些繁琐，过程就是制作Animation的过程，这些动画都会放在素材里面，将其添加到相应的位置，同时给Body添加Animator并将Body拖拽过来。Arm和Hair也是如此。
接下来我们通过代码让人物实现基本动画的切换，首先我们需要获得得到Player身上的Animator组件（这个组件有三个），所以需要声明一个Animator数组并且还有声明切换动画的变量，InputX和InputY已经有了，所以只需要声明bool类型的isMoving就好了。接下来在Awake方法中拿到所有的Animator组件（GetComponentsInChildren）,然后编写函数方法SwitchAnimation切换动画，首先我们通过foreach来循环Player身上的所有组件来切换动画，接着我们需要将isMoving与Animator连接在一起。同时我们还需要判断是否为正在运动的状态，我们在PlayerInput方法中对isMoving进行赋值，如果为true，那么也将InputX和InputY连接在一起，在Update中调用这个方法就可以了。
最后我们想要实现按下左Shift键实现角色的行走，那么我们在Player脚本的PlayerInput方法中实现，判断是一定要使用GetKey而不是GetKeyDown，因为GetKey是检测是否一直被按下的。
Player脚本代码如下：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Player : MonoBehaviour
{
private Rigidbody2D rb;
public float speed;
private float inputX;
private float inputY;
private Vector2 movementInput;
[Header("Player移动动画")]
private Animator[] animators;
private bool isMoving;
private void Awake()
{
rb = GetComponent<Rigidbody2D>();
animators = rb.GetComponentsInChildren<Animator>();
}
private void Update()
{
PlayerInput();
SwitchAnimation();
}
private void FixedUpdate()
{
Movement();
}
private void PlayerInput()
{
inputX = Input.GetAxisRaw("Horizontal");
inputY = Input.GetAxisRaw("Vertical");
if (inputX != 0 && inputY != 0)
{
inputX *= 0.6f;
inputY *= 0.6f;
}
//设置走路状态
if (Input.GetKey(KeyCode.LeftShift))
{
inputX = inputX * 0.5f;
inputY = inputY * 0.5f;
}
movementInput = new Vector2(inputX, inputY);
isMoving = movementInput != Vector2.zero;
}
private void Movement()
{
rb.MovePosition(rb.position + movementInput * speed * Time.deltaTime);
}
private void SwitchAnimation()
{
foreach(var anim in animators)
{
anim.SetBool("isMoving", isMoving);
if (isMoving)
{
anim.SetFloat("InputX", inputX);
anim.SetFloat("InputY", inputY);
}
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73