Unity3DGame学习笔记：背包系统(homework10)
本次作业的任务是使用UI制作一个背包系统
首先要制作一个静态的场景
游戏对象如下
其中Bag是新建的空对象，在里面创建9个按钮，下面是Bag和其按钮的参数设置
Equipment为装备栏，在里面创建3个按钮，下面是装备栏和其按钮的参数设置
Random是一个按钮，用于重新生成装备栏中的装备
再加上人物预设（从Asset Store上下载），摄像机，粒子系统，背景图片
下面是UI Camera的参数设置
以及Hero Camera的参数设置，人物预设设置为HeroCamera的child
调整相应位置后可得到如下的场景
至此已经完成场景的基本布局
接下来的任务是用代码实现具体的UI行为
首先是TiltWindow.cs，挂载在对象Bag和Equipment上，用于实现画布随鼠标摆动
public class TiltWindow : MonoBehaviour
public Vector2 range = new Vector2(5f, 3f);
Transform mT
Quaternion mS
Vector2 mRot = Vector2.
void Start ()
mStart = mTrans.localR
void Update ()
Vector3 pos = Input.mouseP
float halfWidth = Screen.width * 0.5f;
float halfHeight = Screen.height * 0.5f;
float x = Mathf.Clamp((pos.x - halfWidth) / halfWidth, -1f, 1f);
float y = Mathf.Clamp((pos.y - halfHeight) / halfHeight, -1f, 1f);
mRot = Vector2.Lerp(mRot, new Vector2(x, y), Time.deltaTime * 5f);
mTrans.localRotation = mStart * Quaternion.Euler(-mRot.y * range.y, -mRot.x * range.x, 0f);
}接下来是GameManager.cs，挂载在对象Canvas上，用于作为场景的控制管理器
其中三个int参数主要用于标志装备栏中的装备，通过将他们设置为1，具体在下面Equipment.cs中的Update函数通过检测这三个数的值重新生成新的装备
public class GameManager : MonoBehaviour {
private MouseI
private int IsHat = 0;
private int IsHand = 0;
private int IsShoes = 0;
void Start() {
mouse = (MouseImage)FindObjectOfType (typeof(MouseImage));
public MouseImage getMouse() {
public void setMouse(MouseImage m) {
if (mouse == null) {
public void RandomWear() {
IsHat = 1;
IsHand = 1;
IsShoes = 1;
public int getHat() { return IsH }
public int getHand() { return IsH }
public int getShoes() { return IsS }
public void setHat(int h) { IsHat = }
public void setHand(int h) { IsHand = }
public void setShoes(int s) { IsShoes = }
}接下来是Equipment.cs，挂载在每个equipment按钮上，用于完成装备栏中拾取和放置装备的行为
mouseType用于记录当前鼠标拾取的装备种类
OnEquipButton函数完成装备从装备栏到鼠标或者从鼠标到装备栏的移动
public class Equipment : MonoBehaviour {
private GameManager GM;
private Image equipI
public int mouseT
public Sprite UIS
void Start() {
GM = (GameManager)FindObjectOfType (typeof(GameManager));
equipImage = GetComponent&Image& ();
public void OnEquipButton() {
int _mouseType = GM.getMouse ().getMouseType ();
if (equipImage.sprite == equip && _mouseType == 0) {
equipImage.sprite = UIS
GM.getMouse ().setMouseType (mouseType);
else if (equipImage.sprite == UISprite && _mouseType == mouseType) {
equipImage.sprite =
GM.getMouse ().setMouseType (0);
void Update() {
if (mouseType == 1 && GM.getHat () == 1) {
GM.setHat (0);
equipImage.sprite =
else if (mouseType == 2 && GM.getHand() == 1)
GM.setHand (0);
equipImage.sprite =
else if (mouseType == 3 && GM.getShoes() == 1)
GM.setShoes (0);
equipImage.sprite =
由于装备栏中三个按钮规定的装备种类不同，因此在参数设置上也会有所不同，下面是用于放置Hat的按钮设置
接下来是Bag.cs，挂载在Bag中每个按钮上，用于完成背包栏中的拾取和放置装备的行为
第一个if中实现背包为空，鼠标不为空的情况的放置
下面三个if中实现背包不为空的情况的拾取放置，当鼠标和背包中都有装备时，点击将使两者的装备互换
public class Bag : MonoBehaviour {
private GameManager GM;
private Image bagI
private int mouseType = 0;
public Sprite UIS
void Start() {
GM = (GameManager)FindObjectOfType (typeof(GameManager));
bagImage = GetComponent&Image& ();
public void OnBagButton() {
int _mouseType = GM.getMouse ().getMouseType ();
Debug.Log (_mouseType);
if (bagImage.sprite == UISprite && _mouseType != 0) {
Debug.Log ("put in");
if (_mouseType == 1) {
bagImage.sprite =
GM.getMouse ().setMouseType (0);
} else if (_mouseType == 2) {
bagImage.sprite =
GM.getMouse ().setMouseType (0);
} else if (_mouseType == 3) {
bagImage.sprite =
GM.getMouse ().setMouseType (0);
else if (bagImage.sprite == hat)
if (_mouseType == 0) {
bagImage.sprite = UIS
else if (_mouseType == 1)
bagImage.sprite =
else if (_mouseType == 2)
bagImage.sprite =
else if (_mouseType == 3)
bagImage.sprite =
GM.getMouse ().setMouseType (1);
else if (bagImage.sprite == hand)
if (_mouseType == 0) {
bagImage.sprite = UIS
else if (_mouseType == 1)
bagImage.sprite =
else if (_mouseType == 2)
bagImage.sprite =
else if (_mouseType == 3)
bagImage.sprite =
GM.getMouse ().setMouseType (2);
else if (bagImage.sprite == shoes)
if (_mouseType == 0) {
bagImage.sprite = UIS
else if (_mouseType == 1)
bagImage.sprite =
else if (_mouseType == 2)
bagImage.sprite =
else if (_mouseType == 3)
bagImage.sprite =
GM.getMouse ().setMouseType (3);
由于背包中每个按钮并没有规定放置的装备种类，因此三种装备都可以放置
下面为Bag中按钮的参数设置
接下来是MouseImage.cs，用于实现鼠标的拾取和放置行为，挂载在空的Image对象UI Image上
public class MouseImage : MonoBehaviour {
private GameManager GM;
private Image mouseI
private int mouseType = 0;
private int zP
void Start() {
GM = (GameManager)FindObjectOfType (typeof(GameManager));
GM.setMouse (this);
mouseImage = GetComponent&Image& ();
zPosition = -400;
public int getMouseType() { return mouseT }
public void setMouseType(int m) { mouseType = }
void Update() {
Debug.Log (mouseType);
if (mouseType == 0) {
mouseImage.sprite =
else if (mouseType == 1) {
mouseImage.sprite =
else if (mouseType == 2) {
mouseImage.sprite =
else if (mouseType == 3) {
mouseImage.sprite =
transform.position = new Vector3 (Input.mousePosition.x - 450, Input.mousePosition.y - 300 , zPosition);
//Debug.Log (Input.mousePosition);
if (mouseType != 0) {
zPosition = 100;
zPosition = -400;
transform.position = new Vector3 (Input.mousePosition.x - 450, Input.mousePosition.y - 300 , zPosition);实现拾取的图片跟随鼠标移动
参数设置如下
最后是RandomWear.cs，实现在装备栏中重新生成新的装备（调用GameManager中的函数），挂载在RandomWear按钮上
public class RandomWear : MonoBehaviour {
private GameManager GM;
void Start() {
GM = (GameManager)FindObjectOfType (typeof(GameManager));
public void OnPress() {
GM.RandomWear ();
至此已基本完成，实现效果如下
（图片大小限制只能截这么小的图）
这次还有一些没有实现，如每种装备有多个不同的对象，在人物身上装上相应的装备，只能等以后有时间再完善了= =
没有更多推荐了，294 次阅读
标签：至少1个，最多5个
UGUI实现背包系统
UI 即 User Interface（用户界面）的简称。在许多软件中，采用狭义的概念，特指窗体、面板、按钮、文本框等人们熟悉的人机交互元素，及其组织与风格（也称皮肤）。Unity UI 系统采用上述狭义概念。
Unity 目前支持两套完全不同风格的 UI 系统：
IMGUI（Immediate Mode GUI）及时模式图形界面。它是代码驱动的 UI 系统，即没有图形化设计界面，只能在 OnGUI 阶段用 GUI 系列的类绘制各种 UI 元素。
Unity GUI / UGUI 是面向对象的 UI 系统。所有 UI 元素都是游戏对象，有友好的图形化设计界面， 在场景渲染阶段渲染这些 UI 元素。
UGUI设计界面可视化，动画效果和元素更加丰富，支持多模式和多摄像机渲染。
使用UGUI实现一个背包系统，包括下列四项主要效果：
实现背包的主要页面。
背包系统中放置物品的格子和物品图片。
实现鼠标拖动物体调整背包。
简单的动画效果，如下列例子：
首先是添加一个Canvas，命名为BackPack并且设置屏幕空间为摄像机，渲染摄像机为主摄像机。
然后建立背包中所有的格子。通过组件Grid LayOut Group实现自动布局，然后添加Image对象填充。
演示GIF中有一个背包和物品栏随鼠标移动的效果，所以仿照这种方法，建立一个脚本获取鼠标位置然后将Bag和Wear两个物品栏的朝向设为鼠标的方向。
public class FollowMouse : MonoBehaviour {
public Vector2 range = new Vector2(7f, 5f);
Transform mT
Quaternion mS
Vector2 mRot = Vector2.
void Start()
mStart = mTrans.localR
void Update()
Vector3 pos = Input.mouseP
float halfWidth = Screen.width * 0.5f;
float halfHeight = Screen.height * 0.5f;
float x = Mathf.Clamp((pos.x - halfWidth) / halfWidth, -2f, 2f);
float y = Mathf.Clamp((pos.y - halfHeight) / halfHeight, -2f, 2f);
mRot = Vector2.Lerp(mRot, new Vector2(x, y), Time.deltaTime * 5f);
//旋转方向与鼠标所在方向一致
mTrans.localRotation = mStart * Quaternion.Euler(-mRot.y * range.y, -mRot.x * range.x, 0f);
接下来要完成的任务就是同时显示游戏对象和UI界面。
这里首先添加了一个摄像机PlayerCamera，然后调整好位置用来显示玩家的人物：
然后再分别对两个摄像机进行设置，让主摄像机只显示UI，玩家摄像机显示人物对象，最后再调整摄像机显示的布局Viewport Rect使玩家显示在中间：
给游戏对象添加动画：
最后是显示效果：
这个时候就要开始考虑如何实现拖拽了,先得承认这一部分非常难，读了好久别人的代码才能搬砖的。首先这里有三个与拖拽有关的接口IBeginDragHandler, IDragHandler, IEndDragHandler，实现的拖拽类必须继承这些接口，然后再具体实现。这里的实现方法是拖拽物品的Image对象，其实还考虑过交换图片，但是由于在鼠标点击处创建一个临时对象然后将图片传给它，然后再来传递比较复杂，所以采用了新建了所有存储物品的Image对象，然后直接拖动这些对象的方法。
新建存储了物品的Image列表。
OnBeginDrag函数在开始拖动时调用，设置显示优先级以及记录起点位置。
canvasGroup.blocksRaycasts =//让event trigger忽略自身，这样才可以让event trigger检测到它下面一层的对象,如包裹或物品格子等
lastEnter = eventData.pointerE
lastEnterNormalColor = lastEnter.GetComponent&Image&().
originalPosition = myTransform.//拖拽前记录起始位置
gameObject.transform.SetAsLastSibling();//保证当前操作的对象能够优先渲染，即不会被其它对象遮挡住
OnDrag函数实现了Image对象的拖拽效果。
public void OnDrag(PointerEventData eventData)
Vector3 globalMouseP
if (RectTransformUtility.ScreenPointToWorldPointInRectangle(myRectTransform, eventData.position, eventData.pressEventCamera, out globalMousePos))
myRectTransform.position = globalMouseP
GameObject curEnter = eventData.pointerE
bool inItemGrid = EnterItemGrid(curEnter);
if (inItemGrid)
Image img = curEnter.GetComponent&Image&();
lastEnter.GetComponent&Image&().color = lastEnterNormalC
if (lastEnter != curEnter)
lastEnter.GetComponent&Image&().color = lastEnterNormalC
lastEnter = curE//记录当前物品格子以供下一帧调用
//当前格子设置高亮
img.color = highLightC
OnEndDrag函数则是最后停止拖拽时进行判断，分为拖拽到了方格位置，另一个物品对象上和空位置三种情况。分别进行判断处理。
public void OnEndDrag(PointerEventData eventData)
GameObject curEnter = eventData.pointerE
//拖拽到的空区域中（如包裹外），恢复原位
if (curEnter == null)
myTransform.position = originalP
//移动至物品格子上
if (curEnter.name == "UI_ItemGrid")
myTransform.position = curEnter.transform.
originalPosition = myTransform.
curEnter.GetComponent&Image&().color = lastEnterNormalC//当前格子恢复正常颜色
//移动至包裹中的其它物品上
if (curEnter.name == eventData.pointerDrag.name && curEnter != eventData.pointerDrag)
Vector3 targetPostion = curEnter.transform.
curEnter.transform.position = originalP
myTransform.position = targetP
originalPosition = myTransform.
else//拖拽至其它对象上面（包裹上的其它区域）
myTransform.position = originalP
lastEnter.GetComponent&Image&().color = lastEnterNormalC//上一帧的格子恢复正常颜色
canvasGroup.blocksRaycasts =//确保event trigger下次能检测到当前对象
将玩家对象的摄像机改为仅深度，在Game界面显示的对象只有游戏对象。或者取消第二个摄像机，将玩家对象摆在适当的位置，将主摄像机调整为SkyBox，然后再加上背景板也可以实现相同的效果，并且游戏对象不会遮住拖动的物品。
0 收藏&&|&&0
你可能感兴趣的文章
楼主这个到最后脚本那里还有新建的物体不详细啊
楼主这个到最后脚本那里还有新建的物体不详细啊
你可能感兴趣的文章
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。unity3D游戏开发中如何用UGUI制作背包
unity3D游戏开发中如何用UGUI制作背包
浏览次数：17341
浏览次数：2056
浏览次数：1289
浏览次数：1519
浏览次数：1687
如果你对以下课程意犹未尽，，查看全部课程
HTML5全栈开发
HTML5最新课程
156 人在学
c#编程概述
C#快速入门
简单又好玩
120 人在学
没有账号？
s后重新发送
已有账号？
已有账号？
验证码确认
话题标题：
400-877-8190
登录后反馈Unity3D教程：如何用UGUI制作背包系统-GAD腾讯游戏开发者平台刘俊良----blog.liujunliang.com.cn
Unity背包系统(二)背包UI设计
上篇文章介绍了背包系统开发中需要使用到数据存储本人使用并介绍LitJson进行生成、解析Json文件在本文介绍背包系统的UI设计大家别小瞧这个UI设计，一个好的UI设计方便我们管理，并且对代码扩展性与自适应性起到至关重要作用【背包面板的设计】先来看看UI图（图片自己在网上找到，不太好看）该背包U里面有很多矩形方框，我叫做物品槽，用于存放物品该背包UI目录结构图如下其中物品槽的父节点SlotsPanel添加了一个组件 Gird Layount Ground组件该会按你的设置进行自定义布局，这样方便了们将多个物品槽排布到面板上【提示面板的设计】提示面板是将鼠标放在物品槽里显示该槽里物品的的信息的面板当你鼠标移除物品槽后，提示面板将消失我们的需求：提示面板会随内容的长高进行缩放当内容宽，面板会变宽内容变高，面板会变高设计目录结构如下图其中ToolTilePanel是一个UI Text（改变其内容时，大小会改变，并且子节点ToolTileBg也会改变）ToolTileBg是UI Image（提示面板背景图片）ToolTileText是一个UI Text（显示内容）在ToolTilePanel和ToolTileText两个对象上添加 Content Size Fitter组件，并按如下图修改属性，这样才能随Text内容改变而改变大小为什么要添加两个UI Text呢？ToolTileBg的图片会把ToolTilePanel的文字内容遮挡两个UI Text内容都是一样的ToolTilePanel是控制面板大小ToolTileText是控制内容的显示UI的设计介绍到这里，大家可以下载我的工程源码来学习本人也在寻找一份游戏开发实习工作，如果大佬们需要开发人员，请把我带走这是我的简历：作品的话可以私聊我哦！
没有更多推荐了，}