UI Grid System for Creating Walls of Cube Objects

Our team wanted to created a tool that could generate walls made of blocks for our “Hole in the Wall” style game. As a health game, we also wanted to have an in game system that a therapist could use to create their own wall objects as well. To satisfy these requests I decided to create a simple UI grid made of images that would tie into a wall generator object in Unity.

Using Unity 2018, I was able to use UI Image prefab objects. The height and width of the wall can be determined in “number of objects”. This will also be reflected in the UI grid object. The user can then click grid elements to either turn them on or off, which will also correspond with a color (white or black). Then when the user clicks the “create wall” button, a wall will be created of 3d objects directly reflecting the UI grid. The wall will have objects where the grid elements are on, and it will just have nothing (a hole) where elements are off.

Another feature was added to this tool to help the artists make wall assets for the game, but it also doubles as another option for therapists to create wall poses. The UI grid can intake an image file (a 2D sprite) and output a grid based on the alpha values of individual pixels from this input image. This initially always looked at every pixel, but to help the tool deal with higher resolution (or just larger) images, I also added a resolution factor that would just very simply look at “every x pixels” instead of each individual one. The resolution factor just gets multiplied into the loop looking for pixels.

For example: With resolution factor of 4, the tool will look at pixel numbers: 0 * 4 = 0, 1 * 4 = 4, 2 * 4 = 8, etc.

While this clearly isn’t an amazingly intelligent system, it is a simple way to generally get a roughly similar shape to initially higher resolution images without creating hundreds of thousands of objects.

Comments

Post a Comment

Popular posts from this blog

Reskinned Website, and Render Textures in Unity

Image
At the beginning of this week I was still working on the website and fixing a couple issues. I also changed a lot of the styling on the website so it fits with our brand better. Now it's more orange, with a warmer color palette. Later this week, in Unity I created a script that uses the Render Texture on a camera that looks at a custom UnlitRenderTexture layermask and saves a PNG of where the player is overlapping with the wall. The reason I use a layermask is so that the player doesn't see this layer, as well as making sure this second camera only renders out the player and the wall cutout. As you can see in this image, when the player is overlapping with the red walls it is purple. Where-ever it is purple will tell us what percentage of the player is overlapping with the wall cut-out. It is our plan to be able to show an image like this, along with that percentage to therapists and patients so they can see how well they did.
Read more