Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
November 1, 2014
arrowPress Releases
November 1, 2014
PR Newswire
View All
View All     Submit Event





If you enjoy reading this site, you might also want to check out these UBM Tech sites:


 
Transitioning From Flash to HTML5: Developer Tools
by Austin Hallock on 05/29/13 04:52:00 am   Expert Blogs   Featured Blogs

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.

 

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.

Game Engines

PhaserFlash: 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.

vlxNkyUOther Engines

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: ImpactJSLimeJSGC DevkitCreateJS, 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.

Game Makers

Construct 2Flash: Stencyl → HTML5: Construct 2

Stencyl recently started supporting HTML5 exports, but even they admit their implementation isn't as optimized as it could be. For that reason, Construct 2 is the best choice for a "drag-and-drop" type interface for creating games. Of course, saying it's "drag-and-drop" is over simplification, but if you want a way to develop games without writing any JavaScript, Construct 2 is the way to go.

Other good alternatives to Construct 2 include the HTML5 exports of GameMaker and NME.

Tools

Clay.ioFlash: 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.

TresensaFlash: 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.

TypeScriptFlash: AS3 → HTML5: TypeScript

If you're not a fan of JavaScript, TypeScript a class-based OOP alternative that compiles to Javascript. Using this Microsoft-developed language will make the transition from AS3 to HTML5 a bit easier. You can even convert some of your old AS3 over to TypeScript with this tool.

Distribution

Clay.ioFlash: 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!

marketjsFlash: 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.

Other Resources:

HTML5GameDevs.com

Most HTML5 game development folks gather here, and it's a very friendly, welcoming community.

Tools For Converting Flash Games to HTML5

A great article for porting some of your older games over to HTML5.

HTML5 Game Development Course on Udacity

A course taught by a couple of Googlers that walks through building an HTML5 game.

jsgamewiki

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: austin@clay.io


Related Jobs

Forio
Forio — San Francisco, California, United States
[10.31.14]

Project Manager / Producer (Games)
Infinity Ward / Activision
Infinity Ward / Activision — Woodland Hills, California, United States
[10.30.14]

Senior Sound Designer - Infinity Ward
Treyarch / Activision
Treyarch / Activision — Santa Monica, California, United States
[10.30.14]

Multiplayer Level Designer - Treyarch
Petroglyph Games
Petroglyph Games — Las Vegas, Nevada, United States
[10.29.14]

Producer






Comments


Jonathan Ghazarian
profile image
I like the one to one comparisons here. I'd like to add a couple more libraries that I've found really interesting lately. There's Turbulenz, which recently went open source and Pixi.js. Both of these engines use WebGL when available to get some really amazing performance. There's also a lot of documentation for turbulenz.

Austin Hallock
profile image
I agree, both of those are great options. The HTML5GameEngine.com site I linked to lists Turbulenz - Pixi.js used to be listed there, but it's not technically a game engine, rather, a 2d rendering engine. For those reading this, http://www.goodboydigital.com/runpixierun/ is a game built with pixi.js...try it out on mobile - it's one of the best mobile web games I've seen.

Jonathan Ghazarian
profile image
Yeah, the developers of Pixi have explicitly stated that it is just a rendering engine, but, it's still a really good rendering engine that works well for 2d games. I've looked at a lot of 2d engines for games in html5, especially with webgl support, and so far I think it's the one with the most potential.

Martin Wells
profile image
I'd throw the playcraft engine in as an option as well: www.playcraftlabs.com

Austin Hallock
profile image
Martin, I'll add PlayCraft to the list here once the engine is out of beta: http://html5gameengine.com

I wanted to make sure you guys were still going to keep up with it after the acquisition.

David M
profile image
Is any of this tech used for actual shipping games with a substantial audience? It seems like most HTML5 tech is a science experiment, which is why most game devs have thrown in the towel on it.

Shawn Clapper
profile image
Well, it's really not HTML5; it's a plugin like Flash or WebGL or Javascript. Also HTML5 was a term coined by Microsoft sponsored W3C but most mentions of HTML5 refer to the "HTML" reboot by google sponsored WHATWG.
It's a bit confusing when you get down to it, but you can think of it like Web 2.0. A general buzzword that encompass a lot of different technologies and has different meanings to different people.

Roberto Dillon
profile image
Great summary! For animations, I found Spine is also a very good option that can be easily integrated in HTML5 games.

Almog Koren
profile image
Also check out Scoreoid, we have lot's of HTML5 games using our platform


none
 
Comment: