Project1

标题: 【脚本整理】消息框DIY [打印本页]
作者: 清澈淌漾    时间: 2021-6-6 00:27
标题: 【脚本整理】消息框DIY
本帖最后由 清澈淌漾 于 2021-6-6 00:28 编辑

本帖会逐步拆解我最近在研究的一套全新对话插件的代码与注释，
由于是第一次制作如此底层的脚本。（写的时候也很震惊- - 显示个文字居然能这么复杂。）
写的也比较乱，做完显示文字和立绘后。跟选择项做接口。
代码和脑袋已经是一团浆糊了，急需进行一波整理



供各位有学习脚本意愿的同好参考
你可以在其中找到制作思路与还未接触到的原生方法



插件功能
*该插件目前还在开发阶段，无法投入使用
1.直接读取data下的自定义json文件
2.覆盖了原本的消息框  (目前使用后  事件内的  选项 数字全部失效，会在陆续后续更新)
3.粗加工富文本并对文本框进行自适应 json配置后自动替换立绘 更新名称栏。


附上效果图


数据源与事件调用



效果


一：获得要显示的对话
懒是推进人类文明的基石。
事件内一个个添加文本 对文本进行排版实在是折磨我。
于是我便有了改造文本框的想法。
首先要解决的就是怎么通过配表的方式获得一个个对话文本

JAVASCRIPT 代码复制
  1. /**
  2.      * 加载地图中的对话
  3.      * 改方法原生为 角色切换地图时会加载对应的map数据
  4.      * 这里追加读取了 自定义的map[地图编号]_info  用$dataMapinfo存储当前地图的对话信息
  5.      * 之后使用脚本方法InfoLoad() 传入的key值 来显示对话
  6.      * */
  7.     DataManager.loadMapData = function(mapId) {
  8.         if (mapId > 0) {
  9.             let filename = 'Map%1.json'.format(mapId.padZero(3));
  10.             let filename2 = 'Map%1_info.json'.format(mapId.padZero(3));
  11.             this._mapLoader = ResourceHandler.createLoader('data/' + filename, this.loadDataFile.bind(this, '$dataMap', filename));
  12.             this.loadDataFile('$dataMap', filename);
  13.             this.loadDataFile('$dataMapinfo', filename2);
  14.         }
  15.         else {this.makeEmptyMap();}
  16.     };





JAVASCRIPT 代码复制
  1. /**
  2.      * 加载一段文本
  3.      * */
  4.     _.InfoLoad = function(i) {
  5.         let data =$dataMapinfo[i]
  6.         if(!data) return
  7.         let str=data.info.replace(/\s+/g,"")
  8.         console.log(str)
  9.         // if(str.length>0) {
  10.         //     $gameMessage.add(str);
  11.         //     $gameMessage.addport(data.port)
  12.         //     $gameMessage.addnick(data.nick)
  13.         // }
  14.     }


数据源



打印效果

QQ截图20210606002725.png (41.24 KB, 下载次数: 17)

