HTML5 for game development

Here is a great article that discusses all of the technologies that we tend to lump together when we discuss HTML5 and how they can be applied to game development. I think anyone interested in HTML5 should definitely read this article to get a better understanding of what we really mean when we say HTML5. If you plan to use HTML5 in your work, compare it to Flash, tout it as the next big thing, etc – You need to really understand each of the technologies discussed in this article otherwise you might be making uniformed decisions (my rant because of all the misinformation i hear on HTML5) The technologies discussed include:

HTML5
CSS3
DOM
Canvas
WebGL
SVG
Native Client
WebSockets
Node.js
Javascript

Here is a link to the article

Adobe: Web standards match 80 percent of Flash features

Not very informative but interesting nonetheless: http://news.cnet.com/8301-1023_3-57464545-93/adobe-web-standards-match-80-percent-of-flash-features/

Essentially this is nothing new. HTML5 can do a lot of what Flash does but that 20% is big, because they are the high end interactions and gaming features which is what Flash is intended to do anyway. As I tell my students, at this point in time, you need to know Flash and its going to be long time before its gone so get used to developing in it and clients requesting it/needing it. I also tell them to start learning javascript because eventually it will be the future but at this point HTML5 is too new and its going to a long transition between Flash and HTML5. Additionally, Adobe appears to be the lead developer for HTML5 so you will more than likely continue to buy your authoring tools from them. Also remember that Adobe Air allows one to publish Flash Apps on iPhone and iPad.

Flash to HTML5: Buttons

In this clip I test Adobe Flash’s HTML5 conversion tool. I test motion tweens, masks, and buttons via Wallaby, which is the conversion tool. I test the HTML output file in Safari, Chrome, and Firefox. The motion tweens and masks work in both Safari and Chrome. Nothing works in Firefox. The buttons do not work in any browser. While Wallaby has potential, this is a big limitation. This means that it is currently only useful for animations but not interactivity.

Check out the demonstration:

 

Flash CS6 to HTML5

The following video demonstrates Adobe Flash’s CS6 to HTML5 conversion tool codenamed Wallaby. The tool converted my file in one second. It worked great in Safari but did not work in Firefox. I am not sure if Flash’s tool is not working or HTML5 is not working. I say this because of the compatibility issues I have with HTML5, especially in Firefox. Also, Adobe’s Wallaby tool was last updated on March 8th, which means that a new version is just around the corner. Overall, I am impressed it worked but need to test this with more advanced Flash files. I was not really surprised there was a compatibility issue as that is HTML5. Here is the video with the demonstration:

Flash CS6 and HTML5

Here is a recent post I made in a discussion forum on linked in. I thought it would be worthwhile to post onto my blog:

Flash is not dead right now and from the looks of it, it has the opportunity to become the best authoring tool for HTML5.

HTML5 is currently not ready for widespread use due to compatibility issues. For those that do not know, HTML5 has been around for several years now – it is NOT new and still NOT ready. How many years do you think its going to take to be ready? You might want to look at recent history when DHTML (HTML4, CSS2, and Javascript) were touted as the next big thing in the early 2000s. Compatibility killed that idea. HTML5 does have more promise though. But remember HTML5 is just a simple upgrade to HTML4, it does not do that much more. The real power of HTML5 comes from javascript. Javascript libraries that have been around for years. Why are they not used more often? No authoring tool for them. Its all hand written code. Additionally, while both Google and Apple are making their web browsers HTML5 friendly, they are not making their app markets HTML5 friendly anytime soon. In order to publish an HTML5 app you need to get a third party software package that will do the conversion.

Additionally, at this point, the ONLY potential authoring tool for HTML5 that has promise in the future is Flash! Flash CS6 can export swf to javascript. So, those saying Flash is dead might be very wrong. Flash might just be the next big thing because it will export to HTML5. We currently do NOT have a good authoring tool for HTML5 and if Flash takes that spot, it will not be dead but might be more popular than it currently is now. The only way Flash will die is if another authoring tool that becomes very popular replaces it.

HTML5 Doctype

The HTML Doctype is used to tell a browser which version of HTML your page is written in. Thus it is very important that it is included on each HTML page. With HTML5, the doctype will be changed to be significantly shorter and easier to remember.

