美文网首页ngui
NGUI制作背包

NGUI制作背包

作者: Joe_Game | 来源:发表于2018-05-30 21:11 被阅读39次
  • 下载素材

  • 创建工程

  • 导入素材

    • 效果

  • 制作背包

    • 创建精灵,命名为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

相关文章

  • NGUI制作背包

    下载素材图片素材链接:https://pan.baidu.com/s/1N8IFAYWtWu5fJC9jZTkRs...

  • 18NGUI之背包系统

    NGUI背包系统的制作## 一、背包系统的搭建## 二、格子里面物品(预制物的制作)## 格子里面的物体需要实现可...

  • NGUI背包

    首先,导入NGUI插件 1、创建一个Sprite,创建一个空物体,也可以是图片,我这里创建的是空物体,2、创建一个...

  • NGUI背包系统

    NGUI背包系统实现装备的拾取、拖拽,交换以及数量的叠加 步骤一:实现游戏装备的拖拽 首先导入NGUI插件,导入后...

  • Unity3D--UGUI背包系统(一)

    与以前的ngui所比较的话,ugui感觉更为简单方便,同样也与ngui有很多相同的功能,这里我们先来初步制作ugu...

  • 如何在使用NUGI的时候减少DrawCall的产生(转)

    1、NGUI图集的使用。在使用NGUI制作界面时,图集的选用是一个关键,因为它直接关系到了drawcall的数量。...

  • [Unity]NGUI代码实现背包效果

    [Unity]技术学习路线图(长期更新) 效果实现如图 对象层级关系图 PacketCell - Right对象作...

  • UGUI灰化效果

    NGUI下制作灰化效果是修改Transparent Colored shader,通过传入的叠加颜色值,比如传入指...

  • NGUI手游摇杆制作

    https://blog.csdn.net/snowdust/article/details/5895593 目的...

  • NGUI渲染框架

    本文基于NGUI3.9.6,目前我们游戏用的NGUI版本。主要介绍一下NGUI渲染框架,基于本人阅读NGUI源码及...

网友评论

    本文标题:NGUI制作背包

    本文链接:https://www.haomeiwen.com/subject/qtnxsftx.html