QQ截图20210606002725.png
作者: 清澈淌漾    时间: 2021-6-6 08:53
JAVASCRIPT 代码复制
  1. //对话框大小
  2.     _.width = parseInt(params["Width"])||650;
  3.     _.height = parseInt(params["Height"])||190;
  4.  
  5.     //对话框渐入 渐出帧数
  6.     _.animatime = parseInt(params["AnimaTime"])||15;
  7.  
  8.     //换行缩进
  9.     _.indent = parseInt(params["Indent"])||45;
  10.     _.firstline = parseInt(params["Firstline"])||25;
  11.  
  12.     //默认字体大小
  13.     _.fontsize = parseInt(params["Fontsize"])||19;
  14.  
  15.     //边距
  16.     _.padding1 = parseInt(params["Padding1"])||30;
  17.     _.padding2 = parseInt(params["Padding2"])||20;
  18.  
  19.     //行距
  20.     _.lineheight = parseInt(params["Lineheight"])||30;
  21.     //字距
  22.     _.spacing = parseInt(params["Spacing"])||22;
  23.  
  24.     //每个字出现帧数
  25.     _.outframe = parseInt(params["Outframe"])||3;
  26.  
  27.     //逗号标点后间隔帧数
  28.     _.commaframe = parseInt(params["Commaframe"])||8;
  29.  
  30.     //对话框动画每帧的偏移
  31.     _.anima_y=(_.height-_.padding2)/_.animatime-_.padding2
  32.  
  33.  
  34.     /**
  35.      * 更换对话框
  36.      * */
  37.     _.F_scene_map_createmessagewindow = Scene_Map.prototype.createMessageWindow
  38.     Scene_Map.prototype.createMessageWindow = function() {
  39.         //新 窗口消息()
  40.         this._messageWindow = new Window_Limpid_DialogBox();
  41.         //添加窗口
  42.         this.addWindow(this._messageWindow);
  43.         //添加立绘精灵
  44.         this.createPort()
  45.     };
  46.  
  47.     /**创建场景立绘*/
  48.     Scene_Map.prototype.createPort = function() {
  49.  
  50.         //静态立绘
  51.         _.paint=new Sprite();
  52.         this.addChild(_.paint);
  53.         _.paint.scale.x=0.7
  54.         _.paint.scale.y=0.7
  55.         _.paint.x=190
  56.         _.paint.y=640
  57.  
  58.         _.paint.use=false
  59.  
  60.  
  61.         //动态立绘
  62.         _.port=new Sprite();
  63.         this.addChild(_.port);
  64.         _.port.scale.x=0.7
  65.         _.port.scale.y=0.7
  66.         _.port.x=190
  67.         _.port.y=640
  68.  
  69.     }
  70.  
  71.  
  72.     /**文本框*/
  73.     Window_Limpid_DialogBox= function () {this.initialize.apply(this, arguments);}
  74.     Window_Limpid_DialogBox.prototype = Object.create(Window_Base.prototype);
  75.     Window_Limpid_DialogBox.prototype.constructor = Window_Limpid_DialogBox;
  76.     Window_Limpid_DialogBox.prototype.initialize = function()
  77.     {
  78.         //精灵回收
  79.         this.dustbin();
  80.         Window_Base.prototype.initialize.call(this, (Graphics.boxWidth -_.width-_.padding1),  Graphics.boxHeight+30 , _.width, _.height);
  81.         this.stressing();
  82.         _.window_Limpid_DialogBox=this;
  83.  
  84.         //名称
  85.         this.namebox = new Window_Limpid_NameBox();
  86.         this.addChild(this.namebox);
  87.     };
  88.     Window_Limpid_DialogBox.prototype.stressing = function()
  89.     {
  90.  
  91.         this._active=false;
  92.         this._anime=0;
  93.         this.opacity=0
  94.  
  95.         //背景图
  96.         this.back=new Sprite(ImageManager.loadDialog("box"));
  97.         this.addChild(this.back);
  98.     };
  99.  
  100.  
  101.  
  102.  
  103.     /**名称框*/
  104.     Window_Limpid_NameBox= function () {this.initialize.apply(this, arguments);}
  105.     Window_Limpid_NameBox.prototype = Object.create(Window_Base.prototype);
  106.     Window_Limpid_NameBox.prototype.constructor = Window_Limpid_NameBox;
  107.     Window_Limpid_NameBox.prototype.initialize = function()
  108.     {
  109.         Window_Base.prototype.initialize.call(this, -20,  -20 , 282, 41);
  110.         this.stressing();
  111.  
  112.     }
  113.     Window_Limpid_NameBox.prototype.stressing = function()
  114.     {
  115.         this.opacity=0;
  116.  
  117.         this.back=new Sprite(ImageManager.loadDialog("boxname"));
  118.         this.addChild(this.back);
  119.  
  120.         this.nick=new Sprite(new Bitmap(282, 41));
  121.         this.nick.bitmap.fontSize = 22
  122.         this.addChild(this.nick);
  123.     };
  124.     /**绘制名称*/
  125.     Window_Limpid_NameBox.prototype.drawname = function(name)
  126.     {
  127.         this.nick.bitmap.clear()
  128.         this.nick.bitmap.drawText(name, 0, 0, 282, 41, "center");
  129.     };
  130.  
  131.  
  132.  
  133.  
  134.     /*一段文本结束后 从数组中删除*/
  135.     Game_Message.prototype.endText = function() {
  136.         this._texts.splice(0,1)
  137.         // this._port.splice(0,1)
  138.         // this._nick.splice(0,1)
  139.     };
  140.  
  141.  
  142. /**
  143.  * 工具类
  144.  * */
  145.     Window_Base.prototype.dustbin = function () {this.clear_Arr = new Array()};
  146.     Window_Base.prototype.clear = function () {
  147.         if (this.clear_Arr.length > 0) {
  148.             for (var i = 0; i < this.children.length; i++)
  149.                 if (this.clear_Arr.indexOf(this.children[i].spriteId) > -1)
  150.                     this.children.splice(i--, 1);
  151.             this.clear_Arr = new Array()
  152.         }
  153.         this.contents.clear();
  154.     };
  155.  
  156.     /*图片加载*/
  157.     ImageManager.loadDialog = function (filename, hue) {return this.loadBitmap('img/dialog/', filename, hue, true);}
  158.     ImageManager.loadDialogPort = function (filename, hue) {return this.loadBitmap('img/dialog/port/s_', filename, hue, true);}
  159.     ImageManager.reserveDialogPort = function (filename, hue) {return this.reserveBitmap('img/dialog/port/s_', filename, hue, true);};