Here is the HTML5 Doctype:

<!DOCTYPE HTML>
<html>
<body>

You can see how much this differs from the common HTML 4.01 doctype:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<body>

For more info on Doctypes see W3schools

HTML5 and Flash (Yes this topic again)

Just to clarify some more information and so much misinformation is out there:

– HTML5 is simply an update of HTML4. It does a few extra things, like include a video tag. It is not this be all end all code that will replace Flash and by itself is not very powerful.

– HTML5 is not compatible on most browsers right now. There are many standards issues. Please see this report for more details: http://www.longtailvideo.com/html5/.

– The power of HTML comes from Javascript. Javascript has been able to do much of this for many years, it is NOT new. Most of the features people seem to think HTML5 can accomplish are really javascript features.

– Flash is used for a lot of things that it was not designed for, like web banners, just because there is not other tool out there. Flash was designed for rich interaction and games not web banners. HTML5 is not going to be used for these rich interactions and games, flash will be. Maybe someday this will happen, but not in HTML5. Maybe HTML6, 7, or 8. But remember Flash will continue to evolve as well in that time.

– The power of HTML5 really comes with mobile devices, not PCs. However, with more advancements in mobile processors such as quad cores, etc. This really isnt going to matter much. The only thing really stopping Flash right now on mobile devices is Apple. However, you can put flash onto apple mobile devices –  its a workaround though and not a process the average user can accomplish. Having said that, the same can be said of HTML5, the only thing stopping it from PCs right now is compatibility so as that gets better its use will grow.

So what exactly will HTML5 be used for that Flash once did?

Mobile applications. HTML5 will be used in the mobile world. Its more compatible and it’s free, which is the pure beauty of HTML5. However the main thing to point out here: HTML5 runs different on each browser right now. So its great if running on one device, like the iphone. But if running on android, iphone, and pc its really a pain to code. Flash is much better when using multiple devices. To get HTML5 to work on multiple devices I need to ‘trick’ the code for each browser which takes a lot of extra development time and adds a lot of extra code to my product.

Here are two good sources discussing this issue:

http://remysharp.com/2010/02/08/html5-vs-flash/

http://www.forbes.com/sites/fredcavazza/2011/07/17/why-opposing-html5-and-flash-is-a-non-sense/

*I am sure there will be many more HTML5 posts on here as it evolves:)

 

HTML5: When will it be ready for prime time?

At this point, HTML5 is not ready to be used, which is why pretty much everyone is NOT using it. I recently did a test of a few of the major HTML5 tags, such as the video tag, one that will be most common, and it failed on more than 50% of the browsers I tested it on. I tested this on firefox, IE, Opera, and Safari for the mac and pc. Then on mobile devices including ipad, iphone, and android froyo. You can test the page yourself by clicking this link. Check to see where it works and does not.

So at this point, I would strongly recommend NOT using HTML5 until is becomes more standardized. Its just full of too many holes. As new browsers get released these holes may become larger or smaller so you really need to just pay attention. W3C has said the standards would be ready by 2014 and you currently can ‘trick’ all browsers into working but honestly I am not going to write code for every browser possibility. That is not the point of HTML5 and if that is the case I might as well use a plug in.

Anyone interested in learning html5 should check out: http://www.w3schools.com/html5/default.asp

And anyone interested in learning more about why HTML5 is not ready for prime time should check out this link. This site describes why youtube is continuing to use flash player and not HTML5: http://www.streaminglearningcenter.com/articles/what-is-html5.html

How compatible is HTML5 with current web browsers?

Apparently not too much. This is the latest comparison chart:

http://www.findmebyip.com/litmus/

It really doesnt matter which browser you are using, Firefox, Safari, Chrome, IE, or Opera – NONE of them are compatible at this point. Sure some of them are somewhat compatible but none are even close to fully supporting most options. What does this mean for HTML5? It means that at this point, I would be very weary of developing for it. Wait until its fully compatible then do it.

Essentially if all new browsers from today on were 100% compatible I would still wait some time before developing for HTML5. Why? Most users to not upgrade their browsers unless they are set up update automatically. Thus you would be developing something that more than likely only your tech savvy users are able to view.