NGUI制作背包

• 下载素材

  • 图片素材
    • 链接：https://pan.baidu.com/s/1N8IFAYWtWu5fJC9jZTkRsw 密码：wpei
  • NGUI插件
    • 链接：https://pan.baidu.com/s/1fczWWFLaJf73a0qN3Vdfbw 密码：0nke

• 创建工程

• 导入素材

  • 效果

    

• 制作背包

  • 创建精灵，命名为BG

    

    image

  • 2D观看模式

    

    image

  • 隐藏摄像机

    

    image

  • 将要用的图片做成图集

    • 选中GemsIcons文件夹中的所有图片

      

      image

    • 打开图集编辑器

      

      image

    • 点击Create

      

      image

    • 在Bag工程中的Assets目录下创建Atlas文件夹

    • 进入Atlas文件夹，图集命名为GemsIcon，点击保存

      

      image

    • 同理把PotionIcons文件夹下的图片也做成集合

      

      image

    • 需要注意的是，这里打开是刚刚的图集，需要New，其他同理

      

      image

    • 效果

      

      image

  • 选中BG，选择图集

    

    image

  • 点击Show All

    

    image

  • 选择NGUI自带的图集

    

    image

  • 选择Button图片

    

    image

  • 让图片没有锯齿效果

    

    image

  • 选中UI Root ，右击场景视图，创建精灵，命名为Title

    

    image

  • 调整位置和大小

    

    image

  • 效果

    

    image

  • 给Title创建一个子物体Label，命名为bag

    

    image

  • 选中bag，设置合适参数

    

    image

  • 效果

    

    image

  • 做背包格子

    • 选中UI Root，创建Grid(用来布局子物体)，命名为Grid_Cell

      

      image

    • 选中Grid_Cell,创建精灵，命名为Cell

      

      image

    • 保存一下场景

      • 新建Scenes文件夹，保存场景命名为Test

    • Ctrl+D克隆多个Cell

    • 选中Grid_Cell,属性面板小齿轮，Execute

      

      image

    • 效果

      

      image

    • 调整Grid_Cell的参数，克隆Cell将背包填满

      

      image

    • 效果

      

      image

  • 给格子添加物品

    • 选中Cell，添加一个子物体精灵，命名为Thing

      

      image

    • 更换图集，更换精灵

      

      image

    • 新建Prefabs文件夹，将Thing设为预设体

      

      image

    • 把物品预设体实例化到其他格子中

      

      image

    • 更换其他格子中的Thing精灵

      

      image

    • 效果

      

      image

  • 做选择框

    • 打开预设UI工具

      

      image

    • 将选框拖到UI Root下，命名为Gem（宝石）

      

      image

    • 删除NGUI Snapshot Point 20

      

      image

    • 把这两拖到Btn_Gem下，同级别

      

      image

    • 调整Background参数

      

      image

    • 调整Checkmark

      

      image

    • 调整Label

      

      image

    • 效果

      

      image

    • 克隆Btn_Gem,命名为Btn_Potion(药剂)，位置下移一些

    • 更改它的Label中的Text为药剂

      

      image

    • 效果

      

      image

    • 选中这两个，将组改为1

      

      image

    • 因为要显示宝石的初始状态，所以另一个药剂就不用初始状态了

      

      image

    • 运行查看选框效果

      

      image

    • 将Grid_Cell改名为Grid_Gem,克隆一个改名为Grid_Potion

      

      image

    • 先将Grid_Gem对象隐藏，方便对Grid_Potion操作

      

      image

    • 选中Grid_Potion,更换图集，更换精灵

      

      image

    • 再将其他的Thing的图片替换成药剂的图片

      

      image

    • 效果

      

      image

    • 显示Grid_Gem，隐藏另一个Grid_Potion

      

      image

    • 选中Btn_Gem和Btn_Potion，属性面板底部,点击Add Component，输入togg，选择Toggled Objects

      

      image

    • 选中Btn_Gem,将Grid_Gem拖到属性面板中的Activate，同理Btn_Potion和Grid_Potion对应

      

      image

    • 点击运行，点击宝石和药剂可以切换不同类型背包

      

      image

  • 给物体添加拖拽功能

    • 创建Scripts文件夹，在里面创建名为LW_DragDropItem脚本

      

      image

    • 选中Thing，将脚本拖给它

      

      image

    • 双击打开脚本，编辑

      

      image

    • 根据代码的条件，需要给所有Cell添加tag为“Cell”，作为判断标识

      • 随意选择一个游戏对象，选择属性面板中的Tag，点击Add Tag

        

        image

      • 点击加号

        

        image

      • 取标签名字，点击Save

        

        image

      • 将所有的Cell的tag改为“Cell”

        

        image

    • 给所有Cell添加碰撞盒子，不然无法进行检测

      

      image

      • 将碰撞盒大小跟图片尺寸对应，将Is Trigger勾选，我们不需要碰撞检测，只需要触发检测（不要发生碰撞）

        [图片上传中...(image-ad5bc-1527685803594-0)]

    • 给Thing预设体添加碰撞盒，用来让鼠标触发事件

      

      image

  • 测试功能

    • 点击运行

    • 效果：物品能放到其他格子，无法放到非格子的地方，无法放到有物品的格子中

      

      image

    • 效果：能切换到另一个类型的背包格子中，并能拖拽物体，跟宝石类型背包功能一致

      

      image