Single Large Graphics Object vs Multiple Graphics Objects

[passenger-inspired]

I am creating a simple game which consists of me creating a long side scrolling street scene. This scene has around 40 houses on it with each house 700 in width and 2/3 of the viewports height. 

Each house is a simple rect with a basic fill and the pattern repeats in terms of the fill colours every 6 houses.

Initially, I was creating a container with a graphics object as a child for each house and this worked well to a degree but the FPS on lower end devices was awful.

So I thought I'd switch to creating a single object and drawing multiple rect's on the single object and whilst it held it's own, FPS wasn't much better.

Can anyone provide some direction on how to tackle this as I have to support both WebGL and canvas and I can't seem to find anything on if this is an anti-pattern or another alternative which is potentially more suited.

The attached asset shows the initial game launch and that pattern repeats on horizontally for some time. The black rect is just the canvas so ignore, the coloured rect's are what are important.

I am currently using v3.0.11 for context

[Exca]

You could use a single white rect, create a texture from that and then create sprites from that texture.

The color would come from tinting a sprite to wanted color. That would be much faster than using graphics.

[passenger-inspired]

Thanks @Exca I'll give that a try. Why would that work better? Be good to know the detail going forward.

[Exca]

I'm not 100% sure how the graphics work on the rendering front, but to my knowledge rendering graphics is more expensive than rendering sprites. Someone else might be able to give a better answer regarding the reason why that is so.

[ivan.popelyshev]

There's general algorithm for huge maps, even if its 1d: Maintain "window" container that has size about 2x-4x of camera, and if camera touches its side, make a new "window", moving old stuff between containers, removing objects that dont fit, and adding new objects.

You can also maintain list of all objects somewhere, no need to create new every time.

As for optimizations for both Canvas/WebGL on low-end devices - you can maintain "window" in a separate background canvas renderer and move that canvas instead. 1.5x wide is ok. I dont know why browser compositeLayers is faster than direct webgl/canvas but i used that trick a lot. Now I just make games for PC, iphone6/7 and top androids and i dont need to do that.