脚本大框






JAVASCRIPT 代码复制
  1. /**
  2.      * 帧事件
  3.      * 重点
  4.      * 每帧更新 判断有没有文本输入
  5.      * */
  6.     Window_Limpid_DialogBox.prototype.update = function() {
  7.         //没有要处理的文本
  8.         if (!$gameMessage.hasText()) {
  9.             if (!this._show) return
  10.             //淡出
  11.             else if (this._anime > 0) {
  12.                 this.y = (Graphics.boxHeight - _.height) + (_.animatime - (--this._anime)) * _.anima_y;
  13.                 this.alpha = this._anime / _.animatime
  14.             } else this._show = false;
  15.         }
  16.         //存在要处理的文本
  17.         else {
  18.             if (this._show) {
  19.                 $gameMessage.endText()
  20.                 //进入这里时表示有文本输入进来
  21.                 //之后这里会大量处理逻辑
  22.                 //这里先立即排出文本 测试文本框淡入淡出效果
  23.             }
  24.             //淡入  -2是为了让文本框与底部留出一部分边距
  25.             else if (this._anime < _.animatime-2) {
  26.                 this.y = (Graphics.boxHeight - _.height) + (_.animatime - (++this._anime)) * _.anima_y;
  27.                 this.alpha = this._anime / _.animatime
  28.             }
  29.             else this._show = true
  30.         }
  31.     };



作者: 清澈淌漾    时间: 2021-6-6 11:25
初始化要处理的文字

JAVASCRIPT 代码复制
  1. /**
  2.      * 文本控制器
  3.      * */
  4.     Window_Limpid_DialogBox.prototype.textHandler = function() {
  5.         if(!this._Info||this._Info.end==2)
  6.         {
  7.             this._Info= _.Text_template_init()
  8.             _.Text_template_load($gameMessage.getData(),this._Info);
  9.             this._Info.x=0;
  10.             this._Info.y=0;
  11.             this._Info.z=0
  12.             return false
  13.         }
  14.         else {console.log(this._Info)}
  15.  
  16.     }

上段的逻辑处 调用该方法 this.Info 初始化如下
JAVASCRIPT 代码复制
  1. /**
  2.      * 初始一段对话的信息
  3.      * */
  4.     _.Text_template_init = function() {
  5.         return {
  6.             txtarr:new Array()
  7.             //记录文字走到哪行
  8.             ,line:0
  9.             //字体大小
  10.             ,fs:_.fontsize
  11.             //第一行缩进
  12.             ,x:0
  13.             ,y:0
  14.             ,z:0
  15.             ,spacing:_.spacing
  16.             ,lineheight:_.lineheight
  17.             ,color:"fff"
  18.  
  19.  
  20.             //延迟点
  21.             ,lagarr:[]
  22.             //停顿点
  23.             ,pausearr:[]
  24.  
  25.             //记录停顿点
  26.             ,index:0
  27.             ,index_old:-1
  28.             ,index_skip:0
  29.  
  30.  
  31.             //静态图像
  32.             ,paint:[]
  33.             //每个停顿点出现的动态图像
  34.             ,port:[]
  35.             //每个停顿点使用的名称
  36.             ,nick:[]
  37.             //每个停顿点播放的声音
  38.             ,sound:[]
  39.  
  40.  
  41.             //等待帧
  42.             ,interval:0
  43.             //加速显示到下一停顿点
  44.             ,fast:false
  45.             //等待点击
  46.             ,stop:0
  47.             //本文本全显示
  48.             ,skip:false
  49.  
  50.             //下一文本判断
  51.             // 执行中  ---0
  52.             // 等待输入 ---1
  53.             // 等待填充 ---2
  54.             ,end:0
  55.         }
  56.     }


