以原神中的对话艺术，启发游戏开发新人

前端

2023-09-02 18:21:30

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

引言

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

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

因此，我们一起来看看如何在Cocos Creator中创建游戏剧情对话框。

一、了解原神中的对话艺术

原神中的对话艺术特点

（1）对话内容丰富

（2）对话形式多样

（3）对话人物鲜明

（4）对话情节引人入胜

原神中的对话艺术技巧

（1）抓住重点，简明扼要

（2）使用生动形象的语言

（3）注意对话的节奏和语气

（4）注重人物的性格刻画

（5）善用环境和道具

二、在Cocos Creator中创建游戏剧情对话框

创建一个新的Cocos Creator项目
在“Assets”面板中，创建一个新的脚本文件，命名为“DialogueManager”
在“DialogueManager”脚本中，编写以下代码：

const {ccclass, property} = cc._decorator;

@ccclass
export default class DialogueManager extends cc.Component {

    @property(cc.Node)
    dialogueBox: cc.Node = null;

    @property(cc.Label)
    dialogueText: cc.Label = null;

    @property(cc.Button)
    nextButton: cc.Button = null;

    private _currentDialogueIndex = 0;
    private _dialogues = [];

    onLoad() {
        this.nextButton.on('click', this.onNextButtonClick, this);
        this.loadDialogues();
    }

    start() {
        this.showDialogue();
    }

    loadDialogues() {
        this._dialogues = [
            {
                speaker: '主角',
                content: '你好，旅行者。'
            },
            {
                speaker: '派蒙',
                content: '你好，你好。'
            },
            {
                speaker: '主角',
                content: '请问，你知道怎么去蒙德城吗？'
            },
            {
                speaker: '派蒙',
                content: '当然知道。跟我来吧。'
            }
        ];
    }

    showDialogue() {
        const dialogue = this._dialogues[this._currentDialogueIndex];
        this.dialogueText.string = dialogue.speaker + ': ' + dialogue.content;
    }

    onNextButtonClick() {
        this._currentDialogueIndex++;
        if (this._currentDialogueIndex >= this._dialogues.length) {
            this.dialogueBox.active = false;
        } else {
            this.showDialogue();
        }
    }
}