8bitrocket.com
7May/131

HTML5 Canvas Book Example Files

HTML5 Canvas Book Example Files

Just in case these are not just available yet on the O'Reilly Site

http://www.8bitrocket.com/html5canvas/2nd_edition_examples_2_4_8_9_10.zip

http://www.8bitrocket.com/html5canvas/2nd_edition_examples_1_3_5_6_7_11.zip

3May/130

In Celebration of Day Against DRM (Fri, May 3, 2013) 5000+ titles 1/2 off including HTML5 Canvas 2nd Edition

HTML5 Canvas 2nd Edition

HTML5 Canvas 2nd Edition

              In Celebration of *Day *Against DRM

Save 50% on 5000+ Ebooks & Videos

(Save 60% on orders over $100)

Having the ability to download files at your convenience,

store them on all your devices, or share them with a friend

or colleague as you would a print book is liberating, and is

how it should be. This is a critical moment in the fight against

DRM. A proposal currently being considered by the W3C would

weave DRM into HTML5 — in other words, into the very fabric of

the Web.

 

This includes the latest edition of our book, the just released HTML5 Canvas 2nd Edition.

 

Ebooks from oreilly.com are DRM-free. You get free lifetime access, multiple file formats, free updates.

Use discount code: DRM2013 - Deal expires May 3, 2012 at

11:59pm PT and cannot be combined with other offers.

24Apr/130

The HTML5 Canvas Second Edition Has Been Released (Deal of the Day, 50% off)

HTML5 Canvas 2nd Edition

HTML5 Canvas 2nd Edition

 

The Second Edition (so the 3rd book) I have written with my brother Steve, The HTML5 Canvas was released today by O'Reilly. If you are interested in this wildly popular subject (for tech heads), you can get the E-Book edition for 1/2 off by using the code DEAL on the Publisher Web Site (It's the DEAL of the day).

http://shop.oreilly.com/product/0636920026266.do?code=DEAL&imm_mid=0a68f1&cmp=em-code-books-videos-deal-day-html5-canvas

This edition has added and changed over 50% of the original First edition. We have added A LOT of game related topics (as we do in everything we create). These include pixel perfect collision detection, Box2D Physics, A* Path Finding, targeting mobile browsers with full screen scalable content, and much much more. Every chapter has been re-written with additional content added and less popular or redundant content removed.

There are print editions available also at all major book retailers.

16Dec/120

Friday was a Tough Day for a Deadline, but HTML5 Canvas 2nd Edition Is Nearly Complete

By Jeff Fulton (8bitjeff)

Tough Day for a Deadline, but HTML5 Canvas 2nd Edition Is Nearly Complete

There will be no Atari video game retrospectives this weekend on 8bitrocket. Far too many little ones will not get to experience their own version of the same thing, never have a chance to write about it some day, and never have the joy of spending another holiday season with their families. Our hearts are broken here at 8bitrocket towers. For a site dedicated to things we loved as children and exploring how to re-visit and re-create those memories in many different ways, we just can't celebrate anything like that right now. What we have is work though, and as anyone who is trying to make it without any corporate backing knows, work MUST go on, no matter what happens, or food doesn't make it on the table, health insurance premiums are not paid for, car loans and housing payments go un-paid and life just kind of stops and spins like a proverbial hamster on a habitrail.

First, here is a list of the first names of all the brave little ones and their hero protectors that didn't make it out safely.
I can't fathom the evil that would do such a thing:

CHARLOTTE, DANIEL, RACHEL, OLIVIA, JOSEPHINE, ANA, DYLAN, DAWN, MADELEINE, CATHERINE, CHASE, JESSE, JAMES, GRACE, ANNE MARIE, EMILIE, JACK, NOAH, CAROLINE, JESSICA, AVIELLE, LAUREN, MARY, VICTORIA, BENJAMIN, ALLISON

So, with a heavy heart and tears welling up, I crashed through some technical barriers I was experiencing and finally completed chapter 9 of the Second Edition of our HTML5 Canvas book for O'Reilly.

All of the chapters have been updated, revised, and re-written to add new content and replace out-dated or incomplete ideas that simply were not possible on the Canvas when we started on this project 2 and 1/2 years ago. My major focus has been adding in more game development content to the various chapters (especially the two game specific chapters) to have a more complete reference guide for the budding and experienced HTML5 Canvas game developers. Not that the first edition was limited in scope at all, but there was no time or space to cover some subjects that we really wanted to cover, and some that were impossible until this point. I have been working on chapters 8 and 9 (Game Essentials 1 and 2) for the last few months, shoring them up to provide a much better set of tools for myself and anyone who buys the new edition. Steve has been working on updating the physics, sounds, video, text chapters and adding anything new he finds that might be useful across the the entire book.

It has not been easy, especially since the deadline was Friday (a tragic day to even think about work), but I was finally able to get a revised 2nd edition of chapter 9 (Game Essentials Part 2)  complete and to the publisher for a first look. The two game chapters (8, and 9) and the image chapter (4) have been re-written to add in things that I wanted in the first edition but just didn't have time to fit in: Pixel-based collision detection, A* Pathfinding, Fine and Coarse tile-based world scrolling, and more. I know Steve has been busy adding in Box 2D content and other goodies to his chapters. There is just one chapter left to do for me, number 10. It deals with using Phone-Gap to create a HTML5 based iOS native application, and we are adding in the concept porting a browser game to a touch interface. The first part needs to be re-written 100% as everything about PhoneGap, xCode and the iOS portal has been completely re-vamped since the first edition. Also, more and more people are publishing games on the internet to target mobile browsers and we wanted to add in some "secret sauce" that we have uncovered to make this a little easier of a transition for the developer.

Here are some images from the various chapters that I have written to help give you an idea of what game subjects I have been covering and how they will be presented in the new edition (Tentative publish date March 2013).

Pixel Based Collisions

Pixel Based Collisions

AStar on the Canvas

AStar on the Canvas

Fine Scrolling

Fine Scrolling

 

I am starting on chapter 10 today, so hopefully the entire first draft will be complete by the middle of the week and then it is on to technical reviewer revisions and Chicago Book of Style red lines to fix.

27Nov/120

We are looking for Paid Technical Reviewers for the 2nd Edition of The HTML5 Canvas book on O’Reilly

By Jeff D. Fulton (8bitjeff)

We are looking for Paid Technical Reviewers for the 2nd Edition of The HTML5 Canvas book on O'Reilly press.

We have added about 150 new pages that need to be reviewed by 2-3 people with knowledge of Javascript and or the HTML5 Canvas. We'll offer you cash and name credit in the book for your efforts.

