Migration from AS3 to HTML5

[gigbig]

Hi guys!

I have an important decision to take, and I think I will need your help/opinion: here at work we create clients for casino-like 2D games for the web, and we are currently using AS3 in FlashDevelop for the task. AS3 works great, but the market asks for HTML5 and we will soon have to reply, creating future games in HTML5.

Our games are modular: the launcher SWF loads the game SWF, that loads toolbar SWF and resources SWFs for audio, GFX, subgames etc, shared by more games. A similar approach would be great, because a monolithic approach would become terrible to manage with a lot of games, as we are 3 programmers, and each one work on various parts of the projects.

 

I am conscious we will have to change our workflow to adapt to HTML5 current limitations (like no standardization for video and audio codecs), but I will have to choose the best way to develop new games, picking tools that will do the job for at least 5-10 years (I know, HTML5 and the tools are so young that it is difficult to tell something about its future).

 

The natural choice to switch from AS3+FlashDevelop seems to be Haxe+OpenFl, but I have had a look at Phaser, Panda, Haxe+Flambe and others too, like Gamemaker, Construct 2, Kiwi etc (I have just opened the official sites and looked through the features), but I can't tell which is the best one for the purpose. Panda and Phaser look great, like Gamemaker and Construct 2, but they look more action-game oriented.

I need a tool that allows to manage a lot of behind-the-scene logic (as the GUI is pretty simple), load external resources (like complete subgames) at runtime and deal with remote services using JSON.

 

So, what are your suggestions?

Thanks!

[d13]

 

The natural choice to switch from AS3+FlashDevelop seems to be Haxe+OpenFl

 

Yes, it is!

The most important advantage to sticking with your current workflow is maintainability, stability, familiarity, and a brilliant high-level API.

The current HTML5 frameworks/tools you mentioned are not mature and undergo constant, considerable, and rapid API changes (with lots of API inconsistencies and puzzling quirks).

They're fun, but I would not bet the farm on them.

(And, poor old Gamemaker was just sold to an online gambling company...I'm now so glad I didn't jump on that bandwagon!)

Perhaps if you were staring from scratch, you could consider some of those frameworks....

But, you've invested so much into your current workflow that I don't think its worth the expense of upturning the apple cart.

The AS3/Flash API has been stable for years, and is apparently going to remain so for years to come - so it's a good long-term bet.

Flash games I made in 1999 (with AS1.0) still work today.

Also, you'll find there's no performance benefit to switching to a pure HTML5 workflow (except perhaps some edge cases.)

And, HTLM5 tooling is not as good as what you currently have with Flash.

 

The HTML5 export from OpenFL/Haxe is is still experimental, but getting better - can anyone out there using comment on its current state?

The current version of Flash Professional also has an HTML5 export option - which I have not tried.

And anyway, there's always Adobe's Flash Player, which, despite the negative press is still widely installed everywhere.

(FYi: I spent 10 years developing exclusively with Flash and have been doing HTML5 for the past 3-4 years.)

[Ninjadoodle]

I made all my games in Flash AS3 until about a year ago. My last 2 games have been made with Panda and I honestly couldn't be happier with it.

 

The hires and retina options are awesome and everything works really nicely. Its also very straight forward and an easy transition from actionscript.

 

Hope this helps

[adireddy]

If you are targeting HTML5 then I would also suggest to look into the combination of Haxe and Pixi.js

 

https://github.com/adireddy/haxe-pixi

 

You can find samples with source code there.

 

If you are looking for more advanced features like physics, particles, etc then look at the combination of Haxe and Phaser. Phaser uses Pixi.js for rendering.

https://github.com/Blank101/haxe-phaser

[Mathieu Anthoine]

+1 for Adi solution

The combination of Haxe and Pixi is just perfect. A powerful language with a simple an efficient graphic engine (pixi) close to Flash display list and API !

Keep Your Flash workflow for graphics and animations, think about a way to export your assets to a format supported by pixi and voila

My 2 cents,

OpenFl: poor performances in html 5, hard to configure, unstable even if it's certainly THE framework to follow.

Flambe: export in flash and html5 but totally different Way of thinking o_O.

Phaser: you have to think like phaser, too specific for me...

[Mathieu Anthoine]

Just one thing missing in Pixi, flump support.

