Games account for about half of the apps in the typical app store. They are among the first thing ported to any new platform. Games help drive technology forward. This year's edition of the popular HTML Canvas Deep Dive will focus specifically on building cross platform games for mobile and desktop. We will cover everything needed to build basic games with animation, scrolling, sound effects and music, image loading, sprites, and even joystick support. Then we will learn how to package them to run on desktop and mobile devices, both in and outside of app stores.
Hi Welcome to HTML Canvas Deep Dive. This is the third year I've done the talk and I think it will be our most exciting one yet. The problem with HTML is that it keeps getting bigger. The technology grows to encompass more things. First it was simple 2d, then 3d, now audio, camera input, and even joysticks. And this is just the media related technologies. I haven't even touched on networking and intensive processing. And they are all needed to get the most out of Canvas. Fortunately, every year I record the new material in my free online book at my website. This means you can still learn the things we don't have enough time to cover here. So after this workshop please check it out. The resources you will need for today's hands on workshop are available here.
Since we can't cover everything, this year I decided to focus on one area: games. Games are a great way to learn the HTML Canvas technologies because they touch on everything: graphics, sound, performance tuning, and mobile support. If you can do it with a game, then chances are you can do it in something else.
But before we dive into games, just what is HTML Canvas?
Since Canvas is a pretty well polished HTML standard it is now supported by every major browser, even IE. In fact, IE 10 for desktop has blisteringly good performance on Windows 7 and 8. Canvas is also supported in virtually every smart phone browser, though it's not as fast as on desktop.
Before we start designing our game, lets look at a bit of canvas code.
Follow these examples from chapter 1.
The ebook has more in-depth examples showing how to build bar and pie charts.
It's also important to mention that Canvas is an open standard. Not only does it mean that different platforms support the same features (roughly), because it is open you can implement it on new platforms as they come along. This gives Canvas a great future.