NGUI简易背包

来源:互联网 发布:win10录屏软件 编辑:程序博客网 时间:2024/05/16 09:54

http://www.narkii.com/club/thread-311663-1.html


看了网上很多用GUI做的背包,小弟今天就用NGUI来实现一下简单的背包效果。先写物品进入背包和取出背包效果,下个教程实现装备穿戴,和药品使用。


首先我们来分析下游戏里面的背包功能:

1、  背包得有个背景图片吧
2、  背包得有背景格子吧
3、  背包得有最大容量吧
4、  背包里面得有物品单元吧
5、  背包总有功能吧
(1)、物品进入背包
(2)、物品从背包出去
(3)、物品从背包丢弃
(4)、物品的数量

好了,分析完功能需求以后咱们来算算需要哪些准备工作:
1、  背景图片、格子图片、物品图片这些用NGUI做个图集(这里就不多说了,一定要做个图集)
2、  掉落物品模型(这个模型自己随便找)

好了,接下来咱们就开始设计背包系统:
1、  第一步,导入NGUI这个package。导入之后菜单栏可能不会立即出现NGUI这个选项,你刷新一下Project面板等一会就会出现。接着我们来创建我们的背包面板,我们先新建一个层,名为2DUI:Layers--->edit layers --->user layer8--->输入2DUI
新建2DUI层 

2、第二步,选择菜单栏NGUI--->Open--->UIWizard 我用的是NGUI 3.0.6版本不同估计这些选项的位置会有变动,但是你只要知道是创建一个新的UI就行了然后弹出窗口layer 下拉选择2DUI层,点击Create Your UIHierarchy面板会出现一个UI Root(2D):
创建界面选择2DUI层创建成功 

3、第三步,我们在Camera下创建一个空物体(Gameobject--->Create Empty):并命名为WindowsPanel(我们游戏里面不止一个窗口,其他的还有技能、商场、任务、装备……这个作为一个管理容器)

空物体 
windowPanel下创建一个空物体,命名为:PackageWindow,然后在PackageWindow下创建2个空物体和一个sprite,分别命名为CellBGContainer(用来放格子背景),CellContainer(用来放背包里面的物品),PackageBG(背包的背景图片):
6.png 

PackageBG的锚点设为左上角(Pivot选第一个),并把它大小(Dimensions)设为300 * 400(这个随意,大小合适就行),SpriteType设为Sliced depth-1(以免将格子格子背景遮挡):然后在CellBGContainer下面创建多个sprite(个数随意)大小设为50*50 SpriteType设为Sliced这时sprite挤在一起:
设锚点和大小创建格子背景 

接下来选中CellBGContainer给他添加一个Gird脚本,位置在:Component--->NGUI--->Interaction--->Gird:然后将Max perLine设置为5(每行几个格子,这个随意,合适就行)cell width cell height设为50(和格子背景大小相同,也可稍微大点),然后点击Reposition Now,这时就自动的排序了:然后选中CellBGContainer按下ctrl + D 复制一份 ;命名为CellContainer ,并删掉CellContainer所有的子Sprite 
9.png10.png 

4、第四步,我们来设计格子,在CellContainer下面新建一个按钮命名为ItemCell,将sprite命名为Icon(图标),Pivot设置为左上角,大小设置为50*50,label(计数用)命名为Num(数量)Pivot设置为右下角,调整位置到ItemCell的右下角(自行调整,合适就行):结构如下

11.png12.png

然后创建5个文件夹,结构如下:分别存放我们的场景、预设、用到的图片、脚本
Prefabs文件夹下创建一个Prefab命名为InventoryItemCell把刚才创建的ItemCell拖上去,就有了一个InventoryItemItemCell的预设:
14.png 

5、第五步,我们在PackageWindow下面创建一个空物体,命名为CellDescribe,在CellDescribe下创建一个Sprite命名为BGPovit设为左上角,大小设为150*220合适就行,这个随意)和一个Label命名为ContentPovit设为左上角,OverFlow设为ResizeHeight,把Dimension 设为100*30这个随意,合适就行,100label的每行长度),分别作为物品描述的背景和内容框:
15.png 

然后我们在Prefabs文件夹下创建一个Prefab命名为InventoryItemCellDescribe,把CellDescribe拖上去形成一个预设:
16.png 

6、第六步,我们在Scripts文件夹里面新建5个脚本:DropBaseDropObjectDataBaseDropObjectInventoryItemCell。功能会在下面一一说明:
DropBase它是掉落物品的类,有掉落物品的属性,DropObjectDataBase这个是掉落物品数据库,大家可以在这里面修改物品的参数,DropObject这个是掉落物品的物体,Inventory这个是背包的核心,进入背包和出背包都是通过调用这个类的方法,ItemCell这个是背包里面的元素类,负责物品的使用和属性的显示。
脚本:
DropBase.cs
  1. /// <summary>
  2. /// Drop base.第一个类,用来描述掉落物品的信息(id编号->可用做数据库id索引,掉落物品名,图标名称->后面要从图集里面选取图标,
  3. /// Drop base.物品的描述->写个小故事,物品的值比如对自身属性的加成和红药蓝药的效果)
  4. /// </summary>
  5. public class DropBase {
  6.         public int id ;                         
  7.         public string name ;                    
  8.         public string iconname ;                
  9.         public string describe ;                                
  10.         public float[] valuses ;                                
  11.         public int amount ;                                                
  12.         /// <summary>
  13.         /// Initializes a new instance of the <see cref="DropBase"/> class.构造函数
  14.         /// </summary>
  15.         /// <param name="_id">_id.</param>
  16.         /// <param name="_name">_name.</param>
  17.         /// <param name="_describe">_describe.</param>
  18.         /// <param name="_val">_val.</param>
  19.         public DropBase(int _id , string _name , string _describe , float[] _val){
  20.                 valuses = new float[5] ;
  21.                 id = _id ;
  22.                 name = _name ;
  23.                 iconname = _name ;
  24.                 describe = _describe ;
  25.                 valuses = _val ;
  26.                 amount = 1 ;
  27.         }
  28. }
