Great References for HTML5 Games

Brandissimo! is in the middle of producing a massively-multiplayer online role-playing game (MMORPG) in HTML5, scheduled to launch this fall. This universe will have HTML5 games, a dynamic scoring system and virtual economy, chat, avatars, and just about everything else you can imagine. Our goal is to build a world that is accessible on desktops, tablets, and smartphones. We could not be more excited about it.

How does a team even begin to build such a thing? We didn’t wake up one day and suddenly become HTML5 game experts. While HTML5 at its core is simply markup language — just like HTML — creating HTML5 games and entertainment experiences is much more complicated than that. So we spoke to a lot of people and we read a lot of material and now we know just enough to be dangerous.

Here are five great resources that have helped us:

  1. The Reality of HTML5 Game Development

    The best place to start is Rich Davey’s unparalleled treatise on HTML5, The Reality of HTML5 Game Development and Making Money from It. You can think of Davey’s essay as a sort of Hitchhiker’s Guide to the Galaxy … of HTML5. (He really should put “Don’t Panic!” in large red letters at the beginning.) Rich explains everything — and I mean everything — you need to know about the current state of HTML5 game development. And he does so in plain English, so even your CEO will be able to understand. (That’s a huge bonus to us geeks.)

  2. Slynk’s Revenge

    The article Beginning HTML5 Game Development – and its several sequels — are a good starting point for someone just trying to learn the basics. Slynk covers most of the basics, like using the <canvas> tag, adding sound, rudimentary drawing techniques, and how to bind simple events to functions for input handling. His clearly-written blog posts are very easy to follow and should be required reading before you start building the next great web app.

  3. Speedy Sprites

    Bruce Rogers and Cory Ondrejka wrote HTML5 Games 0.1: Speedy Sprites, and in-depth analysis of the results of their HTML5 game benchmarking tool –JSGameBench – and the data they uncovered when comparing the various methods for high performance sprite-rendering in browsers.

  4. SixRevisions

    Developer Alex Kessinger has written a fantastic step-by-step tutorial on How to Make an HTML5 iPhone App. Alex discusses all the key elements of creating an HTML5 game, including the application cache, notes about differences in available screen real estate in development mode, setting Apache headers, offline caching, and a slew of other important details you will encounter when building your first HTML5 game.

  5. HTML5 Rocks

    The “gaming” section at HTML5 Rocks contains dozens of tutorials, articles, and case studies related specifically to building HTML5-based games. Some of the recent entries they’ve posted are:

These five resources have been instrumental to us as we produce HTML5 games, and we frequently reference them still. Like any emerging technology, many of the specific details are going to evolve as more and more developers get involved. But the core concepts presented in these articles should remain fairly stable and useful for anyone looking to get started. If you have any favorites that you’d recommend, please drop us a note!

Is this really a good idea?

If you’ve ever been in a creative brainstorming meeting, invariably someone (hoping to inspire participation from the silent group of creative people) declares ‘there are no bad ideas.’ And you think: licking a frozen pole, alcoholic energy drinks, mullets. These are bad ideas. There are a lot of bad ideas out there and you know it. But, no one ever set out to create a bad idea.

So how can a creative company tell a good idea from a bad one?

It is tricky sometimes, and so if you’re not confident by just looking at what was created it’ll help to look at how it was created.

Good ideas grow on a good foundation. To give you an idea of what I mean, here’s the sort of foundation we’ve built many a good idea on:

When I look around our office, do I see creative people that follow the rules? Execute assignments to the letter? Universally accept and respect management’s ideas and direction? No way! Like many managers it makes me want to cry. But unlike most managers, mine will be tears of joy.

Here’s why. We hired these people because they good at what they do, so let them do that. Let them go a little. Let them enjoy the process and the work personally. So if that means letting them break a few rules, ok. Maybe you’ll even want to encourage your team to feel a little rebellious once in a while, to drive right past those guidelines you laid out. Because it’s those little side trips that often bring back really nice souvenirs … like good ideas.

Looking around the office again, did we hire all the best experts in the field? I’d have to say no. Again the tears of joy flow. We hire experts, but not necessarily in the field. We believe good ideas come from recombining existing ideas and people who see something differently—and the so-called experts sometimes are in a rut. If you want to create something people haven’t seen before, cross-pollinating with staff is a good idea.

