Remove 2D images from layer where overlapping layers hide them completely

Question

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?

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.