复制代码
DropObjectDataBase.cs

  1. /// <summary>
  2. /// Drop object data base.这个用来设计掉落物品的数据库,有个构造函数通过设置它的种类,来构造一个掉落物品
  3. /// Drop object data base.大家可以在这里面修改属性(名称,值。etc)
  4. /// </summary>
  5. using UnityEngine;
  6. using System.Collections;
  7. using System ;  

  8. public class DropObjectDataBase : MonoBehaviour {
  9.         /// <summary>
  10.         /// DBSPCIES.这个用来设定掉落物品的大种类
  11.         /// </summary>
  12.         public enum DBSPCIES{RedBottles , BlueBottles , Equipments , Others} ; 
  13.         /// <summary>
  14.         /// DBLISTS.这个用来设定掉落物品到底是什么
  15.         /// </summary>
  16.         public enum DBLISTS{
  17.                 redPotion01 , 
  18.                 redPotion02 , 
  19.                 bluePotion01 , 
  20.                 bluePotion02 , 
  21.                 hat01 , 
  22.                 hat02 , 
  23.                 cloth01 , 
  24.                 cloth02 , 
  25.                 boot01 , 
  26.                 boot02 , 
  27.                 weapon01 , 
  28.                 weapon02 , 
  29.                 trousers01 , 
  30.                 trousers02  
  31.         } ;
  32.         public DBSPCIES dbspcies ;
  33.         public DBLISTS dblist ;
  34.         public DropBase dropBase ;
  35.         /// <summary>
  36.         /// index arr[].索引和值数组
  37.         /// </summary>
  38.         private int index ; 
  39.         private float[] arr ;

  40.         // Use this for initialization
  41.         void Start () {
  42.                 /// <summary>
  43.                 /// switch.通过一个条件选择语句初始化DropBase,并通过名称设置它的大种类
  44.                 /// </summary>
  45.                 switch(dblist){
  46.                 case DBLISTS.redPotion01:
  47.                         index = (int)DBLISTS.redPotion01 ;
  48.                         arr = new float[5]{ 100 , 0 , 0 , 0 , 0 } ;
  49.                         break ;
  50.                 case DBLISTS.redPotion02:
  51.                         index = (int)DBLISTS.redPotion02 ;
  52.                         arr = new float[5]{ 200 , 0 , 0 , 0 , 0 } ;
  53.                         break ;
  54.                 case DBLISTS.bluePotion01:
  55.                         index = (int)DBLISTS.bluePotion01 ;
  56.                         arr = new float[5]{ 70 , 0 , 0 , 0 , 0 } ;
  57.                         break ;
  58.                 case DBLISTS.bluePotion02:
  59.                         index = (int)DBLISTS.bluePotion02 ;
  60.                         arr = new float[5]{ 140 , 0 , 0 , 0 , 0 } ;
  61.                         break ;
  62.                 case DBLISTS.hat01:
  63.                         index = (int)DBLISTS.hat01 ;
  64.                         arr = new float[5]{ 6 , 5 , 3 , 8 , 4 } ;
  65.                         break ;
  66.                 case DBLISTS.hat02:
  67.                         index = (int)DBLISTS.hat02 ;
  68.                         arr = new float[5]{ 22 , 14 , 44 , 23 , 32 } ;
  69.                         break ;
  70.                 case DBLISTS.cloth01:
  71.                         index = (int)DBLISTS.cloth01 ;
  72.                         arr = new float[5]{ 6 , 5 , 3 , 8 , 4 } ;
  73.                         break ;
  74.                 case DBLISTS.cloth02:
  75.                         index = (int)DBLISTS.cloth02 ;
  76.                         arr = new float[5]{ 32 , 24 , 33 , 55 , 22 } ;
  77.                         break ;
  78.                 case DBLISTS.trousers01:
  79.                         index = (int)DBLISTS.trousers01 ;
  80.                         arr = new float[5]{ 6 , 5 , 3 , 8 , 4 } ;
  81.                         break ;
  82.                 case DBLISTS.trousers02:
  83.                         index = (int)DBLISTS.trousers02 ;
  84.                         arr = new float[5]{ 55 , 33 , 44 , 22 , 11 } ;
  85.                         break ;
  86.                 case DBLISTS.boot01:
  87.                                 index = (int)DBLISTS.boot01 ;
  88.                         arr = new float[5]{ 6 , 5 , 3 , 8 , 4 } ;
  89.                         break ;
  90.                 case DBLISTS.boot02:
  91.                         index = (int)DBLISTS.boot02 ;
  92.                         arr = new float[5]{ 31 , 22 , 41 , 31 , 27 } ;
  93.                         break ;
  94.                 case DBLISTS.weapon01:
  95.                         index = (int)DBLISTS.weapon01 ;
  96.                         arr = new float[5]{ 65 , 12 , 33 , 65 , 12 } ;
  97.                         break ;
  98.                 case DBLISTS.weapon02:
  99.                         index = (int)DBLISTS.weapon02 ;
  100.                         arr = new float[5]{ 223 , 112 , 445 , 263 , 112 } ;
  101.                         break ;
  102.                 }
  103.                 /// <summary>
  104.                 /// new DropBase.构造一个物品
  105.                 /// </summary>
  106.                 dropBase = new DropBase( index , ((DBLISTS)Enum.ToObject(typeof(DBLISTS),index )).ToString() , "" , arr);
  107.                 /// <summary>
  108.                 /// if-else.设定它的大种类
  109.                 /// </summary>
  110.                 if(dblist <= DBLISTS.redPotion02 && dblist >= DBLISTS.redPotion01){
  111.                         dbspcies = DBSPCIES.RedBottles ;
  112.                 }else if(dblist <= DBLISTS.bluePotion02 && dblist >= DBLISTS.bluePotion01){
  113.                         dbspcies = DBSPCIES.BlueBottles ;
  114.                 }else if(dblist <= DBLISTS.weapon02 && dblist >= DBLISTS.hat01){
  115.                         dbspcies = DBSPCIES.Equipments ;
  116.                 }
  117.                 //print(dblist +""+ dbspcies);
  118.         }
  119. }
