[插件]菜单UI的自适应图片精灵，该如何解决内容覆盖问题?

sumcat

我试图实现一个插件，其作用是新建一个窗口，并为这个窗口创建选项和自适应图片，即为其设置背景时，能够自动将背景和窗口的大小适应。
为此，我向这个窗口添加了一个图片精灵，其能自动缩放以适应窗口的尺寸，但是，当我实际运行时，她却覆盖了原本窗口的所有内容。

↓比如，我只能看到一张自适应好了的图片，却不能看到任何选项。

为此，我查询了很多资料，解决方法似乎是将图片精灵在内容之前加载出来，但是我不知道该如何实现……
求求大佬帮助QAQ
↓这个是代码

RUBY 代码复制

//这个窗口构造，设置了“属性”、“武器”、“装备”、"能力"一共四个选项
 
//继承窗口
function Window_OriginBase() {
    this.initialize(...arguments);
}
 
Window_OriginBase.prototype = Object.create(Window_Command.prototype);
Window_OriginBase.prototype.constructor = Window_OriginBase;
 
 
//设置透明度和边框大小
Window_OriginBase.prototype.initialize = function(rect) {
    Window_Command.prototype.initialize.call(this,rect);
    this.opacity = 0;
    this.padding = 0;
}
 
//设置选项最大列数
Window_OriginBase.prototype.maxCols = function() {
    return 4;
};
 
//设置选项
Window_OriginBase.prototype.makeCommandList = function() {
    if (this.needsCommand("attr")) {
        this.addCommand("属性", "attr");
    }
    if (this.needsCommand("weapon")) {
        this.addCommand("武器", "weapon");
    }
    if (this.needsCommand("equip")) {
        this.addCommand("装备", "equip");
    }
    if (this.needsCommand("ability")) {
        this.addCommand("能力", "ability");
    }
};
 
//参考游戏原来的库摘抄的，作用好像是判断在原本游戏里有没有这个选项？
Window_OriginBase.prototype.needsCommand = function(name) {
    const table = ["attr", "weapon", "equip", "ability"];
    const index = table.indexOf(name);
    if (index >= 0) {
        return $dataSystem.itemCategories[index];
    }
    return true;
};
 
 
 
 
//对应的场景
function Scene_Origin() {
    this.initialize(...arguments);
}
 
//基本
Scene_Origin.prototype = Object.create(Scene_MenuBase.prototype);
Scene_Origin.prototype.constructor = Scene_Origin;
 
Scene_Origin.prototype.initialize = function() {
    Scene_MenuBase.prototype.initialize.call(this);
    ImageManager.loadBitmap("img/pictures/","SaveBg04");
};
 
//创建场景
Scene_Origin.prototype.create = function() {
    Scene_MenuBase.prototype.create.call(this);
    this.createCommandWindow();
};
 
 
 
Scene_Origin.prototype.createCommandWindow = function() {
    const rect = this.commandWindowRect();
    this.win = new Window_OriginBase(rect);
    //通过this.drawBg(rect)给窗口添加一个精灵，能够显示图片。
    this.drawBg(rect);
    //返回按钮
    this.win.setHandler("cancel", this.popScene.bind(this));
    //添加
    this.addWindow(this.win);
 
};
 
//尺寸
Scene_Origin.prototype.commandWindowRect = function() {
    const ww = Graphics.width*0.45;
    const wh = Graphics.height*0.1;
    const wx = Graphics.width*0.5;
    const wy = Graphics.height*0.8;
    return new Rectangle(wx, wy, ww, wh);
};
 
//设置图片的函数
Scene_Origin.prototype.drawBg = function(rect) {
    //新建精灵
    const sprite_origin = new Sprite();
    sprite_origin.bitmap = ImageManager.loadBitmap("img/pictures/","SaveBg04");
    //通过回调确保图片顺利加载
    sprite_origin.bitmap.addLoadListener(function(){
        //自适应宽高
        sprite_origin.scale.x = rect.width/sprite_origin.bitmap.width;
        sprite_origin.scale.y = rect.height/sprite_origin.bitmap.height;
    }.bind(this));
    //添加
    this.win.addChild(sprite_origin);
};

