Advise - Phaser/OpenFL/Something Else

[x3fold]

Hi, I'm looking for some advise about with framework is the best way forward for me.

I've been tasked by my boss to convert all our legacy AS2 flash interactive elearning content so that it runs within a browser (and on mobile devices) without the need of plugins.

I've been researching and come up with a shortlist of Phaser or OpenFL.

The biggest issue for me is that I'm a Designer, that can code a little. So for me Flash was a perfect platform. I could design all my assets, layout everything how I wanted and then just add code.

Our content isn't massively complex (the most basic is simple Math questions), but there is some complex stuff dealing with Algebraic Modelling and Quadratics, 

A big majority of our content relies on the user entering an answer into a input field and clicking a button to check if they have the answer correct. So the ability to be handle text (large amounts of it) is really important. Originally I had been looking at recreating everything with Animate CC using HTML5 Canvas, but input text isn't supported you have to use DOMElement to link a html input text field and then overlay it over the top - not a major issue if you only have 1 or 2, but unfortunately we have far more than this.

So just looking for a bit of advise - don't want to make the wrong decision and have to rewrite everything a third time!!

Thanks

[mattstyles]

I don't know OpenFL but Phaser requires plenty of coding experience (its fun though if you wanted to upskill!)

Maybe something like GameMaker or Construct would suit better (or Unity, don't think that needs a browser plugin and has a plain html5 output)? I've never used any of those tools though but I know plenty of people here have and created awesome products with them. I'm assuming they work by handling a large part of the heavy lifting and allowing you small windows to write your own custom logic and stuff (i.e. event handlers etc etc), does this sound similar to your flash tooling?

[Ninjadoodle]

Construct 2 / 3 is the best visual software you will find. It's extremely easy to learn and very powerful. The html5 output has awesome performance and you can rely on the devs to constantly update the software. It also has a huge community and crazy amount of tutorials and resources.

You will not find better if you want a visual engine with pure html5 output.

[x3fold]

Thanks both of you for you replies.

First off I must admit I have lied a little when I said I'm a designer that can code a little. Yes I am a designer but I know 4/5 different languages (PHP, Lua, C#, Actionscript, Lingo <- hats off to anyone that remembers that!!) So I'm not adverse to learning something new like Phaser.

I'm a little bit reluctant to go with something like GameMaker or Construct as I don't want to be in the same position again if they decide to call it a day (much the same way as Adobe has with Flash and Actionscript).

I've looked at Unity and while it doesn't need a plugin to work now in a browser (uses webGL now) the file size just for a basic file is pretty large. Our customer base are schools, so they don't have state of the art equipment or internet speed (another reason why flash worked well). In flash all our content modules were under 1mb in file size each, so the bloat from Unity and webGL is not really acceptable.

 

[Ninjadoodle]

I believe that even IF Scirra ever closed doors, your Construct games would still work online, as they are html5. You just wouldn't be able to update them unless they open sourced the software ( which I believe they would do in such a case ).

The fact you are looking for something open source and well supported really only leaves Phaser imo. I personally really love the Panda engine as it's really easy to work with with a tiny overhead, but Phaser is infinitely more popular.

Every other engine out there seems to have huge overhead or not much support.

I don't really think your 100 percent safe with anything you choose. I was in the same boat as you as I used to make a lot of flash games.

[Milton]

Converting ActionScript is probably easiest with OpenFL. AnimateCC seems to be the right choice too. Ask on the OpenFL forum.
I don't see m(any) advantages of using (just) Phaser. If you need it you can use externs from Haxe.

[Rudrabhoj Bhati]

1. If you just want to convert the old stuff, and do not want to develop new HTML5 'elearning material', then by all means use OpenFL.
2. If you want to not only convert the old stuff, but also want to develop new HTML elearning material in future, use Phaser.

[gonzos]

I''ll suggest you openFl because you can use your existing .swf directly in openFl, and also there is a tool for As3 conversion to Haxe/openFl  code.

[b10b]

Be cautious of auto-conversion and magical reuse of existing AS2 content.  Google's Swiffy was really good for automated AVM1 conversions - but still a long way off from providing a decent modern (i.e. mobile) web experience to the user - hence it was deprecated.

By the sounds of things OP requirements don't revolve around high framerates or other game-oriented features - so should avoid limiting options to game engines.  Text-priority e-learning may find a better fit with React (or similar SPA approach).

[mattstyles]

3 hours ago, b10b said:

Text-priority e-learning may find a better fit with React (or similar SPA approach)

I was going to suggest the same thing.

[x3fold]

Thanks everyone for their suggestions and advice

I've been playing around with openFL/Haxe and can't really get my head around it too well

Had a quick play with Phaser and have got a very basic prototype of one task done

23 hours ago, Ninjadoodle said:

The fact you are looking for something open source and well supported really only leaves Phaser imo. I personally really love the Panda engine as it's really easy to work with with a tiny overhead, but Phaser is infinitely more popular.

I'll have a look at Panda, as you say tho Phase is more popular so if I have any issue then there is a greater community to ask help from

 

21 hours ago, Rudrabhoj Bhati said:

1. If you just want to convert the old stuff, and do not want to develop new HTML5 'elearning material', then by all means use OpenFL.
2. If you want to not only convert the old stuff, but also want to develop new HTML elearning material in future, use Phaser.

It will be option 2... while there are no plans to create anything new just yet, I'm sure once the conversion has been done new material will be wanted!

 

18 hours ago, b10b said:

Be cautious of auto-conversion and magical reuse of existing AS2 content.  Google's Swiffy was really good for automated AVM1 conversions - but still a long way off from providing a decent modern (i.e. mobile) web experience to the user - hence it was deprecated.

By the sounds of things OP requirements don't revolve around high framerates or other game-oriented features - so should avoid limiting options to game engines.  Text-priority e-learning may find a better fit with React (or similar SPA approach).

I've tried using auto-conversion tools in the past (had my own AS2 games that I wanted to port) and they just don't work well. It was quicker and easier to learn Lua and write everything from scratch.

I will have a look at React but I'm not certain of the suitability - a big chunk of our content relies on interactive text (both dynamic and input based) but we do also have educational games - so will have to look to see if its viable or not

 

 

[mattstyles]

7 hours ago, x3fold said:

I will have a look at React but I'm not certain of the suitability - a big chunk of our content relies on interactive text (both dynamic and input based) but we do also have educational games - so will have to look to see if its viable or not

In terms of perf all of the 'big' JS app libs/frameworks (React, Vue, Polymer, ng2, etc etc etc etc etc) are all much of a muchness (raw rendering perf anyway; load times, JS parsing, developer ergonomics etc vary) and all fall behind a hand-crafted JS library (very very time consuming and requires lots of knowledge) and (usually) canvas if you want regular updates to happen quickly (webGL accelerated canvas is obviously the quickest of the lot) but it doesn't sound like you need this. 

Using the DOM to render text (even if it updates frequently, such as a type printer or colour changes etc etc) has a ton of advantages over rendering text into a canvas element, particularly if you want to cater for a wide range of viewport resolutions. All the big libs are optimised for smooth animations, even on low-powered devices, they only fall over when you want loads and loads going on at the same time (as you might with lots of game styles).

There is also nothing wrong with using both a canvas-based renderer and a DOM-based one in the same application i.e. a HUD in a flight sim could use DOM for the HUD and canvas for everything else you see. This does come with a slight rendering hit as the browser has to reconcile elements overlaying the canvas element, but most browser games won't hit this problem.

[x3fold]

@mattstylesthanks for all the advise.

I think mixing renderers is a bit out of my league. I'm going to be hitting the ground running so 1 framework that covers most of the areas is what I'm going to end up looking for. If I had more time I would look at using a mix.

[tywang2006]

For as2, there are many code put on the frame of timeline in fla files. I suggest you get some proper dev to work out for you.