This a teaser for some upcoming posts about things I’ve been working on.
The conclusion of 108 Koans Retrospective!
Only three more commentaries to go! I plan to have everything recorded and published before Thanksgiving.
Virtual Reality
I recently completed a virtual museum about ways that virtual reality is affecting the art world. It was the first VR project a made from scratch without starter files from Udacity. I’ll have a full blog post about it soon!
I published an Amazon Alexa skill!
It’s a Sherlock Holmes Trivia game. Stay tuned for instructions on how to play it, even if you don’t have an Alexa device.
Student projects
My students have been workin’ hard this semester on various projects, including an escape room, websites, and a redesign of the school cafeteria!
Food label mockup by Karlie Langley for my Interaction Design class.
And more!
I’m going to start making more quick, small posts with miscellaneous tidbits, sketches, ideas, and whatsits.
My most recent VR project is a simple Simon-esque game in which the player must select floating orbs in the correct sequence in order to pass through a dungeon. This was the fourth project for Udacity’s VR Developer Nanodegree. I enjoyed this project a lot because there was more emphasis on designing a good user experience. I got to put my UX skills to use to create personas, draw sketches, conduct user tests, and iterate on the design.
Process
Personas
One of the first things I did was create three personas of different users who might be interested in this game. I already wrote about this in a previous post, where you can also download the persona template that I designed. You can click the images below to see them bigger.
James Rigos: experienced gamer
Gina Lyles: in-the-know mom
Bekka Lyles: curious kid
Sketches
I made several sketches throughout the process. I haven’t make all of the sketches a reality yet, but I have a clear idea of what I want the final experience to be like. I added several bits of backstory to the game to make the player more invested in completing the puzzle.
Early environment sketch
Several ideas for the UI
Some UI ideas close up
Script with user flow
Working in Unity
I created the game in four stages, with user testing and iteration after each stage.
Create the environment (3D models and lighting). Do user testing for mood and scale.
Create the UI for starting and resetting the game. Test for scale, placement, legibility, and clarity.
Add camera motion and program UI buttons. Test for speed and comfort to avoid simulation sickness.
Program game mechanics. Test for playability, understanding of rules, and overall experience.
Building the dungeon environment with premade assets
Adjusting the legibility of the UI.
Positioning the orbs
Adding interaction to the orbs
User Testing and Iteration
Below are videos of my first playtest and my most recent playtest, so you can see the progress made so far.
Some of the things discovered and fixed from playtesting included:
Some people felt too short. Adjusted the camera position and the overall scale of the environment.
The UI was much too close to the camera at first. Repositioned it farther away.
The start UI blocked the view of the dungeon, so it was really disorienting when the camera started moving. I fixed this by making the UI partially transparent.
The camera motion was too fast. Slowed it down to create smoother transition into dungeon.
The positioning of the orbs was too high to be able to comfortably select the top two. Repositioned them to be more in the line of sight.
And these are some things that I haven’t fixed yet:
There is a glitch where the back wall of the dungeon changes color when you look at it.
Some people do not recognize the “Simon-esque” aspect of the game, so they don’t know what to do when the orbs light up.
The negative feedback sound when you select the wrong orb is not clear enough.
Current State
Here is gameplay video of the game in its current state, as of Oct. 1, 2017. For some reason the screen recording software did not capture the ambient environment sounds.
Planned Improvements
Incorporate all the story elements to give players more choices (see sketches above).
Program a lose condition if they select the wrong orb too many times.
Program different levels of difficulty.
Create either clear instructions about how to play or hints if the player gets stuck.
Animate the orbs to move out of the way upon completing the puzzle.
Personas are an important and incredibly useful interaction design tool. (And I love making them.) While preparing my new Interaction Design class, I was looking for a persona template for my students to use. I couldn’t find many free templates that don’t require you to sign up for something. So I made one. I’m posting the template here for anyone to download and use for free. It’s available as AI, SVG, and PDF.
You’ll need a vector graphics editor to modify these. If you are looking for a free one, try Inkscape. It’s available for Windows, Mac, and Linux.
font used: Raleway (available free from Google Fonts and other places)
License
I am licensing these template designs under a CC0 1.0 Public Domain Dedication, which means you can use and modify these templates for any purpose without asking permission or giving me attribution. The Raleway typeface has its own license.
Persona Examples
Here are three personas I created for a VR game I am working on.
Once you have collected the key, you can unlock the door to the temple, winning the game. The project required the use of C# scripting to track the state of the key and door, and to create the effect of collecting objects (animation, sound, and destroying & creating objects).
A coin. Don’t you just wanna compulsively collect these?Spoiler alert: The key is on top of a pedestal behind the temple.
Udacity provided the starter project files, which included prefab maze walls, temple, coins, key, etc. I had to design the maze and place the walls, coins, and key in the scene to make a playable game. I also wrote scripts to create the interactions in the game, such as the sound effects and animation upon collecting coins, tracking whether or not the key has been collected, and animating the door opening. You can read all the requirements on the project rubric.
Workin’ in Unity.More wireframes.
Gameplay video
Planned improvements
At some point I plan to come back to this project to make improvements, such as
Create a UI to track and display the number of coins collected.
Make the key collectable only after finding all seven coins.
Create “floating” animation for coins and key.
Make sound effect for trying to open the door without a key.
I have been learning how to create virtual reality scenes through Udacity’s VR Developer Nanodegree. A lot of my Interactive Media students have been interested recently in 3D design, and I have been wanting to learn more about Unity for game design, so this seemed like a good opportunity to get familiar with both. I’m not sure what I’ll ultimately do with virtual reality—maybe a virtual art installation or an interactive narrative. I’m actually more interested in augmented and mixed reality, but I’ll save that for another post. Right now, I’m having fun just kind of playing around with VR and learning some new skills.
So far I’ve completed two VR projects. The first was just a basic “Hello World” type project in which I worked out all the frustrating kinks of getting my development environment working and successfully deploying to an Android phone. The second project was a little more interesting—it’s a virtual reality apartment.
There it is.Virtual offices are much less cluttered than real offices.
You can’t do anything other than move around and look at the furniture. But it’s exciting to be creating a place on my laptop, and then be in that place.
Screenshot of the app running on Android. If you look at this through a Google Cardboard viewer, this appears as one 3D image.
The most challenging thing about this project was getting everything aligned perfectly so nothing is overlapping and objects are sitting right on top of other surfaces. You’d think there would be an easy shortcut for this, but it’s more difficult than it sounds (at least with my current knowledge of Unity). I had a lot of success with vertex snapping, but with some objects that didn’t quite do the trick and I ended up just eyeballing it.
Eyeballing stuff in three dimensions is a pain in the ass.Look at that book alignment, tho.
![SVG persona template [.svg, 21kB]](https://derekds.com/downloads/persona-template.svg){kind=link}