info加载
JAVASCRIPT 代码复制
  1. /**
  2.      * 信息加载
  3.      * */
  4.     _.Text_template_load = function(filling,vessel) {
  5.  
  6.         //文本框的宽
  7.         let boxwidth= _.width-_.padding1
  8.         //段落首字缩进
  9.         let indent=_.indent+_.padding1
  10.         vessel.x= indent
  11.  
  12.         //标记
  13.         let x=0,y=0
  14.  
  15.         //预加载立绘
  16.         let portset = new Set(filling.port.port)
  17.         if (filling.port.paint&&filling.port.paint.length>0) portset.add(filling.port.paint)
  18.         portset.forEach(function (item) {ImageManager.reserveDialogPort(item)})
  19.  
  20.  
  21.         //填入 立绘 声音 名称
  22.         vessel.port=filling.port
  23.         vessel.sound=filling.sound
  24.         for(let i=0;i<filling.nick.length;i++)
  25.         {
  26.  
  27.             if(filling.nick[i][0]=="!") vessel.nick.push(_.Sign_process(filling.nick[i]).mes)
  28.             else   vessel.nick.push(filling.nick[i])
  29.         }
  30.  
  31.  
  32.         //开关 表示进入指令标记
  33.         let sign=false
  34.         //处理的指令
  35.         let instruct=""
  36.  
  37.         //半角填充数
  38.         let uate = 2
  39.  
  40.         //循环每个字符
  41.         for(var i=0;i<filling.text.length;i++) {
  42.  
  43.             if (sign) {
  44.                 //标记开关开启并遇到">" 处理该段标记
  45.                 if(filling.text[i] == ">")
  46.                 {
  47.                     let data=_.Sign_process(instruct,filling)
  48.                     switch (data.code) {
  49.                     //换行
  50.                     case 0:
  51.                         filling.x = _.padding1+_.indent;y++;x = 0;break
  52.                     //文本替换
  53.                     case 1:
  54.                         filling.text=filling.text.slice(0,i)+data.mes+filling.text.slice(i+1);i--;break
  55.                 }
  56.                     instruct="";sign=false
  57.                 }
  58.                 //记录后续指令
  59.                 else instruct+=filling.text[i];
  60.             }
  61.             //遇到"<" 开启标记开关
  62.             else if (filling.text[i] == "<") {sign = true}
  63.             //读取普通文字
  64.             else {
  65.                 //文本索引 
  66.                 vessel.z++
  67.                 /*绘制精灵*/
  68.                 let fs=vessel.fs + 5
  69.                 let sprite = new Sprite(new Bitmap(fs, fs));
  70.                 sprite.x = vessel.x
  71.                 sprite.bitmap.fontSize = vessel.fs
  72.                 sprite.bitmap.outlineWidth = 3
  73.                 sprite.bitmap.outlineColor = 'rgba(36, 36, 36, 0.88)'
  74.                 sprite.bitmap.drawText(filling.text[i], 0, 0, fs, fs, "center")
  75.  
  76.  
  77.                 //放入数组
  78.                 //x为0  每行的第一个字
  79.                 if (x == 0) {vessel.txtarr.push(new Array(sprite));}
  80.                 else {vessel.txtarr[y].push(sprite);}
  81.  
  82.  
  83.                 //检查下一个字
  84.                 if (i < filling.text.length - 1) {
  85.                     //下个字是全角半角
  86.                     var nat = filling.text[i + 1].charCodeAt() < 256 ? true : false
  87.                     //当前字是全角半角
  88.                     var at = filling.text[i].charCodeAt() < 256 ? true : false
  89.                     //以字距对下一字的x进行位移
  90.                     vessel.x += vessel.spacing * (at&&nat?0.5:1)
  91.                     //如果下一字的x大于文本框 并且（他是全角 或者半角填充数已经为0）进行自动换行
  92.                     if (vessel.x >= boxwidth && (!at || uate-- == 0)) {vessel.x = _.padding1;y++;x=0;uate = 2}
  93.                     else {x++}
  94.                 }
  95.             }
  96.         }
  97.     }



