New Update: HTML5 Animation for IE, Chrome and Firefox
There are several ways to create animation in HTML5 games. I am going to show you how to create HTML5 animation by CSS 3 in Chrome, Safari, Firefox and IE. To make the CSS animation, we need to get a sprite sheet animation png files, which you can:
In this post, we will talk about how to use sprite sheet animation png file and JavaScript file to make animation in the HTML5 canvas. Last time, we talked about how to generate the sprite sheet animation in flash. In that post, we are using Flash cs6 to generate a sprite sheet .png files as well as a JavaScript file which can be used directly in the HTML5 page to render the animation in canvas. Here, I will show you how to do it. First of all, let’s the animation I have made in HTML 5 canvas by sprite sheet and JavaScript. The amazing part is that it can work well in iPhone and iPad just because it is HTML5!
This is a sprite sheet animation in HTML5 canvas.
We talked about creating sprite sheet from gif file last time. In this post, I will talk about how to create sprite sheet from flash. Compare with creating sprite sheet from gif file, exporting sprite sheet from Flash is much easier if you are using Flash cs6.
In the latest Flash CS6, there are two new features which is specially designed for HTML 5. You can check the HTML5 features in flash cs6 for details. Here, I am wanna talk about a very useful feature for HTML 5 games. Flash sprite sheet generation can export the MovieClip animation to sprite sheet in a second. Let’s see the flash animation first.
In the past 10 years, Gif and flash are the best format to show the animations on web. Gif can represent the simple animations with a very small size. Flash support more complicated animation with logic control. We can find hundreds of thousands of animation resources in these two file formats on the internet. However, the web technologies keep changing from time to time. The old web technology standards can not meet the current needs of our daily internet activities. HTML 5 was standardized in 1997 but it got focused till Google engaged in web browser development and Apple iPhone, iPad took the browser market share.
Now, HTML5 is encouraged to be the next HTML standard. Animations on web pages are no longer a big problems for current browser technologies. Therefore, more and more browsers refuse to support the flash player plugin to improve their security and performance. In html5 website, we can use Sprite Sheet technology which is traditional 2D game animation technology in the past 20 years. To reuse our GIF and Flash animation resources, we can convert them to Sprite sheet format and do the sprite sheet animation by Javascript in HTML 5.
Read more
This month I am quite busy with my new project, converting flash game into HTML 5. Once iPhone and iPad came out, they announced that they would not support flash in their browsers and they suggest to use HTML5 to implement browser multimedia applications. At that time, lots of flash developers decided to move their focus on HTML5 and tried to migrate their flash apps to HTML 5. As my opinion, the most difficulty part to create Html 5 games is lack of tools to speedup the development. Unlike Flash IDE, creating html5 games for iPad or android tablets is a very tough job. Without develop tools, we need to write the html code, CSS and javascript piece by piece. It may take a very long time to program a character or a game scene in html 5.
Read more