How I Built Adventure Time in Virtual Reality

VR is a wild west, very cool and chill.

Prototyping in VR

You probably hit this post because (like me) you’re mildly impressed by VR and thought it would be fun to build something. I am not a designer or developer, but I’m pretty interested with the potential of virtual reality.

I’m lucky enough to work at an awesome shop where I had the chance to mess around with the Oculus developer SDK. I also stumbled across this article, which was integral in helping me build. I spent some late nights creating a few prototype experiences and I wanted to share my process.

I’m sort of an idiot, so everything I built is about Adventure Time.

Setting It All Up

How to add your VR plugin to Sketch
  1. You’re gonna need Sketch.
  2. Download this plugin then extract it and all that. 
    (Huge shout to @auxdesigner for putting this on GitHub)
  3. Added the new plugin to your Sketch plugins (see the gif above).
  4. Open the demo file In the GitHub plugin folder.
  5. This is a Sketch file with an artboard for the background and one for the UI. You don’t want to screw with those artboard titles or it won’t render the right way in VR. You can begin designing in this file, but I will explain more about the artboards below.
  6. This point is important: Instead of exporting files as you typically do in Sketch, all your VR files must be exported through the VR plugin (see image below).
  7. Your files will be exported as a folder. Don’t freak out, that is supposed to happen.
Exporting files to VR

Building The Stuff

If this looks simple, that’s because it really is…
  1. Your UI artboard is an overlay. It’s transparent and sits on the background. I just experimented with prototyping “buttons” on the overlay but quickly moved on to text and then images, like the ones used in my Adventure Friends prototype. It’s dead simple.
  2. (I’m not actually going to show how to find the individual character images and such, you know how to use the internet.)
  3. The images you use for a background artboard have to be equirectangular. To be frank, equirectangular projection really confuses me, but I have a hunch it’s the reason for America’s oddly distended size on a globe. There are a ton of resources for downloading free equirectangular images, just make sure they are big enough for the artboard (3000 x 1500).
  4. There really isn’t a whole lot more to explain. You can download my Adventure Friends file, and start with that. From there you are just designing in Sketch, go nuts.

Checking Out Prototypes in Virtual Reality

Running Simple HTTP Server
  1. I used A-Frame (developed by Mozilla’s VR squad) to run the files through my browser.
  2. Opening an HTML page won’t work, so you need a local server. You can use this one, or go find your own.
  3. Right-click on your exported VR folder and run through Simple HTTP Server (See image above).
  4. Your virtual reality prototype will now run in your browser. You can click and drag around. I isn’t VR, but it’s still an rad 360° experience.

But, Can I Run This on an Oculus?

Yeah, you can. But it’s a pain if you have a mac. I do, so I tracked down a way of connecting my mac and Oculus. Here’s how you can run your VR mockup through an Oculus on a browser:

  1. Download Firefox Nightly. It’s an experimental build of Mozilla.
  2. Make sure your Oculus is set up. I’m not going to explain all that, you can find instructions here.
  3. Install WebVR, which let’s you run VR on your browser.
  4. Plug in your Oculus.
  5. Run the VR folder using the Simple HTTP Server.
  6. hit “Enter VR” in the bottom-right of your browser.
  7. Boom, you did it. Slap that headset on a friend and show them that brave new world.

That’s all I got. Here are my sketch files.

If I screwed anything up just drop a comment and I’ll updated the post.