BitmapData drawcalls

[damager]

Hi, in my game(jigsaw puzzle) i'm using bitmapData and alphaMask to create puzzle pieces, but for each piece creates separate draw call and when it goes like 100 pieces there's a problem. Is there a way to reduce draw calls? Please help, thank you)

[rich]

It's because that's one unique texture per piece, so it's swapping textures every time.

You can either try using multi textures for some of the bits, or after creating them place them in a dynamically created sprite sheet, to minimize texture swaps.

[Yehuda Katz]

@rich is absolutely right and even more @damager, you can speed up texture atlases too https://phaser.io/news/2016/07/multitexturing-support-added I am sure you will enjoy the article, as it will explain how everything works behind the scene.

[damager]

Thanks a lot for your answers. Unfortunatelly i can't create puzzle atlases because i'm using dynamically loaded images for puzzle. I'm not sure how to correctly create spritesheet for this task, but i'm wondering is there a way to create dynamically texture atlas and put all of this puzzle pieces into it and use it? I've found cache addTextureAtlas function but i'm not sure how to create the texture from all of this sprites.

[Yehuda Katz]

@damager try this short tutorial and trial of app. Anyone who does games soon or later switch to atlases https://www.codeandweb.com/texturepacker/tutorials/creating-spritesheets-for-phaser-with-texturepacker there is also free alternative but with less easy to understand interface: https://renderhjs.net/shoebox/

[rich]

The problem is, their atlas elements (the puzzle pieces) are being generated dynamically at run-time, so they cannot use Texture Packer.

Even so, it's possible to create atlas / sprite sheet data dynamically. It would be easier to start with a sprite sheet, as all the frames are the same size.

Essentially the flow would be this:

1) Create all of your puzzle pieces in their own BitmapData objects

2) Draw each piece into a single BitmapData / Canvas, so that they are equally spaced out. I.e. assume each piece fits into 200x200 squares, then draw them into the single BMD spaced out like that.

3) Create the Sprite Sheet data for your 'single' BitmapData.

4) Use it in your game, destroying the previous 'piece' BitmapData's to save memory.

There is an example that shows exactly how to do this already: http://phaser.io/examples/v2/animation/dynamic-animation

[damager]

9 hours ago, Yehuda Katz said:

@damager try this short tutorial and trial of app. Anyone who does games soon or later switch to atlases https://www.codeandweb.com/texturepacker/tutorials/creating-spritesheets-for-phaser-with-texturepacker there is also free alternative but with less easy to understand interface: https://renderhjs.net/shoebox/

I'm using https://www.leshylabs.com/apps/sstool/ and it's pretty good, but as mentioned rich i need to dynamically generated atlas. But thank you for you answer)

My problem solved(i hope so) by generating textureAtlas. my code if it'll help someone:

let str:string = '{"frames":{';

let bmpTexture:Phaser.BitmapData = this.game.make.bitmapData(750,750);

//Puzzle pieces block
let _puzzlePieceSrc:Phaser.Sprite = this.game.make.sprite(0,0, "gameAssets", "puzzlePiece");
let _puzzleBmpData:Phaser.BitmapData = this.game.make.bitmapData(_puzzlePieceSrc.width, _puzzlePieceSrc.height);
let sp:Phaser.Sprite;
for(let i:number = 0; i<6; i++)
{
    _puzzleBmpData = this.game.make.bitmapData(_puzzlePieceSrc.width, _puzzlePieceSrc.height);
    _puzzleBmpData.alphaMask(this._puzzleImage, _puzzlePieceSrc, new Phaser.Rectangle(-100*i,0,600,400));
    sp = this.game.make.sprite(150*i,0,_puzzleBmpData);
    str += '"'+(i+1)+'":{"frame":{"x":'+sp.x+',"y":'+sp.y+',"w":'+sp.width+',"h":'+sp.height+'},"rotated":false,'+
    '"trimmed":false,"spriteSourceSize":{"x":'+sp.x+',"y":'+sp.y+',"w":'+sp.width+',"h":'+sp.height+
    '},"sourceSize":{"w":'+sp.width+',"h":'+sp.height+'}}';
    bmpTexture.draw(sp, 150*i, 0);
    if(i<5) str+=',';
}
str+='}}';
this.game.cache.addTextureAtlas("pz", null, bmpTexture.canvas, JSON.parse(str), Phaser.Loader.TEXTURE_ATLAS_JSON_HASH);

[damager]

Also i'm wondering if there some way to improve webfont draw call optimization? cause i have 3 buttons and it takes 6 draw calls to create them, is there way to improve this?May be render as image or something like that.

P.S Thanks a lot to everyone for your advices)

[Yehuda Katz]

@damager thanks for sample, I bookmarked topic for future reference. Did I understand your code correctly? You already have one image with six different puzzle pieces. If that's true, why you do not want convert them in sprite in advance? What's the advantage of doing it after loading it as sprite first?

As for the font drawing, Phaser has one strange thing... I cannot find that post on forum but the example was following. There were two buttons (sprite and text above it). If you draw first sprite, font and after second sprite and text, you will get slower result than if you draw both sprites and after both fonts (because drawing font causing draw call, since texture changes).

While I was searching for that link, I came across to this old post https://phaser.io/tutorials/advanced-rendering-tutorial/part5 I hope it will be handy (I will go refresh my knowladge as well :))

[damager]

On 9/21/2018 at 7:36 AM, Yehuda Katz said:

@damager thanks for sample, I bookmarked topic for future reference. Did I understand your code correctly? You already have one image with six different puzzle pieces. If that's true, why you do not want convert them in sprite in advance? What's the advantage of doing it after loading it as sprite first?

As for the font drawing, Phaser has one strange thing... I cannot find that post on forum but the example was following. There were two buttons (sprite and text above it). If you draw first sprite, font and after second sprite and text, you will get slower result than if you draw both sprites and after both fonts (because drawing font causing draw call, since texture changes).

While I was searching for that link, I came across to this old post https://phaser.io/tutorials/advanced-rendering-tutorial/part5 I hope it will be handy (I will go refresh my knowladge as well :))

Thanks for detailed answer. That's the mask image, i have about 20 mask images for puzzle pieces. I load images for puzzle from server. There is not actual in-game code, just sample for testing(cause algorithm of puzzle creation too big for simple explanation).

About the text, i've tried to draw button sprites and then only text, but if i "addChild" text into button, it draws next to that button, doesn't matter where i call it in the code. And i tried to not "addChild" and only try to update text scale, position, etc. to button, but this doesn't work as i expected.

I guess you told about this post, but my problem is about "addChild" text i think)