Porting Flash games in HTML5

using Phaser framework and Javascript

Framework & Tools
Phaser 2.3, Adobe CC 2014, Codekit, Grunt, NodeJS, GIT

(Just have a look further for more explanations)

Programming Language
Javascript

(Not as cool as C# but interesting too !)

Customer
France TV Education
Supported browsers
Safari
Chrome
Internet Explorer
Firefox

I spent a few months on this project when working for Kiupe, a company specialising in educative games for young people (You should have a look to Math Mathews and Kilubu licences on iTunes, they’re great !).
My part of the job consisted in porting a half-dozen of these Flash games so that they could be played on mobile browsers. Let’s say that our customer wanted to get an up to date web portal and that he needed its existing games to be accessible from mobile devices.
Do you know those good old-fashioned Adobe Flash games ? Then, perhaps you know that this plugin is no longer supported on most mobile devices and Kiupe had to redo those games from scratch (Sometimes existing graphic assets could be used and sometimes not) so that they could run on Safari, IE9 to 11, Firefox and Chrome !
15 games where involved and I took care of 5 among them.
(*Sorry if you don’t speak french !)
  • Learn about Chemistry : Describe the matter doing chemical reactions
  • Always about Chemistry : Transfom the matter to learn ever more !
  • Ecology is  good for you and it’s good for the world ! Let’s have a look to the Packages and their life cycle.
  • Have you ever wondered how your 5 senses work ? This one is made for you ! (I guess your questions will remain unanswered if you don’t speak french…)
  • And I’ve made only one-third of this one about Electricity (Learn how not to set fire to your house !)
FTV : Packaging
Define the packaging that meets each specification
FTV : Electricity
Choose the correct fuse to light the equipments
FTV : Describe the Matter
Experiment to describe the 3 states of matter
FTV : The 5 Senses
Learn about your 5 senses
Eventually, you can find these games and their mechanics are fairly basic because they are based on quizzes, point & click or drag & drop.
Keep in mind that we were not supposed to modify the existing games (and so we didn’t), but things are not so simple as it appears… and there is a lot more to say about this project !

Accelerated overview of one of the games
Workflow

To make it short, developing HTML games for web and mobile devices is very different from using turnkey software like Unity !
The main difference being that you don’t have an editor to build your scene…

Building the Scene

When you’re extracting graphic assets from an old Flash project, or when your artist colleague makes new ones with Adobe Illustrator, there’s no reason why you shouldn’t build your scene with such tools (Adobe Animate CC to be accurate). But you still have to export the result in an appropriate way (e.g : an XML file), in order to put it to good use : Fortunately, Kiupe had developed an appropriate plugin for that !

Updating the Code

At first I worked on Mac and used Codekit which is a pretty powerful tool when you’re developing web application. With such a tool, you can emulate a local server, compile your code and refresh your browser each time you save your modifications in your IDE.
It keeps your JS components up-to-date, and so on… as long as you are working on Mac !

From Mac to PC

I was raised with PC and Windows for a long time (and I liked that !) and for some reasons I had to leave my iOS environment after porting my first game.
Everything was fine until I had to replace Codekit which is unknown on Windows !
And thus I discovered Grunt and NodeJS.
Grunt is a task runner :  It replaces a good part of Codekit functionalities for Windows even if it’s far less user-friendly (Compilation, minification, and so on… )
Fortunately, you can find lots of pretty useful tutorials on the web to understand how it works, and you won’t be able to do without, once you have done your first step with it (Believe me !)
As for NodeJS... Well, I’m far from an expert and I simply used it to emulate a local server. I could probably have used Wampserver or an equivalent.
It’s worth noting though that NodeJS is a powerful tool in itself and that it offers interesting prospects should you develop network applications.
Especially if you’re like me… I mean PHP is not your friend…
Phaser
Phaser is a well-made HMTL framework to make browser games !
Once you’ve made your setup with all the perfect tools you need , you still have to roll up your sleeves and dive into the code ! 
Just to be clear about my part of the job : I was in charge for developing the gameplay part of 5 games.
The Hmtl and Javascript frameworks had been put in place before my arrival, so I just had to make good use of them and of the chosen libraries : Bower, EaselJS, ModernizrTweenJS and jQuery of course.
And therefore I could concentrate my efforts into learning and using Phaser, an Hmtl5 framework designed for browser games.Phaser is a very nice tool, I would recommend it if you want to make simple 2D games !
When you have already worked with game engine like Unity3D or Unreal Engine, you can quickly get familiar with the logic of the engine.
Here, there’s a “Game” instance in charge of managing your game (you can think about “UEngine” abstract class in UE4) :
  • All other classes have a reference on this “Game” object, so you can access it wherever you want
  • A “State” class is used to manage your scenes
  • There’s a “Signal” class to handle Events (I looove Events and I’m not the only one )
  • Of course you can derive all classes to create yours from existing ones : Input, Sprite, Animation, etc….
All of this is clearly documented so you have no excuse not to make your own browser games !
I won’t go further into details here, but I will try to give more information, especially about Phaser, when I have time for a little post on that matter (and maybe serveral ones !)