Construct2/3

创建于:2017-02-24

创建人: iconboy

103 信息 419 成员
Construct2/3 引擎开发专题

[制作分享]游戏中的对话框制作

potion 2018-09-04

我们常在游戏中见到各种各样的剧情对话,电子游戏从最早的RPG类对话框演变至今,已经产生了无数种解决方案。但总的来说,常见的对话分为两类:

最常见的galgame对话,可以看到较大的立绘图表现人物的表情动态(甚至动画),以及标记角色的名字和对话内容。

image.png

或者也有一些游戏使用pop的悬浮对话窗口直接表现,对话框与角色位置匹配,同时不干扰游戏环境的演出效果(例如可以一边行走战斗,pop框还依然出现)

image.png

分析制作方案,有2个要素:

1 资源

2 配置

由于各个游戏的需求不同所以我们先从最低需求的资源和配置来讲。

对话框资源,我们最低限度需要有一个框体和一个对话文本框。框体用来做文本的背景,文本框显示对话内容。然后再根据游戏需求的不同添加立绘用的图片加载框,角色名文本框等。

如果是pop类型的对话,也可能需要添加箭头资源(也可能需要区分对话和思考的箭头和泡泡)

image.png

配置部分则比较复杂,首先我们需要先理解对话的最基本结构。

这部分很好理解,对话就是一句一句的文本,说完一句进入下一句,所以我们可以将对话的配置设计为一连串的对话ID,比如ID 1000代表第一句话,这句完了就说ID为1001的那句:

image.png

(请暂时忽略文本里奇怪的标签)

很好,这样只要将这一串ID里的文本顺序播放,一句完毕显示下一句,最基础的对话框配置就做好了。

接下来,我们需要添加一个标记,表示1014这句话是这段对话的最后一句,这样程序当识别到这个标记就会在这段对话结束的时候关闭对话框,例如next标记0表示这是段落的最后一句话:

image.png

在添加了文本后,我们也需要区分对话是谁说的。所以还需要添加名字和立绘的配置列:

image.png

如图

  • role标识立绘用图的名字
  • side标识立绘在对话框的左侧还是右侧,在制作的时候会自动反转立绘
  • name标识说话的角色名字,显示在对话前面

关于文本打字效果:

文本打字效果是对话框的常用效果,可以有效的控制阅读节奏,同时在单调的对话中有限的制造一些演出效果。

打字效果可以控制打字速度,并且可以在每个字出现的时候产生各种效果(参考逆转裁判里的经典用法)

基于打字效果产生的更多的细节:

image.png

  • speed标记打字速度,0.5表示0.5秒打一个字
  • audio标记打字音效,即每个字出现时播放的音效
  • shake标记打字震屏效果,填写的数值表示震屏强度
  • auto标记文本是否自动下一句话(可以参考逆转裁判中犯人崩溃的桥段),一旦标记为auto则不需要按键也会自动进入下一句
  • size标记文本的字号


以下是最终效果(不过听不到声音啦)

talk_ref.gif


更多扩展:

  • flash 闪屏
  • bg 改变背景图
  • bgm 改变背景音乐
  • posXY 改变立绘坐标使之偏移
  • effect 产生某个特定的特效


pop类对话看起来比固定对话框要简单,不需要显示名字,没有立绘,受限于pop的尺寸文本也不可能做很多。但实际上,pop类对话比固定对话复杂很多:

  • pop框的尺寸需要和文本量匹配
  • 需要与说话的角色位置对应,甚至跟随移动
  • pop对话的时候,可能需要与角色行为产生关系(例如更换动画)
  • pop对话也许根本不会暂停游戏


POP框体的制作

在讲述pop的制作方法前,需要普及一下pop的资源制作方法和在UI中的使用类型。

在UI控件中有一类名为9patch的控件。和普通的精灵图片不同,9patch可以将一个图片按井字分隔为9个格子,如下图:

image.png

如果是普通的精灵图片,在缩放的时候就会产生形变和模糊

poptalkx.gif

