Jump to content

Single Large Graphics Object vs Multiple Graphics Objects


Recommended Posts

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


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...