All posts tagged ‘Animation’

Building Better HTML5 Games With Canvas

Canvas drawing speeds in Firefox 4 beta 7

The Canvas element is one of the most exciting parts of HTML5. It gives web developers a blank slate to create animations, games or even interactive video elements, all of which previously required plugins like Flash or Silverlight.

Canvas is not, however, a panacea — just because you can does not mean you should. Canvas-based animations can slow down pages, send your PC’s fan into overdrive and produce stuttering, frame-dropping ugliness. The stunning HTML5 experiment The Wilderness Downtown, was indeed very cool, but it also nearly crippled even the newest PC hardware.

As with most programming, the trick to using HTML5′s canvas element is knowing how to optimize your code so it works within the limits of today’s browsers.

We’ve looked at some tips and tricks for working with canvas in the past. At Mozilla’s recent Open Web Gaming conference, Ernesto Jiménez, lead developer at gaming company Six to Start, outlined some more handy tips for building canvas-based HTML5 games.

While a few of these tips are specific to games, in general they’re simply good ideas for anyone working with the canvas element — whether it’s games, animations or graphs.

Jiménez’s covers tips like drawing new elements offscreen and then copying them into your onscreen canvas to avoid flickering animations, and minimizing processor-intense operations like getImageData or fillText. He also talks about how to break up your animations into multiple canvas elements for smaller, faster graphics.

Jiménez’s slideshow gives a basic overview of the tips, but there’s also a video of the talk which includes a bit more detail on why these tips are helpful:

See Also:

File Under: HTML5

Play Pac-Man in HTML5

Programmer Dale Harvey has created a playable version of Pac-Man using only web standards.

To rebuild the same gameplay found in the arcade classic using browser-native code, he’s relying on local storage, HTML5 audio, Canvas and @font-face. Harvey is sharing all the code on Github as well, so you can run it locally.

Reminiscent of Google’s recent Pac-Man port, Harvey’s attempt is yet another example of web standards being used instead of Flash to create animated, interactive experiences in the browser.

The Flash plug-in is still the most popular platform choice for browser-based games, and it has some advantages over HTML5. Most notably, a Flash game would work in any browser that allows the plug-in, but to play Harvey’s game, you’ll need to use a browser that supports the elements he’s using — Firefox, Opera and Chrome work just fine, but IE8 is a no-go.

On his blog post about the project, he notes some of the other stumbling blocks he encountered when porting the game. For instance, there’s no easy way to loop HTML5 audio, there isn’t a convenient tool for drawing Canvas shapes, and using Canvas/HTML5 for a game even this simple still puts more strain on your CPU than using Flash.

[via Hacker News]

See Also:

File Under: CSS, HTML, Web Standards

The Solar System, Rendered in CSS and HTML

A web developer named Alex Giron has created a working model of the solar system using only web standards.

It’s fully animated — though Alex takes advantage of some new CSS 3 features (border-radius, transforms and animations) and utilizes the -webkit prefix, so you’ll need to view it in Safari or Chrome to see the planets move around the sun.

Firefox and Opera users won’t see the animations, just a static CSS layout. But the hover events work, so you can mouse over each planet and learn the story of each celestial body. And yes, he included Pluto.

Here’s Alex’s blog post that includes a walk-through of the code.

Bonus: Alex’s screenshot of the same page in IE.

[Via kottke]

See Also: