[solved] What cause Bitmap.snap to look weird in the battle scene

[Tsukihime]

When you go to the menu, the game takes a picture of the map and uses it as a static background. It does the same thing when you go into a battle but you don't have a battleback set. On the menu scene it looks fine; the map looks exactly as it does before I open the menu.

However, the picture looks like it's scaled up a bit in the battle and I'm not sure why that happens.

Map tiles are 48x48 pixels. My is also 48x48. The picture of the map should basically align with the grid.

Spriteset_Battle.prototype.createBackground = function() {
    this._backgroundSprite = new Sprite();
    this._backgroundSprite.bitmap = SceneManager.backgroundBitmap();
    this._baseSprite.addChild(this._backgroundSprite);
};

The backgroundSprite is stored here.

SceneManager.snapForBackground = function() {
    this._backgroundBitmap = this.snap();
    // this._backgroundBitmap.blur();
  };

I also took out the blur.

 

[Ossra]

Hmm, perhaps it is scaled up somewhere along the line to account for the screen shake? So that the black edges do not show?

 

[Hudell]

The menu adds the background as a direct child, while the battle add it as a child of baseSprite. Maybe there's some manipulation on this baseSprite? I noticed it has a tone filter in it but didn't see anything related to size.

 

[ct_bolt]

Here this should fix it...

Spoiler

Scene_Map.prototype.launchBattle = function() {
    BattleManager.saveBgmAndBgs();
    this.stopAudioOnBattleStart();
    SoundManager.playBattleStart();

    // Hide characters and desinationSprite
    this._spriteset.hideCharacters();
    this._spriteset._destinationSprite.visible = false;

    // Snap for BattleBG
    this.snapForBattleBackground();

    // Start encounter as normal
    this.startEncounterEffect();
    this._mapNameWindow.hide();
};

// Overwrite to remove snapforBattleBackground
Scene_Map.prototype.updateEncounterEffect = function() {
    if (this._encounterEffectDuration > 0) {
        this._encounterEffectDuration--;
        var speed = this.encounterEffectSpeed();
        var n = speed - this._encounterEffectDuration;
        var p = n / speed;
        var q = ((p - 1) * 20 * p + 5) * p + 1;
        var zoomX = $gamePlayer.screenX();
        var zoomY = $gamePlayer.screenY() - 24;
        if (n === 2) {
            $gameScreen.setZoom(zoomX, zoomY, 1);

            // Removed snapForBattleBackground
            // this.snapForBattleBackground();

            this.startFlashForEncounter(speed / 2);
        }
        $gameScreen.setZoom(zoomX, zoomY, q);
        if (n === Math.floor(speed / 6)) {
            this.startFlashForEncounter(speed / 2);
        }
        if (n === Math.floor(speed / 2)) {
            BattleManager.playBattleBgm();
            this.startFadeOut(this.fadeSpeed());
        }
    }
};

Look ok?

Spoiler: Screenshot

Basically overwrites to Scene_Map.prototype.launchBattle & Scene_Map.prototype.updateEncounterEffect seem to solve the issue.

Instead of taking a snapshot during the EncounterEffect, I changed it to take a snapshot before the effect during the launchBattle function

 

[Tsukihime]

Hmm, perhaps it is scaled up somewhere along the line to account for the screen shake? So that the black edges do not show?

Oh, it is that screen shake Along with zooming. Cause like @ct_bolt found the screen gets zoomed during encounter transition...

Spriteset_Base.prototype.updatePosition = function() {
    var screen = $gameScreen;
    var scale = screen.zoomScale();
    this.scale.x = scale;
    this.scale.y = scale;
    this.x = Math.round(-screen.zoomX() * (scale - 1));
    this.y = Math.round(-screen.zoomY() * (scale - 1));
    this.x += Math.round(screen.shake());
};

I printed out the scale and I think it's actually not intended

 

[Misappi]

I have a theory, you are using a 48*48 grid isn't it?
Does the map length and height is a perfect multiplier or the game resolution?
If not, try to adjust accordingly!
For example a 1280*720 game can have a 80*80 tile size and hit the perfect size if 16 tile large for 9 tiles height (120*120 for 1920*1080 and so on)

 

[Tsukihime]

I have a theory, you are using a 48*48 grid isn't it?
Does the map length and height is a perfect multiplier or the game resolution?
If not, try to adjust accordingly!
For example a 1280*720 game can have a 80*80 tile size and hit the perfect size if 16 tile large for 9 tiles height (120*120 for 1920*1080 and so on)

Yes, I'm using 816x624 which is 17 columns and 13 rows.

 

[Misappi]

Yes, I'm using 816x624 which is 17 columns and 13 rows.

My bad then, I was wrong!
Did you solved the problem?

 

[Tsukihime]

My bad then, I was wrong!
Did you solved the problem?

Yes. The issue is with the "encounter transition" before a battle begins.
It increases the scale of the BaseSprite, which means the background image shown will also be scaled up.

When I explicitly ignore the scale, it works fine.

  Spriteset_Base.prototype.updatePosition = function() {
    var screen = $gameScreen;
    // var scale = screen.zoomScale();
    var scale = 1;
    this.scale.x = scale;
    this.scale.y = scale;
    this.x = Math.round(-screen.zoomX() * (scale - 1));
    this.y = Math.round(-screen.zoomY() * (scale - 1));
    this.x += Math.round(screen.shake());
  };

But it might not be a good solution to just reset the screen zoom.