I'm creating a 2d game (engine written in JavaScript) with layers system. I would like to have some post process to optimize the images and the layers.

If there is too many images in one layer it completely covers some of the images at the lower layers. So I would like to remove them form the final build, but not worry about them at creating time so to not slow down development.

I have tried with the bounding box and combining neighbours but this doesn’t t account for alpha transparency.

Can you please share some techniques how to handle this problem?

  • 1
    \$\begingroup\$ Hello, javascript is not a engine, You can further inform the technical framework you are using to know if it has out-of-the-box functionality. In particular, how do you render the graph. \$\endgroup\$
    – Mangata
    Commented Jul 28, 2022 at 10:37
  • \$\begingroup\$ No you misunderstood im using engine written in javascript. \$\endgroup\$
    – TreantBG
    Commented Jul 28, 2022 at 11:05
  • 1
    \$\begingroup\$ I mean, what is this engine and what low-level rendering api does it use? You seem to be looking for occlusion culling, This is included in some rendering APIs(such as openGL), but it only happens with opaque render queues. So we need to know more about the technical framework you are using in order to find a more accurate solution. BTW ,I think using bounding box check for 2d pictures is fine. \$\endgroup\$
    – Mangata
    Commented Jul 28, 2022 at 11:29
  • \$\begingroup\$ i have implemented bounding box search but there is multiple problems with that approach. For one one image can have multiple images on top and still have one corner visible. And when two images have alpha and they "blend" also is not usable. Thanks for the keywords i will do some reasearch \$\endgroup\$
    – TreantBG
    Commented Jul 28, 2022 at 11:58

1 Answer 1


So there is the solution I have found.

Basically I have many images one on top of another due to the ground textures in my 2d editor. And it is unnecessarily loading textures and creating objects in the game.

The solution is a post processing tool that I have created. It does the following steps so you can incorporate it in your own engine:

  1. Splits the map into chunks and begin moving camera from one chunk to another.

  2. Get all images in this chunk and order them by depth value in array (it can be Z value) starting from the bottom up.

  3. Set all images to grayscale with a shader and set the alpha to 100% (so if there is transparency set this transparency to max).

  4. Loop through the images and for each image it does this

    a) Tints the image red

    b) Gets snapshot of the canvas (in my case) and check for red pixels within some tolerance.

    c) If there is no pixels found it destroys the image and deletes it form the database.

I know this is very slow process that I found, but it's offline and can be done nightly before builds. This cleans and removes any forgotten images that the players will never see but they sill will load in memory.

Hope this helps anyone.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .