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. There's a bit of a flicker caused by a bug (although it kind of adds to the CRT effect!) I also applied the effect to this RPG game that doesn't have the same flicker issues. And here's a screen capture of the effect on YouTube.
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...
Protoboros is a local 2-player video game I made in 48 hours for the Global Game Jam 2012 theme of "Ouroboros." You and your friend play as snakes that try to bite each other's tails.
The game uses a custom made JavaScript engine with procedurally drawn HTML5 Canvas graphics. I'm particularly fond of how the game's background / ambient environment responds to the emotion and intensity of the gameplay. Whenever there is a rising level of danger that a player is about to receive damage the game's environment grows more red and the motion speeds up.
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!
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.
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.
