[分享]一种基于面条代码的窗口修改方案

清澈淌漾

适用人群：懂JS 但不知道怎么下手MV插件的开发者
缓解症状：对纯触摸窗口进行修改
不适反应：面条代码，需要自己2次封装（对的对的 我就是要用垃圾代码来刺激你）

以下代码仅供参考，我提供一个思路。
请以自己的思维阅读理解并拓展。
///////////////////////////////////////////////////////////////////////////////////////////////////////
首先给Sprite的原型链上增加以下方法
来获得其相对于窗口的X和Y
[pre lang="javascript"]Sprite.prototype.getTotalValue = function(propertyName) {
    let total = this[propertyName];
    for (let current = this; current && current.parent && current.parent[propertyName]; current = current.parent) {
        total += current.parent[propertyName];
    }
    return total;
}
Sprite.prototype.getX = function() {return this.getTotalValue('x');}
Sprite.prototype.getY = function() {return this.getTotalValue('y');}[/pre]
///////////////////////////////////////////////////////////////////////////////////////////////////////
场景（Scene）->窗口(Window)->精灵(Sprite)->位图(Bitmap)
是我理解的构成视图（游戏画面）的基本元素
可以理解成 分子 原子 电子

游戏画面运行的当前的场景
比如
[pre lang="javascript"]window.onload = function() {
    SceneManager.run(Scene_Boot);
};[/pre]
这是MV的启动主入口 让场景SceneManager启动Scene_Boot场景
SceneManager.push（进入下一个场景）和SceneManager.pop（返回上一个场景）
充斥这整个游戏运行过程。

那么 我们如何修改一个场景
拿设置窗口举例
在img里定义好 这个场景会用到的图片，进行预加载。
当图片加载后 load会自增 ,那么 只有确定图片都加载完成后，才执行原本 create中要执行的代码。
[pre lang="javascript"]Scene_Options.prototype.initialize = function() {
    Scene_MenuBase.prototype.initialize.call(this);
    this.img=[
        ["img/pictures/","SYSTEN_DB"],
        ["img/pictures/","SYSTEN_LANGUAGE_left"],
        ["img/pictures/","SYSTEN_LANGUAGE_right"],
        ["img/pictures/","button_back_white"],
    ]
    this.load=0
    this._bit=[]
    for(let i=0;i<this.img.length;i++) this.loadBit(i,this.img)
};
Scene_Options.prototype.loadBit = function (key,val) {
    this._bit[key] =ImageManager.loadBitmap(val[0],val[1],0,true)
    this._bit[key].addLoadListener(function () {this.load++}.bind(this));
};
Scene_Options.prototype.create = function() {
    Scene_MenuBase.prototype.create.call(this);
    if(this.load===this.img.length) this.createOptionsWindow();
    else setTimeout(()=>{this.create()},100)
};
[/pre]
//////////////////////////////////////////////////////////////////////////////////////////////////////
createOptionsWindow 会执行以下方法
创建一个属于window的类  addWindow可以理解成把这个类加入到场景中
为了方便快速出效果 我把this._bit和this 直接传入，运行上没什么问题。
当然我推荐你自己构造更优雅的方式
[pre lang="javascript"]
this._optionsWindow = new Window_Options(this._bit,this);
this.addWindow(this._optionsWindow);
[/pre]
//////////////////////////////////////////////////////////////////////////////////////////////////////
this.opacity=0可以理解成 直接去掉原本的MV样式
这里我把传入的bit[0] 作为background（Sprite）的Bitmap
this.listData是其他要生成的Sprite 定义了使用哪个bit和与生成的位置，name是触发时的标记
[pre lang="javascript"]Window_Options.prototype.initialize = function(bit,orgin) {
    this._bit=bit
    this._orgin=orgin
    Window_Base.prototype.initialize.call(this, 0, 0);
    this.opacity=0
    this._background = new Sprite(bit[0]);
    this.addChildAt(this._background, 1);
    this.x=(Graphics.boxWidth-this.windowWidth())/2
    this.y=(Graphics.boxHeight-this.windowHeight())/2
   
    this.listData=[
        {bit:3,x:20,y:465,name:"back"},
        {bit:1,x:180,y:130,name:"bgmR"},
        {bit:1,x:180,y:215,name:"seR"},
        {bit:1,x:180,y:300,name:"bgsR"},
        {bit:1,x:180,y:385,name:"meR"},
        
        {bit:2,x:340,y:130,name:"bgmL"},
        {bit:2,x:340,y:215,name:"seL"},
        {bit:2,x:340,y:300,name:"bgsL"},
        {bit:2,x:340,y:385,name:"meL"}
    ]
    this.list=[]
    for(let i=0;i<this.listData.length;i++){
        let b=new Sprite(this._bit[this.listData.bit])
        b.x=this.listData.x
        b.y=this.listData.y
        b.name=this.listData.name
        this.list=b
        this.addChild(b);
        
    }
};[/pre]
//////////////////////////////////////////////////////////////////////////////////////////////////////
触发方式判定
[pre lang="javascript"]
Window_Options.prototype.update= function() {
    Window_Base.prototype.update.call(this);
    this.processTouch()
};
Window_Options.prototype.processTouch = function() {
    if (TouchInput.isTriggered()) {
        for (let item of this.list) {
            let x=item.getX()
            let y=item.getY()
            if (TouchInput.x >= x &&
                TouchInput.x <= x + item.width &&
                TouchInput.y >= y &&
                TouchInput.y <= y + item.height) {
                 this.Handler(item.name)
            }
        }
    }

Window_Options.prototype.Handler=function (name){
    let value
    switch (name) {
        case "back":
            this._orgin.popScene()
            SoundManager.playCancel();
            break
    }
}
}[/pre]