当前位置: 首页 > article >正文

[UGUI]Unity背包系统制作详细步骤

二、背包制作 

1.创建空物体,然后创建UI-Image 制作背包整个背包所在的父UI的背景图

选中BG,找到他的锚点设置,按住Alt键,点击右下角的适配,让锚点和内容都匹配画布

PS:不按Alt键是设置一个元素的锚点位置

 2.制作背包内容-LOGO和背景

创建空物体,改名,BagContent,尺寸700*500

然后在他里面分别创建一个Image做背景bg,调整锚点相对父亲的位置以及颜色

在创建一个顶部image做LOGO(宽度和父亲一样,高是50像素),里面创建子文本写上内容

3 .制作背包内容-物品网格

创建空物体作为网格内容容器,相对父亲居中,700*450像素,为他再添加一个组件UI -image,铺满作为背包背景图

添加自动网格布局组件Grid Layout Group

这个组件可以让其所在物体的子UI全部按照网格自动对齐和排列

设置未来格子的大小和间距

然后开始添加子物体,可以看到自动排列了

4.添加滑动框(Scroll View)

滑动框是由三部分组成:横向和纵向滑动块、被关联的滑动内容(这个内容可以是任何UI,文本、图片、视频,只认UI)

滑动框(Scroll View)是Unity内部提供的成品预设,我们只需要把内容关联到里面,就可以被滑动条控制。

首先创建滑动框

 修改设置,取消水平,把 纵向滚动条改为永久可见

 

然后把位置调整好,把刚才做好的背包关联到滑动面板的内容变量里面,或者重新在content下面开始创建新的背包也可以!

 因为我们只需要上下滑动,因此可以把左右滑动关闭掉,同时设置滑动条的显示模式为始终显示

为content添加网格组件,和第三步一样。然后为其创建子物体的物品图标父物体

 现在就可以看到效果了!

但是因为Content内部内容比较多,默认情况下,父物体组件装不下子UI内容,就会不显示。滑动条也就不能滑动。我们需要让父物体Content根据其子UI内容大小自动调节自己的大小。我们为Content加一个组件-Content Size Fitter(让父物体跟据子物体的最终大小调整自己大小)

修改组件设置 

 

效果,可以看到父物体Content变长了!

 

 Over!


http://www.kler.cn/a/149813.html

相关文章:

  • ORA-01092 ORA-14695 ORA-38301
  • 【Linux篇】面试——用户和组、文件类型、权限、进程
  • WPF 应用程序中使用 Prism 框架时,有多种方式可以注册服务和依赖项
  • 论文分享:DiskANN查询算法
  • PyTorch版本的3D网络Grad-CAM可视化实验记录
  • 初始JavaEE篇 —— 文件操作与IO
  • 【古月居《ros入门21讲》学习笔记】15_ROS中的坐标系管理系统
  • 王者农药小游戏
  • MySQL 索引类型
  • html实现计算器源码
  • linux 账号管理实例一,stdin,passwd复习
  • 力扣105. 从前序与中序遍历序列构造二叉树
  • 虹科方案 | 如何破解CAN与车载以太网之间数据传输和协议转换的难题?
  • 树与二叉树堆:链式二叉树的实现
  • 手机 IOS 软件 IPA 签名下载安装详情图文教程
  • 第七节HarmonyOS UIAbility生命周期以及启动模式
  • 基于SpringBoot的图书管理系统
  • <Linux>(极简关键、省时省力)《Linux操作系统原理分析之Linux 进程管理 7》(11)
  • AI算法中的模型量化岗是做什么的
  • 制作心理咨询小程序的详细指南
  • 开发定制化抖音票务小程序的技术解析
  • 技术分享| anyRTC之RTN网络
  • 解决苹果手机iphone手机强制重启
  • 6-4 jmu-python-发牌
  • Vue框架学习笔记——事件scroll和wheel的区别
  • C#中反射的使用总结