Published: 2013-03-10 08:45:37
The HTML5 Canvas Element allows for optimized Drawing within the Browser both in 2D and 3D modes. These are the basics you'll need to get started.
This course will walk you through the major components of building GRITS, an HTML5 game. We'll talk about how to take standard game development techniques, and use them to create high performance HTML5 applications.
What Should I Know?
Knowledge of HTML, Javascript, and how the web works is necessary for this course. There is an optional unit on the specific parts of Javascript and the DOM that you'll need for this class as a refresher, but this is not an introductory course on Javascript.
What Will I Learn?
At the end of this course, you'll understand how to develop an HTML5 game. You will gain familiarity with HTML5 features such as 2D canvas and techniques for improving performance.
Debug to learn about the Code exercised in the Canvas and Atlas Units...
Notice ALL of the behavior and the Code which causes the "gotchas"...
The new HTML5 CANVAS Element is where your Game with "strut its stuff".
But the CANVAS live within a standard HTML Web Page.
This lesson just shows you how to get a CANVAS onto a Web Page. The magic about what to do in the CANVAS will come later.
The Canvas is all about presenting Visuals and Loading Images is the first step in the process to get compelling VIsuals into the Canvas.
But before we can put even a single Image onto the Canvas, we have to load the Image from the Cloud. We'll build on your basic HTML/Javascript skills to do this.
Now that we know how to Load an Image into the containing HTML Document, it's a simple matter to render it onto the Canvas Element.
One step and a time and we'll get there.
The essence of Gaming is to see a lot of dynamic Imagery flashing upon and across the Game Canvas.
As a first step, let's take 19 slightly varied Images and play them is quick succession on the Canvas.
Building upon what we've learned so far, we first have to load ALL of the Images into the HTML Document and then, with precise timing, draw them in sequence onto the Canvas.
This is the technique Walt Disney first employed in the first compelling animated movies and not much has changed since then.
