unity初学6——简易的UI制作(血条制作)和音频加入以及NPC的对话气泡(2d)
该文来是学习chutianbo老师的笔记,链接b站
UI的创建
1.右键Hierarchy空白处 UI➡canvas
2.这里一共使用了三个素材
层级结构
UI:初始画布
characters:头像
Mask:遮罩层
healthbar:血条
这里我们先回到UI(也就是一开始创建的Canvas)
我们一开始有用的应该只有渲染模式render Mode,他有三种模式
Screen Space - Overlay:这是默认模式,可以让 Unity 在始终在游戏的上层绘制 UI。大多数应用程序使用此模式,因为它们希望 UI 始终位于最上层以便提供所有信息。
Screen Space - Camera:这种模式在与摄像机对齐的平面上绘制 UI。平面的大小确定为始终填充整个屏幕,这样你就可以四处移动摄像机,并且平面将随摄像机一起移动,从而显示与 Overlay 图形相同的形状。但是,由于平面是在世界中绘制的,而不是在屏幕上层绘制的,因此世界中的对象可以绘制在 UI 的上层。
World Space:这种模式可在世界中的任何位置绘制平面。例如,你可以将此平面用作游戏中的计算机屏幕,或者用作墙壁,或者放在角色的上层。这在 3D 游戏中更有用,因为 UI 会随着距离变小。
3.关于拉动之后图像没有随着一起变化
这里就要使用锚点
就是头像四周的小三角形,它可以使我们的子物体在父物体固定的位置上随着父物体变化
4.遮罩层
第一步
第二步
第三步
把这个勾去掉
当然记得把锚点设好
这里
可以使用alt+右下角那个直接填充父物体,血条填充到遮罩层
5.bug时间
这样子做的话,在后面使用代码控制遮罩层缩减时会出现两端缩小,而不是血条向右减少的过程。
所以记得把Mask的pivot(就是中间那个蓝点)拉到left center(左边中间);
关于代码控制血条变化
主要思路是当血条变化时,遮罩层减少,使血条变短;
官方解释:遮罩是 UI 系统中的一种技术,利用这种技术可以将一张图像用作其他图像的“遮罩”。我们可以看成是第一张图像充当一个模板。第二张图像中与第一张图像重叠的部分是可见的,但另一部分则是隐藏的
创建一个UI脚本下挂到我们的HealthFrame
public class UIHealthBar : MonoBehaviour
{// Start is called before the first frame update//创建共有静态对象。获取血条本身public static UIHealthBar Instance { get; private set; }public Image Mask;float orignalSize;private void Awake(){Instance = this;}void Start(){//设置静态实例为当前类对象orignalSize = Mask.rectTransform.rect.width;}//创建一个方法,用来设置现在mask遮罩层的宽度public void SetValue(float value){//设置更改mask遮罩层宽度,根据传输过来的宽度进行更改Mask.rectTransform.SetSizeWithCurrentAnchors(RectTransform.Axis.Horizontal, orignalSize * value);}}
之后在我们主角血量变化函数中调用即可
UIHealthBar.Instance.SetValue(currentHealth / (float)maxHealth);
简易的音频使用
这里我们就会用到 Audio Source的组件
下面说起来比较重要的
AudioClip——加入的音乐素材
Mute——禁音
volume——音量
Play on awake——在游戏开始时播放
Spatial Blend 2d——3d 2d就是全图播放都是一个音量,可以用作bgm,越拉向3d就越立体,会出现方位和位置距离的差别
底下那个函数,指的就是最小距离1时音量达到最大,500时听不见音乐;
关于代码控制音频
和使用其他组件一样
- AudioSource audioSource;
- 在start中实例化 audioSource = GetComponent();
3.播放即可,clip即为音频,需要可以自己公开一个加进去;
public void PlaySound(AudioClip clip)
{
//可以有第二个参数音量0-1.0f
audioSource.PlayOneShot(clip);
}
关于NPC的气泡实现
这里主要使用了TextMeshPro 创建方式也是在UI中找到就行
下为结构图
Dialog:canvas
Image:外面那个背景画
Text:TextMeshPro
问题1:关于字数过长会溢出
在overflow中改为page即可
问题2:无法显示中文:
需要自己下字体包,或者去文章底部看老师的gitee中有下载链接
问题3:如何翻页:
使用代码控制,下附代码
脚本挂给NPC,事件发起交给主角;
public class NonPlayerCharacter : MonoBehaviour
{public float displaytime=4.0f;public GameObject dialogBox;float timerDisplay;public GameObject dlgTMP;TextMeshProUGUI tmTxtBox;int totalPages;int currentPage = 1;void Start(){dialogBox.SetActive(false);timerDisplay = -1.0f;tmTxtBox = dlgTMP.GetComponent<TextMeshProUGUI>();}private void Update(){totalPages = tmTxtBox.textInfo.pageCount;if (timerDisplay >= 0){timerDisplay -= Time.deltaTime;if (Input.GetKeyUp(KeyCode.Space)){if (currentPage < totalPages){currentPage++;}else{currentPage = 1;}tmTxtBox.pageToDisplay = currentPage;}}else{dialogBox.SetActive(false);}}public void DisplayDialog(){timerDisplay = displaytime;dialogBox.SetActive(true);}
关于和NPC的互动实现
使用射线碰撞对象实现,我们的NPC对象需要放到NPC层(自己创一个layer);
if (Input.GetKeyDown(KeyCode.F)){RaycastHit2D hit =Physics2D.Raycast(rigidbody2dRuby.position+Vector2.up*0.2f,lookDirection,1.5f,LayerMask.GetMask("NPC"));if(hit.collider!=null){Debug.Log($"对象是{hit.collider.gameObject}");NonPlayerCharacter npc = hit.collider.GetComponent<NonPlayerCharacter>();if (npc != null){npc.DisplayDialog();}}}
链接:chutianbo老师关于UI的介绍
链接:chutianbo老师字体下载
unity初学6——简易的UI制作(血条制作)和音频加入以及NPC的对话气泡(2d)相关推荐
- UI入门——血条制作
文章目录 实验内容 IMGUI制作简单血条 UGUI设计血条预制 动态效果展示 两种制作的优缺点 IMGUI优缺点分析 UGUI优缺点分析 预制使用方法 更新 解决血条暴露行踪问题 实验内容 实现简单 ...
- Unity 2D血条制作方式
博主在前两篇博客中写了关于分段式血条和多层血条的实现方式,但是基于一下初学者的考虑,还是决定把2D的血条制作方式也是贴出来,方便大家进行学习和使用. 第一步:我们创建一个Slider,把图片和背景修改 ...
- Unity插件NGUI制作血条--HUD的基本使用
一.利用NGUI制作 血条. 1.在2d场景中 先拖一个BG进去.然后创建一个 sprite.修改名字为LifeBar. 在inspector面板中 uisprite属性值.如下: 2.在lifeba ...
- Unity UGUI血条制作详细教程
Unity3d游戏中使用UGUI制作角色头顶血条,具体步骤如下: 1.模型添加血条挂点 2.制作血条 (1).创建血条UGUI canvas (2).修改canvas参数: RenderMode参数设 ...
- Unity 使用SpriteRenderer和TextMeshPro制作血条
在UGUI模式下可以用Image的填充来制作血条,但是Image和Text放在一起会增加渲染批次,所以想了一个办法是在场景里用Sprite和3dTextMeshPro来制作血条,这样可以减少渲染批次, ...
- [Unity2D/3D]实用的血条制作(第二期)
[Unity2D/3D]实用的血条制作(第二期) 前言:第一期我为大家介绍了一种我自己摸索出来的血条制作方法,不是很常规,在这里我为大家介绍一种比较常用的血条制作方法,利用Mask组件来制作,让我们一 ...
- UI 系统 -- 血条设计
UI 系统 – 血条设计 UI 系统 – 血条设计 作业与练习 血条设置 实验运行说明 博客地址 实验截图及视频 IMGUI UGUI 实验 Assets 结构 实验过程 IMGUI UGUI 优缺点 ...
- U3D游戏角色血条制作并显示血量变化
U3D游戏角色血条制作并显示血量变化 关键:利用Slider来制作血条 大概效果: 数字会随着血量变化而变化. 步骤 1.在层级面板中右击,选择UI中的Slider. 2.创建好后,将Slider命名 ...
- UGUI和IMGUI制作血条
UGUI和IMGUI制作血条 前言 这是中大计算机学院3D游戏编程课的一次作业,在这里分享一下设计思路. 主要代码上传到了gitee上,请按照后文的操作运行. 项目地址:https://gitee.c ...
最新文章
- 【数据挖掘】决策树算法简介 ( 决策树模型 | 模型示例 | 决策树算法性能要求 | 递归创建决策树 | 树根属性选择 )
- flutter 环境搭建
- ZJOI2019一试翻车记
- CentOS8如何修改系统日志的时间戳格式(rsyslog8版本)
- Google发布全球首个72量子比特处理器Bristlecone预览
- Django中model新建数据表操作后admin页面不更新问题
- fcpx教程从入门到精通「4」检查器窗口的认识
- Consumer clientId=consumer-1, groupId=console-consumer-950] Connection to node -1 could not be
- Linux内核绑定1号cpu,Linux绑定硬件IRQ到指定CPU核
- 使用python制作趣味小游戏—投骰子
- python处理数据表_表操作,数据操作,单表查询,python操作数据库
- class文件反编译后的汉字乱码问题
- html回到上一步,【答疑】Photoshop返回上一步和下一步快捷键是什么? - 视频教程线上学...
- 2019年京东面试题-洗咖啡杯问题【贪心和动态规划】
- 夏令时-前端要知道的知识
- wordpress主题免费- wordpress插件以及主题下载
- AI综述专栏 | 朱松纯教授浅谈人工智能:现状、任务、构架与统一
- 前端axios下载excel文件(二进制)的处理方法
- 微积分小课堂:积分(从微观趋势了解宏观变化)
- 【论文阅读】Moving Object Detection: Review of Recent Research Trends