TicTacToe?

It's always a fun experiment to think of something that would normally be a mundane or trivial task in reality and try to give it a fun twist in virtual reality. In this instance that trivial task is TicTacToe. But what were the overall goals that I wanted to keep in mind when giving this childhood classic pen-and-paper game a VR twist?

Download

Requirements

• A VR Ready PC with Windows 10 or greater

• Oculus Rift, Oculus Rift S, or Oculus Quest with Link

Note: If you're having issues running the executable, try installing the prerequisites found in Engine\Extras\Redist\en-us

The Goals

• Ground user in awe-inspiring and friendly environment

• Devise a simple yet intuitive UX, allowing player to naturally pick up

• Exploit human curiosity and instincts to create fun interactions

• Develop a more casual AI that isn't impossible to beat

• Create an experience (this is VR after-all)

• Make it all happen within four days

The Environment

The Inspiration

I ended up basing the environment off of the movie Ex-Machina where the CEO of an A.I. company lives in a high tech concrete house in the forest... with a self aware A.I. locked in the basement (What could go wrong?). But instead of my environment containing an incredibly advanced A.I. that contemplates life's deepest questions, it's an A.I. that contemplates how to beat its master at TicTacToe.

Assets

• AlistairHume's Architectural Interior Assets from the Epic Marketplace which perfectly fit the interior theme that I was trying to achieve

• Since the interior asset pack is missing the necessary foliage, I went with NatureManufacture's Environment Set from the Epic Marketplace

• To give a sense of literal warmth, I wanted to have a fireplace nearby. For this, I used TharleVFX's fire particle pack from the Epic Marketplace

• Lastly, I went with Everett Gunther's UltraDynamicSky skybox from the Epic Marketplace that I've used for prototyping for years which looks awesome and allows for really quick iteration on environment lighting and overall mood.

Layout

This ended up being the final layout of the environment. I wanted to make sure that there was as much focus on the TicTacToe board so I made it the literal center of attention, with different interesting visual cues surrounding it on all sides.

Once I was finished placing all of the modular pieces that made up the environment, I was left with around 400 individual meshes. This resulted in far too many unnecessary draw calls, so I used Unreal's in-editor instancing tool to bring that down to about 40 mesh draw calls for the environment. On top of that, the author also used 2k or 4k texture maps for each material of each mesh, which was consuming an excessive 3 or more gigabytes of VRAM, so I ran a photoshop batch process on all of the textures to resize them down to 512x512, which decreased the VRAM usage to a little over 400mb.

Lighting

Instead of waiting about 20+ minutes between light bake iterations, I just enabled realtime raytracing alongside my RTX 2080 Ti to quickly preview lighting settings before my final bake. This is an incredibly valuable tool for not only environment artists trying to speed up their iteration times, but also for rapid prototypers like myself trying to rapidly prototype.

Sound

To help sell an environment even further, spatialized audio is essenti

Nature

First up is the nature sounds which was placed right where the double glass doors are

Windy Nature

And then the windy nature sounds which were placed in the skylight above to give a sense of moving air running through the spaces in the ceiling supports

Fireplace

Now the sound of a crackling fire to accompany the fireplace

Smooth Hip-Hop Jazz

And lastly, some hip hop jazz to help set the mood

Intuitive & Natural UX

In this section I'll be going over the defining features of the hands, the TicTacToe board, the Marker, and the Buttons and what makes these core features what they are.

I unfortunately will not be able to really dig into the intricate blueprint scripting and asset prep that went into creating everything as I believe that would require a much deeper video dive that would be out of scope for this post.

With that said, let's move on to the goals that I wanted to keep in mind when creating the hands.

The Hands

• Relatively realistic aesthetic

• Take advantage of all Oculus Touch capacitive inputs

• Accurate index fingertip collision

• Natural grabbing collision

• Haptics when picking up a marker or tapping buttons

• Ability to customize hand colors

Assets

Switchboard Studio's Handy Hands Pack from the Epic Marketplace

For the hand skeletal meshes I went with another asset pack from the marketplace. Although there were a couple things about the asset that didn't match up with my vision. One of those being the hand animations and poses. They didn't have any of the poses that I needed to match up with all of the Oculus Touch inputs, so I exported the hand skeletal mesh from Unreal and created all of the poses myself.

The animation blueprint in Unreal displaying the blending between all of the poses

