Spent much of today working on the design of the symbols on the box. For a long time the design of the box had just been placeholder. I decided to finally address it for real.
The box has 4 states: Active, Inactive, Illuminated Active, and Illuminated Inactive.
Today, I’ll just be talking about Active and Inactive. I’ll get to the illuminated states some other time.
Active State is when the player is on the same gravity field of the box. So when you’re in purple gravity, all the purple boxes are active. Boxes in this state have the majority of the box in the colored state.
Inactive State is when the player is not on the same gravity field of the box. So if you’re in yellow gravity, any box that is not a yellow box will be inactive. Boxes in this state are mostly white, because the idea is that they are now “frozen” and a part of the environment.
A few elements here. There’s the square on the top and bottom (not shown), and the triangles on the sides. There’s also a grid and a thinoutline around the edge on each face.
This is my thinking for why each of these elements were there:
Triangle – The triangle shows the gravity direction of the box. However, a lot of people didn’t make this connection. I think it’s because an equilateral triangle looks too neutral. As in, the triangle just looks like it’s in the center of the box just to be there, as opposed to communicating information.
Square – The square is at the top and bottom of the box. It’s there to show you what color the box is when you’re looking at it not from a side angle. Because you can walk on any surface, sometimes you can only see the top or bottom of a box.
Grid – This is a legacy thing. Earlier on in the project, I had a grid pattern on the wall to help players visualize distance and where to place things. I put the grid on the box as well. I should have gotten rid of the grid a long time ago.
Outline on face – I’m not 100% why this was added. I think it’s because when you have two boxes next to each other and they’re perfectly aligned, the edge detection shader misses the edge in between the boxes. I believe I added the outline so that you’d see the separate between the boxes.
One of the first iterations I did was to elongate the triangles on the sides, so that they feel more intentional, and players can see that it’s communicating “points down” as opposed to just decoration.
However, I noticed that the inactive state, especially for yellow, was very difficult to see when you were far away from the box:
In the image above, red is pretty clear, but I cannot see which way the arrows are pointing on the yellow box.
I decided to add an outline to the shapes in the inactive state:
And also played with making the shapes black in the active state:
This definitely increase visibility, but I wasn’t such a big fan of the darker arrows. It didn’t feel in line with the rest of the game’s aesthetics.
I decided to switch back the symbols in the active state to white, but this time with a black outline:
I felt it looked better this way, but the symbols seemed to be too large. It was too loud, and I wanted something more subtle.
Finally decided to make all the symbols much smaller, and have the triangle be much more narrow:
It ended up pretty close to what I had initially, but the tiny changes are definitely a major improvement.
I might continue to tweak this design, but I’m pretty happy with it for now.
Finally, here’s a picture of all the boxes together:
