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