其余辅助方法

JAVASCRIPT 代码复制
  1. /**
  2.      *标记 处理
  3.      */
  4.     _.Sign_process = function(sign,vessel)
  5.     {
  6.         let sign_s=sign.split(':')
  7.         switch (sign_s[0]) {
  8.             case "&p":vessel.pausearr.push(vessel.z-1);break
  9.             case "&c":vessel.lagarr.push(vessel.z-1);break
  10.             case "&n":return {code:0};break
  11.             case "!v":return {code:1,mes:$gameVariables.value(sign_s[1])};break
  12.             case "!an":return {code:1,mes:_.getAName(sign_s[1])};break
  13.             case "!ac":return {code:1,mes:_.getAClassName(sign_s[1])};break
  14.             case "!ai":return {code:1,mes:_.getANickname(sign_s[1])};break
  15.             case "!pn":return {code:1,mes:_.getPName(sign_s[1])};break
  16.             case "!pc":return {code:1,mes:_.getPClassName(sign_s[1])};break
  17.             case "!pi":return {code:1,mes:_.getPNickname(sign_s[1])};break
  18.         }
  19.         return {code:-1}
  20.     }
  21.  
  22.  
  23.     /**
  24.      * 字符转文字
  25.      * */
  26.     _.getAName = function(n) {
  27.         let actor = n >= 1 ? $gameActors.actor(n) : null;
  28.         return actor ? actor.name() : '';
  29.     };
  30.     _.getAClassName = function(n) {
  31.         let actor = n >= 1 ? $gameActors.actor(n) : null;
  32.         return actor ? actor.currentClass().name : '';
  33.     };
  34.     _.getANickname = function(n) {
  35.         let actor = n >= 1 ? $gameActors.actor(n) : null;
  36.         return actor ? actor.nickname() : '';
  37.     };
  38.     _.getPName = function(n) {
  39.         let actor = n >= 1 ? $gameParty.members()[n - 1] : null;
  40.         return actor ? actor.name() : '';
  41.     };
  42.     _.getPClassName = function(n) {
  43.         let actor = n >= 1 ? $gameParty.members()[n - 1] : null;
  44.         return actor ? actor.currentClass().name : '';
  45.     };
  46.     _.getPNickname = function(n) {
  47.         let actor = n >= 1 ? $gameParty.members()[n - 1] : null;
  48.         return actor ? actor.nickname() : '';
  49.     };


JAVASCRIPT 代码复制
  1. /*传入立绘*/
  2.     Game_Message.prototype.addPort=function(port) {this._port.push(port);}
  3.     /*传入名称*/
  4.     Game_Message.prototype.addNick=function(nick) {this._nick.push(nick);}
  5.     /*传入声音*/
  6.     Game_Message.prototype.addSound=function(sound) {this._sound.push(sound);}
  7.     /*获得文本信息*/
  8.     Game_Message.prototype.getData = function(i) {
  9.         return i&&!i<this._texts.length?
  10.             {text:this._texts[i],nick:this._nick[i],port:this._port[i],sound:this._sound[i]}:
  11.             {text:this._texts[0],nick:this._nick[0],port:this._port[0],sound:this._sound[0]}
  12.     };


打印效果

