Tonight I finally finished the last chapter of the first draft of our book on the HTML5 Canvas. The text has been sent off for tech review, which means we still have a long, probably bumpy road ahead, but it still feels good to have another “product” in the pipeline getting ready for release.
After spending the past 8 months researching and writing about the HTML5 Canvas, it’s difficult to reflect on how I think the technology will fit into the overall RIA/Web App/Connected App universe. I have just been too close to it for too long. At the same time, Flash has still been a big part of my life, and it will continue to be for as long as I can imagine into the future. I feel like a proud parent with two children, and I sincerely want each one to be as successful as possible.
The HTML5 Canvas proved to be frustrating, interesting, and ultimately exciting to explore. We originally proposed ten 40-page chapters, but ended-up with eleven chapters that ranged from 30-80 pages each. The book does not have “game” in the title, but we could not help but focus on games as a way to explain how to program the HTML5 Canvas. In the course of those chapters we cover topics such as:
- What is HTML5
- What does an HTML5 page look like?
- What is the HTML5 Canvas?
- Detecting Canvas support
- How to create a “higher/lower” guessing game
- Using JavaScript events
- Mouse input
- Keyboard input
- How to display and manipulate text on the Canvas
- Shadows, alpha, and gradients
- How to export the Canvas as a bitmap into an HTML Window
- How To resize The Canvas on the fly
- How to communicate between HTML form elements and the Canvas
- How to draw shapes and animate them on the Canvas with paths
- Compositing on the Canvas
- Filling objects with colors, patterns, gradients, and bitmaps
- Using and Manipulating the Canvas state stack
- Rotations and transformations to path based objects.
- Creating objects with shadow effects
- How to display and manipulate bitmapped images on the Canvas
- Preloading images
- Animating an image with a tile sheet
- Applying transformations to images
- Creating and editing tile sheets with the Tiled editor
- Zooming and panning an image
- Scrolling images
- Manipulating the individual pixels on an image
- Point Collision Detection
- Bounding box Collision Detection
- Circle/Circle Collision Detection
- Creating push-buttons
- Creating sliders
- Creating Toggle Buttons
- Displaying HTML5 Video
- Optimizing HTML5 Video formats
- Loading Video onto the HTML 5 Canvas
- Creating video events
- Creating a video puzzle game
- Moving objects on a vector
- Bouncing objects off angles
- Bouncing objects off each other with friction
- Moving objects on Bezier curve
- Creating a loop with a Bezier curve
- Moving objects in circle and spiral patterns
- Bouncing objects with an without gravity and friction
- Easing in and easing out
- Preloading assets
- HTML5 Audio
- Creating an HTML 5 music player
- Optimizing sounds effects for an action game
- Creating s simple game framework
- A simple state machine with an interval loop
- Creating an asteroids style game with drawing objects
- Crating an asteroids game with images and sound
- Creating a particle pool
- Creating a tile based game
- Creating simple tile editor
- Using Phonegap to target mobile devices with the Canvas (iPhone example)
- Touch interfaces
- 3D on the Canvas with WebGL
- Multiplayer games with the Canvas and ElectroServer 5
There’s a lot more in the text than the above, but this should give you a good idea about what to expect. We have taken our many years of Flash game development, and we have attempted to bring those disciplines to JavaScript and the HTML5 Canvas. We attempted to “leave no stone unturned” when it came to the types of things we ourselves would need to know if we wanted to take our work onto the HTML5 Canvas.
Anyway, this was just a short update to say that we are happy to be finished with the first draft. There is a lot more work to go (and probably some struggles), but at least we can enjoy the moment. It feels good.