Project1

标题: [插件]菜单UI的自适应图片精灵,该如何解决内容覆盖问题? [打印本页]

作者: sumcat    时间: 2021-11-26 02:08
标题: [插件]菜单UI的自适应图片精灵,该如何解决内容覆盖问题?
我试图实现一个插件,其作用是新建一个窗口,并为这个窗口创建选项和自适应图片,即为其设置背景时,能够自动将背景和窗口的大小适应。
为此,我向这个窗口添加了一个图片精灵,其能自动缩放以适应窗口的尺寸,但是,当我实际运行时,她却覆盖了原本窗口的所有内容。

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

为此,我查询了很多资料,解决方法似乎是将图片精灵在内容之前加载出来,但是我不知道该如何实现……
求求大佬帮助QAQ
↓这个是代码
RUBY 代码复制
  1. //这个窗口构造,设置了“属性”、“武器”、“装备”、"能力"一共四个选项
  2.  
  3. //继承窗口
  4. function Window_OriginBase() {
  5.     this.initialize(...arguments);
  6. }
  7.  
  8. Window_OriginBase.prototype = Object.create(Window_Command.prototype);
  9. Window_OriginBase.prototype.constructor = Window_OriginBase;
  10.  
  11.  
  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. }
  18.  
  19. //设置选项最大列数
  20. Window_OriginBase.prototype.maxCols = function() {
  21.     return 4;
  22. };
  23.  
  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. };
  39.  
  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. };
  49.  
  50.  
  51.  
  52.  
  53. //对应的场景
  54. function Scene_Origin() {
  55.     this.initialize(...arguments);
  56. }
  57.  
  58. //基本
  59. Scene_Origin.prototype = Object.create(Scene_MenuBase.prototype);
  60. Scene_Origin.prototype.constructor = Scene_Origin;
  61.  
  62. Scene_Origin.prototype.initialize = function() {
  63.     Scene_MenuBase.prototype.initialize.call(this);
  64.     ImageManager.loadBitmap("img/pictures/","SaveBg04");
  65. };
  66.  
  67. //创建场景
  68. Scene_Origin.prototype.create = function() {
  69.     Scene_MenuBase.prototype.create.call(this);
  70.     this.createCommandWindow();
  71. };
  72.  
  73.  
  74.  
  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);
  84.  
  85. };
  86.  
  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. };
  95.  
  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. };

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

谢谢!我成功啦。




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