RMMZ Clearing images, and am I drawing dynamic text correctly?

[florodude]

Hey all, I'm currently working on a Collectibles plugin. The current code is as follows:

/*:
*@target MZ
* @author Crucible Gaming
* @plugindesc Allows for collectibles to be added throughout your game.
*
*@param Collectible Title
*@type text
*@default Collectibles
*@desc This is what your collectibles will be called.  ex: 'Action figures', 'stories', 'collectibles'
*
*
*@help
*This will be added later.
*@param Collectibles
*@type struct<Collectibles>
*/
/*~struct~Collectibles:
 *Make sure to keep the indexes the same.
 * @param Collectible Names
 * @type text[]
 * @help Type the name for each collectible.  Keep an eye on the index, because for the other fields you will use the same indexes as this one.
 * @param Collectible Descriptions
 * @type note[]
 * @param Collectible Images
 * @type text[]
 * @dir img
 * @require 1
 */

//Set initial variables
var params = PluginManager.parameters("Crucible_Collectibles");
var selectIndex = 0;
var CollectiblesListJSON = params["Collectibles"];
var CollectiblesList = JSON.parse(CollectiblesListJSON);
console.log(CollectiblesList);
var nameList = JSON.parse(CollectiblesList["Collectible Names"])
var descList = JSON.parse(CollectiblesList["Collectible Descriptions"])
var picList = JSON.parse(CollectiblesList["Collectible Images"])
ImageManager.loadPicture("Nature_1");

//Key 80 is 'P'
Input.keyMapper["80"] = "customMenu";

_alias_scene_map_update = Scene_Map.prototype.update;
Scene_Map.prototype.update = function() {
    _alias_scene_map_update.call(this);
    if(Input.isTriggered("customMenu")) SceneManager.push(Scene_CustomMenu);
};


function Scene_CustomMenu() {
    this.initialize.apply(this, arguments);
}

Scene_CustomMenu.prototype = Object.create(Scene_MenuBase.prototype);
Scene_CustomMenu.prototype.constructor = Scene_CustomMenu;

Scene_CustomMenu.prototype.initialize = function() {
    //ImageManager.loadFace("Actor3");
    //ImageManager.loadCharacter("People1")
    Scene_Base.prototype.initialize.call(this);
};

Scene_CustomMenu.prototype.create = function() {

    //Scene for Data display
    Scene_MenuBase.prototype.create.call(this);
    this._customWindow = new Window_Custom(Graphics.boxWidth/3, Graphics.boxHeight/10,(Graphics.boxWidth / 3)*2,(Graphics.boxHeight/10)*9)
    this.addWindow(this._customWindow);
    this._collectiblesTitle = new Window_CollectiblesTitle(0, 0,Graphics.boxWidth,Graphics.boxHeight/10)
    this.addWindow(this._collectiblesTitle);

    //Scene for choosing a collectible
    this._customSelectableWindow = new Window_CustomSelectable(0,Graphics.boxHeight/10,Graphics.boxWidth/3,(Graphics.boxHeight/10)*9)
    this._customSelectableWindow.select(0);
    this._customSelectableWindow.activate();
    //this._customSelectableWindow.setHandler("ok", this.command1.bind(this));
    this._customSelectableWindow.setHandler("cancel",this.popScene.bind(this));
    this.addWindow (this._customSelectableWindow);
}




Scene_CustomMenu.prototype.start = function() {
    Scene_MenuBase.prototype.start.call(this);
    this._customWindow.drawAllItems();
    this._customSelectableWindow.refresh();


}

Scene_CustomMenu.prototype.update = function() {
    Scene_MenuBase.prototype.update.call(this); // Run those updates
    if(Input.isTriggered("cancel")) SceneManager.pop();
    selectIndex = this._customSelectableWindow.index();
    this._customWindow.destroyContents();
    this._customWindow.createContents();
    this._customWindow.drawAllItems();
}


//Window Custom
function Window_Custom() {
    this.initialize.apply(this, arguments);
}

Window_Custom.prototype = Object.create(Window_Base.prototype);
Window_Custom.prototype.constructor = Window_Custom;

Window_Custom.prototype.initialize = function(x, y, width, height) {
    Window_Base.prototype.initialize.call(this, new Rectangle(x,y,width,height));
    this.drawAllItems();
}

Bitmap.prototype.clear = function() {
    this.clearRect(0, 0, this.width, this.height);
};
//Show names and description, images of items
Window_Custom.prototype.drawAllItems = function() {
    this.drawText(nameList[selectIndex], 0, 20, this.width - this.padding * 2, "center");
    this.drawText(descList[selectIndex], 0, 500, this.width - this.padding * 2, "center");
    if(this._sprite) {
        console.log("removing sprite");
        this._sprite.removeChild();
    }
    this._sprite = new Sprite();
    this._sprite.bitmap = ImageManager.loadPicture(picList[selectIndex]);
    this.addChild(this._sprite);
    return;

}

