HTML5 Game: Dead Valley

GTA Style Zombie Survival in a Randomly Generated World

I’m pleased to announce the release of my new game Dead Valley.

Play it!

It currently does not work on mobile devices, but that’s coming soon!

Here’s a video showing gameplay:

I’ll eventually write a post on the basics of how it works but for you buzzword compliant people here’s some of the HTML5 technologies I used: Web Audio, Canvas, Gradients, CSS 3D Transforms, Local Storage, Multiple CSS Backgrounds, CSS Opacity, and Web Workers.

Enjoy!

Posted in Coding, Dead Valley, Games, HTML5, Javascript, Projects | 55 Comments

Zapnutter

The animation I did for the Center for Cartoon Studies Animation for Cartoonists workshop over the course of a week during this summer.

We did the whole process; coming up with ideas and workshopping them, storyboards, animatics, audio and final production. It went too fast — I miss all the great people and energy.

Thanks Scott and Jennifer and all the students and staff for making it a great workshop!

Posted in Animation, Projects | Tagged , , , | 2 Comments

Welcome Visitors

When I released my HTML 5 Asteroids Clone last year it got a fair number of hits as the link was passed around the Twitters and random blog postings. Soon the hits dropped off and traffic normalized to slightly higher than before, still mostly from various blogs.

WHOA TRAFFIC
The traffic spike from the release of HTML 5 Asteroids

Lately I have been receiving some spikes in traffic directly to the HTML 5 Asteroids game almost all of which had no referrer. It was a puzzle — up till now most of my traffic had come from a specific source but these visitors were coming directly to my site, from a bookmark, or just typing in the URL.
At first I just shrugged it off, I figured some people had bookmarked the game and played it occasionally. Still the traffic kept coming, only abating on the weekends, and I couldn’t think I’d get that many hits from people casually playing from bookmarks. The WordPress stats package wasn’t giving me much beyond the plain quantity of traffic.
Finally I installed Google Analytics. I had never used it before but I figured it may give me more insight to where this traffic was coming from. It would at least tell me what kind of browser they were using.
So I waited a few days for it to pull some data in. This is what I saw:

Internet Explorer? IE doesn't support the canvas element. The game is unplayable on IE!

Almost all the traffic is from Washington State
Almost all the traffic is from Washington State?

Traffic only from Seattle
Seattle?

All the traffic is from Microsoft Corp
Microsoft Corp?!

All the traffic is from IE 10
IE 10!

Microsoft Engineers are using my HTML 5 Asteroids game to test IE 10’s new canvas element.

There isn’t much to say but: Awesome!

Welcome Microsoft Engineers! Thank you for playing my game!

Posted in Blog, Games | 2 Comments

HTML 5 Asteroids on the iPad

I’ve added touch controls to the HTML 5 Asteroids game that will only appear when you’re running it on an iPad.  The game will expand to fill the whole screen for maximum asteroid blasting action.  Orient your iPad in landscape fashion!

Play It!

 

There are a couple caveats (warning some nerdy content ahead):

Tunneling Effect

On the iPad the game runs at around 22 frames per second at its peak, not nearly as good as around 40 on a laptop, though it is enough for gameplay even if it can get choppy at times when there’s a lot of stuff whizzing around.

Unfortunately I’m only testing for collisions when the objects are rendered so it’s quite possible with lower framerates to have a bullet flying out of your ship first get rendered on one side of the asteroid you’re trying to pulverize and in the next frame get rendered on the other side letting it sail undamaged into your ship.  This is called the tunneling effect.  This is not a problem on a laptop or desktop because the framerates are high.  Since we’re sampling less per second (~22 verses ~40) a moving object is drawn less times though it’s traveling the same distance.  In other words if an asteroid travels from the top of the screen to the bottom of the screen in one second, on your computer it will most likely get drawn 40 times during that trip and on an iPad it will get drawn only 22 times leaving larger gaps between the drawings.  These larger gaps leave more of a chance for things to slip through and not collide when your eyes say they should have.

I’m considering augmenting the collision detection to remove the tunneling effect but it will need extra math which means slower framerates, at least initially.  It might be a better use of my time to pump framerates up.

Buggy Touch Events

There’s a bug with the iPad’s implementation of touch events in Javascript: if you have two fingers on the screen and raise one of them, a “touchend” event gets fired containing a reference to both fingers even though the second one hasn’t been raised.  If you then raise the second one, a “touchend” event is not fired.

It drove me nuts trying to figure this out and I haven’t been able to work around it.

