MV源码解析之对话框绘制文本原理

沉滞的剑

Window_Message绘制文本原理

好久不见, 随便更点写插件时候遇到的东西
顺带附一个我给项目写的小插件, 可能会对其他项目也有用吧
=======================================================

0
对话框是有打字机效果(还有转义符来控制速度和等待)
这是一个看似不起眼, 但实则很有意思的实现
我们来一步一步揭开它是如何绘制多行的带有打字机特效的文本的
部分代码为了利于理解而进行了修改和删减

1. 准备

1.1 原文本
对话框会在战斗和地图上被触发,
但是无论是战斗中还是地图上, 文本的来源都只有

1. 
   
2. $gameMessage.allText()
   

复制代码

1.2 文本状态对象

1. 
   
2. textState = {
   
3.         index, // 当前位置
   
4.         x,     // x坐标
   
5.         y,     // y坐标
   
6.         left,  // 左起点
   
7.         height,// 高度
   
8.         text,  // 文本
   
9. }
   

复制代码

这个对象代表了当前帧需要绘制的字符(text[index])的各种信息(x, y, height)
换行的时候可以让 x = left, y += height 就可以了

1.3 开始方法

当窗口准备绘制时会执行startMessage()方法(部分略)
读取原文本并且构建文本状态对象
因为原文本可能有一些转移符所以要先行转换(物品名称, 人物名称, 变量信息等等)

1. 
   
2. startMessage() {
   
3.         textState = {};
   
4.         textState.index = 0;
   
5.         textState.text = convertEscapeCharacters($gameMessage.allText());
   
6. }
   

复制代码

2. 状态更新

2.1 基础

最基础实现绘制所有字符的方法, process每一次循环都会让textState.index递增

1. 
   
2. updateMessage(){
   
3.         while(!isEndOfText(textState)) {
   
4.                 processCharacter(textState)
   
5.         }
   
6. }
   
7. 
   
8. processCharacter(textState) {
   
9.         drawText(textState.text[textState.index++], textState.x, textState.y, w * 2, textState.height)
   
10. }
    

复制代码

2.2 打字机效果

但是首先我们想要一个打字机的效果,
在RM中设定的是每帧打印1个字符,
只需要在while循环中增加一个break就可以(或者去掉循环)
但是我们又想让玩家按住回车键的话会立刻显示所有文本那么就加入一个判断就可以了
如果按下了回车, 那么就不会进入break, 从而在一帧内绘制完所有文本

1. 
   
2. if(!this._showFast) {
   
3.         break
   
4. }
   
5. 
   
6. updateShowFast() {
   
7.   if (Input.isRepeated("ok")) {
   
8.     this._showFast = true;
   
9.   }
   
10. }
    

复制代码

2.3 换行

接下来一个问题是如何换行, 其实也很简单
之前提到了, 仅仅是移动了绘制的位置信息而已

1. 
   
2. processCharacter() {
   
3.         text = textState.text[textState.index++]
   
4.         if (text === '\n') {
   
5.                 processNewLine(textState)
   
6.         } else {
   
7.                 drawText(...)
   
8.         }
   
9. }
   
10. 
    
11. processNewLine(textState) {
    
12.   textState.x = textState.left;
    
13.   textState.y += textState.height;
    
14.   textState.index++;
    
15. }
    

复制代码

2.4 停顿
其他转义符的处理也是一样, 注意有"."和"|"他们设置了一个等待时间
在update中如果这个计数器大于0, 那么就会递减并且跳过绘制, 达到等待和停蹲的效果

1. 
   
2. processEscapeCharacter(code, textState) {
   
3.   switch (code) {
   
4.     case ".":
   
5.       startWait(15);
   
6.       break;
   
7.     case "|":
   
8.       startWait(60);
   
9.       break;
   
10.         }
    
11. };
    
12. 
    
13. startWait(count){
    
14.   waitCount = count;
    
15. };
    
16. 
    
17. updateWait() {
    
18.   if (waitCount > 0) {
    
19.     waitCount--;
    
20.     return true;
    
21.   } else {
    
22.     return false;
    
23.   }
    
24. };
    
25. 
    
26. update() {
    
27.     if (updateWait()) {
    
28.       return;
    
29.     }
    
30.         updateMessage()
    
31. }
    

复制代码

===========================================

另附一个按文本长度居中对话框的小插件

1. 
   
2. /*:
   
3. * @help
   
4. * 开启居中指令 SetCentralMessage
   
5. * 关闭居中指令 UnsetCentralMessage
   
6. */
   
7. {
   
8.   const Window_CentralMessage = class extends Window_Message {
   
9.     newPage(textState) {
   
10.       super.newPage(textState);
    
11.       if (!flag) return;
    
12.       this.textlines = textState.text
    
13.         .split("\n")
    
14.         .map(this.convertEscapeCharacters);
    
15.       this._lineIndex = 0;
    
16.       textState.x =
    
17.         this.width / 2 -
    
18.         this.textWidth(this.textlines[this._lineIndex]) / 2 -
    
19.         this.standardPadding();
    
20.     }
    
21. 
    
22.     processNewLine(textState) {
    
23.       super.processNewLine(textState);
    
24.       if (!flag) return;
    
25.       this._lineIndex += 1;
    
26.       textState.x =
    
27.         this.width / 2 -
    
28.         this.textWidth(this.textlines[this._lineIndex]) / 2 -
    
29.         this.standardPadding();
    
30.     }
    
31.   };
    
32.   Window_Message = Window_CentralMessage;
    
33.   const temp = Game_Interpreter.prototype.pluginCommand;
    
34.   let flag = false;
    
35.   Game_Interpreter.prototype.pluginCommand = function(command, args) {
    
36.     temp.call(this, command, args);
    
37.     if (command === "SetCentralMessage") {
    
38.       flag = true;
    
39.     } else if (command === "UnsetCentralMessage") {
    
40.       flag = false;
    
41.     }
    
42.   };
    
43. }
    
44. 
    
45. 
    

复制代码