而9patch控件可以将保证4个角不变的情况下自由拉伸并且不会模糊,实现固定倒角的随意缩放的圆角矩形:

poptalk.gif


一旦基础的pop对话框资源搞定以后,后面的事情就会简单很多:


  • 当对话框弹出后将pop框体+箭头+文本创建在指定的角色上方(固定的点)
  • 与上次讲的固定框体一样使用打字的方法讲文本一个一个打出来
  • 限制文本框的宽度,超过一定宽度(或有主动的文本回车)自动换行
  • 将pop框的尺寸与文本框的尺寸匹配(当然四周需要留一些空间)
  • 控制好框体的坐标(匹配对话框箭头的位置,如果变大需要向上“长”)
  • 对话框缩放的效果(目前GIF帧率低看不出来,其实框体的变化是更有“弹性”)


talk_pop.gif


上图是完成的效果,因为偷懒,所以pop框采用了和固定框不一样的创建方式。每说一句话都会删掉当前框体,下句话重新创建pop框体并从最小尺寸开始。


对话与角色匹配


由于pop对话的方案需要让框体出现在指定的角色头上,所以需要为对话配置对应角色的字符(比如特定的名字),由程序逻辑找到那个角色并创建对话框(例如场景中有5个一样的NPC,我们只想让第二个NPC说话,这种时候就需要为他配置特殊的标记才能找到他)


角色是否受控?游戏是否暂停?


根据情况,可以将角色置为不受控状态,或干脆暂停游戏播放固定的对话或演绎动画剧情。但也有非剧情对话的情况(比如敌人或NPC的随机喊话),需要区分处理。


对话镜头


可以配置对话出现时镜头拉到说话角色的位置,用于跟踪对话主体或跨屏演出效果


剧情段落


除了NPC或敌人不受控制的自言自语外(程序设置的某种规律的随机说话),大部分的对话都是受剧情控制的综合演出效果,这种时候往往只依靠对话表不太够用。

实际上当游戏中对话文本过多的时候,可能还需要再高一个层级的配置,用来更方便的管理对话的开始和结束,对话的类型方案等等。如果对话叫做talk的话,这个配置可以称之为story。


在story中最基本的配置除了ID外便是talk的开始ID和结束ID。还可以配置这段对话是固定对话框还是pop对话框,甚至产生某些混合方案,例如控制剧情之间的衔接关系。


演出效果的相关内容:

  • 对话
  • 动画控制
  • 镜头控制
  • 行为控制(例如移动或跳到某处)
  • 功能控制(例如某些开关自动开启)
  • 效果(特效,音乐音效)


其实大部分我还没做,慢慢实现吧……orz

所以先这样吧……

近期喜欢的会员

 
totoyan 2018-09-04

干货赶紧收藏啊!

 
eastecho 2018-09-05

请坐好扶稳,准备登上首页

 
希罗 2018-09-07

太。。。太硬了!

 
CWorld 2018-09-07

9Patch用unity能做吗?用slice好像好像没有效果

 
世俗骑士 2018-09-07

9Patch真的是好东西

 
最後 2018-09-08

干货满满,学习了

 
shitake 2018-09-10

不如做成带 action code 的富文本 

闪屏 震动 文字显示速度 都通过 action code 来处理就好了

而且你还可以做成类似doc的那样的流式的指令


https://rpg.blue/thread-401822-1-1.html

从这可看出一个复杂rpg的对话框都会有哪些复杂需求了



 
Rook1042 2018-10-09

我还是没看懂怎么做文本打字效果……

 
天风 2018-10-09

Mark下,之后再仔细看看

 
MSTY 2019-08-21

这是用Text控件做的?那个列表一样的东西是怎么调出来的?求助

 
potion 2019-10-11

MSTY excel啊

 
peer 2019-10-25

好專業!久不見的行家好文!大推!

 

加入 indienova

  • 建立个人/工作室档案
  • 建立开发中的游戏档案
  • 关注个人/工作室动态
  • 寻找合作伙伴共同开发
  • 寻求线上发行
  • 更多服务……
登录/注册