作者: 清澈淌漾    时间: 2021-6-6 13:48
JAVASCRIPT 代码复制
  1. /**
  2.      * 帧事件
  3.      * 重点
  4.      * 每帧更新 判断有没有文本输入
  5.      * */
  6.     Window_Limpid_DialogBox.prototype.update = function() {
  7.         //没有要处理的文本
  8.         if (!$gameMessage.hasText()) {
  9.             if (!this._show) return
  10.             //淡出
  11.             else if (this._anime > 0) {
  12.                 this.y = (Graphics.boxHeight - _.height) + (_.animatime - (--this._anime)) * _.anima_y;
  13.                 this.alpha = this._anime / _.animatime
  14.                 this.showSport(false)
  15.             } else this._show = false;
  16.         }
  17.         //存在要处理的文本
  18.         else {
  19.             if (this._show) this.textHandler();
  20.             //淡入  -2是为了让文本框与底部留出一部分边距
  21.             else if (this._anime < _.animatime-2) {
  22.                 this.y = (Graphics.boxHeight - _.height) + (_.animatime - (++this._anime)) * _.anima_y;
  23.                 this.alpha = this._anime / _.animatime
  24.                 this.showSport(true)
  25.             }
  26.             else this._show = true
  27.         }
  28.     };
  29.  
  30.  
  31.     /**
  32.      * 文本控制器
  33.      * */
  34.     Window_Limpid_DialogBox.prototype.textHandler = function() {
  35.         if(!this._Info||this._Info.end==2)
  36.         {
  37.             this._Info= _.Text_template_init()
  38.             _.Text_template_load($gameMessage.getData(),this._Info);
  39.             this._Info.x=0;
  40.             this._Info.y=0;
  41.             this._Info.z=0
  42.             return false
  43.         }
  44.         else {
  45.             if( this._Info.index_old!=this._Info.index)
  46.             {
  47.                 this._Info.index_old=this._Info.index
  48.                 /*更新立绘*/
  49.                 this.updatePort(this._Info.index)
  50.                 /*更新名称*/
  51.                 this.updateNick(this._Info.index)
  52.             }
  53.  
  54.         }
  55.  
  56.     }
  57.  
  58.     /**
  59.      * 更新动态立绘
  60.      */
  61.     Window_Limpid_DialogBox.prototype.updatePort=function(index)
  62.     {
  63.         //隐藏动态立绘
  64.         if(index==-1||this._Info.port.length==0)  {_.port.bitmap=new Bitmap();return}
  65.  
  66.         //更新动态立绘
  67.         var Portdata = this._Info.port.length>index?this._Info.port[index]:this._Info.port[this._Info.port.length-1]
  68.         _.port.bitmap=ImageManager.loadDialogPort(Portdata)
  69.         _.port.anchor.x = 0.5
  70.         _.port.anchor.y = 0.5
  71.  
  72.         /*用静态立绘充当过度*/
  73.         if( _.paint._active){_.paint.alpha=0;_.paint._active=false}
  74.         else {
  75.             _.paint.bitmap = ImageManager.loadDialogPort(Portdata)
  76.             _.paint.anchor.x = 0.5
  77.             _.paint.anchor.y = 0.5
  78.         }
  79.     }
  80.     /**
  81.      * 更新名称框
  82.      */
  83.     Window_Limpid_DialogBox.prototype.updateNick=function(index)
  84.     {
  85.         if(index==-1||this._Info.nick.length==0)  {this.namebox.drawName("");return}
  86.         this.namebox.drawName(this._Info.nick.length>index?this._Info.nick[index]:this._Info.nick[this._Info.nick.length-1])
  87.     }
  88.  
  89.     /***
  90.      * 显示静态立绘
  91.      */
  92.     Window_Limpid_DialogBox.prototype.showSport=function(show){
  93.         _.paint.alpha = this._anime / _.animatime
  94.         if(_.paint._active!=show)
  95.         {
  96.             _.paint._active=show
  97.             if (show)
  98.             {
  99.                 _.paint.bitmap=ImageManager.loadDialogPort($gameMessage.getPort().paint)
  100.                 _.paint.anchor.x = 0.5
  101.                 _.paint.anchor.y = 0.5
  102.             }
  103.         }
  104.     }



覆盖帧更新  文本控制器  
效果如下





更改下json配置 便可控制 名称 立绘 显示

GIF 2021-6-6 12-55-41.gif (637.14 KB, 下载次数: 15)

GIF 2021-6-6 12-55-41.gif




欢迎光临 Project1 (https://rpg.blue/) Powered by Discuz! X3.1