[Jason4Ever]

Yes, it is!

The most important advantage to sticking with your current workflow is maintainability, stability, familiarity, and a brilliant high-level API.

The current HTML5 frameworks/tools you mentioned are not mature and undergo constant, considerable, and rapid API changes (with lots of API inconsistencies and puzzling quirks).

They're fun, but I would not bet the farm on them.

(And, poor old Gamemaker was just sold to an online gambling company...I'm now so glad I didn't jump on that bandwagon!)

Perhaps if you were staring from scratch, you could consider some of those frameworks....

But, you've invested so much into your current workflow that I don't think its worth the expense of upturning the apple cart.

The AS3/Flash API has been stable for years, and is apparently going to remain so for years to come - so it's a good long-term bet.

Flash games I made in 1999 (with AS1.0) still work today.

Also, you'll find there's no performance benefit to switching to a pure HTML5 workflow (except perhaps some edge cases.)

And, HTLM5 tooling is not as good as what you currently have with Flash.

 

The HTML5 export from OpenFL/Haxe is is still experimental, but getting better - can anyone out there using comment on its current state?

The current version of Flash Professional also has an HTML5 export option - which I have not tried.

And anyway, there's always Adobe's Flash Player, which, despite the negative press is still widely installed everywhere.

(FYi: I spent 10 years developing exclusively with Flash and have been doing HTML5 for the past 3-4 years.)

I'm new to both of them , so because you have a big exp. with Flash and with HTML5 too , if i want to build isometric an online game (like warcommander on facebook) , is HTML5 enough for rendering with same speed like Flash ? and will be slow ? and go with Flash ?

[d13]

I'm new to both of them , so because you have a big exp. with Flash and with HTML5 too , if i want to build isometric an online game (like warcommander on facebook) , is HTML5 enough for rendering with same speed like Flash ? and will be slow ? and go with Flash ?

Yes, the speed will be at least as fast, and probably faster if you're using a good renderer like Pixi.

But, as with any web-based service, the game will perform differently on different browsers and platforms. 

So you'll have to do a lot of testing on all your target platforms, as early as possible... just like web development in general.

 

The only big reason to be conservative about HTML5 at the moment is the stability of the API's that your code is based on.

For example, if you make a big game in Phaser or Pixi today, you might upgrade to a newer version 6 months from now and find that none of your code is working, and you don't know why.

That's not a problem for a small project, but it is if you're developing a big commercial code base that you hope to build on for years to come (like @gigbig seems to be doing).

The Flash API is battle-tested and unchanging, so you know you're building on a rock-solid foundation.  

[totor]

since pixi handles only graphics, how do you handle sounds and inputs with haxe targeting html5?

[labrat.mobi]

great thread, even I have AS3 background.

 

Typescript + Pixi has worked great for me.

For sound I use howler.js, it does a good job and for tween I use sole/tween.js

[enriqueto]

a year ago I switched from Flash Builder + AS3 

 

to: WebStorm + Typescript + Phaser

 

we are doing well on casual games.

 

updating a game to a new Phaser version implies max. 3  - 4h of work. The latest versions requiring less.

[adireddy]

since pixi handles only graphics, how do you handle sounds and inputs with haxe targeting html5?

 

@totor, You can use sound libraries like Howler, Buzz.js, SoundJS, etc to handle sounds. I have created haxe externs for howler and buzz and I am currently using Howler as Buzz has a very minor issue on iPad 2 when I used it a few months back.

 

https://github.com/adireddy/haxe-howler

https://github.com/adireddy/haxe-buzz

 

For input, there are a few add-ons available for pixi.

 

https://github.com/SebastianNette/PIXI.Input (I have tried this one a while back and it works)

https://github.com/limikael/pixitextinput

[Jason4Ever]

Yes, the speed will be at least as fast, and probably faster if you're using a good renderer like Pixi.

But, as with any web-based service, the game will perform differently on different browsers and platforms. 

So you'll have to do a lot of testing on all your target platforms, as early as possible... just like web development in general.

 

The only big reason to be conservative about HTML5 at the moment is the stability of the API's that your code is based on.

For example, if you make a big game in Phaser or Pixi today, you might upgrade to a newer version 6 months from now and find that none of your code is working, and you don't know why.

