Problem with Bitmaps AddChild();

[bitheart]

I have encountered a problem when drawing different images depending on the index of Window_title_command. Each time i press the arrow_down button a new instance of a bitmap gets drawn on top of an existing one. This can be really annoying when using transparent images. is there a way to swap the two bitmaps or remove a bitmap from the scene (thinking of something like removeChild();) ??

 

[LTN Games]

There is a removeChild(); method and it removes the child sprite from the children array. There may be a better way to accomplish what you're trying though, ideally you can create all images when the scene starts this way you're not creating a bitmap everytime you press the arrow down key. Maybe if you explain a bit more and show some code I can help some more.

 

[bitheart]

Thanks for your answer.
Well here is the code

//=============================================================================
// Shiro Engine Plugins - Custom Title Menu
//[SE] Custom Title Menu.js
//=============================================================================
//================================== How To Use ===========================================
/*

This plugin requires [SE] Core to work properly, also it  requires a Folder called ShiroEngine
located at "Project-name"/js/ShiroEngine. Inside this folder place the appropriate assets inside an
'assets' Folder. // Make sure all your image files are .png files because it is the only image
format RPG Maker MV Supports.

This plugin allows you to customize your Title Screen by using an Image as Game Title as well as
to customize your Title Menu by using different images:

--------------------------------- How To use Title images --------------------------------------

Place your Title image inside the 'assets' folder and edit the parameters of this plugin as needed
The size of your image can be looked up by right clicking -> properties -> details

-------------------------------- How To use Menu images -----------------------------------------
Create an image for each state of the Menu. Save them under the same filename but with other indexes like:

Menu01 , Menu02 , Menu03

be sure to follow this pattern for the script to work properly

==========================================================================================

Special thanks to:
Soulpour777 - for his great MV scripting Tutorials

==================================== Changelog ============================================
Version 0.4 pre-release
      Added Core functionality, fixed bug with transparent titles not showing up properly
*/
//=========================================================================================

/*:
* @plugindesc v1.0 Custom Title Menu Plugin (requires [SE] Core).
* Changes some of the Core components of the Title Menu
* @author ShiroRaven -KagiGames-
*
* @param title image position
* @desc size of the Image to use as Title "example: 700x450"
* @default 700x450
*
* @param menu image position
* @desc position of the Image to use as Menu "example: 700x450 [x]x[y]"
* @default 400x250
*
*/
Imported.CustomTitleMenu = true;
ShiroEngine.CustomTitleMenu = ShiroEngine.CustomTitleMenu || {};
ShiroEngine.CustomTitleMenu.params = PluginManager.parameters("[SE] Custom Title Menu");
ShiroEngine.titleimage_position = ShiroEngine.CustomTitleMenu.params["title image position"].split('x');
ShiroEngine.menuimage_position = ShiroEngine.CustomTitleMenu.params["menu image position"].split('x');


(function() {
//Removing Existing Menu and Title------------------------------------
ShiroEngine.Window_TitleCommand =  Window_TitleCommand.prototype.initialize;
Window_TitleCommand.prototype.initialize = function() {
   ShiroEngine.Window_TitleCommand.call(this);
   this.x = -20000;
   this.y = -20000;
}
ShiroEngine.ST_createForeground = Scene_Title.prototype.createForeground;
Scene_Title.prototype.createForeground = function() {
     this._gameTitleSprite = new Sprite(new Bitmap(Graphics.width, Graphics.height));
     this.addChild(this._gameTitleSprite);
     if ($dataSystem.optDrawTitle) {
         return 0;
     }
};
//--------------------------------Creating new Menu with images-------------------------------
Scene_Title.prototype.createMenu = function() {
  this.menuimage = new Sprite();
  this.menuimage.move(ShiroEngine.menuimage_position[0] || 0,ShiroEngine.menuimage_position[1] || 0,Graphics.width,Graphics.height);
  if(this._commandWindow._index=== 0){this.menuimage.bitmap = ShiroEngine.load_asset('menu01');}
  if(this._commandWindow._index=== 1){this.menuimage.bitmap = ImageManager.loadShiroEngine('menu02');}
  if(this._commandWindow._index=== 2){this.menuimage.bitmap = ImageManager.loadShiroEngine('menu03');}
  this.addChild(this.menuimage);
}
//----------------------------------Replacing Title with Titleimage-----------------------------
Scene_Title.prototype.createTitleImage = function() {
  this.titleimage = new Sprite();
  this.titleimage.move(ShiroEngine.titleimage_position[0] || 0,ShiroEngine.titleimage_position[1] || 0,Graphics.width,Graphics.height);
  this.titleimage.bitmap = ImageManager.loadShiroEngine('title');
  this.addChild(this.titleimage);
}
//------------------------------------update functions-------------------------------------------
ShiroEngine.ST_create = Scene_Title.prototype.create;
Scene_Title.prototype.create = function() {
  ShiroEngine.ST_create.call(this);
  this.createTitleImage();
};
ShiroEngine.ST_update = Scene_Title.prototype.update;
Scene_Title.prototype.update = function() {
  ShiroEngine.ST_update.call(this);
  this.createMenu();
}
//------------------------------------------------------------------------------------------------
})();

I just started writing plugins so i might have made some mistakes... but the MV source is not explained very well
[doublepost=1468870080,1468869699][/doublepost]Its a little bit hard to understand but in a nutshell. Im trying to replace the standard Title and Command menu with images, the title image isnt changing, the menu image though has an image for each state of the command menu which are loaded depending on the index of the menu
[doublepost=1468870695][/doublepost]

//=============================================================================
// Shiro Engine Plugins - Core
//[SE] Core.js
//=============================================================================

