点击上方亿元程序员+关注和★星标
引言
玩原神，学习做游戏剧情对话框
昨天我在找素材的时候，一不小心就启动了原神，踏上了我的学习之路...
作为一个游戏开发新人，对原神的游戏剧情对话框还是挺感兴趣的。
因此，我们一起来看看如何在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:笔者线上的小游戏《方块掌机经典》《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》大家可以自行点击搜索体验。
实不相瞒，想要个赞和在看！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐专栏：
100个Cocos实例
8年主程手把手打造Cocos独立游戏开发框架
和8年游戏主程一起学习设计模式
从零开始开发贪吃蛇小游戏到上线系列
知识付费专栏
点击下方绿色按钮+关注。