If you are interested, please contact me at jeff[at]8bitrocket.com (obviously replace the "[at]" with an "@".

3May/120

Hit Testing For Accessibility May Be Added To The W3C HTML5 Canvas Specification. What Does It Mean For Game Developers?

By Steve Fulton

While searching for the  updated W3C HTML 2d Context (Canvas) API Specification today I ran into some some references to a  new feature the W3C has proposed to add the Canvas Spec: Hit Testing .

It has been known for quite some time that the HTML5 Canvas, by it's nature if being an Immediate Mode  bit-mapped area of the screen, does not lend itself to Accessibility.   There is no DOM or display list inherent in the Canvas to make is easy for accessibility devices (e.g. screen readers) to search for text and images and their properties.   To make the Canvas accessible, a method known as "Fallback DOM Concept" or "subdom" was devised.  Using this method, developers  create a DOM element that match every element on the Canvas and put them in the "subdom", This method quickly becomes unwieldy for anyone who has tried to do anything more intricate than a simple Canvas interface.  Why? Because associating fallback elements with Canvas interaction is not always an easy task, and is complicated by screen readers that need to know the exact position of an element on the Canvas so they can interpret it's properties.

Hit Testing Proposal

To help solve this issue, the Canvas needs some way to associate "subdom" elements with an area on the bit-mapped Canvas. The new  W3c Canvas Hit Testing proposal  outlines why this type of functionality should be added to the Canvas specification:

In the current HTML5 specification, authors are advised to create a fallback DOM under the canvas element to enable screen readers to interact with canvas user interfaces. The size and position of those elements are not defined, which causes problems for accessibility tools - what size/position should they report for these elements?

Because canvas elements usually respond to user input, it seems prudent to solve the hit testing and accessibility issues with the same mechanism.

So what kind of mechanism are they suggesting?

The idea is to create two new methods, setElementPath(element), and clearElementPath(element) that will allow programmers to define (and delete) an area of the Canvas to use as a hit area, provided that it is associated with an element the "fallback DOM" of the Canvas. It appears that you must have an accessible fallback DOM element to provide to setElementPath() in order to associate it for the hit detection.   When a hit is detected, an event is fired,  and all is right in the world.

So what does this mean for game developers?

Well, for user interfaces with stationary interfaces, it will make things a lot easier.  How many times have you wanted to create a simple way to click buttons on a game interface, but had to use the same hit detection routines you wrote for your in-game sprite interactions?  For us? Every time.   For moving sprites in your game though, it might be less useful.    You will have to update the setElementPath() and the fallback DOM element with new coordinate data every time something moves which means triple overhead for game that is probably not accessible in the first place.

Still, this is a good move by the W3C, as making the Canvas accessible for user interfaces is another a huge step in making it more widely accepted for web applications.  We hope these two new methods are added to the specification as soon as possible.

 

 

 

29Apr/120

Things We’ve Learned The Hard Way #1: What A Customer Means When They Ask For HTML5

By Steve Fulton

25Apr/120

Four HTML5 Canvas Game Demos Running Full Screen On An iPad 2 (video)

By Jeff Fulton

Four HTML5 Canvas games with touch controls running from our web site as full screen apps on an iPad 2. Notice the smooth performance in Mobile Safari. These also run on the Kindle Fire web browser with similar performance.

Music:  "Short Term Memory Lane" by JJ And The Real Jerks.

23Dec/110

HTML5 Canvas Game: Tic Tac Pro Quack The Glass – Goes Gold

8bitrocket in conjunction with Producto Studios and in association with TicTacDontion.com is proud to announce the launch of our HTML5 Canvas only game targeted to work on ANY HTML5 browser platform (mobile or desktop).

8bitrocket and Producto Studios did all of the game programming in HTML5 and TicTacDonation.com  provided the game and asset design.

The game can be accessed by giving a $5 donation to a worthy cause (see web site for details).

Here are screen shots of the game. It was completed entirely in Flash first, then the assets were exported and code re-designed from AS3 to Javascript and the Canvas. There are some browers compatibility problems (especially with sound), but overall it was a very successful engineering effort.

 

Quack The Glass Title Page- HTML5 Canvas Text is tricky, so I left 3 lines for them to fill in as needed

 

Touch (finger) and browser (mouse) movement is slightly different, so they need to be both need to be handled properly.

It wouldn't be an 8bitrocket or Producto game production if we didn't find some place to add in particles effects to replace the delivered canned animations of feathers and glass breaking.

 

16Dec/110

HTML5 Puzzle Game : Color Drop : Game Demo + AS3 vs. JavaScript Code Comparison

Color Drop HTML5

Color Drop was game that was featured in our book The Essential guide To Flash Games.  Earlier this month I decided to to see how hard it would be to tackle a similar game for HTML5 Canvas for the next version of HTML5 Canvas for O'Reilly.  Color Drop HTML5 Canvas is the result.

Same as the other demos from earlier this week, this has only really been tested in Google chrome, so your mileage may vary with other browsers.

What interested me the most about the process of converting this game from AS3 to JavaScript was the ease of reusing the existing AS3 algorithms in JavaScript.  In the code snippets below you can see the process.

The function findLikeColoredBlocks() is designed to find a list of blocks that are the same color and adjacent to the block that was clicked by the player.  There is a full discussion of the code in The Essential guide To Flash Games.

When I sat down to rewrite the code in JavaScript, I found the process very very easy. In fact, the only thing I needed to do was to remove the type definitions on variables.

JavaScript Code

function findLikeColoredBlocks(blockToMatch) {
          var blocksToCheck= new Array();
          var blocksMatched = new Array();
          var blocksTested = new Array();
          var rowList = [-1, 0, 1,-1,1,-1,0,1];
          var colList = [-1,-1,-1, 0,0, 1,1,1];

          var colorToMatch = blockToMatch.blockColor;
          blocksToCheck.push(blockToMatch);
          while(blocksToCheck.length > 0) {
              tempBlock = blocksToCheck.pop();
              if (tempBlock.blockColor == colorToMatch) {
                  tempBlock.selected = true;
                  blocksMatched.push(tempBlock);
              }

              var tempBlock2;
              for (var i = 0;i < rowList.length;i++) {
                  if ((tempBlock.row + rowList[i]) >= 0 && (tempBlock.row + rowList[i]) < BLOCK_ROWS && (tempBlock.col + colList[i]) >= 0 && (tempBlock.col + colList[i]) < BLOCK_COLS ) {
                      var tr = tempBlock.row + rowList[i];
                      var tc = tempBlock.col + colList[i];
                      tempBlock2 = board[tr][tc];
                      if (tempBlock2.blockColor == colorToMatch && blocksToCheck.indexOf(tempBlock2) == -1 && blocksTested.indexOf(tempBlock2) == -1) {
                          blocksToCheck.push(tempBlock2);
                      }
                  }

              }
              blocksTested.push(tempBlock);
          }
          return blocksMatched;
      }

AS3 Code

public function findLikeColoredBlocks(blockToMatch):Array {
          var blocksToCheck:Array = new Array();
          var blocksMatched:Array = new Array();
          var blocksTested:Array = new Array();
          var rowList:Array = [-1, 0, 1,-1,1,-1,0,1];
          var colList:Array = [-1,-1,-1, 0,0, 1,1,1];

          var colorToMatch = blockToMatch.blockColor;
          blocksToCheck.push(blockToMatch);
          while(blocksToCheck.length > 0) {
              tempBlock = blocksToCheck.pop();
              if (tempBlock.blockColor == colorToMatch) {
                  blocksMatched.push(tempBlock);
                  tempBlock.makeBlockClicked();
              }

              var tempBlock2:Block;
              for (var i:int = 0;i < rowList.length;i++) {
                  if ((tempBlock.row + rowList[i]) >= 0 && (tempBlock.row + rowList[i]) < BLOCK_ROWS && (tempBlock.col + colList[i]) >= 0 && (tempBlock.col + colList[i]) < BLOCK_COLS ) {
                      var tr:int = tempBlock.row + rowList[i];
                      var tc:int = tempBlock.col + colList[i];
                      tempBlock2 = board[tr][tc];
                      if (tempBlock2.blockColor == colorToMatch && blocksToCheck.indexOf(tempBlock2) == -1 && blocksTested.indexOf(tempBlock2) == -1) {
                          blocksToCheck.push(tempBlock2);
                      }
                  }
              }
              blocksTested.push(tempBlock);
          }
          return blocksMatched;
      }

While the display code for making HTML Canvas games is quite different between AS3 and JavaScript, the logical algorithms for iterations, loops, multi-dimensional arrays, etc. are pretty much the same.   This is good news for people who have libraries of AS2 and AS3 algorithms that need to be converted to HTML5/JavaScript will have a fairly easy time accomplishing the task.

This site is protected by Comment SPAM Wiper.