Are you set on doing something completely new, without precedent and not contingent on any other work, people or idea? Yikes, I’m not sure I can help you. That’s risky business. But if you are doing something new with old ideas, that’s a good foundation to build on. In fact, that’s where the really great ideas come from.

And of course you need to know your audience better than they know themselves. It’s the only way you’ll be confident you’re delivering something meaningful to them. Think like your audience and if you are excited by it, given all you know about your audience will they be excited by it.

Do you share ideas with friends in the industry? Not the NDA breaking kind of chit-chat but a good healthy (and legal) exchange of ideas. That’ll you keep abreast of trends and shifts in the industry and may keep you from falling head of heels for your (bad) ideas.

A couple of cautions:

Don’t beat the idea to death. Don’t talk it into bland oblivion.

Avoid the knowing-doing bog of doom. At some point you know you have a good idea if you’ve done the above, so go do it. No more chit-chat: execute it, get ‘er done.

If you build a good foundation on which good ideas are encouraged and allowed to flourish, you’ll never have to wonder is ‘this a good idea?’–you’ll know it is.

Your Transmedia Brand: It’s a floor wax…AND a dessert topping!

There is a great classic SNL skit, starring Gilda Radner, Dan Akroyd and Chevy Chase, called “Shimmer.”  It’s a floor wax AND a dessert topping: http://www.hulu.com/watch/61320/saturday-night-live-shimmer-floor-wax

In addition to simply being funny, “Shimmer” illustrates that the same thing can have different meanings to different people … and so can your brand.

Thus when you are distributing your brand across different media, keep in mind that it will mean different things to different people.  As such, your brand can be presented in a distinct manner, across each medium, in a way that is optimized for each medium.  The key is that your core brand essence remains consistent in each instance.

Brandissimo! built the NFLRUSH Zone brand, for the National Football League, from scratch.   We started off as an online virtual game world.  Here we utilized the NFL brand attributes of competition and teamwork to foster an environment where kids play video games, competing against one another and representing their team just as NFL players do.  That’s our floor wax.

NFLRUSH Zone has been a great success—over 150 million gameplays in four+ years—and is expanding into other media.  Season one of an animated NFLRUSH Zone television show—Guardians Of The Core—aired on NickToons last year. Guardians Of The Core follows a kid named Ish on an adventure where he battles the evil robotic Blitz Botz and helps return each NFL team’s shard—its power source—to the team’s home stadium.

Guardians Of The Core is about overcoming fear, fighting the good fight and being a hero—slightly different than the competition and teamwork attributes of the NFLRUSH Zone online virtual game world.  That’s our dessert topping.

Same brand, different medium, different brand attributes, same core brand essence.  What we did was tailor—optimize—the brand to each medium and each audience but we kept the core brand essence consistent across each.  Visually that was easy—the NFL and its teams have very distinctive marks.  Emotionally, that essence is team affinity.  Online, team affinity manifests by kids playing for their teams and wearing team gear.  On TV, team affinity is represented by celebrating team Rusherz (fictional guardians) and team stadiums.  It works and it works well.

Got more media?  Then we’ll have more—different—dessert toppings!  We brought NFLRUSH to the world of apps, producing the NFLRUSH Pick ‘Em app for iOS and Android.  Here fans are engaging in the real world NFL, guessing which NFL teams will win each week during the season.  Pick ‘Em utilizes the NFL brand attribute of competition—there’s a leader board, leagues and prizes—but in a different manner than in the NFLRUSH Zone virtual world and different than Guardians Of The Core.  Meanwhile, the app gives kids the chance to pick their own team, highlighting the brand essence of team affinity.

Same brand, different media, slightly different brand messages tailored to the medium, consistent brand essence across the board.  It’s a floor wax…AND a dessert topping.

I’m not saying that brand consistency should be abandoned…absolutely not!  But flexibility is sometimes required when you’re expanding your brand experience to different audiences in different media. You’ll wind up growing your brand, building your audience and ultimately increasing the value of your brand equity.  And like Gilda Radner, you too will look at your brand and say “look at that shine!”