How to load an image?

[Tsukihime]

Experimenting with image loading.

var pic = ImageManager.loadPicture("test")console.log(pic.width)Which then prints out 0 for the width.It looks like the image hasn't been loaded.

My goal is to go through the data files and load up images, and performing image operations before exporting them to disk.

I suspect this is because the images are being loaded asynchronously, but how would I wait until it's done loading?

 

[Hudell]

ImageManager.loadNormalBitmap = function(path, hue) {


var key = path + ':' + hue;


if (!this._cache[key]) {


var bitmap = Bitmap.load(path);


bitmap.addLoadListener(function() {


bitmap.rotateHue(hue);


});


this._cache[key] = bitmap;


}


return this._cache[key];


};

That bitmap.addLoadListener is assigning a function to be called once the bitmap is fully loaded.

 

[Tsukihime]

Hmm, in my case, I want to be able to tell my code to literally wait while the image is being loaded. Otherwise, it won't be able to block transfer pixels in the proper order.


Unless there's a better way to do this.

 

[Iavra]

Take a look at Scene_Boot, in particular "create" and "isReady". Basically, you can start loading an image in Scene_Boot.create() and set a flag once it's loaded (via LoadListener). As long as that flag isn't set, Scene_Boot.isReady() returns false and the user sees "Is Loading".


