Bomb On Station 7

Well, as obsessed as I was with Twine, it couldn’t do what I wanted. I ended up using Construct 2 which is way more flexible but, holy cow is it wonky. The interface is a mess and full of modes with options that only appear in certain modes. It took me forever to figure out how to do what I wanted. But now that I’ve got it down, I think I can make something really great. Until then, check out my first game – Bomb On Station 7.

Autoplay restrictions and compromises

Well shit. I thought I tested my popcorn.js idea on a phone but I must not have. You can’t autoplay anything unless it’s muted so that pretty much kills my idea. So I decided to go back to using videos (way easier for me to create) and my plan for mobile OSs will be to mute the videos and display captions. That’s not what I wanted but I think it’s better than trying to make native apps. I’m not interested in doing something that doesn’t live on the web. Maybe I’ll also make a “director’s cut” of each thing that’s a regular video. This way you don’t have to play a game to experience it. That should hardly be any extra work.

Anyway, here’s v2, now with videos. Still lots of work to do. I haven’t styled anything yet. This is pretty much how the games come out of the box.

I’m obsessed with Twine

I’ve been interested in interactive fiction for a long time. One of the things that I loved about my work in performance and theater was the ability of the audience to help shape the experience. I often tried to build in multiple opportunities for that to happen in the things that I made.

This is something that I’ve mostly missed in the things I’ve done on the web. And as I’ve been planning a new project, I’ve been wondering if there was a way I could do something more than just linear videos. Then the other day I saw this headline in my RSS reader – IFComp crowns its first non-parser game – and I quickly fell down a IF rabbit hole.

On Wednesday, I scribbled out a quick plan on my whiteboard and started experimenting.

Twine gives you lots of tools to create complicated, branching story logic. Thankfully, between some nice screencasts by Dan Cox, and the Harlow docs (one of the story systems that Twine supports) I was able to put together a small prototype story by about 2am (with timeout to see Willie Nelson).

This quick MVP taught me much of the things I think I’ll need for the project I have in mind but it’s not done yet. This is just the first part. Twine’s output is a webpage and it nicely supports HTML right in the editor so you can easily do things like embed YouTube videos. My initial thought was that I would create essentially video “cut scenes” interspersed with decision points. I tried this with a few videos and it’s fine on a computer but it’s terrible on phone and it’s important to me that this work on phone.

Then it dawned on me that an embedded YouTube video is actually an Iframe and if I could Iframe a video I could Iframe anything thing else… like something built with popcorn.js. And this can work on a phone if you base it on an audio file instead of a video. So with popcorn.js I can create an animation synced to an audio file with dialog. That’ll be my “video”. I’m hoping the effect will be something like an interactive comic book with dialog, sound and music. That’s what I’ll working on the rest of the weekend.

A Test VR Scape

testscape

I spent a little more time experimenting with A-Frame. I sketched out this idea yesterday and put it together last night and this morning.scape-sketch
The hardest part was placing the spheres and cubes where I wanted them. In a 3D program you can just drag things around. With this I had to make up a graph, plot things out, code it and then check to see what it looked like (repeat a zillion times). Regardless, what’s super cool is that instead of using Unity to make a desktop app like this, I can now easily make the same thing as a webpage that works in way more places.

So check it out. It’s got sound and you can navigate with WSAD keys if you’ve got a keyboard.

Maybe one day, I’ll make a bunch of these and link them all together over at vrsca.pe (yes I love buying URLs).

A-Frame is Awesome

Last March I got an Oculus DK2 so I could play around with creating VR content but my excitement ran into a brick wall called javascript that I don’t understand and expensive tools. Fast-forward 9 months and the Mozilla VR team has just released A-Frame and my excitement is back. Now, I can include a link to aframe.js and write one line of code like this to create a video sphere:
<a-videosphere src="360video.mp4" autoplay="true" loop="true" rotation="0 270 0"></a-videosphere>
That’s pretty easy—it looks almost exactly like html for a 2D video:
<video src="2dvideo.mp4 controls autoplay="false">
But wait, there’s more. This is Web VR so A-Frame supports desktop, iPhone, Cardboard and Oculus (Android coming soon according to the docs) right out of the box. So with a little time to play around between Christmas shopping, I gave A-Frame a spin.

I love the idea of making a “VR gif” – a scene that you could just sit in and experience for as long as you wanted. Since I don’t have an awesome 360 3D camera rig (about $5K) or even a nifty 360 2D consumer camera, I grabbed a few seconds from this video that my old videoblogging friend Chuck made and I looped it. Then I tried adding some primitives (cubes in this case) to the scene. 10 lines of code later, violá – a VR gif:

vrgif

    Some notes:

  • Give the video a moment to load (it’s 15MB).
  • In a browser, you can click and drag with your mouse to look around.
  • On the iPhone the video doesn’t play. You just get the first frame and spinning cubes. But you can still look around by moving your phone or put it in a cardboard holder and look around (the cubes are in stereo).
  • It’s super cool with the Oculus DK2 and even works on a Mac (even though Oculus dropped Mac support).

Holy Cow VR!

[MISSING IMAGE]

Last December, the Mozilla staff (paid and unpaid) spent a week together in Portland to work on projects and share ideas. One of the really exciting things I had the opportunity to do was experience one of the WebVR demos given by Josh Carpenter and Casey Yee. I imagined that it would be pretty cool. After all, I’ve spent about 11 years playing and working in virtual worlds. Oh man. That reminds me. Before the robots had a talk show, I had one for a short time too.

Anyway, so I was excited to check out WebVR using the Oculus DK2 and to my surprise it was even more amazing than I imagined it would be. And on top of that, you can do this on the web! That’s what I’ve been waiting for.

So I’ve been working on an idea for a few weeks now and it feels like it’s time to start making things. So I ordered a DK2 and it came in yesterday. I got it set up last night and spent most of the day trying demos and reading up on stuff. Of course MozVR is great place to get started. I literally copied Josh’s example, swapped out some images and made this super simple demo for myself (below). Of course you’ll need a DK2 and Firefox Nightly (setup info).

The API changed and broke this page. Update: I fixed it using A-Frame!
The API changed and broke this page. Update: I fixed it using A-Frame!

It doesn’t do anything but it was fun — like creating your first web page. So I’m going to load up on dramamine and see what I else I can figure out.

And if you haven’t heard Jen’s The Web Ahead podcast, episode 96 with Josh Carpenter and Vlad Vukicevic talking about WebVR is good place to start.