//这个窗口构造，设置了“属性”、“武器”、“装备”、"能力"一共四个选项


 


//继承窗口


function Window_OriginBase() {


    this.initialize(...arguments);


}


 


Window_OriginBase.prototype = Object.create(Window_Command.prototype);


Window_OriginBase.prototype.constructor = Window_OriginBase;


 


 


//设置透明度和边框大小


Window_OriginBase.prototype.initialize = function(rect) {


    Window_Command.prototype.initialize.call(this,rect);


    this.opacity = 0;


    this.padding = 0;


}


 


//设置选项最大列数


Window_OriginBase.prototype.maxCols = function() {


    return 4;


};


 


//设置选项


Window_OriginBase.prototype.makeCommandList = function() {


    if (this.needsCommand("attr")) {


        this.addCommand("属性", "attr");


    }


    if (this.needsCommand("weapon")) {


        this.addCommand("武器", "weapon");


    }


    if (this.needsCommand("equip")) {


        this.addCommand("装备", "equip");


    }


    if (this.needsCommand("ability")) {


        this.addCommand("能力", "ability");


    }


};


 


//参考游戏原来的库摘抄的，作用好像是判断在原本游戏里有没有这个选项？


Window_OriginBase.prototype.needsCommand = function(name) {


    const table = ["attr", "weapon", "equip", "ability"];


    const index = table.indexOf(name);


    if (index >= 0) {


        return $dataSystem.itemCategories[index];


    }


    return true;


};


 


 


 


 


//对应的场景


function Scene_Origin() {


    this.initialize(...arguments);


}


 


//基本


Scene_Origin.prototype = Object.create(Scene_MenuBase.prototype);


Scene_Origin.prototype.constructor = Scene_Origin;


 


Scene_Origin.prototype.initialize = function() {


    Scene_MenuBase.prototype.initialize.call(this);


    ImageManager.loadBitmap("img/pictures/","SaveBg04");


};


 


//创建场景


Scene_Origin.prototype.create = function() {


    Scene_MenuBase.prototype.create.call(this);


    this.createCommandWindow();


};


 


 


 


Scene_Origin.prototype.createCommandWindow = function() {


    const rect = this.commandWindowRect();


    this.win = new Window_OriginBase(rect);


    //通过this.drawBg(rect)给窗口添加一个精灵，能够显示图片。


    this.drawBg(rect);


    //返回按钮


    this.win.setHandler("cancel", this.popScene.bind(this));


    //添加


    this.addWindow(this.win);


 


};


 


//尺寸


Scene_Origin.prototype.commandWindowRect = function() {


    const ww = Graphics.width*0.45;


    const wh = Graphics.height*0.1;


    const wx = Graphics.width*0.5;


    const wy = Graphics.height*0.8;


    return new Rectangle(wx, wy, ww, wh);


};


 


//设置图片的函数


Scene_Origin.prototype.drawBg = function(rect) {


    //新建精灵


    const sprite_origin = new Sprite();


    sprite_origin.bitmap = ImageManager.loadBitmap("img/pictures/","SaveBg04");


    //通过回调确保图片顺利加载


    sprite_origin.bitmap.addLoadListener(function(){


        //自适应宽高


        sprite_origin.scale.x = rect.width/sprite_origin.bitmap.width;


        sprite_origin.scale.y = rect.height/sprite_origin.bitmap.height;


    }.bind(this));


    //添加


    this.win.addChild(sprite_origin);


};

sumcat

gt50 发表于 2021-11-26 09:05
你要往窗口的背景层里addChild而不是直接addChild，因为直接这么做的话会导致后来的覆盖原来的 ...

谢谢！我成功啦。

gt50

你要往窗口的背景层里addChild而不是直接addChild，因为直接这么做的话会导致后来的覆盖原来的