Udacity VR Developer Course: Puzzler Project

INTRODUCTION:

I am currently enrolled in Udacity’s VR developer course. My first project, named Puzzler VR, was about learning how to create a VR game using Unity for Android devices. I have only utilized the Oculus Rift and Vive headset + Unreal Engine to create VR experiences, so this was new to me and I was ready to jump in!

The goal of the the project was to design a puzzle experience that would allow the user to  be able to walk through a space, play a Simon Says like game (choose the correct order of spheres in sequence), and restart the game. Most of the code and models were prepared for the students, which were handy foundations to begin building the game.

PROCESS:

Firstly, the class taught the designer to imagine a user and draw out some options of what they would like to see in her game. I came up with a few ideas here:

IMG_1963.jpg

I imagined my user as someone who would enjoy puzzle games and who would have a basic understanding of VR apps for mobile app. I also imagined a few alternatives to the “dungeon” environment, including a spooky cabin in the woods and a circus themed puzzle.

Initially, I found Unity quite easy to use. I was able to build the dungeon environment with the models Udacity provided, even including some mountainous terrain as backdrop. Also included are the beginnings of a user interface to allow the player to start the game, seen in the screengrab below:

Puzzler_Image3.PNG

Also important were lighting and some assets to give the user a more realistic idea of the their environment:

Puzzler_Image4.PNG

USER TESTING:

When I uploaded the beginnings of my game (just the dungeon environment I built), I found the scale to be WAY off on my mobile device in comparison to the preview on my PC screen. My boyfriend, who is about 6 inches taller than I am, even felt that the door was way too large. The one aspect he really enjoyed playing the game were the sound effects (added at a later point- I tested to game on him quite frequently!) Here he is testing out the game:

IMG_1961.jpg

OUTCOMES:

Once I finally got the project to the correct scale (after a few iterations), I could begin implementing the game mechanics.

Puzzler_Image2.PNG

Firstly, it was important to ensure all user interfaces correctly worked when clicked. This included a start button at the beginning of the game, the Simon Says game play itself, and the restart button. Again, most code was provided for us, however, I was able to learn Unity’s interface through the course when implementing it with my  game objects. Here is the setup for my game logic script:

Puzzler_Image6.PNG

Lastly, the class taught us how to utilize sound in our game to add another aspect to our environment and provide a better user experience. From the image below, you can see that each sphere has audioclips associated with it so that when the user chooses correctly or incorrectly, the sphere will play the sound accordingly.

Puzzler_Image5.PNG

And that was it! I was ready to test out my game. See the video below for the final run through of my basic Simon Says “Puzzler” game. I purposefully (maybe…) guessed the first sequence incorrectly to show how the game restarts and the spheres let you try again until you succeed and move to the restart user interface.

View the video below for the final gameplay:

CONCLUSION:

Cheers, hope you enjoyed the video! I am excited about moving forward with Unity for not only mobile devices, but for my Oculus rift as well (hopefully keeping the frame-rate within a reasonable amount :D) This first project was extremely helpful in introducing me to Unity and creating a playable VR game on a mobile device.

Dragon Costume on the 3D Printer

First off, I want to give a shout out to Quintox303 on Thingiverse for their design. I had a work trip during the time I made this costume and didn’t have time to do the 3D model design of the dragon scales. Here are the scales I used:

https://www.thingiverse.com/thing:2779147

I decided I wanted to design a dragon costume after my boyfriend decided he wanted to be a knight for Halloween (dragon and dragon slayer… ha… ha…). A lot of things were easy to purchase, such as the tail and the wings, but I wanted to make my design a bit more unique and put my 3D printer to use. As some of you may have noticed, I took a hiatus from this blog due to a family illness. I won’t be as active on here due to this, but still want to make time for my hobbies and show them to you all.

I knew I wanted wrist and neck scales, so I began by designing a wristband that could use Quintox303’s scales. I modified them a bit so that weren’t as large and tall:

IMG_0945.jpg

I then purchased some tulle and got to work. I printed a few layers of the scales, then paused the print, carefully placed a layer of tulle, and continued to print:

IMG_0946.jpg

And voila, the finished print:

IMG_0952.jpg

Next was painting the scales to a color that would match my costume and imitate, well, dragon scales. I ended up using a layer of black spray paint, along with multicolored Spaz Stix spray paint:

IMG_1051.jpg

I purchased some gloves off Amazon, and using sewing, velco, super glue, and patience, fashioned a pair of dragon scale wristbands:

IMG_1058.jpg

IMG_1183.jpg

(Yes, drinking was involved in the making of these wristbands lol)

IMG_1057.jpg

You can see some errors from this close up: some of the paint didn’t dry as I’d like, and some of the dragon scale points got pushed down, but I wasn’t too worried as this was a one night costume that I knew would probably get a little bit tossed around anyways.

Of course, between making my wristbands and my necklace, my front fan decided to die.

IMG_1203.jpg

Buh bye fan. I have had issues with this fan before, so wasn’t surprised by it dying on me. I didn’t want to risk printing without a fan, so I purchased a similar 12V fan online, spliced and soldered, and we were good to go (I’m making that sound much easier than it was… I’m no electrician). Anyways, I unfortunately did not take a lot of photos of the process of making the necklace, but it was very similar to how I made my wristbands, but using a small fabric necklace purchased from amazon as a backing (and of course the tulle and leftover fabric from my gloves). I also modified the scale 3D models even further to be smaller and flatter so that wouldn’t be so “jarring” on my neck:

IMG_1343.jpg

IMG_1342

Alright, here are the final photos of the design! I hope you guys enjoyed, I had a lot of fun making this costume and even more fun wearing and being a dragon for the night 😀IMG_1406.jpg

56238155248__82762F10-A648-4AE5-B522-A5D17E6F8596.JPG

56238163619__4E25749B-2C5F-4CBA-93B7-49F99E9D267F.fullsizerender.JPG

Learning Unreal Blueprints for VR II

 

The second project for Udacity’s Unreal program was called “Hide in Seek”. Building upon the foundations taught in “Kitchen CleanUp”, the game required more complex blueprint coding. The premise was to initiate the game, hide an object around the apartment, and have the user utilize locomotion to move from point A to point B to “destroy” the object. Each destroyed object would gain the player a point. I decided I would create a can and a trash bin (both designed in 3dsMax) for the game so the user would effectively be “recycling cans” to gain points. Again, my job was to:

  1.  Create a player pawn with a controller that had the ability to interact with the can (using blueprint interfaces)
  2.  Spawn a can at a different location every time the user found and recycled the previous can (randomly spawned at target points, as used previously in KCU)
  3.  Create a recycling bin that would read if a plate was in it and destroy it (and once destroyed, a new can would need to be spawned)
  4. Develop a timer and score system that the player could see, a method to start and end the game (event dispatchers) and a start menu (interface widgets)
  5. Lastly, but most importantly, create a locomotion method that would move the user around the apartment. Here is the method I used- a line trace to draw a cylinder to identify a location where the player could move:

LineTrace.PNG

Here’s a preview (another grainy GIF rather than video):

KCU.gif

Main menu created in Photoshop + Illustrator:

HideAndSeek-01.png

Can UV texture created in Photoshop + Illustrator:

Can_texture.jpg

Low-poly can:

LowPolyCan.PNG

Low-poly recycling bin (a basic blue texture was later added in Unreal):

LowPolyBin.PNG

Learning Unreal Blueprints for VR

I enrolled in Udacity’s Learn Unreal VR Program to gain a better understanding of Unreal Engine and to learn blueprint coding. I have used my VR headset for gaming and 3D modeling purposes, but never to develop any sort of interface or user interaction. As these are growing interests of mine, this course was a perfect fit to gain new skill sets in these areas.

The course’s primary focus was not to teach you how to model or bring assets into Unreal, but rather on how to create an experience for the user. For example, I learned how to set up a player pawn and user controls, set up blueprints for assets to make them interactive to the user, and how to begin creating interfaces for timers, scores, etc.