复制代码
Inventory.cs

  1. /// <summary>
  2. /// Inventory.背包的核心类,背包操作
  3. /// </summary>
  4. using UnityEngine;
  5. using System.Collections;
  6. /// <summary>
  7. /// Inventory.要使用List线性表,需要引入这个Generic
  8. /// </summary>
  9. using System.Collections.Generic ;  

  10. public class Inventory : MonoBehaviour {
  11.         /// <summary>
  12.         /// The inventory list.定义一个存放gameobject的线性表
  13.         /// </summary>
  14.         private List<GameObject> inventoryList ; 
  15.         // Use this for initialization
  16.         void Start () {
  17.                 inventoryList = new List<GameObject>() ;   
  18.         }

  19.         /// <summary>
  20.         /// Adds the item.物品进入背包函数,接受一个gameobject参数
  21.         /// </summary>
  22.         /// <param name="_goadd">_goadd.</param>
  23.         public void AddItem(GameObject _goadd){ 
  24.                 /// <summary>
  25.                 /// if-else.先通过CheckExisted函数判断背包里面是否存在这个物品如果有就把传过来的gameobject销毁在CheckExisted函数里面将数量加1
  26.                 /// </summary>
  27.                 if(CheckExisted(_goadd)){
  28.                         Destroy(_goadd) ;
  29.                 }else{
  30.                         /// <summary>
  31.                         /// if-else.背包里面如果存在这个物品,就把传过来的gameobject添加到线性表里去,并且把传过来的gameobject设定为背包的子物体
  32.                         /// </summary>
  33.                         inventoryList.Add(_goadd);
  34.                         _goadd.transform.parent = gameObject.transform ;
  35.                         /// <summary>
  36.                         /// localScale.设定它的缩放,不然它会很巨大
  37.                         /// </summary>
  38.                         _goadd.transform.localScale = new Vector3(1,1,1);
  39.                 }

  40.                 ReFreshInventory();
  41.         }
  42.         /// <summary>
  43.         /// Removes the item.将物品从背包删除,先从线性表里删除,然后再更新背包界面,最后销毁物体
  44.         /// </summary>
  45.         /// <param name="_goremove">_goremove.</param>
  46.         public void RemoveItem(GameObject _goremove){ 
  47.                 inventoryList.Remove(_goremove);
  48.                 ReFreshInventory();
  49.                 Destroy(_goremove);
  50.         }
  51.         /// <summary>
  52.         /// Res the fresh inventory.更新背包界面,从线性表读取物品信息并刷新界面
  53.         /// </summary>
  54.         public void ReFreshInventory(){ 
  55.                 foreach(GameObject g in inventoryList){
  56.                         g.GetComponentInChildren<UILabel>().text = g.GetComponent<DropObjectDataBase>().dropBase.amount + "" ;
  57.                 }
  58.                 /// <summary>
  59.                 /// Reposition.重新调整背包物品排列,UIGird的函数
  60.                 /// </summary>
  61.                 gameObject.GetComponent<UIGrid>().Reposition() ;
  62.         }
  63.         /// <summary>
  64.         /// Checks the existed.检测背包物品list里面的物体是否存在,通过比较物品名称种类实现判断,如果有就将数量加1,函数返回一个bool值
  65.         /// </summary>
  66.         /// <returns><c>true</c>, if existed was checked, <c>false</c> otherwise.</returns>
  67.         /// <param name="_go">_go.</param>
  68.         bool CheckExisted(GameObject _go){ 
  69.                 bool flag = false ;
  70.                 foreach(GameObject _obje in inventoryList){
  71.                         if(_go.GetComponent<DropObjectDataBase>().dblist == _obje.GetComponent<DropObjectDataBase>().dblist){
  72.                                 _obje.GetComponent<DropObjectDataBase>().dropBase.amount ++ ;
  73.                                 flag = true ;
  74.                                 break ;
  75.                         }else{
  76.                                 flag = false ;
  77.                         }
  78.                 }
  79.                 return flag ;
  80.         }
  81. }
