» Publishers, Monetize your RSS feeds with FeedShow: More infos (Show/Hide Ads)
As I've already written about, I had the pleasure of trying out the Oculus Rift for the first time last night at IGDA-TC. I spent about 3-5 minutes in the so-called Tuscany Demo of 90 year old grandmother tries the Rift fame. I found the experience very inspirational. I thought I'd share some of the ideas and aspirations for VR that sprung to mind through my experience. If you'd like, you can also check out my post about my first impressions of the Rift itself.
The obvious application of the Oculus Rift is 3d first person style environments. There will be an endless supply of first person shooter "hardcore" video games for the Rift, and that really is its self proclaimed target market and audience. It is so obvious that it is not even particularly interesting to me, perhaps compounded by the fact that my once love of FPS and "hardcore" games steadily fades away. I think there will be some good first person, immersive exploration and puzzle games that I would enjoy on the Rift. I also think some of the racing/simulation games could be really fun.
But none of those games are why I am excited about the Oculus Rift. To me, the experience of immersion when you've put on the Rift is itself the most compelling part of the product. It is an experience you fundamentally cannot get anywhere else, and it will be truly new to almost all of us. I now believe that even a fixed 2d television-like display experience that completely fills your field of view like the Oculus would be a novel and interesting product itself. However, when you add in the 3d view and nearly perfect head tracking of the Rift, the immersion becomes complete and you've got something special. It is the difference between an omnitheater movie about the Amazon, and actually standing in the Amazon yourself. Well... if the Amazon were pixelated, and without smells or anything you could touch, but still. Let's remember this is a very early product, and technology moves fast...
I had the pleasure of trying out the Oculus Rift for the first time last night at IGDA-TC. I spent about 3-5 minutes in the so-called Tuscany Demo of 90 year old grandmother tries the Rift fame. The experience was significant enough that I felt like I should record some thoughts on it for myself, and I figured I might as well share them. I also found the experience very inspirational. I've written up some of the ideas and directions that sprung to mind in a separate post, Oculus Rift: First Inspirations.
I was actually sitting in a chair at a bar when I put the Rift on. My big glasses got in the way a little bit, and made what I'm otherwise convinced would be a remarkably light and comfortable headset put some pressure on my face. This is easily fixed with contacts, smaller glasses, or cheap plastic lens inserts that pre-bend the light for my correction. Anyway, a new world instantly came into focus. The 3d effect was instantaneous and completely transparent to the experience, and the immersion was total. Your entire field of view is filled with the environment. It's not like watching a 3d movie at all. It's like being inside a 3d game, but with better 3d. The head tracking was for my purposes flawless. I immediately and quite naturally found myself turning my head to look around this new world I was in. I looked straight down... no feet! I guess for some people it is quite unsettling to be missing their body. For me, it just made me aware again that I was sitting in a chair looking at a simulation. It broke the illusion for a split second.
The display isn't very high resolution, but this is a dev version and the consumer version will be better. You can see the pixels, well really the lines between the pixels, which is sometimes called the screen door effect. My awareness of the pixels and this grid would come and go as I looked around and moved around the environment. It was pretty easy to forget it was there, but I definitely look forward to much higher resolutions in the future.
It was very hard not to lose yourself in the experience. I kept forgetting myself and where I was. I wouldn't quite say that this other place I found myself in felt real, but I also wouldn't say that it felt not real. And I felt like I wasn't exactly sitting in a chair in a bar anymore...
I participated in the 2013 Global Game Jam with many other folks from IGDA-TC. I teamed up with Will Buck and Scott Lembcke to make a game called Operation Party.
Operation Party is a realtime multiplayer party game, inspired heavily by our collective admiration of the incredibly fun game Space Team. Our game was built in HTML5 with reasonable support across desktop, iOS, and Android making it pretty accessible for a large group to play together in a room. The server is written with Node.js, and the networking is done with Socket.IO (a wrapper for WebSockets.)
Will and I focused on the game engine and networking, and Scott put together some really silly and fun interactive widgets (that play best on a touch screen). Barry helped a ton by cranking out the artwork for us. Not too shabby for a weekend's work!
The code is available on GitHub.
I recently shared a personal story with my Facebook friends, and given the response, I thought it would be a good idea to share it on this site as well. I especially hope this story reaches teachers and councilors involved in K-12 (aka primary and secondary) education, but parents and possible future parents will hopefully read this, too.
Sharing this story became important to me after the suicide of Aaron Swartz, particularly after reading Timothy B. Lee's words in the Washington Post: "I worry that … America is gradually losing the sense of humor that has made it the home of the world's innovators and misfits." I realize that Aaron was an adult when he got in legal trouble, but before all that, once upon a time he was a young, bright, bored, troubled young man. That's something I can personally relate to.
And that's where my story begins.
Ludum Dare is the thrice annual competition to make a game by yourself from scratch in 48 hours. The December 2012 theme was: "You are the Villain." I made a game that plays like Pipe Dream, but you lay down train tracks trying to maximize the number of goats tied to train tracks that you can run over. Why goats? Well, for the first time LD had a special silly bonus theme modifier, and it was goats.
Anyway, why don't you play my game and let me know what you think!
And here are some more Ludum Dare 25 games to check out, also made by people from Minnesota:
The next episode of the Legend of Equip > Pants is coming soon! Enter your name and email below to get early access to the game! You can re-play Episode One while you wait.
Support this game! Spread the word! I'm putting buckets of time into making this episode something special. My heart is going into every little pixel I click by hand to make the art for this game. The more people who play it, the better. More importantly, the more people who play it, the more sequels you can expect!
If you'd like to see some preview pixel art, check out what I've posted on Dribbble:
If you're interested in private beta testing, leave a comment after the jump!
I made a game in 48 hours for the 24th Ludum Dare challenge. The theme was "Evolution." I made a game where you play as Darwin's Ghost and you have to rearrange the fossil record.
I created a realtime fake CRT effect with screen bulge, vignette, and scanlines using a quick little hack. WebGL scrapes a 2D game's HTML5 canvas and applies effects. Never have your JavaScript games been more "indie" ... lulz. It looks like this — and I made the bulging subtle so that it wouldn't make players seasick.
Play around with the game to get the best feel for it. Usually works, although I should warn you that Safari 6 managed to freeze my entire system for a minute at least a couple times... but not every time. You might be happier in Chrome. Oh, I also applied the effect to this run n' gun game, but it has some flicker issues.
When I discovered Evan Wallace's glfx.js lib, this is actually the first thing I thought of. It is a library meant to apply realtime WebGL effects to an image, but the <canvas> tag can actually be addressed as an image source... so, viola!
Here's the code I used to quickly hack together a working demo of the idea...
Happy 4th of July everybody! It's over 100°F here in Minneapolis today. I made some virtual fireworks sitting in front of my AC trying to stay cool.
I've used 3D CSS3 transforms and text-shadow for depth of field blurring, plus some HTML5 audio... cause you gotta have explosion sounds for fireworks. It technically rendered in Firefox, but terribly slow. So, for best results check it out in Chrome or Safari.
CISPA Blackout? https://github.com/zachstronaut/cispa-blackout
SOPA and PIPA are terrible bills in the US Congress, and on January 18 the web is going went dark to protest.
Copyright theft is already illegal. Why is Congress wasting our time with this? If passed into law, these bills will lead to censorship without due process of law. They protect the rights of multi-billion-dollar corporations, but they don't protect the rights of the average web publisher. Join the fight!
Why Did I Make This Template?
When I heard about how the web was going dark (including sites like Reddit and Wikipedia!), I felt inspired to make an interactive blackout template that played off the theme of "going dark." It was a way for me to channel my frustration with these bills creatively. Some artists paint. I guess I write code. (I actually repurposed one of my old demos for this.)
I made the code public domain and put it up on Github so people could fork it and improve it. You are welcome to use it, and I require no attribution. [Technical note: Check out this post about 503 HTTP headers.]
And Then What Happened? (Going Viral)
I submitted my template to BoingBoing in the middle of the night on Sat, Jan 14 right after putting it together, and Corey Doctorow wrote me back with some good ideas for adding more information to the design so that people would be better informed about the issue. He posted my template on Sunday. It then got picked up by YCombinator News, showing up in their Twitter feed and front page. It started to pick up some buzz on Twitter. On Tuesday, I talked on the phone with a really kind writer for Fast Company. Mashable wrote about it, too.
I thought the response to my template was totally crazy and unbelievable at this point. I had over 50,000 people come to view it from Sunday to Tuesday. And there is nothing quite like that many people coming to see your downloadable template to make you second guess your code! Sorry if you had any problems! I thought there would be quite a few sites using my template during the black out on Wednesday, but I really had no idea just how much my template would resonate with people...
What Has Been the Impact? (Holy Crap!)
At midnight Tuesday night/Wednesday morning I suddenly realized...
As every new year has passed since I've started this blog, I've done an annual timeline of events that were important to me over the previous year. I really like being able to look back. It helps me realize that I got a lot done, even if there's so much more yet to do! Here are some things from 2011 that I'd like to share:
January
Attended CES in Las Vegas
Created the game Re-Infiltration at Dusk with more monsters!
Re-Infiltration at Dusk becomes a Finalist in the Mozilla Labs Game On competition
February
Was in Vancouver and Berlin doing user experience research interviews and testing
Cobblestones 1, Zach's Foot 0
Touch Screen Directory project gets 4th Place at U of M Quality Fair
March
Started working for myself!
Awesome trip to New Orleans. Best food ever!
Created and animated the character Commander Clone
Sprite walk cycles are hard!
April
Attended another successful MinneWebCon (I'm one of the organizers)
Worked on prototype "What Ya Doin?" app for Watermelon Sauce
Dug into the Akihabara HTML5 game engine
Released a run n' gun genre HTML5 game prototype starring Commander Clone
Began doing work with the Permanent Art & Design Group crew
Got to hang out with Ian Bogost via my very lucky connection at U of M Press
May
Founded my business, Zachstronaut LLC
Super awesome Hawaiian vacation
Swung through San Francisco, too. Man Man and friends!
Presented on HTML 5 gaming at IGDA-TC
Made the game Dangerous to "Go" for Ludum Dare 20 in 48 hours
June
Launched the Firebomb plugin for Firefox, made with Add-ons SDK
Created the Firebomb site, too, with exploding logo (click it!)
Exploited browser features to make CSS3 rain ripples
Worked on SQLite integration in NimbleKit for a client's iOS app
Visited Northampton, MA
July
Launched Firebomb AR for iOS, built with Titanium
Visited Mystery Cave and Niagara Cave in Minnesota
August
Started to learn the Impact.js game engine
Created a CSS3 3D Spark Shower
Dug further into node.js and socket.io
Created Apestronauts for Node KO with Team Watermelonsauce in Mountain View, CA
Got to hang out with my buds Paul Armstrong and Jesse Mullan
September
Responsive WWWhiteboard for 10K Apart
Presented Apestronauts to IGDA-TC
Updated my 360 degree Zachstronaut pixel art with some feedback from TIG Source forums
Saw Commander Clone running on Ryan Foss's Arcade Machine at IGDA-TC
October
Did a ton pixel art characters, landscape tile art, and story writing
Christopher Winter is a saint and made me music for my game
Released the first episode of my video game The Legend of Equip Pants
Went and saw some seriously Giant Pumpkins
Made a video about some of the quirks with jQuery Mobile RC1
November
Updated New Deal Design's website with a new iPad friendly design
Made use of Infinite Scroll and Masonry
Bent and shaped WordPress to my whim
December
Moved Scribbls and Apestronauts from SliceHost to Linode, reconfigured Ubuntu
Attended JavascriptMN Meetup and spoke about Apestronauts and node.js
Kris Layon's 2nd book Mobilizing Web Sites was released. I was Technical Editor again!
Documented some of the crazy bugs I found in iOS 5 while doing the New Deal site
Shared my custom bash shell environment ShortShell on GitHub
Helped make @shauninman's JavaScript code run 2000% faster :)
Turns out 2011 was an incredibly significant year for me. Beginning to work for myself full-time was a huge change, and one I had been pondering for quite awhile. I'm already going to be busy with work well past that one year anniversary. I feel very fortunate. I look forward to all sorts of exciting client work and creative collaborations in 2012.
Of course, the main reason I started working for myself was the flexibility. I wanted to be able to try out more ideas, and be free for more projects. I did manage to release my own iPhone App in 2011, as well as three of my own video games. And I collaborated with friends on one really neat multiplayer node.js game! I hope to learn more about myself as an artist in 2012, and release some app and videogame work in 2012 that is even more personally meaningful.
I made some wonderful new connections in 2011, including all the folks at the IGDA-TC community and at JavascriptMN. I will have all sorts of fun with all these people in 2012, and I'm sure I'll make lots of new friends, too.
I'd say 2011 was a year about mobile, iOS and Android, as much as it was a year about JavaScript. I have zero doubt that mobile and JavaScript (and thus "HTML5") will be front-and-center in 2012. I view mobile as kind of a given now. Saying that mobile is a big deal is kind of like saying the web is a big deal... "no duh!" JavaScript is really going to keep growing in a major way in 2012. WebGL is huge. Realtime multiplayer/multiuser via WebSockets is huge. JavaScript on the server with node.js is really interesting.
I wish you a wonderful 2012.
I've run into two bugs and a third bit of tricky behavior with Mobile Safari on iOS 5. I thought I'd share what I found in order to hopefully save somebody from pulling out their hair.
1. Bug With CSS Translated Form Fields
In this bug, giving keyboard focus (such as via JavaScript) to a form input that is translated off screen with CSS transforms causes the page content to shift position and the text input caret to render in the wrong place.
Check out my test case.
2. Inconvenient Behavior with Fixed Positioned Header Bars and Form Fields
Many of you may begin using iOS 5's new CSS position: fixed; support to add fixed nav or header bars to the top of the screen. If you have any form fields in your content that are given fixed positioning (such as a search field in your header bar), you must anticipate that your fixed positioned content will come unglued when those form fields are given keyboard focus.
See my example, including a suggested design fix.
3. Fixed Position Content May Become Un-Clickable or Invisible
This is a particularly pernicious bug. If you add content to your mobile web site / app via AJAX, or reveal hidden content to the user, and this new content scrolls off screen -- if a user reloads your site while scrolled to the bottom of this content, it may make your fixed positioned content (such as a top nav bar) either disappear or become temporarily un-clickable upon reload.
Read my test case for more information, and for a bug fix.
That's it for now. I hope this is helpful to you.
I'm very happy to announce my new short adventure/RPG game, The Legend of Equip > Pants: Chapter 1. It's got a spooky vibe. Hopefully you follow me on Twitter and you caught news of my game release on Halloween! I made my deadline goal. I didn't get every last detail in, but I did finish! Hooray!
This game is featuring music created by Christopher Winter. He really deserves a lot of major kudos, because he put together music for me in less than a day! (Totally my fault for ignoring music for my game until the last minute!) The game would not be the same without his efforts. Thank you, Chris! Thank you thank you thank you!
Well, this is it for now. I'm interested in doing a proper postmortem, because I learned a lot about my own personal game making process I'd like to share. I also have some thoughts on Akihabara vs. Impact.js. However, this will all have to wait for another blog post on another night, because I'm tired!
Boo! Halloween is my favorite holiday, and it is only just around the corner. Here's a spooky web demo I made earlier this month, and I wanted to share it with you. Write your own scary message in #b1000d!
The demo uses HTML5 Canvas to draw the falling streaks of #b1000d. In Safari/Chrome, I'm also able to fill the inside of the letters themselves with a shower of #b1000d. To accomplish this I use an off-screen canvas and the special CSS3 rule background: -webkit-canvas(mycanvas); to set the background behind the text to the canvas animation I'm doing in JavaScript. Then, I use another CSS3 rule -webkit-background-clip: text; to clip the canvas to only show the parts of the canvas that are underneath the text. Finally I make the text see-through with color: transparent; so we can see that clipped background. Go ahead and view source of the demo if you want to see more.
Before you go, I have another announcement, too. I'm working hard trying to complete my new game by Halloween. (I'm both making a game and keeping up with my client work, so wish me luck! heh) It will be a new chapter in the world of Equip > Pants. I hope that you'll like it.
Apestronauts is a multiplayer game of banana warfare developed in 48 hours by Team Watermelon Sauce for the Node Knockout competition. You can play online with your friends at apestronauts.com.
The game was written in JavaScript with a Node.js server using Socket.IO for realtime WebSocket communication. I created some notes for the JavaScriptMN meetup if you'd like to learn more about the development of Apestronauts.
Being fairly new to node.js, and even newer to the use of Socket.IO, I had a very interesting morning exploring some of the behaviors of Socket.IO. I thought I'd share the things that raised my eyebrows. There were some good lessons hidden in a basic Hello World example. There was also a really interesting question posed by the feature of Socket.IO that allows for a callback to be executed as an acknowledgement that a sent socket message was received.
I don't want to spend a ton of time on getting started with node.js or learning Socket.IO. But you should know that I'm just talking about a default, easy to replicate install of node and io. All I basically did is brew install node, curl http://npmjs.org/install.sh | sh, npm install socket.io and I'm off writing realtime code.
Hello World Has Surprise Lessons
The first thing I noticed is that it is a bit surprising — even alarming — how little you need to get a hello world example working. Let me show you the example and then explain the alarming part.
My project Firebomb is a Firefox plugin, a browser bookmarklet, and an iOS App. Firebomb lets you pretend to blow stuff up with 8-bit explosions. I'm sure you are probably familiar with Firebug, the ubiquitous debugging plugin for Firefox.
"If you can't fix a bug with Firebug, blow it up with Firebomb!"
Firebomb started out as a tongue-in-cheek parody of Firebug that I originally did for the 10K Apart Contest in 2010. Quality stress relief! Firebomb has since evolved from the original gag and developed a life of its own.
Get Firebomb for Firefox and Other Browsers
My Firebomb plugin for Firefox 4 and 5 was developed with the new Mozilla Add-on SDK that hit its 1.0 release in June 2011. Originally called JetPack, the Add-on SDK allowed me to build out a true plugin for Firefox using a smart JavaScript API. This was a really quick and fairly painless process. I definitely recommend the SDK for web developers looking to do a Firefox plugin. I also made Firebomb Lite as a browser bookmarklet so you could have the joy of firebombing Internet Explorer... I know you want to!
Firebomb for Firefox and the Firebomb Lite bookmarklet are both free and available for download today! Use them whenever you need more firepower than Firebug alone!
Buy Firebomb AR for iOS - Blow Stuff Up in Augmented Reality
I made Firebomb AR for iOS because I also wanted to bring the fun of 8-bit explosions (including gratuitous chippy kaboom sound effects) to the world outside of web browsers. Just like The Kids in the Hall used to pretend to crush heads between their fingers, you can launch the Firebomb AR App, aim your camera at a target, and pretend to blow it up by tapping the screen.
Firebomb AR is great for taking care of crashing computers, alarm clocks, piles of work papers, your boss… It's old school stress relief. Available in the App Store today for 99 cents! (Not for use on lolcats. Aim away from face. Batteries included.)
Buy Firebomb AR for yourself, or as a fun gift for the special geeks and kids in your life. (Big, grown-up kids, too!) Your purchase will support an independent App farmer who uses 100% organic 1s and 0s, and it will greatly encourage his odd sense of humor.
This CSS3 moving poem shows how you can use just a little CSS3 magic to create some refracting water ripples that run right through a page's HTML content. Raindrops and ripples are created with border-radius, box-shadow, and CSS3 scale transforms -- and they are animated with CSS3 animations! Firefox 5 lets us refract not just an image but actual page DOM content via smart use of -moz-element. This YouTube video explains it a bit more.
Please click the Like button on the Mozilla Demo Studio! Thanks!
I spoke at the Twin Cities, Minnesota chapter of the International Game Developers Association on Wednesday, June 8 about the current state of making games with JavaScript and HTML5. Here are my slides.
Update: Now with 100% more video. I start about 44 minutes in.