Envision, Create, Share

Welcome to HBGames, a leading amateur game development forum and Discord server. All are welcome, and amongst our ranks you will find experts in their field from all aspects of video game design and development.

[MV] Bitmap.blt?

JavaScript:
<div class="javascript" id="{CB}" style="font-family: monospace;"><ol>      bmp = new Bitmap(936, 864);

      hair_bitmap = this.loadBitmap('img/hair/', hair, hue, false);

      body_bitmap = this.loadBitmap('img/bases/', body, hue, false);

      bmp.blt(body_bitmap, 0, 0, 936, 864, 0, 0, 936, 864);

      bmp.blt(hair_bitmap, 0, 0, 936, 864, 0, 0, 936, 864);

      return bmp;

Am I using this right? I'm just getting a blank image.

bmp.blt(source, sx, sy, sw, sh, dx, dy, dw, dh);

So I resume that sw and sh are source width and height, and dw dh are destination width and height. That's fine.

But sx sy, dx dy, I presume are the x,y I am drawing at. Am I right to set these at 0?

I am trying to layer several bitmaps on top of one another.
 
Solution
Looking deeper into the source, check if the new bitmap is ready with bmp.isReady(), it could be doing that thing canvas does when everything requires to be performed in onReady() or whatever they want to call it.

There's also isError() that you can try.

Also, try calling bmp.clear() then bmp.fillRect( ... ) on the bitmap to see if you can modify the contents of it (Fill it green to see if you can get a green bitmap returned).

As for my snippet, yeah the context is initialised as 2d by default for bitmaps, so I guess that snippet wouldn't have worked unless you change the constructor for Bitmap. Pretty awesome though as webgl is scattered all over the MV javascript.
MV Source apparently;
Code:
/**

 * Performs a block transfer.

 *

 * @method blt

 * @param {Bitmap} source The bitmap to draw

 * @param {Number} sx The x coordinate in the source

 * @param {Number} sy The y coordinate in the source

 * @param {Number} sw The width of the source image

 * @param {Number} sh The height of the source image

 * @param {Number} dx The x coordinate in the destination

 * @param {Number} dy The y coordinate in the destination

 * @param {Number} [dw=sw] The width to draw the image in the destination

 * @param {Number} [dh=sh] The height to draw the image in the destination

 */

Bitmap.prototype.blt = function(source, sx, sy, sw, sh, dx, dy, dw, dh) {

    dw = dw || sw;

    dh = dh || sh;

    if (sx >= 0 && sy >= 0 && sw > 0 && sh > 0 && dw > 0 && dh > 0 &&

            sx + sw <= source.width && sy + sh <= source.height) {

        this._context.globalCompositeOperation = 'source-over';

        this._context.drawImage(source._canvas, sx, sy, sw, sh, dx, dy, dw, dh);

        this._setDirty();

    }

};
Line 19 looks interesting with "sx + sw <= source.width && sy + sh <= source.height"; indicates the blit will fail if it goes over the edge of the source bitmap. You need to make sure you're not going over the edge (if your source width/source height is larger than the image's dimensions).

Width and height are properties so I guess this should work;
Code:
bmp.blt( body_bitmap, 0, 0, body_bitmap.width, body_bitmap.height, 0, 0 );
If that sure-fire bounds checking fails then can you confirm that load bitmap is working? Try returning one of the loaded bitmaps to see what happens.

I would guess dw/dh controls stretching.

EDIT: Interesting, looks like bitmaps contain draw contexts as well as the draw-surface (canvas). Should be quite easy to attack a bitmap with advanced effects.

Unrelated to your post, could you try this on a bitmap to see what happens?
Code:
var gl = my_bitmap._canvas.getContext( "webgl" ) || my_bitmap._canvas.getContext( "experimental-webgl" );

gl.clearColor( 1.0, 0.0, 1.0, 1.0 );

gl.clear( gl.COLOR_BUFFER_BIT );

my_bitmap._setDirty();
If my_bitmap goes pink then that means WebGL can be used directly on an MV bitmap object.
 
If I return either hair_bitmap or body_bitmap it works. But blt doesn't seem to do anything on either of them if I return them either. Returning bmp gives me a blank image.


As for your code, I get "gl is null".

RPG Maker MV has really, really bad error reporting though (i.e. basically none).
 
Looking deeper into the source, check if the new bitmap is ready with bmp.isReady(), it could be doing that thing canvas does when everything requires to be performed in onReady() or whatever they want to call it.

There's also isError() that you can try.

Also, try calling bmp.clear() then bmp.fillRect( ... ) on the bitmap to see if you can modify the contents of it (Fill it green to see if you can get a green bitmap returned).

As for my snippet, yeah the context is initialised as 2d by default for bitmaps, so I guess that snippet wouldn't have worked unless you change the constructor for Bitmap. Pretty awesome though as webgl is scattered all over the MV javascript.
 
Solution

Thank you for viewing

HBGames is a leading amateur video game development forum and Discord server open to all ability levels. Feel free to have a nosey around!

Discord

Join our growing and active Discord server to discuss all aspects of game making in a relaxed environment. Join Us

Content

  • Our Games
  • Games in Development
  • Emoji by Twemoji.
    Top