Loading bitmap using blt doesn't show until I move

Discussion in 'Javascript/Plugin Support' started by stramin, Aug 19, 2019.

    Tags:
  1. stramin

    stramin Veteran Veteran

    Messages:
    73
    Likes Received:
    28
    First Language:
    spanish
    Primarily Uses:
    N/A
    Hi guys, I am building a Window_Selectable where each item is a picture, but it doesn't show the picture until I scroll the items.

    This is the "relevant" code:

    Code:
        function Window_BestiaryIndex() {
            this.initialize.apply(this, arguments);
        }
    
        Window_BestiaryIndex.prototype = Object.create(Window_Selectable.prototype);
        Window_BestiaryIndex.prototype.constructor = Window_BestiaryIndex;
    
        Window_BestiaryIndex.prototype.drawItem = function(index) {
            var enemy = this._list[index];
            var rect = this.itemRect(index);
            var name;
    
            var bitmap;
            bitmap = ImageManager.loadSvEnemy(enemy.battlerName, enemy.battlerHue);
            _enemySprite = new Sprite();
            _enemySprite.anchor.x = 0;
            _enemySprite.anchor.y = 0;
            _enemySprite.x = rect.x;
            _enemySprite.y = rect.y;
    
            _enemySprite.bitmap = bitmap;
            var bmpW = _enemySprite.bitmap.width;
            var bmpH = _enemySprite.bitmap.height;
            var itmW = this.itemWidth();
            var itmH = this.itemHeight();
            if (_enemySprite.bitmap) {
                var scale = 1;
                if (bmpH > itmH) {
                    scale = itmH / bmpH;
                }
                _enemySprite.scale.x = scale;
                _enemySprite.scale.y = scale;
            }
            var sclW = bitmap.width * scale;
            var sclH = bitmap.height * scale;
    
            this.contents.blt(_enemySprite.bitmap, 0, 0, bitmap.width, bitmap.height, rect.x + (itmW-sclW)/2, rect.y, sclW, sclH);
    
            name = enemy.name;
            this.drawText(name, rect.x, rect.y+80, rect.width);
        };
    
    So, when I open this window on game I don't see any image:
    upload_2019-8-18_20-53-19.png

    But when I scroll down...
    upload_2019-8-18_20-53-44.png

    The pictures appears.

    I noticed I can show them from the begining adding this code:

    Code:
        Window_BestiaryIndex.prototype.update = function() {
            Window_Selectable.prototype.update.call(this);
            this.updateStatus();
            this.drawAllItems();
        };
    
    But as this function runs on every frame, images are drawn infinitely.

    How to do it correctly? or Where is a good place to put this.drawAllItems()?

    Thank you!
     
    #1
  2. Poryg

    Poryg Dark Lord of the Castle of Javascreeps Veteran

    Messages:
    3,922
    Likes Received:
    9,899
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    I talk about it in this tutorial along with a solution. And drawAllItems doesn't need to be in update for it to work.

    When you're drawing sprites, you have to make sure their textures are properly loaded. Otherwise the GPU will just take the empty textures that are introduced during the first draw, since they are the ones in cache.
    So the reason why everything shows after it scrolls down, is simple that reloading and recaching takes action.
     
    #2
  3. stramin

    stramin Veteran Veteran

    Messages:
    73
    Likes Received:
    28
    First Language:
    spanish
    Primarily Uses:
    N/A
    What a great channel, I found a ImageManager.reserveSvEnemy() function to try what I see in the video, but it still doesn't work, this is my attempt:

    Code:
        Window_BestiaryIndex.prototype.drawItem = function(index) {
            var enemy = this._list[index];
            var rect = this.itemRect(index);
            var name;
    
            ImageManager.reserveSvEnemy(enemy.battlerName); // <- new line
    
            var bitmap;
            bitmap = ImageManager.loadSvEnemy(enemy.battlerName, enemy.battlerHue);
            _enemySprite = new Sprite();
            _enemySprite.anchor.x = 0;
            _enemySprite.anchor.y = 0;
            _enemySprite.x = rect.x;
            _enemySprite.y = rect.y;
    
            _enemySprite.bitmap = bitmap;
            var bmpW = _enemySprite.bitmap.width;
            var bmpH = _enemySprite.bitmap.height;
            var itmW = this.itemWidth();
            var itmH = this.itemHeight();
            if (_enemySprite.bitmap) {
                var scale = 1;
                if (bmpH > itmH) {
                    scale = itmH / bmpH;
                }
                _enemySprite.scale.x = scale;
                _enemySprite.scale.y = scale;
            }
            var sclW = bitmap.width * scale;
            var sclH = bitmap.height * scale;
            //this.addChildToBack(_enemySprite);
            this._toneFilter = new ToneFilter();
            _enemySprite.filters = [this._toneFilter];
    
            this.contents.blt(_enemySprite.bitmap, 0, 0, bitmap.width, bitmap.height, rect.x + (itmW-sclW)/2, rect.y, sclW, sclH);
    
            name = enemy.name;
            this.drawText(name, rect.x, rect.y + 80, rect.width);
        };
    What am I doing wrong?
     
    #3
  4. Poryg

    Poryg Dark Lord of the Castle of Javascreeps Veteran

    Messages:
    3,922
    Likes Received:
    9,899
    Location:
    Czech Republic
    First Language:
    Czech
    Primarily Uses:
    RMMV
    You need enough time for the resources to load. In order to do that I solved it just like the game solves it in its status window, by using ImageManager.reserveFace in scene.prototype.create
    and then refreshed the window on scene.prototype.onReady.
    If you load the bitmap and then use it in the same tick, it will not work. And drawAllItems won't help either, because the cached items have no texture. You'll need to refresh at least once after the items have been loaded.

    What you're doing wrong is not giving the resources time to load. I had the same problems in the tutorial series, notably in video 2, and talked about the solution in video 3.
     
    #4
    SeaPhoenix likes this.
  5. stramin

    stramin Veteran Veteran

    Messages:
    73
    Likes Received:
    28
    First Language:
    spanish
    Primarily Uses:
    N/A
    Thank you so much for your help, I finally did it :D
     
    #5

Share This Page