HTML5 and the Future of Online Games

The Golden Child: Flash Games

For several years now Adobe Flash has been the dominate technology used to create online games. It is so popular in fact that the term “flash games” has almost become synonymous with browser based games in general. Take a look at all of the major gaming portals; with a few exceptions, practically all of the games they offer are flash games.

What’s so wrong with Flash you ask? Well nothing really. It was an amazing technology that was used to add all sorts of functionality to browsers. Through the use of a plug-in developers could now include all sorts of interactivity and animated graphics to their web pages. However things are changing, and Flash may no longer be the best fit for many online applications.

Browsers are a lot smarter now and they are only going to continue to get smarter. Rather than relying upon plug-ins to display interactive and graphically intense pages modern browsers can do it all by themselves. Utilizing the W3C, the specification for HTML5, browser makers are including all sorts of functionality into their products that web developers can now use to make graphically intensive and interactive websites. This has special implications for online game designers. Soon (hopefully) designers will no longer be forced to choose from a select few proprietary technologies that not only are expensive, but also obligate their end users to download, install, and regularly update the respective plug-ins.

The New Kid on the Block: HTML5 Games

Traditionally the role of HTML has been used primarily to define and layout the text on web pages. Over the years, however, its role has slowly evolved to be more interactive. The new HTML5 spec furthers this evolution by including definitions for several additional elements aimed at interactivity, multimedia, and graphics.

Combinethese new HTML5 elements with the faster and enhanced JavaScript engines available in modern browsers and you now have a set of tools perfectly suited for online game development.

Some advantages of HTML5 for Games

Not only are the HTML5 technologies well suited for creating browser based games, they offer several advantages over proprietary options. HTML5 is an open technology. It doesn’t cost anything and technically only requires a simple text editor to code in. Never underestimate the power of free. Flash and other proprietary technologies all cost the developer. While this certainly isn’t the only factor that a game developer would consider, it certainly does play a role, and for the small time indie developer it might be a very big factor. Compatibility is another huge advantage HTML5 has. HTML is the lowest common denominator for all web based devices. By using HTML5 you can target a wider array of devices and gadgets without having to specifically port your game to each different platform. Another often forgotten advantage is ease of use. For the technically savvy, downloading, installing, and updating plug-ins is only a minor hassle. However, for less technically savvy users this can be quite a hurdle and just may turn away users altogether.

Some Interesting Charts

Above you will find some charts from Google Trends for the search term “flash games” and then also the term “html5 games”. It is easy to see that searches for “flash games” have been in steady decline for over the past 5 years while searches for HTML5 games have seen some pretty impressive growth in the past 3 years. While this really doesn’t prove anything, it is an interesting metric to help gauge the popularity trends of the two different technologies. It is important to note that these charts show only relative search volume and not overall volume. Per the Google Adwords tool, the monthly global search volume for “flash games” is 11,100,000 compared to a measly 49,500 for “html5 games”.

The Future of online Games

Will HTML5 be the end of plug-in based games? If it is, it is pretty safe to say that it won’t be happening anytime soon. It is estimated that the HTML5 spec will not be fully implemented until 2022. Despite this long time-frame, browser makers are already racing to include all the HTML5 functionality that they can. Game developers have taken advantage of this and created numerous quality games that easily compete with their flash counterparts. Take a look at all these HTML5 games to see some excellent
examples of what is already possible with the new technology.