What this means for the game is that using two fingers at the same time will get frustrating fast as the control you’re holding down will stop working periodically.  I suggest tapping for the best experience instead of holding.

Oh, this does not happen on the iPhone in case you were wondering, it works as expected! I have sent a bug report to apple (with a sample html page) and hopefully they already have a fix that’s not available yet or they will fix it for a future release.

On a side note, why aren’t Apple’s bug lists searchable by the public?  They must get reams of dupes.

In any case, let me know how it works!

Posted in Coding, Games, Javascript, Projects | Tagged , , , , , | 2 Comments

HTML 5 Asteroids

For some months I’ve been playing around with HTML 5’s Canvas element because I was curious about it, especially after seeing it run Flash.  I hacked at it for a while then realized I had produced an Asteroids game.

Play It!

 

The source code is up on GitHub!

The Canvas element is super cool.  Basically all of the sprites in the game are simple paths defined by an array of points.  These points are translated, rotated and scaled based on their state at any given point in the game using the standard Canvas transformations.  Plus it gives it a nice retro feel.

Let me know what you think!

Here’s some cool links to things that helped me out with the game:

  • Determining Whether A Point Is Inside A Complex Polygon.  Firefox does the wrong thing when it comes to isPointInPath(), the main Canvas method I used for collision detection; It doesn’t apply the current transformations before determining if there’s been a collision (and they won’t fix it for some reason).  I implemented this method to get around the problem but it works fast enough it could be used on all browsers.
  • Metanet Software, the makers of the awesome flash game N, have made a couple of extremely useful tutorials on collision detection.  These describe some of the techniques I used in the game, in particular the grid based broad-phase they describe in their second tutorial.
  • I used typeface.js ‘s convert tool to convert the awesome Vector Battle font into some JSON point data that could be easily used in the canvas.  Typeface.js is a neat library for easily embedding arbitrary fonts in the page.  On supported browsers it creates small canvas elements and renders the font inside based on the CSS.  I borrowed bits from the library to get the font rendering.
Posted in Coding, Games, Javascript, Projects | Tagged , , , , | 72 Comments

Ruby Vim Fu

This last Thursday Alf and I gave a talk at LA Ruby on Vim, in particular how we use Vim to edit Ruby code.  Giles asked us to present on Vim months ago and we finally got around to doing it.

I think it went well considering we probably spent more time figuring out the background color scheme on our slides than preparing what we were going to say.  I wasn’t worried, I’ve been using Vim for 15 years now so it was my favorite kind of speech: one where I felt completely at ease with the subject matter.

In any case here are the slides in a viewable form on Github, as well as the source.  We used the Slideshow gem to set them up.

The slides probably will not be of any particular use to you since they’re rather sparse.  We however added a bunch of links on the end to blogs/screencasts/cool sites we like as well as all of the plugins we mentioned during the talk.

So you don’t have to hunt through the slides here are those links in all their glory:

Links

http://www.vim.org/

MacVimhttp://code.google.com/p/macvim/

http://vim.wikia.com/wiki/Best_Vim_Tips

Cheat Sheet!http://www.viemu.com/a_vi_vim_graphical_cheat_sheet_tutorial.html

http://items.sjbach.com/319/configuring-vim-right

Screencasts on Vimhttp://vimcasts.org/

Vim Tip a Day on Twitterhttp://twitter.com/vimtips

http://durdn.com/blog/2008/11/26/vim-mind-share-soaring-roundup-of-10-vim-articles-recent-and-older-gems/

Vim Recipieshttp://vim.runpaint.org/toc/

http://biodegradablegeek.com/2007/12/using-vim-as-a-complete-ruby-on-rails-ide/

Plugins

The Rails Pluginhttp://rails.vim.tpope.net/

NERD Treehttp://www.vim.org/scripts/script.php?script_id=1658

Command-Thttp://www.vim.org/scripts/script.php?script_id=3025

BufExplorerhttp://www.vim.org/scripts/script.php?script_id=42

AutoTaghttp://www.vim.org/scripts/script.php?script_id=1343

Vimballhttp://www.vim.org/scripts/script.php?script_id=1502

NERDCommenterhttp://www.vim.org/scripts/script.php?script_id=1218

NERDSnippetshttp://github.com/scrooloose/nerdsnippets

Alignhttp://www.vim.org/scripts/script.php?script_id=294

RubySingleTesthttp://www.vim.org/scripts/script.php?script_id=2869

Posted in Coding, LA Ruby, Ruby, Vim | Leave a comment