Can I survive HTML5? Yes, and so can you.
It took me a few months to finally crack open the beast, but while on a
little holiday vacation in California Wine country, I finally took the leap.
Steve has been dabbling in HTML 5 for the last couple months but I had not
started to look at it closely until this week. What I have found is an
interesting mix of the old and older and the new (which is not as new as it
seems as first).
Let’s start with the old
JavaScript is old. I know there have been 100’s of JavaScript libraries
written in the last 10 years, but JavaScript core 1.5 is essentially the exact
same language I used in 2000 when I created the first modern version of the
Hotwheels.com web site. Back then I was a senior web developer and I was sick
the table-based layouts we had been stuck with from 1995-1999 for web
development. The combination of CSS (IE was more standard than Netscape back
then, imagine that) and JavaScript allowed us to shed the static HTML 3.0
layouts we had been using and make up some cool interfaces with CSS, Div’s, and
z-indexes using JavaScript to control everything with a pretty decent event
model.
JavaScript is the language that fuels HTML5. I dropped web page development
in 2001 when I became a development manager and started to concentrate our team
on Flash and game development full time. So, when I decided to “re-discover” JavaScript again I found a language with a core pretty much un-changed over all
that time. Some new concepts such as a prototyped object model (exactly the same
as Actionscript 2 by the way) had been added but are not essential for making
use of the canvas (they do help though).
Now let’s move on the the older
The HTML5 canvas is basically a blit canvas. After checking it out with a few
little demos it resembles working on an Atari ST or Amiga more than working in
Flash. There are very few options for working with canvas images, but what is
there is very easy to use. In fact, it is even easier than dealing with blitting
in Actionscript 3. I can import a tile sheet and place a “scroll-rect” 32×32
tile in 2 lines of code. No need to instantiate Rectangle and Point objects, no
need to copy each pixel, etc. Now, I have not worked with it enough to know how
these might limit what I currently plan to do with it, but only time and
practice will tell. There certainly are options for applying matrix
operations on objects for scale and rotation as well as some graphics filters. I
have not tried to apply those to my imported images yet. I have no idea if
I will be able to rotate an imported image into 36 angles and place each into an
array for use during game-play. I will be testing that soon enough
The New
HTML5 has simplified much of what drove me nuts in HTML 4. The mime-type doc
type syntax has been modified to make it much easier to understand. They have
added new tags such as <header>, <footer>, <article>, <audio>, and <video> to
make page mark-up easier than ever. They have also added a slew of new API such
as drag and drop and offline database storage.
The best “new” thing is the idea that you can take a part of the screen and
devote image operations. You basically add a <canvas> tag in HTML, give it an
“id” and then script to it. Obviously this isn’t “new” because it is exactly
what Flash is doing, but for standards based HTML development it is quite new.
This allows you to use pretty much any development environment that you choose.
I find Dreameaver and MS Web Expression work very well, but notepad++, TextMate,
or any simple tool to create text files will do.
All of the browsers that support HTML 5 (Safari, Firefox, Chrome, etc) have
either built-in tools or easy plug-ins for debugging JavaScript, writing the
console (for trace actions, etc), and more. I’m not sure about profilers and
other advanced tools, but since the “compiler” is simply a web browser
interpreting code on the fly there certainly must be pre-existing useful tools
for this purpose.
This takes all of the “cost” out of developing applications. There are no
expensive tools to buy (similar to the Flex SDK). You only need a little
imagination to break out of the confines of the technology. Everyone who have
worked on web-based games, especially in Flash has had to do this for years so
there really is nothing new about it.
What’s new is the chance to apply our skills to a new, unproven
technology and see how far we can push it. These skills will be indispensable in
the near future as the technology matures. There’s something special about this
that intrigues me and makes me want to see where this goes.