By Jeff Fulton

Steve and I were asked to speak at DevCon5 again this last week. We did two sessions on the HTML5 Canvas.   At the same time, we are working on a second edition of our O’Reilly HTML5 Canvas Book. We were able to pull content from the betas we are working on for the new edition and use them for the sessions, so it was a win-win just to work on the presentations. It helped us focus on what new is going on with the Canvas and HTML5 gaming communities and pin-point areas we felt needed to be covered.  What we prepared was actually one lone 3 hour session, made up of 200 slides and 700MB of demo files.

The first session was an introduction to the Canvas and a new Hello World App (that is going to be part of the second edition of our book). The 2nd session focused on game and app demos demonstrating what can be accomplished in the 2d context .  We spend most of this session showing off new game demos for the 2nd edition of the book that all play on and iPad with full frame rates (these will also feature heavily in the new edition).

We flew up Wednesday (but did not have to present until Thursday morning) and were supposed to leave at 11:30. Of course as soon as we got to the gate, we found that  but our first flight was cancelled.   We were forced onto a later flight. There were no other incidents boarding, and the Southwest staff was excellent as always.

On the flight I was able to finally get my first cup of coffee for the day. Southwest coffee is is pretty damned good, and it went well with my “Runners World” magazine.    We even got peanuts AND pretzels, so it was trending nicely from kind of sh*tty morning to respectably OK afternoon.  When we landed, Steve and I we’re both famished, and we found an excellent pizza place in the terminal that help settle our growling stomachs.

It didn’t take us very long to clear our plates of pizza and salad, but when we were finished, something strange seemed to be happening at the airport. All of the security buzzers and flashing lights were going at each terminal door as we trekked to the sign that said “Taxis and Rental Cars”. By the time we made it to the terminal exit, this is what we found:

The TSA officer was quite nice and let us take her picture as she stood guard in from on a locked down security door.   We were told to “go have a drink” and wait out what ever was happening.  Steve and I were pretty anxious to get to the hotel, drop our stuff and make it to some of the later afternoon sessions of DevCon5. We were already late by 2 hours, so this was putting a serious damper on our schedule.

The security alert was finally called off (or they caught their perp, we were never informed what was going on).  We decided to use a rental car rather than Taxis this time figuring it would be any less expensive. Steve secured us some sort of random mid-sized sedan and we took it on a ride to downtown San Jose. It really is a beautiful little downtown with a big city feel.

When we finally made it to the conference center (Right near the Great America Theme Park in Santa Clara) we were able to see a great session on Sencha Touch 2 by David Kaneda.  This was especially interesting as we have many clients asking for HTML5 interfaces that use CSS3 rather than the Canvas.
Next up was a session called Games using HTML5 by Keith Wright and Jeff from MocoSpace. We were really interested in this one as we needed to make sure that they were not presenting anything that duplicated our decks and also wanted to see how a commercial game company was utilizing the Canvas. It turns out that that don’t use the Canvas much and pretty much rely on CSS3 and WebKit transformations. They also target ALL phones and not many modern tablets so need code that hits the standards and uses CSS3 cascades to make sure that even the worst device will be able to play their games.    They are monetizing based on micro-transactions and are basically a mini-Zynga of the mobile game world.

At the end of the sessions we finally had a chance to take a break and hit the social hour for free beer and snacks.

We had planned to go straight back to the hotel and work out kinks in the presentation or meet one of our local friends, but the organizers of the conference invited us to dinner at the hotel to discuss a few topics. The Hotel (where the restaurant was located) lobby had a hallway filled with interesting art objects.

 

After we made it back to the room, we set about making some small changes to the presentation based on some of the things we had learned and talked about with various conference participants.   I finally got to sleep about 1:00 AM, and we were set to start at 9:00 AM doing out 3 hour diatribe.

The first part of the  session consisted of the results to a survey that we conducted on this site asking game developers if they planned to make an HTML5 game this year.  We then showed how to embed video on the Canvas and and annotations via JavaScript.  We are still collecting data for this survey, so take it if you want to participate.

 

We then went into an explanation of the Canvas, the basic properties and showed a couple demos of it being used to replace some traditional Flash style content (iframe banner ads, motion graphic presentations, and games of course).  We also covered a new “Hello World” that pretty much hits on everything the Canvas can do from Text to Images to matrix transformations and more.   After 6 iterations we finally showed one that had each of the font letters rotating, scaling, and setting its own alpha in a loop using the text properties to find the center of the letter and use that as the transformation point.

See this example running.

We then re-worked the entire demo, showing how it could be done with images instead of text for a much cleaner effect:

See the example running without scaling.

See the example running with scaling.

We then went through the Text Mangler application from the O’Reilly Canvas book and demonstrated some more Canvas basics such as drawing with paths, transformations, saving and restoring the Canvas State, basic tile sheet use and animation, and discussed the future of HTML5, the Canvas and Flash.

After that first 90 minutes, Steve and I were pretty tired. It had been 89 slides in 90 minutes with a lot of questions concerning when how or where to use the Canvas Vs. CSS transformations and other topics.  In 15 minutes we needed to start back up with slide 90 and start the second part of the discussion.

This section started similar to the first with a description of who we were, a little about the HTML5 Game Development Survey,  and then we jumped into more application demos.   The first thing we showed was a new version of Steve’s video Puzzle from the Canvas Book.  This demo takes a video dynamically embedded on a hidden DIV using the HTML5 VIDEO tag and then uses it as the content for drawing to the Canvas. This was used to demonstrate a game where the player swaps puzzle pieces of a video while it a playing.

After the video puzzle demo, we explained in detail how the Canvas makes use of the video, showing the code necessary to use the hidden source and slice it into pieces that can be used with JavaScript.   Next we demonstrated how to create a pool of objects by showing by showing off a new application that is going to be part of the next edition of the Canvas Book, Atari 2600 Fireworks.

Here is a link to the Fireworks demo that can be played in a Desktop web browser.

We went on to speedily cover topics such as simulating drag and drop, using Google Street View along with a transparent Canvas overlay, and then began a discussion of transferring 4 games to work as full screen iPad / iPhone 4 apps. We did this with  games and all will be part of new book edition.

Color Drop was a game we originally created for our Flash Games book. We wanted to find a good touch style game that would translate to the iPad and decided to convert the AS3 version to Javascript and the Canvas. After we showed off Color Drop we went through some of the specifics that are needed to first scale an app to the size of the device window and then translate clicks from the scaled app back to the code that was created for the non-scaled version.

Here is a link to the Color Drop HTML5 Canvas demo that can be played in a Desktop web browser.

Here is a link to all of the iOS demos. They must be played on an iPad or an iPhone 4. In some cases a Kindle Fire will work also.

Next we showed off a new game demo using Sprite Lib GPL for pixel graphics, and of course targeted at the iPad:

 

Here is a link to the 1945 HTML5 Canvas Demo that can be played in a Desktop Web Browser.

After going over a few physics demos using the standard Javascript math library (not a physics engine),  we showed off our 3rd iPad targeted game, Brick Basher.

Brick Basher HTML5 Canvas Demo for Desktop Web Browsers

The next section showed off demo applications from from Producto Studios work, showing off various HTML5 Canvas works in production, including games and Flash replacement content.  After those, we started up a discussion of the Geo Blaster games from the Canvas Book, the step timer used to create smoother motion, and the difference between using images with pre-calculated rotations instead of paths and transformations to make the game.  Adding on to this we went right into showing off Retro Blaster Touch, a new version of Geo Blaster with graphics taken from a Flash game I made with Marc Manalli’s graphics in 2007.    The mobile version was basically just Geo Blaster with fancier graphics, auto fire, touch controls and the screen scaled to the width of the user’s iPad (or iPhone 4).

This is the original version that can be played in a web browser.

The iPad version was then created and scaled up to fit the Landscape view of the device.

At the end of the session we showed off some game demos by indie developers who are currently targeting HTML5 game portals with Canvas games.  These included  Nutmeg by Richard Davey of Photon Storm,  River Raider by Mark Wilcox,and  Blast Effect by Bruno Garcia. All three are great Canvas games by indie developers who put Canvas games on portals to target mostly iOS devices.

After the three hours of sessions, we were pretty much cooked. We had a flight to catch at 2:30, but wanted to meet up with a few people first.  We caught up with Tina Tran from Funsockets, Tony Parisi (who is writing a WebGL book for O’Reilly), and Johnnson Nakano from Ludei Games.  Funsockets is a new HTML5 gaming platform that sounds pretty exciting. Ludei is building Canvas games that target the iOS devices, and Tony was (partially) responsible for creating VRML.

After a small amount of business discussions,  we got in the car, and attempted to get back to the airport but were were thwarted by an endless steam of people protesting.

When we finally got through the protest, we made it in time to sack out at the airport for a few minutes before the eventual flight home.  It was a very successful trip that opened our eyes to the power of some of the non-Canvas HTML5 possibilities but also help re-affirm our belief that in time, the Canvas will one-day be the main game publishing platform on the web.

Here is a link to all of the iOS demos. They must be played on an iPad or an iPhone 4. In some cases a Kindle Fire will work also.