To add that extra bit of realism, I wanted to have some accurate subsurface scattering on the hand. Unfortunately the original marketplace asset didn't have a thickness map so I ended up baking one myself in Substance Painter.

The original hand material had a skin textured nub where the wrist terminated (which I found subconsciously unsettling considering it looked like the hand was wrapped in skin) so I went into 3ds Max and assigned those faces a separate material ID and then applied a black unlit material to it in Unreal. Now that looks a bit better!

And here's the viewport of the actual hand actor in Unreal, which not only displays the hand skeletal mesh, but also the grabbing collision and index fingertip collision. The fingertip collision actually gets attached to the bone on runtime to allow it to move with the finger when pressing the trigger. I also placed a light in the viewport solely to demonstrate the subsurface scattering created using that thickness map that I baked in Substance Painter earlier.

The Pen

The Mission

• Futuristic design that still relates to modern hardware

• Returns back to original resting place when dropped/thrown

• Sounds when drawing and returning back to resting place

• Colored glowing parts to help differentiate between A.I. and Player

• Emphasized button that can actually be "pressed" by hand

• Button glows when hovering over a board space

Inspiration

Inspiration for the marker was based off of the Wacom stylus alongside a tip that is more akin to that of a paint marker

I actually ended up modeling this myself since I knew it wouldn't take very long.

And then here's the blendshape for the marker's button

The Board

• Familiar TicTacToe layout with a futuristic whiteboard design

• Each board space highlights when hovered by a marker

• Force player to carry through with the spot they started drawing in

• Prevent player interaction during the A.I.'s turn

• Drive game logic through use of rudimentary shape recognition

• Display when there is a tie or a win, and if it was the A.I. or Player

Modeling

For the TicTacToe board asset, I also modeled and UV'd everything myself in 3ds Max.

And here's the 9 individual board objects that make up the entire glass drawing area of the TicTacToe board

If we focus in on one of the pieces, you'll notice how there's the thicker glass object as well as a similarly shaped face floating parallel about two millimeters away. This separate floating object is what I call the drawing plane, where the render texture material will reside when "drawing" on top of the glass.

And then here's the UVs where you can see that I don't care so much about the glass being in the zero to one space since it's just a clean and simple material. Whereas the drawing plane needs to have as much texal density as possible to maximize the 256 render texture that I will end up using in Unreal for the drawing functionality.

Functionality

You'll notice how I've got the frame mesh alongside 9 individual BP_Board_Piece child actor components which all derive from a single BP_Board_Piece actor, containing almost all of the drawing, shape recognition, and shape verification blueprint scripts.

The Buttons

Goals

• Simple yet timeless design

• Function as a button, but behave like a toy

• Use physics but still bend the rules a little bit

• A fun sound and snappy haptic response to fit the interaction

The A.I.

• Moves elegantly but isn't necessarily slow

• All features of the TicTacToe board and marker still apply

• Behaves similar to a human in the sense that it isn't unbeatable

• Draws perfect Xs and Os

At first I was going to go with the MiniMax algorithm to drive the A.I.'s decision-making, but there were a couple things that didn't pan out with this approach. Aside from the MiniMax algorithm resulting in a practically impossible to beat A.I., I also unfortunately didn't have the time to debug some of the recursion issues I was having since I was in the last few hours of my four day sprint.

Seen above is the current state of the MiniMax function looks like in the project, even though it doesn't work.

So I ended up going with my plan B, which was to create individual hard-coded functions that would analyze the board for each type of possible win-case that the player might have, and then determine its next move based off of that. This was a bit tedious to implement, but I knew exactly how to make it work, and it actually allowed for an A.I. that wasn't impossible to beat, which would essentially ruin the fun and replay-ability.

Improvements

Even though I think the project turned out great given I set a four-day timeframe for myself, I still think there are some improvements that I would make. So what would I would those be?

• Additional haptic feedback when interacting with the marker

• More visual cues on the board to better convey user errors

• Automatic height adjustment of board to accommodate different users

• More set dressing to further flesh out the environment

• Better placement of the Restart text and button at the end of a game

• Refinement of shape recognition techniques

• Tweak the A.I. to give it a better balance of offense and defense

• Breath more life into the A.I. using more sound effects and possibly even a physical embodiment

• Debug more edge cases to fix game-breaking bugs