首页 > 其他分享 >Unity引擎2D游戏开发,UI绘制创建人物状态栏

Unity引擎2D游戏开发,UI绘制创建人物状态栏

时间:2023-12-29 15:22:35浏览次数:27  
标签:选择 血条 状态栏 创建 Image 点击 2D Unity UI

下载并导入UI资源

前往Unity Assets Store中下载添加此资源
image

打开Unity中的Package Manager,选择My Assets,点击Import导入项目中
image

取消选择Scene,其他的全都勾选上,然后点击Import
image

然后在Assets文件夹下方会出现M Studio文件夹,此处就是插件的目录
image

打开Color Palette,能够看到不同前缀对应着不同的颜色
image

在Player名称前面加上“///”,即可标记此名称
image

创建Convas

Hierarchy窗口鼠标右击选择UI,选择Convas
image

会自动创建一个EventSystem
image
EventSystem会利用事件系统去触发UI的所有点击、滑动等操作带来的一系列事件

由于当前使用的是新版输入系统,所以点击Replace进行替换
image

将此Actions Asset,选为自己创建的PlayerInputControl
image

选择Convas。在右侧窗口中,Render ModeScreen Space - Overlay,代表Convas为满屏填充,无论设备屏幕什么大小,都能够自适应填充整个屏幕
image

Convas Scaler可以调整现在的比例是采用什么样的模式
image

将UI Scale Mode选择为Scale With Screen Size,能够根据实际游戏的画面分辨率来调整UI布局
image

因此将下方的Reference Resolution选择为1920 * 1080
Screen Match ModeMatch Width Or Height,即按什么样的比例优先排列
Match为优先权重,0则最优先考虑宽度,1则最优先考虑高度
Reference Pixels Per Unit为像素比例,此项目的所有素材都是以16像素绘制,因此输入16
image

创建Image

在Convas下选择UI,创建一个Image
image

选中Image,在右侧Rect Transform中,点击此处Anchor Presets能够选择不同的锚点进行绘制
image
代表绘制出来的Image,是依据锚点为基准,进行一定的位移来绘制的。因此可以根据需求选择不同的锚点,在不同画幅的设备上能够呈现相同的位置

在Anchor Presets中,按住alt+shift键,点击“左上角”,Image则会自动吸附至Convas的左上角位置
image

创建血条UI

打开UI文件夹
image

Base-UI进行调整
image

点击Slice,选择自动切割(有些UI模块会切割错误,需要自行调整)
image

对一部分需要的模块进行重命名
image

遇到没有自动识别到的模块,按住鼠标左键拖动进行绘制,即可识别
image

打开Image,在Source Image中,选择血条Frame。刚创建的血条Frame是Image的方形,点击下方的Set Native Size,即可还原UI的原始比例
image

image

将其移动到合适的位置,并把Scale都设置为1,不进行倍率放大处理。在此基础上,设置合适的大小
image

复制一个出来,并将Source Image选择绿色血条
image

会发现,绿色血条覆盖了血条框,则将绿色血条移动至上方
image

调整绿色血条的位置和大小
image

选择绿色血条素材,将Image Type选择Filled填充。将Fill Method填充方式,选择Horizontal水平的方式。调整下方的Fill Amount即可实现血条减少增多的效果了
image

复制绿色血条出来,更名为HealthFillRed,用于处理扣血时的延迟特效
image

选中三个组件,右击点击Create Empty Parent,命名为Health Bar,生成一个父类用于便捷管理血条栏
image

创建能量条UI

将Health Bar复制粘贴一个出来命名为Power Bar,作为能量条组件
image

根据需要调整素材
image

选中两个组件,创建一个父类,命名为Player State Bar
image

创建头像UI

在此父类下面创建一个Image,作为玩家头像,选择合适的素材,并调整它的位置
image

在Face Frame下方创建一个Cut,再创建一个Face,用于选择玩家角色图片
image

再右侧Image中的Source Image选择待机图片,调整大小至头部能够适合头像框
image

选择Cut,并点击Add Component,选择Mask
image

取消勾选Show Mask Graphic,这样背景就不是白色了
image

调整至合适的位置
image

