别看我在玩原神,其实我是在学习...

引言

玩原神,学习做游戏剧情对话框

昨天我在找素材的时候,一不小心就启动了原神,踏上了我的学习之路...

作为一个游戏开发新人,对原神的游戏剧情对话框还是挺感兴趣的。

因此,我们一起来看看如何在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);
}

解析:

  1. 输入参数: 函数接受一个字符串 str,这是要逐字显示的对话文本。

  2. 字符数组: 使用 split('') 将输入的字符串拆分为字符数组,每个字符都是数组的一个元素。

  3. 定时器清除: 在进入函数时,首先检查是否存在之前的定时器 this.ticker,如果存在,则清除它,以防止多个定时器冲突。

  4. 定时器设置: 使用 setInterval 创建一个定时器,每隔一定时间执行一次指定的回调函数。

  5. 逐字显示: 在定时器的回调函数中,判断是否已经显示完所有字符。如果未显示完,递增字符索引,然后更新显示文本 this.label.string,只显示已经逐字显示的字符。

  6. 定时器清除(再次): 如果所有字符都已经显示完,清除定时器,确保不再执行回调函数。

4.效果展示

结语

本文源工程 可通过阅读原文获取。

我是"亿元程序员",一位有着8年游戏行业经验的主程。在游戏开发中,希望能给到您帮助, 也希望通过您能帮助到大家。

AD:笔者线上的小游戏《方块掌机经典》《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》大家可以自行点击搜索体验。

实不相瞒,想要个在看 !请把该文章分享给你觉得有需要的其他小伙伴。谢谢!

推荐专栏:

100个Cocos实例

8年主程手把手打造Cocos独立游戏开发框架

和8年游戏主程一起学习设计模式

从零开始开发贪吃蛇小游戏到上线系列

知识付费专栏

相关推荐
GIS程序媛—椰子5 分钟前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山28 分钟前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享1 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf3 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨3 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL3 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1114 小时前
css实现div被图片撑开
前端·css
薛一半4 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
@蒙面大虾4 小时前
CSS综合练习——懒羊羊网页设计
前端·css
MarcoPage4 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js