• Register
Post news RSS Devblog 7 - Icon Generation

Since the progress in the generation of the map via chunks is null, I have decided to advance on this side.As I mentioned in previous posts, a system is needed to generate the icons for each item in the game, so that you do not have to do it manually.

Posted by on

Since the progress in the map chunks generation is null, I have decided to advance on this side.
As I mentioned in previous posts, a system is needed to generate the icons for each item in the game, so that you do not have to do it manually.
For this, we will use the green chroma technique. We will put 1 brick in the center of the scene under a green background and we will focus the camera on it to take a photo of it.
We start by setting the background of the camera to be bright green and we eliminate visual effects such as adapting the vision (because otherwise the green will receive shadows and it will not be the same green).

Next, instead of showing the output of the camera on the screen, we send it to a texture and we cut that texture to the desired size. In the resulting texture, what we will do to make the green transparent is to catch the very first pixel (which will be on one side of the image) and then go through all the pixels of the texture to detect which ones are the same and set them as transparent:

After this, we have the other complicated part: Center the camera on the object so that it always looks complete.
Lego has very long bricks and very small bricks, which means we cannot use the same camera position in all cases. We have to calculate the size of the brick, the "vision" angle of the camera and apply an offset.

I wasn't able to properly do it by myself, so I had to find how to calculate it correctly.

The result is almost perfect:

And I say almost for 2 things:
- Brick 4 has a face with more studs. That one is the one we would expect to see in the icon:

- Brick 7, radioactive green is water. As it is super transparent, the chroma trick us. The same thing happens with 5, which is crystal.
It will be necessary to add a check like "is water / glass" to change the color of the chroma to blue:

It's not very pretty, but it works for me. We could set a color more similar to the actual texture but it could end with a broken icon, so i'm not bothering to try.

The ingame result seems acceptable to me.


1. Instead of using a greenscreen, just render an alpha channel. This will get rid of all the color problems you're having.

2. To solve the problem with brick 4, you can get which side of the brick has the most triangles. This will give you the "busiest" side of the brick. Since the shots will always be from above, you only need to check the 4 side faces.

Reply Good karma Bad karma+2 votes
FairlyUseless Author

Interesting feedback, thanks!
About point 2, that would mean that i must be able to automatically assing triangles to faces/understand what makes each face, which is something that i don't know how. A side from tricks like "any coord that is > 0.5 from center is part of that face", is there any other more professional way around it?

Reply Good karma+1 vote

An easy way I can think of is this:
-Give each triangle a unique color (i.e. an ID).
-For each side, render it, then go through the pixels and count the number of unique colors in the image.
-Whichever side has the most unique colors is the side with the most triangles.
-For transparent bricks, you're not really gonna care what's inside the brick, so treating it as opaque should work fine.

The idea is pretty similar to how you do the greenscreen thing in the post, so it should be easy to implement.

Reply Good karma Bad karma+1 vote
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.