This obviously only works for images you know beforehand, if this should work on the fly, you need to either wait until the image is loaded or work with synchronous Ajax (don't do this).

 

[Tsukihime]

Take a look at Scene_Boot, in particular "create" and "isReady". Basically, you can start loading an image in Scene_Boot.create() and set a flag once it's loaded (via LoadListener). As long as that flag isn't set, Scene_Boot.isReady() returns false and the user sees "Is Loading".

This obviously only works for images you know beforehand, if this should work on the fly, you need to either wait until the image is loaded or work with synchronous Ajax (don't do this).

Do you have any suggestions on "waiting until image is loaded" for assets that are loaded on the fly?

I have a set of problems that require all resources to have been loaded before I continue operating on them.

Here's my algorithm

for each picture { pic = load picture pic.add listener ( ? )}Which would load each pic, but then it probably isn't right to have a listener after each individual pic loads.It should probably look like this instead

my_work = { for each picture { pic = load picture }}my_work.addLoadListener( ?)So basically once I have somehow figured out all pictures are loaded, then I could proceed with the work I want to do.

...but that seems overly complicated as well.

 

[Hudell]

If you want to wait for all pictures to be loaded, you can just check inside the callback if they were all loaded already, or do nothing if there's one missing. Eventually the callback will be called with all images loaded.

 

[Tsukihime]

If you want to wait for all pictures to be loaded, you can just check inside the callback if they were all loaded already, or do nothing if there's one missing. Eventually the callback will be called with all images loaded.

That makes sense.

Eventually one of them will work.

Here's my revised approach

required_pics = []for each picture {  pic = load picture  add pic to required_pics    pic.addLoadListener(     if all required pics loaded {         ....     }  )}

Though, having to check if they're all loaded would require a loop everytime...

 

[Hudell]

You can also increase a "loaded counter" every time the callback is called, instead of checking if each image is loaded.

 

[Tsukihime]

You can also increase a "loaded counter" every time the callback is called, instead of checking if each image is loaded.

I like the idea.

Something like this?

loaded = 0required_pics = []for each picture {  pic = load picture  add pic to required_pics    pic.addLoadListener(     loaded += 1     if loaded === required_pics.length         ....     }  )}

 

[Hudell]

Yup. I don't know if that would have an issue in case something isn't properly loaded or if it would be called regardless, but that's the idea I had.

 

[doranikofu]

I got similar problem loading custom images for item window. I had to exit to last level and enter again to see the pictures.... wish there is some fundamental updates for this issue...

 

[doranikofu]

I got similar problem loading custom images for item window. I had to exit to last level and enter again to see the pictures.... wish there is some fundamental updates for this issue...

btw I got it solved after asking for help from other people, just FYI if anyone needs:

instead of simply using blt, using this instead:

    bitmap.addLoadListener(function() {

    this.contents.blt(bitmap, sx, sy, pw, ph, 40, 0, 144, 144);    

      }.bind(this));

 

[Jeremy Cannady]

btw I got it solved after asking for help from other people, just FYI if anyone needs:

instead of simply using blt, using this instead:

    bitmap.addLoadListener(function() {

    this.contents.blt(bitmap, sx, sy, pw, ph, 40, 0, 144, 144);    

      }.bind(this));

Much appreciated. 

 

[ArkDG]

btw I got it solved after asking for help from other people, just FYI if anyone needs:

instead of simply using blt, using this instead:

    bitmap.addLoadListener(function() {

    this.contents.blt(bitmap, sx, sy, pw, ph, 40, 0, 144, 144);    

      }.bind(this));

@doranikofu

Hey, thank you! I'm in need of this.

Yet, I don't know where to place these lines. In my code I did it in a way that I call the scene again and then pop it out. I wish I could make it the right way. Looking at  my code, what do you think I should do?

//////////////////////////THE IMAGE I WANT////////////////////////////////Window_SavefileStatus.prototype.drawScreenshot = function(info, x, y) {    if (info && info.characters) {        var bitmap = ImageManager.loadScreenShots(info.screen);                if (info.screen == undefined || info.screen == null) {                    } else {                 this.contents.blt(bitmap, 0, 0, bitmap._canvas.width, bitmap._canvas.height, Graphics.boxWidth - 299, 5, 256, 143);        }                }    };            ////OTHER INFOS AND WHERE I WANT////          ImageManager.loadScreenShots = function(filename, hue) {    return this.loadBitmap('img/Screenshots/', filename, hue, true);   };            Window_SavefileStatus.prototype.drawContents = function(info, rect, valid) {        var bottom = rect.y + rect.height;        if (valid) {            this.drawPartyCharacters(info, rect.x + 25, 140);            if (Utils.isNwjs()) {            this.drawScreenshot(info, Graphics.boxWidth - 299, 5);            } else {             // var bitmap = ImageManager.loadScreenShots(info.map_id);             // this.contents.blt(bitmap, 0, 0, bitmap._canvas.width, bitmap._canvas.height, Graphics.boxWidth - 299, 5, 256, 143);            }        }                        var playtimeY = bottom - this.lineHeight();        this.drawText('Localização:' + ' ' + info.location, -6, 157, rect.width, 'right');        this.drawText('Tempo:' + ' ' + info.playtime, 6, 35, rect.width, 'left');        this.drawText('Grana:' + ' ' + info.gold, 6, 157, rect.width, 'left');        OLDscreen = info.screen; ///AQUI        protectchecking = info.protect;                    };

 

[doranikofu]

@doranikofu

Hey, thank you! I'm in need of this.

Yet, I don't know where to place these lines. In my code I did it in a way that I call the scene again and then pop it out. I wish I could make it the right way. Looking at  my code, what do you think I should do?

//////////////////////////THE IMAGE I WANT////////////////////////////////Window_SavefileStatus.prototype.drawScreenshot = function(info, x, y) { if (info && info.characters) { var bitmap = ImageManager.loadScreenShots(info.screen); if (info.screen == undefined || info.screen == null) { } else { this.contents.blt(bitmap, 0, 0, bitmap._canvas.width, bitmap._canvas.height, Graphics.boxWidth - 299, 5, 256, 143); } } }; ////OTHER INFOS AND WHERE I WANT//// ImageManager.loadScreenShots = function(filename, hue) { return this.loadBitmap('img/Screenshots/', filename, hue, true); }; Window_SavefileStatus.prototype.drawContents = function(info, rect, valid) { var bottom = rect.y + rect.height; if (valid) { this.drawPartyCharacters(info, rect.x + 25, 140); if (Utils.isNwjs()) { this.drawScreenshot(info, Graphics.boxWidth - 299, 5); } else { // var bitmap = ImageManager.loadScreenShots(info.map_id); // this.contents.blt(bitmap, 0, 0, bitmap._canvas.width, bitmap._canvas.height, Graphics.boxWidth - 299, 5, 256, 143); } } var playtimeY = bottom - this.lineHeight(); this.drawText('Localização:' + ' ' + info.location, -6, 157, rect.width, 'right'); this.drawText('Tempo:' + ' ' + info.playtime, 6, 35, rect.width, 'left'); this.drawText('Grana:' + ' ' + info.gold, 6, 157, rect.width, 'left'); OLDscreen = info.screen; ///AQUI protectchecking = info.protect; };simply add this before your blt function:

    bitmap.addLoadListener(function() {

and add this after your blt:

      }.bind(this));

 

[ArkDG]

Yes! It worked. haha

Thank you very much, my friend. ^^