Given the current search trends and the several advantages HTML5 has over Flash, the future for HTML5 games looks bright. While it is not certain if HTML5 will eventually win out to become the gaming technology of choice, one thing is for certain: the love of online casual gaming has captured the interest of millions and as long as that interest exists developers will continue to create fun and exciting games.

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • michael

    So… why should a indie developer use Html5 technologies if he can’t protect the source of the game – and how can he earn money on his work – when everyone in the work just can copy and reuse the game with different graphics.
    For me it just sounds like an utopia and a rather communistic idea with open source games.

  • EastCoast

    As somebody that develops games thought I’d point out a few inaccuracies.

    ‘HTML5 is free, flash is not’- Not true, there have always been free flash development environments – haxe, flex sdk, flash develop etc

    ‘Compatibility is another huge advantage HTML5 has’ not really, using flash you can target about 90% of users, and can output to a native android or ios app for the majority of mobile users that make up most of the other 10%. HTML5 compatibility across functionality like sound,css3 animation, canvas is poor, inconsistent and in the case of internet explorer, mostly missing. A very large percentage of desktop users will be excluded. If you use 3d in html5 it’s even worse, essentially you’re limiting yourself to a tiny minority.

    One advantage flash has for serious developers rather than hobbyists is the ecosystem that surrounds flash games – sites and apis dedicated to advertising, buying and selling and licencing games. There’s unlikely to be a similar ecosystem for html5 games any time soon because the openness and uncompiled nature of the code is a major disadvantage for both the protection and distribution of games.

  • Steve

    Unfortunately, HTML5 on Android devices is hit or miss, since the device manufacturers tweak to suit, implementing HTML5 standards at whim. It’s frustrating to see such spotty implementation on those devices.

    By the way, the article does not give us a link to the interesting charts it mentions. Forgotten?

  • Jason

    You are spreading lies and half truths.

    “Flash and other proprietary technologies all cost the developer.”, Flash doesn’t cost you a thing to develop for. The are countless free resources to learn and using the Flash Develop IDE is a free alternative to Flex Builder/Flash Builder. Other languages have free alternatives.

    “By using HTML5 you can target a wider array of devices and gadgets without having to specifically port your game to each different platform.”, Have you heard of Java or a little game called Minecraft? Have you heard of Adobe AIR?

    “Another often forgotten advantage is ease of use. For the technically savvy, downloading, installing, and updating plug-ins is only a minor hassle. However, for less technically savvy users this can be quite a hurdle and just may turn away users altogether.” Which is why Flash will update in the background for future versions.

    What if you want to make money? how are you going to make money from a HTML game? Right-click view source and all your hard work is gone.

    What about Networking (multiplayer) games? What about impressive 3D Games?

    There is no such thing as a HTML5 game, they are JavaScript games. You will need to learn lots and lots of JavaScript – the worlds most horrible programming language.

    Better off learning C++, Java or C# and do it properly.

  • Jarred Draney

    Yes, you are right the statement “Flash and other proprietary technologies all cost the developer” is not completely accurate and for that I apologize. I should have chosen my words more carefully. “Flash and other proprietary technologies often cost the developer” would have probably been a more accurate way to render the sentence. None the less I would argue that the “free” alternatives are not widely used and with them it is difficult to produce the same quality of games as the proprietary IDEs. How many serious flash games are there out there that were created by using purely the open source alternatives.

    “By using HTML5 you can target a wider array of devices and gadgets without having to specifically port your game to each different platform “ — How is that statement in any way inaccurate? The alternatives mentioned in the comments all still require plug-ins and their existence does not make HTML5 any less compatible.

    “Right-click view source and all your hard work is gone. “ — Unpleasant as it may be, the reality is any client sided code is insecure and can be copied. A quick google search can teach anybody how to copy a flash game.

    Multiplayer can be accomplished with Websockets, 3D games with Web GL. HTML5 is more than “just JavaScript”, it is a wide range of technologies (check out this image from wikipedia http://en.wikipedia.org/wiki/File:HTML5-APIs-and-related-technologies-by-Sergey-Mavrody.png ). As mentioned in the article these technologies are still in their infancy and will likely be some time before they mature and are able to seriously compete with current proprietary options.

    ‘Compatibility is another huge advantage HTML5 has’ not really, using flash you can target about 90% of users, and can output to a native android or ios app for the majority of mobile users that make up most of the other 10%.” — Isn’t this comment actually arguing for my point rather than against it? As the commenter points out that flash I;s not compatible and you can not target all platforms without having to recompile/port/output to a different format. The aim of HTML5 is to be universally compatible.

    “One advantage flash has for serious developers rather than hobbyists is the ecosystem that surrounds flash games” and “how are you going to make money from a HTML game “. — Flash did not always have this “ecosystem”. Is it too unrealistic to expect that a similar ecosystem will be developed in the coming years to support HTML5 games.

    Yes, HTML5 is not quite there yet and yes, it is not universally implemented. This is a forward looking article with “Future of online games” in the title. It is not titled “Flash games are now all instantly obsolete because the W3C is developing the HTML5 spec”. In truth I am actually quite surprised at the opposition the new technology is having when it comes to game development. Why is it that so many feel threatened by the possibility of a new technology which could possibly make things easier and better. To me it smells a little like emotionally driven loyalty to a brand name rather than objectivism.

    • Jason

      Jarred Draney said: “By using HTML5 you can target a wider array of devices and gadgets without having to specifically port your game to each different platform “ — How is that statement in any way inaccurate?

      Is the full HTML5 spec, CSS3 spec and the latest JavaScript spec implemented accurately and completely on all devices? No – oh wait they aren’t even finished.

      Jarred Draney said: In truth I am actually quite surprised at the opposition the new technology is having when it comes to game development. Why is it that so many feel threatened by the possibility of a new technology which could possibly make things easier and better. To me it smells a little like emotionally driven loyalty to a brand name rather than objectivism.

      Don’t presume people feel threatened, never presume what others feel. I think it’s just the large amount of articles written that provide inaccurate information and give the reader the wrong impression, such as yours here. HTML5 is an option for creating online games, it is not THE option of the future. You can use Objective C, Java, C# (with XNA) and C++ to create Apps that are more powerful and have tools to do so. Why use inferior technology? Why use something that is playing catch up to 5-10 years of technology?

    • EastCoast

      “difficult to produce the same quality of games as the proprietary IDE”

      Very few people doing complex games or the sort of world class work you see on thefwa.com uses the standard flash IDE, because the compile time using e.g flashdevelop + flex sdk is massively quicker, the coding environment is a lot better, and there is a clear separation of coding and asset creation which is generally required when working in teams.

      ““By using HTML5 you can target a wider array of devices and gadgets without having to specifically port your game to each different platform — How is that statement in any way inaccurate?”

      You have to recode large chunks of code per browser to get something workable, because of browser inconsistencies.That’s not the case with flash, you can set multiple compile targets easily. Your asteroids game on chrome experiments – does it run across all browsers?

      “A quick google search can teach anybody how to copy a flash game.”

      Nothing is uncopyable but it’s easy to make a swf hard to copy, and possible to make it almost uncopyable to anybody but the most determined hacker.

      “Why is it that so many feel threatened by the possibility of a new technology which could possibly make things easier and better. To me it smells a little like emotionally driven loyalty to a brand name rather than objectivism.”

      html5 for game development is a technological retrograde step, it provides no new functionality that hasn’t been available via flash for many years, it neither solves a problem or makes things easier, probably exactly the opposite, a far worse development environment in both tools and language (actionscript 3 is way more advanced than javascript), and it’s a shambles of cross-browser incompatibility. It’s a retrograde step in performance (try running canvas stuff on mobile at a couple fps, or syncing audio). html5 it seems, is the new hammer to bang every nail with whether it needs knocked in or not.

      You mention objectivism, but IMHO this article ignores a lot of real world facts in game development, while glugging down plenty html5 koolaid, which is hardly objective either.

  • JS_hater

    “While it is not certain if HTML5 will eventually win out to become the gaming technology of choice…”
    The most scary thing is that Javascript then would become even more popular. I stopped criticizing flash (AS3) since I know HTML/JS. I’ll stay away from browser development until they finished the reinvention of the wheel.

    • Jason

      I stopped criticising Flash when I learnt Flex and started to code using ActionScript. As soon as that happened my indifference towards JavaScript turned into disgust – it’s a horrible sloppy language.

      Browser development is being grabbed by the hips from Mobile Apps and it’s not letting go.

  • Avalon

    HTML5 and JS are awful technologies to develop games with. The file organization is too fragmented and JS is a hopelessly outdated technology that is at a level of ActionScript 1. The only reason why developers are currently rushing to it is because of the misdirecting hype about HTML5. Why so many Flash devs rush to HTML5/JS and exchange something like AS3 for JS can only be explained by that they are either forced by their boss or they are only in it for the money, as long as the hype is still warm.

    Personally I haven’t come across a single HTML5 game yet that impressed me. Take for example this one: http://agent8ball.com/ (listed on a website as among the top 10 best HTML5 websites). We wrote a Billard game exactly like that for Flash Player 6 in 2005 and that one ran without the hiccups that the HTML5 version has in Firefox 11.

    So Flash doesn’t run on mobile browser. But who plays games on mobile browsers anyway? All people I know get an app from the appstore for the game instead of launching the browser and play it there. And for apps, there is Adobe AIR which provides an approach (AS3) that is far ahead of JS.

    Really, I hope people will soon wake up and realize the big falsity that HTML5 game development is. It’s getting annoying really quick now how many people hype HTML5 without even knowing how to code or the difference between JS and AS3.

    So devs want the web streamlined because plugins are bad and break accessibility? But have they thought about the outcome of that? Fewer technologies mean that more devs use and provide the same services. This leads to more competition and price cuts, which is good for the clients but bad for the developers. I guess this phrase suits well here: The web will eat itself.

  • Avalon

    It’s also important to point out how much this article is generalizing:

    “Soon (hopefully) designers will no longer be forced to choose from a select few proprietary technologies that not only are expensive,”

    What exactly is expensive about developing Flash games? The PlugIn is free, so is the Flex SDK or any other technology that outputs Flash-based content (AIR SDK, Haxe). Several Editors are also free (FlashDevelop, etc.). This argument of Flash development costing anything is completely unfounded.

  • http://www.neurofuzzy.net Neurofuzzy

    Using search volume graphs for “flash games” vs “html5 games” really doesn’t demonstrate anything, and may in fact be misleading.

    The truth is, people who want to play games don’t think about the technology used to create them. Consumers generally don’t go searching for “HTML5 games” or “Flash games.” Most likely, they will search for “games” or a particular game title or genre they are interested in.

    The real question is, will HTML5 offer these things:

    1. Features for making rich, interactive, original games.
    2. Good performance and consistency across browsers and devices.
    3. A robust development toolchain.

    So far, progress is being made on the first. But, we are a long way from being to a point where we’ve got the performance and a good toolset for making games.

    For a developer, the best bet is to develop using a platform that allows for the creation of Flash-based games for desktop, and using the same codebase to create apps for mobile. Tools like Adobe AIR and NME (http://www.haxenme.org) are good solutions to this.

  • Pawel

    For some people commenting here, probably the Internet itself is a communist invention, because you can’t close it and make money that way (but you can in many other ways).
    Contrary to most comments here, I’ll agree with the author: HTML5 is free, open-source and cross-platform. I should laugh at arguments about game developers’ need to protect their source code to earn money – when did you last play a paid Flash game? I think some 99.9% are free to play anyway. The downside of Flash is that it’s not democratic, not fully cross-platform – you can’t really develop games on Linux, for example, there aren’t any usable IDE’s. Flash is owned by one company, HTML5 is not. So take it easy, (some) American people here, HTML5 will in the end, and it doesn’t mean communism. It means modernity and common sense. The sooner Flash dies, the better.

    • JS_hater

      We should not confuse technical goals with political goals. I wish that we, the open-standard proponents, would be more concerned about which actual technology is being promoted for openness. JS is not only a bad programming language, it is a bad runtime byte code in particular when it comes to native app competition (JIT, typing). If junk makes it into a technical standard, it can harm the open standard more than Flash ever could. Flash and JavaFX only exist if there is still need.

    • EastCoast

      What an ignorant and arrogant post. Should game developers not get paid for their efforts? While playing the games may be free, the time to develop them is substantial. Sometimes this is paid for by advertisements, sometimes by sponsorship, sometimes by site operators. Developers have the right to protect their content as much as you have to protect your house from being burgled.

      Have a look at sites like audiotool.com. If flash were to die, you wouldn’t be able to see this type of site for another 10 years while html catches up. It’s abhorrent and shear arrogance that people like yourself want to deny choice, deny expressiveness and creativity on the web by inflicting your narrow-minded technological bigotry on others. Anti-flash haters truly are the book burning mob of the modern day, there is nothing ‘democratic’ about that.

    • JS_hater

      Yet one addition to my post: The popularity of the flash-plugin was based on the web’s chronic weaknesses. Thus, flash-bashing is somewhat hypocritic. Java-Applets existed for the same reason and were unwanted for the same reason, but were less successful than Flash. Now flash’s success turned into a curse. By recent HTML5, many web-zealots behave as if flash prevented the web from improving, which is a blatant lie. Blame Microsoft and the broken Javascript instead.
      After all I would prefer a site-specific configurable whitelist for plugins.

  • Sean

    Icing on the cake is HTML5 controller based games. Ditch those stupid keyboard limitations and funky mouse remappings. Time to kick Flash to the curb.

  • http://www.lemieux-design.net Al Lemieux

    Wow, I never looked at it this way, but after reading all of these comments, it seems pretty clear to me. Why start all over again developing in new technologies just because they are “on the rise”, “hip”, or trendy? Why break free from a tried and proven method of delivering incredibly immersive experiences that Flash has been delivering for over a decade now? With all of the support that the Flash community offers.

    What’s the compelling reason to make the move to HTML5 development when support is spotty and browser compatibility is clearly an issue? Moving forward, since the browser manufacturers can’t seem to come to consensus about how these technologies will be implemented, there’s always going to be difficulties in getting reliable performance in each one.

  • http://turbosqel.pl turbosqel

    “Flash and other proprietary technologies all cost the developer” – wrong , You can compile flash for free and legal.( FlashDevelop , free sdk)
    What You see in charts is massive web campaign that trying to say people that new HTML5 is the best . It is best for websites , services , but not for dynamic games , where flash is much faster , better and safer for developers (code always looks same in any browser).