UI

Mic the Monkey (Gesture Based UI)

I was tasked with creating a microphone button that could be toggled and, while active, have the input value be altered. My goal for this assignment was to deliver the most whimsically, functional button I could manufacture in a day. Whilst pondering the notion of “mute”, the proverb of “speak no evil” came to mind. This ultimately is what opened the flood gates to the design. There is literally an infinite amount of approaches one could do to solve this problem, but I’m proud to have chosen a more unique, albeit more challenging, option, because it was honestly quite fun to come up with and develop.

MicMuteFlowchart.PNG

 Desktop Version

For the desktop version, I aimed to keep the design as simple as possible, while still retaining the ever so important level of whimsy. An obstacle in my design was the hands of the 2d monkey not being readable when they were over the face of the monkey. I overcame this obstacle through varying opacities and quick animations. While the user can simply drag the audio level up by dragging on the 2d monkey itself, the hand on the right of the monkey serves as a clear indicator of an interactive element.

VR Version

The VR version of the UI was much more fun to work on, because it allowed me to further extrapolate on the monkey scheme; “Monkey see, monkey do”. Essentially, the monkey “copies” the user’s controller’s distance from their base position. This distance is then normalized and used to set the level of audio. I developed the idea of a gesture-based setting because it seemed so much more involved than a simple button. Moving your arm is also less finicky than aiming a little laser at another menu. Furthermore, it makes something as small as changing a setting, into a discovery, into an experience- and that’s really what I think VR is all about; at the very least, a large proponent. The monkey’s movements were accomplished through a combination of blendshapes and dynamically layered animations inside of Unity.

My Friend Is A Battery

BatteryBoy.gif
“My friend is a battery” was a UI exercise I came up with. I wanted to explore using 2d UI in conjunction with 3d world space UI. Information is not only conveyed through UI elements, but also conveyed through the character’s animation speed and face texture. It was made with the mobile platform in mind, thus I wanted to keep the UI simple and touch friendly. Touch friendly meant ensuring that the buttons were big enough, distant enough, and their feedback could be immediately interpreted even if the user’s finger is in the way- this is why the button glows orange and springs up in scale. I originally had the settings button atop the screen, opposite of the energy button, but I found that it clustered the top half of the screen. Thus, I aimed for more of an asymmetrical balance.

batterycolorscheme.png

The color scheme is easy on the eyes and evokes a sense of comfort which really helped the lime-green and red of the battery level pop.

In regards to feedback, it was not only important to have the feedback be functional but also aesthetically pleasing. Each piece of UI smoothly transition from state to state, thanks to Unity’s animator. I also utilized easing, snappy rotations, and idles based on smooth sin waves.

My favorite part about this little guy is the battery bar, I think the combination of a changing point light and the assets being part of the model make for a successful diegetic UI. This was accomplished by having the battery boy’s mesh be combined in such a way that I could easily access the battery levels. The animated face was created by assigning the face a different material with a texture with 4 different faces. I then offset the texture of that material with C# so that they animated at runtime.

BatteryBoyHeirarchy.png

A clean hierarchy is a happy hierarchy.

Battery Boy(1)

UX architecture

Programs Used
  • Photoshop
  • Illustrator
  • Unity3d
  • Maya

VR Factory

I was subcontracted to create a VR experience for a factory. In regards to UI, they wanted a map overlayed on the HUD, which I did quickly, however I also made a world-space map that could be held and interacted with- they ended up liking the world-space UI more (which I was excited about because it was much more fun to toy with than a standard HUD). It is fully intractable, you can scroll, zoom in, change levels, quit, and even select a point on the map to teleport to.

My original inspiration to make a world-space UI for a VR project was based off the fact that menus, by nature, take you out of an experience. They break the immersion and disrupt the tempo of an experience- two factors that I found crucial to a VR experience (especially when concerning first-timers).

I accomplished this hand-held map by utilizing two cameras. One was orthographic, for the map, and the other for the player’s POV. I then had the orthographic camera render out the top down view of the map to a masked out texture, along with some simple button logic. It’s also worth noting that the cameras could render different layers, this meant that I could add labels, symbols, etc to the world without having them clutter the player’s actual play space.

VR Factory.png

Since the client expressed that there would be only a handful of levels, I decided that a level select would fit nicely on the right side of the UI so that the player could quickly change levels by just glancing down and selecting it. The level buttons on the side would procedurally generate themselves depending on how many buttons were in the “Level Buttons” array.

Map.PNG

While the map is simple, it is fully functional and easily discernible.

The button’s index in the array dictates which level to load. So, the second button, would take you to the second level in the build settings, the third to the third, etc. This allows for easy drag and drop functionality for any future designer of the project.

Zone Label Inspector

Adding a button to the level buttons array will link said button to that level automatically. It will also update the UI accordingly.

This slideshow requires JavaScript.

The map was dull and drab without post processing (film grain, color correction, bloom, and chromatic aberration). I added the post process to make it seem more like a sci-fi screen that you could pop up. It’s also worth noting that I incorporated the “Soft Mask” asset so that there was no aliasing.

PopUp DescriberPopupBoxInspector

I also created this world-space popup. It activates when the player enters a trigger. The inspector lets a designer edit all its values in one convenient spot.

Matrix4x4

Having the teleportation work through the world-space UI proved to be a bit of a challenge at first because the handheld canvas was rotated in accordance to the controller and would offset the ray that I would shoot out of the orthographic map camera. Ultimately I used a “Matrix 4×4.TRS” to “flatten” out the coordinates so to speak.

Programs Used
  • Photoshop
  • Unity3d

Glow Intro

Glow Animation
I was contracted to replicate the opening of Netflix’s original show: Glow, inside of Unity3d. Everything was accomplished through the animation system inside of unity with sprites, particle systems, and post processing effects.

Programs Used
  • Photoshop
  • Illustrator
  • Unity3d

It’s All Mine UI

It’s All Mine is an arcade 2.5d top-down shooter where you play as an OTIS (Orbital Terrain Infiltration System) and soar through space collecting precious metals. This game was created Indiegalactic Game Jam.

My favorite take-away from It’s All Mine is the UI. Its completely diegetic. The player’s life is displayed through the robot’s eye which is controlled by a blendshape. The current drill strength is communicated through the drill color. In addition to the world space UI, the player’s speed/health is also communicated through the tempo/pitch of the music playing.

Programs Used
  • Photoshop
  • Unity3d
  • Maya