复制代码
ItemCell.cs

  1. /// <summary>
  2. /// Item cell.
  3. /// </summary>
  4. using UnityEngine;
  5. using System.Collections;

  6. [RequireComponent(typeof(DropObjectDataBase))]
  7. public class ItemCell : MonoBehaviour {
  8.         /// <summary>
  9.         /// The cell DES.这个用来显示背包格子里面的信息,比如装备的属性之类的
  10.         /// </summary>
  11.         private GameObject cellDes ;
  12.         /// <summary>
  13.         /// The _cell D.这个用来获取格子身上的数据库脚本。因为需要用到里面的数值
  14.         /// </summary>
  15.         private DropObjectDataBase _cellDB ;
  16.         // Use this for initialization
  17.         void Start () {
  18.                 _cellDB = gameObject.GetComponent<DropObjectDataBase>() ;
  19.                 cellDes = GameObject.Find("InventoryItemCellDescribe");
  20.                 /// <summary>
  21.                 /// cellDes.transform.position.这句话用来设置属性描述框的初始位置,就是放到看不到的位置
  22.                 /// </summary>
  23.                 cellDes.transform.position = new Vector3(0,10000,0);
  24.         }
  25.         /// <summary>
  26.         /// Raises the click event.当鼠标点击物品的时候先判断物品的数量是否大于1个,如果大于1个的话就数量上减去1,否则刚好有一个的话就把它从背包删除
  27.         /// </summary>
  28.         void OnClick(){
  29.                 if(gameObject.GetComponent<DropObjectDataBase>().dropBase.amount > 1){
  30.                         gameObject.GetComponent<DropObjectDataBase>().dropBase.amount -- ;
  31.                 }else{
  32.                         this.transform.parent.GetComponent<Inventory>().RemoveItem(this.gameObject);
  33.                         /// <summary>
  34.                         /// DesHide.删除物品的同时将物品介绍面板隐藏
  35.                         /// </summary>
  36.                         DesHide();
  37.                 }
  38.                 this.transform.parent.GetComponent<Inventory>().ReFreshInventory();
  39.         }
  40.         /// <summary>
  41.         /// Raises the hover event.鼠标悬浮在物品上面的时候调用,接受一个参数,
  42.         /// </summary>
  43.         /// <param name="isOver">If set to <c>true</c> is over.</param>
  44.         void OnHover(bool isOver){
  45.                 if(isOver){
  46.                         DesShow();
  47.                 }else{
  48.                         DesHide();
  49.                 }
  50.         }
  51.         /// <summary>
  52.         /// DESs the show.将属性显示面板的位置设置到物品的位置,并设置属性面板内容,从数据库脚本中读取
  53.         /// </summary>
  54.         void DesShow(){
  55.                 cellDes.transform.position = gameObject.transform.position ;
  56.                 cellDes.GetComponentInChildren<UILabel>().text = _cellDB.dropBase.name + "\n" +
  57.                                                                                                                  _cellDB.dropBase.describe + "\n" +
  58.                                                                                                                  _cellDB.dropBase.valuses[0] ;
  59.         }
  60.         /// <summary>
  61.         /// DESs the hide.将面板的y值设置到一个看不到的敌方,来实现面板隐藏
  62.         /// </summary>
  63.         void DesHide(){
  64.                 cellDes.transform.position = new Vector3(0,10000,0);
  65.         }

  66.         void OnPress(){

  67.         }
  68. }
复制代码
DropObject.cs

  1. /// <summary>
  2. /// Drop object.怪物死亡后会掉落物品
  3. /// </summary>
  4. using UnityEngine;
  5. using System.Collections;

  6. [RequireComponent(typeof(DropObjectDataBase))]
  7. public class DropObject : MonoBehaviour {  
  8.         /// <summary>
  9.         /// Prefab.通过预设生成一个背包里面的格子
  10.         /// </summary>
  11.         public GameObject itemCellPrefab ;  
  12.         /// <summary>
  13.         /// Cellcontainer.背包格子父容器
  14.         /// </summary>
  15.         private GameObject Cellcontainer ;                
  16.         // Use this for initialization
  17.         void Start () {
  18.                 Cellcontainer = GameObject.Find("CellContainer");        
  19.         }
  20.         /// <summary>
  21.         /// Raises the mouse down event.这里设定的是鼠标点选,大家可以设置trigger触发器触发拣选
  22.         /// </summary>
  23.         void OnMouseDown(){
  24.                 CellCreation();
  25.         }
  26.         /// <summary>
  27.         /// Cells the creation.通过Instantiate克隆出一个格子预设,调用背包脚本的AddItem函数将这个clone出来的物体加到背包里面去
  28.         /// Cells the creation.把掉落的物品的三个属性传给clone出来的物品,并设定它的图集图标
  29.         /// </summary>
  30.         void CellCreation(){
  31.                 GameObject cellClone = (GameObject)Instantiate(itemCellPrefab);
  32.                 cellClone.GetComponent<DropObjectDataBase>().dblist = gameObject.GetComponent<DropObjectDataBase>().dblist ;
  33.                 cellClone.GetComponent<DropObjectDataBase>().dropBase = gameObject.GetComponent<DropObjectDataBase>().dropBase ;
  34.                 cellClone.GetComponent<DropObjectDataBase>().dbspcies = gameObject.GetComponent<DropObjectDataBase>().dbspcies ;
  35.                 cellClone.GetComponentInChildren<UISprite>().spriteName = cellClone.GetComponent<DropObjectDataBase>().dropBase.iconname ;
  36.                 if(Cellcontainer){
  37.                         Cellcontainer.GetComponent<Inventory>().AddItem(cellClone);
  38.                 }else{
  39.                         print ("Failed to Instantiate.......");
  40.                 }
  41.         }
  42. }
复制代码
然后在创建一个cube当作掉落物品模型,这个大家可以随便替换模型。
脚本关系:
Cube上拖一个Dropobject,InventoryItemCell上拖一个ItemCell脚本;

0 0
原创粉丝点击