Layering images together in one bitmap

[Ellie Jane]

Hi,

I am trying to use Bitmap blt to layer some images together. Specifically I'm doing this in Sprite_Character.setCharacterBitmap so that I can create some layered character graphics.

It's not working however; the bitmap loads the skin image successfully, but doesn't get any further than that. If I put a missing file in I do get an error saying that image can't be found, so it's trying to load the images, it just isn't doing what I want it to do, which is to just layer them one on top of the other.

Here's my plugin code:

Sprite_Character.prototype.setCharacterBitmap = function () {

    // If image name contains "PPD" this is a paperdoll image
    if (this._characterName.includes("PPD")) {
        // split numbers into array
        // image name looks like: %Base-PPD-1-2-3-4-5-6-7
        // %Base is just from QSprite so we ignore that bit
        bits = this._characterName.split('-');
        skin = bits[2];
        hair = bits[3];
        body = bits[4];
        legs = bits[5];
        feet = bits[6];
        weapon = bits[7];
        shield = bits[8];

        // load each piece as a bitmap
        skin_bmp = ImageManager.loadCharacter('skin' + skin);
        hair_bmp = ImageManager.loadCharacter('hair' + hair);
        body_bmp = ImageManager.loadCharacter('top' + body);
        legs_bmp = ImageManager.loadCharacter('legs' + legs);
        feet_bmp = ImageManager.loadCharacter('feet' + feet);
        weapon_bmp = ImageManager.loadCharacter('weapon' + weapon);
        shield_bmp = ImageManager.loadCharacter('shield' + shield);

        // layer each bitmap on top of the skin bitmap to create an image
        skin_bmp.blt(hair_bmp, 0, 0, 3072, 3072, 0, 0);
        skin_bmp.blt(body_bmp, 0, 0, 3072, 3072, 0, 0);
        skin_bmp.blt(legs_bmp, 0, 0, 3072, 3072, 0, 0);
        skin_bmp.blt(feet_bmp, 0, 0, 3072, 3072, 0, 0);
        skin_bmp.blt(weapon_bmp, 0, 0, 3072, 3072, 0, 0);
        skin_bmp.blt(shield_bmp, 0, 0, 3072, 3072, 0, 0);

        // set bitmap
        this.bitmap = skin_bmp;
    } else {
        // otherwise, do what the function originally did
        this.bitmap = ImageManager.loadCharacter(this._characterName);
    }
    this._isBigCharacter = ImageManager.isBigCharacter(this._characterName);
};

Does anyone know where I've gone wrong in the above?

 

[xilefian]

Can you blit to loaded images? In WebGL those are going to be texture handles, not necessarily canvas objects, so I don't think you can reliably blit to them. Try creating a blank bitmap instead and blit the pieces onto that.

 

[Ellie Jane]

Hmm, that just seems to give me a blank bitmap at the end of it.

 

[Fhntop]

Hi,
I'm not sure about this, but I think the images need some time to load. Maybe it's doing the blt with empty images and then it loads the skin over all of that?

 

[Ellie Jane]

Is there any way to make it wait until they've loaded, that won't crash the game? I searched and found the isReady function, but don't know how to call it without crashing (just doing a while loop until true isn't working well).

Edit: not sure it's ever returning true to be honest.

 

[Fhntop]

You can add a callback function that triggers after loading the image:

Spoiler

bitmap.addLoadListener(function() {
//stuff
});

Since it's asynchronous you may need to keep track of all the assets until they're loaded in the order you want to use them.


Alternatively, if what you want is laying images on top of each other, I think you could use a Sprite for every image you want, and add them to your main sprite in the order you want them. I'm not familiar with the side effects though...

 

[Ellie Jane]

Excellent, thank you. While I haven't tested it very much it does work for now and I can certainly build from it.

In case anyone's after this answer later on here's what I've done:

        $skin_bmp.addLoadListener(function () {
            $bmp.blt($skin_bmp, 0, 0, 3072, 3072, 0, 0);
        });
        $hair_bmp.addLoadListener(function () {
            $bmp.blt($hair_bmp, 0, 0, 3072, 3072, 0, 0);
        });
        $body_bmp.addLoadListener(function () {
            $bmp.blt($body_bmp, 0, 0, 3072, 3072, 0, 0);
        });
        $legs_bmp.addLoadListener(function () {
            $bmp.blt($legs_bmp, 0, 0, 3072, 3072, 0, 0);
        });
        $feet_bmp.addLoadListener(function () {
            $bmp.blt($feet_bmp, 0, 0, 3072, 3072, 0, 0);
        });
        $weapon_bmp.addLoadListener(function () {
            $bmp.blt($weapon_bmp, 0, 0, 3072, 3072, 0, 0);
        });
        $shield_bmp.addLoadListener(function () {
            $bmp.blt($shield_bmp, 0, 0, 3072, 3072, 0, 0);
        });

Loading is a bit clunky - it takes a couple of frames for each image to load - but crucially it doesn't interupt gameplay to do this so I can still move around while the individual sprites load. I'm happy with that.

As I will be calling this for all live players that could have been a bit of an issue.

Screenshot if anyone cares:

 

[Fhntop]

Perfect, glad I could help!
I just want to point out that if you have, say, weapon and body images with intersecting pixels, I think it's possible that you may get either the weapon or the body on the top depending on which one loads first. As an example, suppose that you have loaded the weapon on a previous instance but not the body. In this case, I believe the body would be shown on top.
Also, I think you may be editing the skin bitmap, have you tested it with a different set of parts?

With "live players" you mean you're making a multiplayer game? Sounds interesting!

 

[Ellie Jane]

I did wonder about that. I've tried loading various times and they seem to always load in the right order. If they start muddling up I'll have to try and find a workaround.

I'm editing the skin sprite so that that always ends up on bottom just in case.

Yeah I'm making an MMO, but with my dodgy work schedule I wouldn't wait up for it (I just went a full year without any updates).

 

[Fhntop]

Oh, that sounds amazing! I'm doing an ABS in my spare time and I'm well familiar with that "no updates" hiatus xD
I wanted to try doing something online later on, or at least a local multiplayer.

One thing you might have issues with is the amount of textures, creating one per character sounds a bit intensive. Maybe you could try the many-Sprites approach. That should keep the texture numbers low and also fixes the ordering.