//Window Collectibles Title
function Window_CollectiblesTitle() {
    this.initialize.apply(this,arguments)
}

Window_CollectiblesTitle.prototype = Object.create(Window_Base.prototype);
Window_CollectiblesTitle.prototype.constructor = Window_Custom;

Window_CollectiblesTitle.prototype.initialize = function(x, y, width, height) {
    Window_Base.prototype.initialize.call(this, new Rectangle(x,y,width,height));
    this.drawAllItems();
}
Window_CollectiblesTitle.prototype.drawAllItems = function() {
    this.drawText(params["Collectible Title"], 0, 0, this.width - this.padding * 2, "center");
}


//Window Custom Selectable
function Window_CustomSelectable () {
    this.initialize.apply (this, arguments);
}

Window_CustomSelectable.prototype = Object.create (Window_Selectable.prototype);
Window_CustomSelectable.prototype.constructor = Window_Selectable;

Window_CustomSelectable.prototype.initialize = function (x, y, width, height) {
    Window_Selectable.prototype.initialize.call(this,new Rectangle(x, y, width, height));
    this.refresh();
    //this.hide();
}




Window_CustomSelectable.prototype.maxItems = function () {
    return nameList.length;
}

Window_CustomSelectable.prototype.maxPageRows = function () {
    return 2;
}

Window_CustomSelectable.prototype.maxPageItems = function () {
    return this.maxPageRows() * this.maxCols();
}

Window_CustomSelectable.prototype.drawItem = function(index) {
    console.log("Item being drawn");
    var itemRect = this.itemRect(index);
    this.drawText(nameList[index], itemRect.x + 5, itemRect.y, itemRect.width / 2, itemRect.height / 2, 'center');
};

My problem lies in the "Window_Custom.prototype.drawAllItems = function()" section. I just cannot figure out how to clear images. Right now, the images are displaying correctly, however they just overwrite each other when i press the up and down arrows. Furthermore, I think the text may be drawing every single frame according to my console log...Any help on either of these issues would be greatly appreciated.

 

[Ahuramazda]

Try adding this to the section in question and see how it effects it?

Window_Custom.prototype.drawAllItems = function() {
    this.contents.clear() // Edit: Added
    this.drawText(nameList[selectIndex], 0, 20, this.width - this.padding * 2, "center");
    this.drawText(descList[selectIndex], 0, 500, this.width - this.padding * 2, "center");
    if(this._sprite) {
        console.log("removing sprite");
        this._sprite.removeChild();
    }
    this._sprite = new Sprite();
    this._sprite.bitmap = ImageManager.loadPicture(picList[selectIndex]);
    this.addChild(this._sprite);
    return;
}

 

[florodude]

Hey, thanks for the reply. I tried it. Nothing changes, the pictures still lay on top of one another.

 

[caethyril]

I noticed a few things, haven't tested anything out though...

1. The image is being drawn as a sprite added to the window, rather than blitted onto the window's content canvas like the default menus. Try replacing this:
   

   this._sprite.removeChild();

   ...with this:
   

   this.removeChild(this._sprite);

   
   
2. The text is redrawing every frame because the scene's update routine runs every frame, and look at what you have in there:
   

   Scene_CustomMenu.prototype.update = function() {
       Scene_MenuBase.prototype.update.call(this); // Run those updates
       if(Input.isTriggered("cancel")) SceneManager.pop();
       selectIndex = this._customSelectableWindow.index();
       this._customWindow.destroyContents();
       this._customWindow.createContents();
       this._customWindow.drawAllItems();
   }

   Try removing, or commenting out, the last three lines. The Scene_MenuBase.prototype.update call should invoke the updateChildren method of Scene_Base, which (as the name suggests) invokes the update routines of all child objects, including windows (and those tend to work much more efficiently than redrawing every frame).
   
   
3. You seem to have declared your custom window's constructor as Window_Selectable, which means you're effectively overriding the existing selectable window. Change this line:
   

   Window_CustomSelectable.prototype.constructor = Window_Selectable;

   ...to this:
   

   Window_CustomSelectable.prototype.constructor = Window_CustomSelectable;

   The constructor is used with the new keyword to spawn a new instance of a prototype, e.g. new Constructor_Name(). It needs to be defined like that because otherwise the prototype would inherit its parent's constructor (Window_Selectable in this case).