引言
玩原神,学习做游戏剧情对话框
昨天我在找素材的时候,一不小心就启动了原神,踏上了我的学习之路...
作为一个游戏开发新人,对原神的游戏剧情对话框还是挺感兴趣的。
因此,我们一起来看看如何在Cocos中实现游戏剧情对话框。
本文源工程在文末获取,小伙伴们自行前往。
什么是游戏剧情对话框
游戏开发中的剧情对话框是游戏故事叙述的重要组成部分,它为玩家提供了与游戏世界、角色互动的窗口。
剧情对话框通过文字、图像和声音的结合,将游戏故事情节呈现给玩家,增加了游戏的沉浸感和情感投入。
游戏剧情对话框的组成部分
游戏剧情对话框通常包含以下几种元素:
- 对话人物的形象,通常是人物的头像、半身像或者全身像。包含静态或者动态的效果。
- 对话框,通常是一个简单的UI底框。
- 对话的内容,剧情的对话的核心内容,意在给玩家呈现游戏故事。
- 对话内容的展示效果,对话展示的效果,包含各种各样的文字效果。
实现游戏剧情对话框
下面我们一起来看看如何在Cocos中实现游戏剧情对话框。
1.资源准备
首先我们去找一张对话框的背景图。
然后通过属性面板Edit
按钮打开图片裁剪编辑器,处理下编辑下九宫格信息。
什么是九宫格?
在游戏开发中,九宫格是一种常用的图像处理技术,用于拉伸或缩放图像而不失真。
这技术也被称为"九宫格缩放"或"九宫格切图",它的原理是将图像分为九个区域,分别为四个角、四个边和中心。
通过拉伸或缩放这些九个区域,可以使图像适应不同大小的区域而不失真。
在游戏中,九宫格主要用于处理UI元素的图像,如按钮、面板和对话框等。
这样可以确保这些UI元素在不同屏幕尺寸或分辨率下能够保持良好的外观,而不会变形或拉伸过度。
人物形象,我们运用RTT技术 ,把模型 展示到UI界面 上,可关注我 ,通过100 个Cocos实例中的《实现和平精英中3D模型渲染到2D界面的模型展示效果》进行了解。
2.拼UI
UI包含两部分内容。
- 人物形象部分,包括一个Sprite和Camera。
- 对话框部分,一个背景框Sprite和Label。
3.写代码
核心代码如下,这段代码是一个用于逐字显示对话文本的函数。
typescript
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:笔者线上的小游戏《方块掌机经典》《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》大家可以自行点击搜索体验。
实不相瞒,想要个赞 和在看 !请把该文章分享给你觉得有需要的其他小伙伴。谢谢!
推荐专栏: