-
下载素材
- 图片素材
- NGUI插件
-
创建工程
-
导入素材
-
效果
-
-
制作背包
-
创建精灵,命名为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
-
-
网友评论