this.root.scrollRect

#22

Hmm, interesting.

Is there any way for me to try and reproduce this myself, or any way I could try and build your game directly? Happy to sign an NDA or pinkie promise. I have a feeling this is going to take some tinkering to resolve

1 Like
#23

Thank you so much for sharing your code, I think I see what’s going on.

It looks like each graphic is composed of multiple graphics.beginFill + graphics.drawRect calls. This will (currently) end up being one draw call for each square.

One way of speeding this up would be to use BitmapData instead, you can use bitmapData.setPixel for each pixel, then scale up the result. That would reduce your draw calls from one per rectangle to one per image, which would have a significant effect.

The style of your game would work well for Tilemap and/or drawQuads. Maybe Tilemap?

In order to use drawQuads well, you would want one Vector object for all the objects you draw on-screen. So instead of calling drawRect multiple times, you build up your Vector data, then you drawQuads only once at the end. This turns thousands of draw calls into one. However, using Tilemap gives a lot of these benefits, but lets you use it like a display list.

Let’s say you created a new Bitmap for all of your tiles:

var bitmapData = new BitmapData (2048, 2048, true, 0);

Then for each tile, you added it’s pixels :slight_smile:

for (column in 0...tileWidth) {
    for (row in 0...tileHeight) {
        bitmapData.setPixel (tileX + column, tileY + row, color[column][row]);
    }
}

(or perhaps if you store the information as a BitmapData rather than as arrays)

This would move all of that pixel data out into one BitmapData, which you could use to draw everything all at once, which would be really fast.

You can look at the BunnyMark sample. It shows what drawQuads or Tilemap looks like.

1 Like
#24

Thanks Sing! I will try now.

#25

if i set transparent param from BitmapData to true, it will show nothing.

var bitmapData = new BitmapData (2048, 2048, true, 0);
#26

Yep, the next step would be to write your color information into the BitmapData

So a new BitmapData gives you a blank image. Next you call something like bitmapData.setPixel to write all your colors into the image.

Then you can use it from drawing. If you use one BitmapData per object, then you at least reduce your draw calls a bit by making it one per object, instead of one per rectangle, but if you use one giant BitmapData for everything, you can use Tilemap or one drawQuads call to draw the entire scene in one call