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

sumcat

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

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

为此，我查询了很多资料，解决方法似乎是将图片精灵在内容之前加载出来，但是我不知道该如何实现……
求求大佬帮助QAQ
↓这个是代码
[pre lang="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);
};[/pre]

gt50

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

sumcat

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

谢谢！我成功啦。