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

じ☆ve冰风

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

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

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

1. //这个窗口构造，设置了“属性”、“武器”、“装备”、"能力"一共四个选项
3. //继承窗口
4. function Window_OriginBase() {
5.     this.initialize(...arguments);
6. }
8. Window_OriginBase.prototype = Object.create(Window_Command.prototype);
9. Window_OriginBase.prototype.constructor = Window_OriginBase;
12. //设置透明度和边框大小
13. Window_OriginBase.prototype.initialize = function(rect) {
14.     Window_Command.prototype.initialize.call(this,rect);
15.     this.opacity = 0;
16.     this.padding = 0;
17. }
19. //设置选项最大列数
20. Window_OriginBase.prototype.maxCols = function() {
21.     return 4;
22. };
24. //设置选项
25. Window_OriginBase.prototype.makeCommandList = function() {
26.     if (this.needsCommand("attr")) {
27.         this.addCommand("属性", "attr");
28.     }
29.     if (this.needsCommand("weapon")) {
30.         this.addCommand("武器", "weapon");
31.     }
32.     if (this.needsCommand("equip")) {
33.         this.addCommand("装备", "equip");
34.     }
35.     if (this.needsCommand("ability")) {
36.         this.addCommand("能力", "ability");
37.     }
38. };
40. //参考游戏原来的库摘抄的，作用好像是判断在原本游戏里有没有这个选项？
41. Window_OriginBase.prototype.needsCommand = function(name) {
42.     const table = ["attr", "weapon", "equip", "ability"];
43.     const index = table.indexOf(name);
44.     if (index >= 0) {
45.         return $dataSystem.itemCategories[index];
46.     }
47.     return true;
48. };
53. //对应的场景
54. function Scene_Origin() {
55.     this.initialize(...arguments);
56. }
58. //基本
59. Scene_Origin.prototype = Object.create(Scene_MenuBase.prototype);
60. Scene_Origin.prototype.constructor = Scene_Origin;
62. Scene_Origin.prototype.initialize = function() {
63.     Scene_MenuBase.prototype.initialize.call(this);
64.     ImageManager.loadBitmap("img/pictures/","SaveBg04");
65. };
67. //创建场景
68. Scene_Origin.prototype.create = function() {
69.     Scene_MenuBase.prototype.create.call(this);
70.     this.createCommandWindow();
71. };
75. Scene_Origin.prototype.createCommandWindow = function() {
76.     const rect = this.commandWindowRect();
77.     this.win = new Window_OriginBase(rect);
78.     //通过this.drawBg(rect)给窗口添加一个精灵，能够显示图片。
79.     this.drawBg(rect);
80.     //返回按钮
81.     this.win.setHandler("cancel", this.popScene.bind(this));
82.     //添加
83.     this.addWindow(this.win);
85. };
87. //尺寸
88. Scene_Origin.prototype.commandWindowRect = function() {
89.     const ww = Graphics.width*0.45;
90.     const wh = Graphics.height*0.1;
91.     const wx = Graphics.width*0.5;
92.     const wy = Graphics.height*0.8;
93.     return new Rectangle(wx, wy, ww, wh);
94. };
96. //设置图片的函数
97. Scene_Origin.prototype.drawBg = function(rect) {
98.     //新建精灵
99.     const sprite_origin = new Sprite();
100.     sprite_origin.bitmap = ImageManager.loadBitmap("img/pictures/","SaveBg04");
101.     //通过回调确保图片顺利加载
102.     sprite_origin.bitmap.addLoadListener(function(){
103.         //自适应宽高
104.         sprite_origin.scale.x = rect.width/sprite_origin.bitmap.width;
105.         sprite_origin.scale.y = rect.height/sprite_origin.bitmap.height;
106.     }.bind(this));
107.     //添加
108.     this.win.addChild(sprite_origin);
109. };

复制代码

             本帖来自P1论坛作者sumcat，因Project1站服务器在国外有时候访问缓慢不方便作者交流学习，经联系P1站长fux2同意署名转载一起分享游戏制作经验，共同为国内独立游戏作者共同创造良好交流环境，原文地址：https://rpg.blue/forum.php?mod=viewthread&tid=487878  若有侵权，发帖作者可联系底部站长QQ在线咨询功能删除，谢谢。