HTML5 Talk

Learning to Use Android NDK With a Neat Augmented Reality Example

html5talk — Mon, 07 Mar 2011 19:38:28 +0000

Android provides the Android NDK so you can use native code written in C or C++.

Developing With Flash CS5 for Adobe AIR on Android

html5talk — Wed, 23 Feb 2011 03:37:46 +0000

Now that Adobe AIR is available for Android 2.2, it is easy to move your Flash games to Android’s app store and also to add functionality that takes advantage of things like the camera and GPS.

Full post here …

Graphing Data in the HTML5 Canvas Element Part IV Simple Pie Charts

html5talk — Wed, 04 Aug 2010 20:02:13 +0000

In this post we will create a simple pie chart that is easy to feed data to.

This example is coded for readability and not for optimized operation. All you need is a text editor like notepad and an HTML5 friendly browser (I’m using Firefox 3.6).

Full post here …

Playing With CSS Transitions On Firefox 4 Beta 2

html5talk — Thu, 29 Jul 2010 18:39:56 +0000

I saw the recent announcement by Paul Rouget that Firefox 4 beta 2 has support for CSS transitions and I thought it would be fun to play with it.

Here is a demo with complete source code where I chained together a bunch of CSS transitions using the transitionend event to trigger the transitions sequentially.

DEMO CSS transitions in Firefox 4 beta 2

The demo requires Firefox 4 beta 2

I found that the transitionend event was triggered more often then I expected and had to remove listeners for the event when I was done with them or they sometimes triggered again. I need to learn more about what triggers them.

Have fun with the code as that is the best way to learn.

Using Multiple HTML5 Canvases as Layers

html5talk — Mon, 26 Jul 2010 21:36:10 +0000

DEMO Here’s our finished canvas with full source code.

The reasons why you would want to layer multiple canvases on top of each other are many but they all have a common root. There is a requirement in the W3C definition of the 2d context…

There is only one CanvasRenderingContext2D object per canvas, so calling the getContext() method with the 2d argument a second time must return the same object.
http://dev.w3.org/html5/2dcontext/#conformance-requirements

Having just one 2d context means that you have to keep track of everything on the context even if you only want to change part of the canvas.

Full post here…

Slicing Spritemaps and Parallax Scrolling on the HTML5 Canvas

html5talk — Fri, 16 Jul 2010 18:05:07 +0000

In this example we will look at slicing images with the drawImage() method of a 2d canvas context. We’ll use two images that are larger than the canvas to create a parallax scrolling effect that is common in 2d games and also another image as a spritemap consisting of three sprites to show how to slice out and draw individual sprites.

I made this example as simple as possible to keep from cluttering up the key concepts of slicing and drawing pieces of images on the canvas. It only moves in one direction by pressing the right arrow key on your keyboard.

Full post here…

Graphing Data in the HTML5 Canvas Element Part III

html5talk — Thu, 15 Jul 2010 14:30:16 +0000

This is post 3 of a multipart series of posts. All of the code to try this example for yourself is included here but much of it is explained in the previous posts. The first and second parts can be found here.
Graphing Data in the HTML5 Canvas Element Part I

Graphing Data in the HTML5 Canvas Element Part II

In this post we will create bars on the graph by drawing rectangles whose size and position are based on the data that we are graphing. We will also increase the size of our graph area so our bars aren’t all scrunched together.

This will allow us to go from this

To this

Full post here…

CSS 3.0 Series: The radial-gradient Object

html5talk — Wed, 14 Jul 2010 14:03:59 +0000

Radial gradiants are on the cutting edge of CSS . We’re going to be looking at some examples of their use and their current capabilities.

In the previous post in this series we looked at linear gradients. The WebKit implementation of the radial gradient is just an extension of their linear gradient function while Mozilla and W3C have opted to make the radial gradient have its own function.

Full post here…

Make a Maze Game on an HTML5 Canvas

html5talk — Sun, 11 Jul 2010 17:29:31 +0000

One of the best ways to learn how to program in any language is to make a game and then change the code to create different variations on the game. I learned C++ long ago by creating an elevator simulation game (thanks Tom Swan). It’s fun and it is the closest you can come to ‘instant gratification’ in programming.

Let’s make a maze game in an HTML5 canvas. In this post Moving Shapes on the HTML5 Canvas With the Keyboard we learned to use keyboard input to move a shape around the canvas. All we need to do to make our game is

1. Add an image of the maze to the canvas.

2. Add collision detection code so we know if our shape hits a border in the maze.

Full post here…

Understanding save() and restore() for the Canvas Context

html5talk — Sat, 10 Jul 2010 19:09:43 +0000

At first, I had a hard time grasping the purpose and use of the save() and restore() methods of the canvas’ 2d context. It’s really very simple and here are some examples that can help you understand it better.

Full post here …