The first project was a to create a game called “Kitchen Cleanup”. The game involved the user picking up randomly spawned plates and cleaning them in the sink. My job was to:

  1.  Create a player pawn with a controller that had the ability to interact with plates (using blueprint interfaces)
  2.  Spawn plates every few seconds that could be interacted with (randomly spawned at target points)
  3.  Create a sink that would read if a plate was in it (AKA overlapping it’s collision box) and “clean it” (destroy the actor after a 2 second delay)
  4. Develop a timer and score system that the player could see, a method to start and end the game (event dispatchers) and a start menu (interface widgets)

The course ultimately gave me the skills I needed to develop the game. Here’s a preview (sorry, WordPress only accepts my grainy GIF rather than video):

KCU.gif

Other than the actual mechanics of the game, I threw together the main menu logo in Illustrator:KitchenCleanUp.png

I also added a particle emitter to depict “bubbles” near the sink (a texture created in photoshop). Overall, the game was a blast to make. I will make a second post regarding the second project once it’s been reviewed by Udacity.

 

Printing a Mount for the Oculus Rift

To start with:

IMG_1562.JPG

Secondly, this is what happens when you leave a print running and go to work:

IMG_1563.jpg

So maybe that doesn’t happen all the time, but I sure did waste a lot of wood filament. I was in the process of printing a wall mount for my Rift and touch controllers. I originally downloaded both models from Thingiverse, but I made some modifications to the mount for the HMD (scaled it along the X axis, added a curved surface since I’m constantly scared of UV light screwing up my lens):

Capture.PNG

During the middle of the second try (this time with ABS), the extruder clogged. Lucky for me, I’ve dealt with that issue before (see my post about extruder clogs…) and was able to quickly disassemble the extruder, declog it, and reassemble. Hey, it only took a few hours rather than a few days! For my third try, I decided to just go with Prusa’s standard PLA:

IMG_1576.jpg

And the final products, mounted to the wall in all their glory:

img_1678.jpg

Yay for useful prints!

UX/UI Design through a DesignLab Course

I decided to take a UX/UI design course because it’s a topic I’ve always been interested in. As an architect, it is my job to determine how a person uses and interacts with a space (in my case, a physical building or place). However, I am very interested in virtual interaction, particularly in VR, and was hoping to gain knowledge from this design course. First, I’m just going to give my overall thoughts of the course I took, “UX: Interaction Design” with DesignLab, and then I’ll jump into what we learned and what I felt I gained from it all.

To be upfront: the class itself was a bit pricey, and I felt it didn’t give me everything I was looking for. The course seemed to be geared towards someone with little or no background in design, and of course since my background is design, it felt lackluster. The topics were broad and lectures seemed to only scrape the surface of true UX/UI.  My tutor was really nice, but I felt like we just went over topics discussed in the online lectures and nothing more. At the end of the course, I realized what I needed was not information regarding what UX/UI is (because as a designer, I should already have a grasp of interface design and how clients interact with my work). Rather, I needed the tools to begin building these UX/UI interfaces. On a positive note, I did gain some of these skill sets.

The overall project was designing a website for an online grocery store. Firstly, I learned how to analyze and compare competitor’s work, as seen below:

UsabilityCompetitiveAnalysis.png

After analyzing the competitor, it was time to start working with site maps and user flows. Sketching out how one’s site would work and how people would move through it was not as easy as I thought, and I had to go through a few more competitor sites and draw a few flow iterations before I could come up with this:

UserFlows.png

After creating a user flow diagram, I set up wireframes to display my imagined site pages:

WireFrames.png

And lastly, I tied together the flows and wireframes to create a site map with my wireframes:

SiteMap_WireFrames.png

Overall, I did have a lot of fun creating my “website/app” and it was definitely a good design exercise. I feel somewhat more knowledgeable about what does and doesn’t work for a good interface. However, my next goal is to actually jump into the actual physical creation of these interfaces (….maybe I should just learn to become a developer…)

Maya 2014 Tutorial

I had such a blast doing these tutorials by John Aurtur Mercader:

It’s been a few years since I actually completed his tutorials, but I was reminded due to my reignited interest in Autodesk modeling software, including Maya and now 3dsMax. I ended up with a model I was pretty happy with:

M2.jpg

M1.jpg

M3.jpg

M5.jpg

Right now I’m currently enrolled in a Udemy course for 3dsMax, so we’ll see where that takes me!