That's not a problem for a small project, but it is if you're developing a big commercial code base that you hope to build on for years to come (like @gigbig seems to be doing).

The Flash API is battle-tested and unchanging, so you know you're building on a rock-solid foundation.  

Your response is very rich , look into this game :

https://apps.facebook.com/cfglory

it's an isometric game and built on HTML5 as I noticed.

 

but I tested it and i'm feeling that it's slow or discrete speed if we compared i to SWF games.

 

another thing i noticed high memory usage from the browser? comparing to opening a game on SWF on the browser

[d13]

 

but I tested it and i'm feeling that it's slow or discrete speed if we compared i to SWF games.

There are too many variables to tell why the performance is bad.

It could be due to inefficient rendering, memory leaks, platform quirks, bloated game logic etc.).

A poorly engineered Flash game will run just as badly.

[harrywatson]

Have you tried createjs?

 

http://createjs.com/Home

 

It's based on the display list of AS

and Making migration simple

[d13]

Have you tried createjs?

 

http://createjs.com/Home

 

 

... and just for anyone else using CreateJS, there's excellent add-on library called ZimJS that gives you some extra useful features and short cuts:

 

http://zimjs.com/code/

[gigbig]

Yeah, a lot of options! Currently:

- OpenFl sounds a bit immature for HTML5, too risky for what I have to do, maybe

- Pixi is great, but Haxe + Pixi is maybe too rough (and I'd like native libraries for the language I am going to use, I am a bit cautious about externs etc).

- Phaser... but wait, Haxe + Phaser?! Well, as @d13 said, it looks more oriented to simple projects.

- Panda looks great too, but it is maybe too niche for my objective

- Flambe has everything inside, handles HTML5 like a charm and is widely used by big companies. And it is on top of Haxe, a general purpose language I think I'd prefer to Typescript. I can use Flash through Flump. I have to leave displaylist for a new way of thinking: components (Unity3D-like, I think).

- I'd prefer to avoid everything involving JS directly, so maybe CreateJS too (or am I wrong?)

- Gamemaker has been bought by Playtech, that could sound like a security, but I'd prefer not to invest my time learning a specific language like GML (Gamemaker Language), I could do it at home for my projects, but not here at work.

 

Any update from you? Different experiences anybody?

For now Flambe looks like the more attractive to me, and it should evolve soon too.

[d13]

 

For now Flambe looks like the more attractive to me, and it should evolve soon too.

I agree, I think that's the best choice for your project.

[totor]

Assuming Haxe,If my only target was html5, i'd chose between Flambe or awe6 or phaser. The problem with Flambe being that if you want to target also flash you have no easy way to have a only file swf at the end but. You also have haxeflixel but html5 is still experimental unless you add openfl-bitfive (not tested).

[Milton]

I think OpenFL's HTML5 target is just fine. It uses Pixi, and I don't see any difference in Phaser and OpenFL performance.

[gigbig]

Assuming Haxe,If my only target was html5, i'd chose between Flambe or awe6 or phaser. The problem with Flambe being that if you want to target also flash you have no easy way to have a only file swf at the end but. You also have haxeflixel but html5 is still experimental unless you add openfl-bitfive (not tested).

 

If I want to create Flash games I can continue using the old projects, the new wave of games are HTML5 only.

What about awe6? I think I have seen the site a while ago, but didn't remember about it and noone named it except you. Please tell me what you know about it. How does it interact with OpenFl? Are there native libraries for tweening? Does it handle incompatibilities with different browsers when targeting HTML5?

[totor]

You may have better answers on the awe6 google group, irc it uses openfl and/or createjs and is components heavy.

[gigbig]

@totor: before registering in the 1000th forum I'd prefer to listen to your personal experience

[totor]

It was a year ago so, irc it was working out of the box and reasonably fast with low end iphone and samsung using the createjs output. Did not have time to dig deeper since i needed native desktop too so haxeflixel seemed more adequate.

[gigbig]

Resurrecting the topic.

I heard about a possible (?) way to use components in HTML5: IFrames. Someone told me that it is possible to use IFrames to build a more complex application: in my case I could have the game canvas inside an IFrame, the toolbar in another IFrame upon the first one, a subgame in another one and so on. Is it possible?

Let's say it is possible, how could the components communicate between each other?