标签:选择,血条,状态栏,创建,Image,点击,2D,Unity,UI
From: https://www.cnblogs.com/xinlindeyu/p/17934959.html

相关文章

  • mac m1 编译cocos2d-x 在模拟器上运行 一些问题汇总
     如果涉及到侵权请联系本人删除 1  》〉/Users/yzfhkms-m/Library/Developer/Xcode/DerivedData/formi-dlcfwgxcmidqefdkxnvnfwfprpfs/Build/Products/Debug-iphonesimulator/formi-mobile.appisnotavalidpathtoanexecutablefile.Pleaserebuildtheprojectto......
  • 【Unity百宝箱】游戏中的观察者模式
    【Unity百宝箱】游戏中的观察者模式原创 打工人小棋 打工人小棋 2023-04-2713:35 发表于广东Hi,大家好,我是游戏区“bug主”打工人小棋! 今天我想和大家聊一聊游戏中的观察者模式~近两期视频,都是在为下一期视频做准备,在下期视频中,大家将会看到用户数据存储、以......
  • 【Unity百宝箱】游戏中的用户数据存档
    【Unity百宝箱】游戏中的用户数据存档原创 打工人小棋 打工人小棋 2023-04-1700:04 发表于广东Hi大家好,我是游戏区Bug打工人小棋。在游戏开发过程中,我们经常有存储用户数据的这一需求,比方说:游戏音量、关卡进度、任务进度等等。在联网游戏中,往往会把一些用户核心......
  • 【泰裤辣 の Unity百宝箱】Canvas组件四件套讲解
    【泰裤辣のUnity百宝箱】Canvas组件四件套讲解原创 打工人小棋 打工人小棋 2023-05-1613:24 发表于广东1.介绍在上一期内容中,我分享了一套简单易用的UI框架。没想到大家的学习热情这么高,讨论度是目前所有内容最高的。由此可见,天下苦UI(秦)久已!!!接下去,我们继续......
  • Unity解析key不确定的Json
    遇到Json的key不固定时,只需要解析value,如下Jsondata下的key(1和2)是变化的:{"status":1,"msg":"success","data":["1:":{"atitle":"test",......
  • Unity_U_OP1 ScriptableObject 替代单例
    核心思想:解耦GameManager单例模式,不再由一个单例管理所有事件触发,拆分成无数个小单例,各自管理优点:更加灵活的事件管理模式复用性高,对于相关类型的事件,只需要写一遍代码,剩下的拖拖拖就可以实现相同的功能。缺点:管理起来相对麻烦不利于维护,除非对这个系统非常了解,要不然排......
  • Maya与Unity模型尺度统一
    Maya与Unity模型尺度统一Maya建模默认使用的单位是cm,Unity使用的是m,有时候可能需要把Maya中建好的模型导入到Unity中,因此这篇文章介绍如何修改Maya的默认建模单位,从而使得二者的尺度统一。进入窗口,设置,首选项。修改为m......
  • Unity引擎2D游戏开发,敌人追击状态的转换
    思路:从敌人的位置发射一道射线或者一片区域来对玩家实体进行检测,如果检测倒玩家,则进行追击进攻利用BoxCast()即可实现BoxCast()官方文档:https://docs.unity3d.com/cn/2022.3/ScriptReference/Physics2D.BoxCast.html创建检测区域由于BoxCast需要众多参数,所以在Enemy中创建......
  • Unity3D 如何提升游戏运行效率详解
    前言Unity3D是一款非常强大的游戏引擎,但是在处理复杂场景和大量资源时,游戏运行效率可能会遇到一些问题。本文将详细介绍如何提升Unity3D游戏的运行效率,包括技术详解和代码实现。对惹,这里有一个游戏开发交流小组,希望大家可以点击进来一起交流一下开发经验呀使用合适的资源压缩......
  • Unity3D Shader在GPU上是如何执行的详解
    Unity3D是一款广泛应用于游戏开发的跨平台开发引擎,它提供了丰富的功能和工具来帮助开发者创建高质量的游戏。其中一个重要的功能就是Shader,它可以用来控制对象的渲染效果。在Unity3D中,Shader是在GPU上执行的,那么它是如何工作的呢?本文将详细解释Unity3DShader在GPU上的执行过程,并......