引言
玩原神，学习做游戏剧情对话框
昨天我在找素材的时候，一不小心就启动了原神，踏上了我的学习之路…
作为一个游戏开发新人，对原神的游戏剧情对话框还是挺感兴趣的。
因此，我们一起来看看如何在Cocos中实现游戏剧情对话框。
本文源工程在文末获取，小伙伴们自行前往。
什么是游戏剧情对话框
游戏开发中的剧情对话框是游戏故事叙述的重要组成部分，它为玩家提供了与游戏世界、角色互动的窗口。
剧情对话框通过文字、图像和声音的结合，将游戏故事情节呈现给玩家，增加了游戏的沉浸感和情感投入。
游戏剧情对话框的组成部分
游戏剧情对话框通常包含以下几种元素：
- 对话人物的形象，通常是人物的头像、半身像或者全身像。包含静态或者动态的效果。
- 对话框，通常是一个简单的UI底框。
- 对话的内容，剧情的对话的核心内容，意在给玩家呈现游戏故事。
- 对话内容的展示效果，对话展示的效果，包含各种各样的文字效果。
实现游戏剧情对话框
下面我们一起来看看如何在Cocos中实现游戏剧情对话框。
1.资源准备
首先我们去找一张对话框的背景图。
然后通过属性面板Edit按钮打开图片裁剪编辑器，处理下编辑下九宫格信息。
什么是九宫格？
在游戏开发中，九宫格是一种常用的图像处理技术，用于拉伸或缩放图像而不失真。
这技术也被称为”九宫格缩放”或”九宫格切图”，它的原理是将图像分为九个区域，分别为四个角、四个边和中心。
通过拉伸或缩放这些九个区域，可以使图像适应不同大小的区域而不失真。
在游戏中，九宫格主要用于处理UI元素的图像，如按钮、面板和对话框等。
这样可以确保这些UI元素在不同屏幕尺寸或分辨率下能够保持良好的外观，而不会变形或拉伸过度。
人物形象，我们运用RTT技术，把模型展示到UI界面上，可关注我，通过100个Cocos实例中的《实现和平精英中3D模型渲染到2D界面的模型展示效果》进行了解。
2.拼UI
UI包含两部分内容。
- 人物形象部分，包括一个Sprite和Camera。
- 对话框部分，一个背景框Sprite和Label。
3.写代码
核心代码如下，这段代码是一个用于逐字显示对话文本的函数。
showDialog(str: string) {
// 将输入的字符串拆分成字符数组
let charArr = str.split('');
// 初始化字符索引
let charIdx = 0;
// 清除之前的定时器（如果存在）
this.ticker && clearInterval(this.ticker);
// 设置定时器，用于逐字显示对话文本
this.ticker = setInterval(() => {
// 判断是否已经显示完所有字符
if (charIdx >= charArr.length) {
// 如果已经显示完，清除定时器
this.ticker && clearInterval(this.ticker);
this.ticker = 0;
} else {
// 如果还有字符未显示，递增字符索引
charIdx += 1;
// 更新显示文本，只显示已经逐字显示的字符
this.label.string = charArr.slice(0, charIdx).join('');
}
}, this.internal);
}
解析：
-
输入参数： 函数接受一个字符串
str，这是要逐字显示的对话文本。 -
字符数组： 使用
split('')将输入的字符串拆分为字符数组，每个字符都是数组的一个元素。 -
定时器清除： 在进入函数时，首先检查是否存在之前的定时器
this.ticker，如果存在，则清除它，以防止多个定时器冲突。 -
定时器设置： 使用
setInterval创建一个定时器，每隔一定时间执行一次指定的回调函数。 -
逐字显示： 在定时器的回调函数中，判断是否已经显示完所有字符。如果未显示完，递增字符索引，然后更新显示文本
this.label.string，只显示已经逐字显示的字符。 -
定时器清除（再次）： 如果所有字符都已经显示完，清除定时器，确保不再执行回调函数。
4.效果展示
结语
本文源工程可通过阅读原文获取。
我是”亿元程序员”，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。
AD:笔者线上的小游戏《方块掌机经典》《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》大家可以自行点击搜索体验。
实不相瞒，想要个赞和在看！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐专栏：
原文链接：https://juejin.cn/post/7328564786597314571 作者：亿元程序员
