Daily news, dev blogs, and stories from Game Developer straight to your inbox
Featured Blog | This community-written post highlights the best of what the game industry has to offer. Read more like it on the Game Developer Blogs.
Transitioning From Flash to HTML5: Developer Tools
Tools and resources for those making the switch from Flash to HTML5.
May 29, 2013
5 Min Read
It seems like most are willing to concede that Flash will fall out of popularity in favor of HTML5 for web games, but that's an argument for another time and place. For those making the switch, the tools you'll be using to build your games will change, and this should serve as a good guide for tools that will make the transition as smooth as possible.bu
As of this writing, May 2013, HTML5 tools aren't as polished as their Flash counterparts - they haven't had as much time to mature - but they're improving at a much faster rate. More competition in the space has led to higher quality tools for developers, enough so that HTML5 is just as viable as Flash for developing games.
To make the tools easier to digest, I've formatted this in a way where the common Flash game development tools are compared against their HTML5 counterparts.
Flash: Flixel → HTML5: Phaser
Phaser is "Flixel HTML5", so you'll feel right at home if you're used to Flixel. Even if your background is in FlashPunk, Axel, or some other engine, Phaser shouldn't be too foreign. It developed by Richard Davey (AKA Photon Storm), who has been an extremely active member of the Flixel community for years now, and an avid HTML5 game developer for almost as long.
There are at least a dozen good options for an HTML5 game engine - some not as friendly to Flash/AS3 developers, but still great engines. Some worth checking out include: ImpactJS, LimeJS, GC Devkit, CreateJS, and a quite a few more. As a new technology, HTML5 game engines come and go pretty often, so the person or people behind the engine really matters.
For a full list of respected and maintained HTML5 game engines, including descriptions, reviews, sample games, and important links, see HTML5GameEngine.com.
Flash: Stencyl → HTML5: Construct 2
Flash: Mochi → HTML5: Clay.io
Mochi is the de facto solution for high scores, achievements, analytics and advertising for Flash games. They haven't quite gotten around to HTML5 support, but fortunately Clay.io can fill all of those holes. There is also support for some features Mochi has shutdown in the past year like social integration and in-game payments.
A recent alternative from Google is Google Play Services.
Flash: Animations → HTML5: TFX
Flash is still a great tool for creating animations, and Tresensa has developed a tool that efficiently exports Flash animations to HTML5. You can see it in action for some of their games that perform great on mobile devices: Strandead and Turkey Tumble.
For illustrations, you can export using a tool like drawscri.pt.
Flash: AS3 → HTML5: TypeScript
Flash: Mochi → HTML5: Clay.io
Mochi Media distributes thousands of Flash games across thousands of websites, generating a good bit of revenue for all parties involved. Their system, however, only accepts Flash games. Clay.io has built out its own similar game network for distributing HTML5 games to publisher sites. Just like with Mochi, advertisements are displayed (you're able to easily integrate ads), and developers receive 50-70% of the revenue.
Because HTML5 introduces new possibilities like mobile, Clay.io also helps distribute your games to mobile users, and makes it easier to get them on the Windows App Store, Facebook, Chrome Web Store, Firefox Marketplace, and some others as well.
BoosterMedia offers a similar service - it doesn't hurt to use both!
Flash: FGL → HTML5: MarketJS
Similar to Flash, the most common model for generating revenue in HTML5 games today is through sponsorships and licensing. Though FGL does accept HTML5 games, developers have had better luck at MarketJS since it has more of a focus on HTML5, and more importantly, mobile web games.
Developing a desktop-only HTML5 game these days will lead to a lot of trouble in finding sponsors, after all, you are competing with the huge market of Flash games. Creating a game that works on mobile devices provides a lot of value to publishers of all types.
Most HTML5 game development folks gather here, and it's a very friendly, welcoming community.
A great article for porting some of your older games over to HTML5.
A course taught by a couple of Googlers that walks through building an HTML5 game.
A huge collection of HTML5 tutorials and useful links.
Full Disclosure: I am one of the co-founders of Clay.io, which just so happens to show up twice in this list. If you have any questions about the company, or HTML5 in general, feel free to reach out, I'm happy to help: [email protected]
Read more about:Featured Blogs
You May Also Like
Exploring the 2024 State of the Game Industry report - Game Developer Podcast ep. 39Feb 2, 2024
Phantom inspiration and the ethical auteur with Xalavier Nelson Jr.Dec 8, 2023
Designing Killer Queen: from playground experiment to modern arcade sensationOct 18, 2023
Rod Humble and King Choi illustrate the ambition of Life By YouSep 22, 2023
Get daily news, dev blogs, and stories from Game Developer straight to your inbox
Subscribe to Game Developer Newsletters to stay caught up with the latest news, design insights, marketing tips, and more