Drawing and manipulating images inside windows without redraw?

[SrOscuro]

Hello, i am trying to show a window with a picture inside, and manipulate that picture each x frames.

Looking on forums found this Window_Base.drawPicture() method:

Window_Base.prototype.drawPicture = function(pictureName, x, y) {
    var bitmap = ImageManager.loadPicture(pictureName);
    var pw = bitmap.width;
    var ph = bitmap.height;
    var sx = 0;
    var sy = 0;
    this.contents.blt(bitmap, sx, sy, pw, ph, x, y);
};

On the examples i found, drawPicture is called inside window.update(), something like this:

My_Window.prototype.update = function() {
    this.contents.clear();
    this.drawPicture("logo",100,100);
    Window_Base.prototype.update.call(this);
}

That works, but, everyting on the window is repainted each time, that seems to cause fps loss
when painting a lot of stuff inside the window. I am ussing lot of images to simulate screen flickering
and other effects.


I tried to draw everyting on Window_Base.initialize(), but the drawPicture doesnt work
inside initialize(), no error but the image doesnt appear like texts or icons:

My_Window.prototype.initialize= function(x,y){
    Window_Base.prototype.initialize.call(this,x,y,this.getWidth(),this.getHeight())
    this.drawIcon(1,100,100);    // WORKS
    this.drawText("hola",280,240,900,'left'); // WORKS
    this.drawPicture("logo",100,100);  // DONT WORK, image not appearing :_ (
}

I am trying to draw a picture (or text, or icon) on initialize() and manupulate the
images/texts/icons on the update() method only when needed to avoid repainting everytime:


Something like this:

My_Window.prototype.initialize = function() {
    this.drawPicture('logo.png',100,100);
    this.drawPicture('other_image.png',100,100);
    Window_Base.prototype.initialize.call(this,x,y,this.getWidth(),this.getHeight())
}


My_Window.prototype.update= function(x,y){


    if( SOME_CONDITION_HERE ){
        this.pictures.other_image.x = 500;
        this.pictures.logo.x = 500;
    }else{
        this.pictures.other_image.x = 200;
        this.pictures.logo.x = 200;
    }

    Window_Base.prototype.update.call(this,x,y,this.getWidth(),this.getHeight())   

}

My questions are:

- Why drawPicture is not working in initialize() but its working on update() ?

- How can i reference the texts/icons/images created on initialize() inside
update() ?

Any help or a link to documentation or a simple plugin that does that will be aprecieted, thanks.


Full source code i am using:

/*:
 *
 * @plugindesc TEST PLUGIN
 *
 * @author Me
 *
 */


    Window_Base.prototype.drawPicture = function(pictureName, x, y) {
        var bitmap = ImageManager.loadPicture(pictureName);
        var pw = bitmap.width;
        var ph = bitmap.height;
        var sx = 0;
        var sy = 0;
        this.contents.blt(bitmap, sx, sy, pw, ph, x, y);
    };


(function() {
    // COMMANDS
    var _Game_Interpreter_pluginCommand = Game_Interpreter.prototype.pluginCommand;
    Game_Interpreter.prototype.pluginCommand = function(command, args) {

        _Game_Interpreter_pluginCommand.call(this, command, args);

        if( command == "CHARACTER_SHEET_3" ){

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

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

            My_Window.prototype.initialize= function(x,y){
                Window_Base.prototype.initialize.call(this,x,y,this.getWidth(),this.getHeight())
                this.drawIcon(1,100,100);
                this.drawText("hola",280,240,900,'left');
                this.drawPicture("logo",100,100);
            }

            My_Window.prototype.getWidth = function(){
                return Graphics.width;
            }
            My_Window.prototype.getHeight = function(){
                return Graphics.height;
            }

            My_Window.prototype.update = function() {
                Window_Base.prototype.update.call(this);
                //this.drawPicture("logo",100,100);
            }

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

            Scene_CharacterSheet.prototype = Object.create(Scene_MenuBase.prototype);
            Scene_CharacterSheet.prototype.constructor = Scene_CharacterSheet;
            Scene_CharacterSheet.prototype.prepare = function(ai_id) {
                this.scene_id = ai_id;
            };


            Scene_CharacterSheet.prototype.initialize = function() {
                Scene_MenuBase.prototype.initialize.call(this);
            };

            Scene_CharacterSheet.prototype.start = function() {
                Scene_MenuBase.prototype.start.call(this);
            }


            Scene_CharacterSheet.prototype.create = function() {
                Scene_MenuBase.prototype.create.call(this);
                var v = new My_Window;
                this.addWindow(v);
            };

            Scene_CharacterSheet.prototype.update = function() {
                Scene_MenuBase.prototype.update.call(this);
            };

            Scene_CharacterSheet.prototype.terminate = function() {
                Scene_MenuBase.prototype.terminate.call(this);
            };

            SceneManager.push(Scene_CharacterSheet);


        }
    }

    console.log("FIN");

})();