/*:
* @plugindesc v1.0 Core of the Shiro Engine plugin suite.
* Changes some of the Core components of the Standard RPGMaker MV Engine
* @author ShiroRaven -KagiGames-
*
* @param ---Resolution and Scaling---
* @default
*
* @param asset path
* @default js/ShiroEngine/assets/
* @desc Path to look for assets required in other ShiroEngine plugins
*
* @param fullscreen
* @default true
* @desc Run  the Game in Fullscreen Mode?
*  | YES = true  | NO = false |
*/

var ShiroEngine = ShiroEngine || {};
var Imported = Imported || {};
Imported.ShiroEngine = true;
ShiroEngine.Core = ShiroEngine.Core || {};
// --- Parameter Declaration ---------------------------------------------------------------------------------
ShiroEngine.params = PluginManager.parameters("[SE] Core");
ShiroEngine.Core.assetPath = ShiroEngine.params['asset path'] || "js/ShiroEngine/assets/";
ShiroEngine._runfullscreen = Boolean(ShiroEngine.params['fullscreen']) || true;
//------------------------------------------------------------------------------------------------------------
// BITMAP --------------------------------------------
ShiroEngine.load_asset = function(filename, hue){
     return ImageManager.loadBitmap(ShiroEngine.Core.assetPath, filename, hue, true);
}

you need this as well because of the objects

 

[LTN Games]

Okay, so your createMenu() function is inside the update, which means every time the command changes it will add a new image and not remove the old one. Alternatively, you could create all images at once either with a for loop or individually, then you could a separate function that checks which command is which in the update.

Individually this is how you would create the button. You don't have to use Sprite_Button(), you can use Sprite() but sprite button has it's own cool features.

    Scene_Title.prototype.createNewGameButton = function() {
      this._spriteNewGame   = new Sprite_Button();
      this._spriteNewGame.bitmap = ImageManager.loadSystem('newgameButton');
      this._spriteNewGame.x = 40;
      this._spriteNewGame.y = Graphics.height / 2;
      this.addChild(this._spriteNewGame);
    };

Then alias the scene title function create, and add your button there. This will place the button on the scene. You can do this for each button you want to make.

var aliasSceneTitleCreate =  Scene_Title.prototype.create;
  Scene_Title.prototype.create = function() {
    aliasSceneTitleCreate.call(this);
    this.createNewGameButton();
  };

Now obviously you'll want to let the player know what button is selected, so assuming you have an indicator sprite or a whole new image to replace the current button image. You would create a separate function to detect any changes and which command is selected. You would want to do this for each command. Then you simply place this function in Scene_Title update function instead of your createButtons() method. This method will change the image on the spot rather than create a new image over top of the previous one.

  Scene_Title.prototype.spriteButtonUpdate = function() {
      // Taken from your script, assuming ShiroEngine.load_asset is tapping into ImageManager
       if(this._commandWindow._index=== 0){this._spriteNewGame.bitmap = ShiroEngine.load_asset('menu01');}
    
      //Or, tap directly into ImageManager
    
      if(this._commandWindow._index=== 0){this._spriteNewGame.bitmap = ImageManager.loadSystem('selectedButton')}
  };

If you go the for loop way you would simply make one method to create all buttons by getting iterating the amount of commands available, then create a new array and push each button into the array for reference. I won't show examples of that, I figure this is enough to help you out some more. If you need more help or better explanation let me know.

Edit: Sorry if I have any mistakes, I'm on an older computer right now until I can get mine repaired and the keyboard sucks on this one, and I'm missing half of the programs I usualy use.

 

[bitheart]

Okay, so your createMenu() function is inside the update, which means every time the command changes it will add a new image and not remove the old one. Alternatively, you could create all images at once either with a for loop or individually, then you could a separate function that checks which command is which in the update.

Individually this is how you would create the button. You don't have to use Sprite_Button(), you can use Sprite() but sprite button has it's own cool features.

    Scene_Title.prototype.createNewGameButton = function() {
      this._spriteNewGame   = new Sprite_Button();
      this._spriteNewGame.bitmap = ImageManager.loadSystem('newgameButton');
      this._spriteNewGame.x = 40;
      this._spriteNewGame.y = Graphics.height / 2;
      this.addChild(this._spriteNewGame);
    };

Then alias the scene title function create, and add your button there. This will place the button on the scene. You can do this for each button you want to make.

var aliasSceneTitleCreate =  Scene_Title.prototype.create;
  Scene_Title.prototype.create = function() {
    aliasSceneTitleCreate.call(this);
    this.createNewGameButton();
  };

Now obviously you'll want to let the player know what button is selected, so assuming you have an indicator sprite or a whole new image to replace the current button image. You would create a separate function to detect any changes and which command is selected. You would want to do this for each command. Then you simply place this function in Scene_Title update function instead of your createButtons() method. This method will change the image on the spot rather than create a new image over top of the previous one.

  Scene_Title.prototype.spriteButtonUpdate = function() {
      // Taken from your script, assuming ShiroEngine.load_asset is tapping into ImageManager
       if(this._commandWindow._index=== 0){this._spriteNewGame.bitmap = ShiroEngine.load_asset('menu01');}
   
      //Or, tap directly into ImageManager
   
      if(this._commandWindow._index=== 0){this._spriteNewGame.bitmap = ImageManager.loadSystem('selectedButton')}
  };

If you go the for loop way you would simply make one method to create all buttons by getting iterating the amount of commands available, then create a new array and push each button into the array for reference. I won't show examples of that, I figure this is enough to help you out some more. If you need more help or better explanation let me know.

Edit: Sorry if I have any mistakes, I'm on an older computer right now until I can get mine repaired and the keyboard sucks on this one, and I'm missing half of the programs I usualy use.

Wow. Thank you this was exactly what i needed. I am very thankful that you took your time to read trough this mess ive written :)