How to convert Flash to Unity

The days of Adobe Flash Player are numbered. Once a #1 tool for web apps, games and multimedia in browsers, Flash is going to be completely obsolete by 2020. Eventually it has been already outdated, as even Adobe itself now promotes HTML5, a newer and universal standard. But if you have content build in Flash, what do you do to keep it relevant? You convert Flash to Unity.  

Let’s make a short introduction before exploring how to do it. Even though Flash has been key for interactive web content, and even big number of mobile apps, modern browsers now integrate its functionality by default. For instance, Chrome blocked Flash in the end of 2016 and will discontinue the support by 2020.

Microsoft will stop Flash support for Edge and IE by 2019, Google, Mozilla, Apple and Facebook will do the same by 2020. And crucially:

Why convert Flash to Unity

The new and open standards for web media are now HTML5, WebGL and WebAssembly, with same capabilities as Flash plus improved functionality. When looking for tools to port Flash games/videos to HTML5, you are likely to find none. It is a more complicated matter, and even using Unity to convert Flash is a bit different from what you may expect.

Practically, without Unity, you will need to deal with multiple tools and technologies, making the process long and costly. The problem of “Flash to HTML5/JavaScript” issue is that a SWF file is not editable and you can’t extract code, image assets, sound effects separately. Like it or not, you’ll have to rewrite all from ActionScript as JavaScript, thus basically building a game again from scratch.

The only way to alleviate the pain, and enhance the code meanwhile, is to use Unity3D. It is a top-notch IDE (integrated development environment) with rich functionality for gaming, video and animations. It is super-popular and ever-growing, claiming 34% of top mobile games to be built with Unity.

So main arguments to use Unity to convert Flash games are:

• Cross-platform integration (Mac, Windows, iOS, Android, PS4, Oculus, etc.), results in less resources needed;
• Unity provides native support for HMTL5 and JS builds, i.e. you can convert everything inside a Unity project to suitable formats;
• Unity is the leader in gaming software, as well as VR/AR gaming;
• Guarantee of problem-free smooth run in any modern browser;
• Suitable both for web and mobile content;
• Up-to-date code and better performance of games in result.

Now, here are 3 basic ways we can convert Flash to Unity. And again, remember that none of them is easy. For each method we used a plain simple Gravity Balls game to highlight the process.

#1 Flash to HTML5 auto conversion

Probably, the only proper way to port a Flash game to HTML5 without Unity is by using Adobe Animate CC. Previously Flash Professional CC, Animate is now Adobe’s go-to tool to develop web animation in HTML5, with a built-in support for plug-ins.

This is the only universal approach for auto conversion using raw flash assets. It requires  Adobe Professionals/Adobe Animate CC plus Google’s Swiffy.

One of the plugins by Google, Native Flash Player, for example, is also in use by Flash/Actionscript developers to deploy new HTML5: convert .as, .fpa, .png, .mp3 into .HTML and .JS. It works with Flash movies (.swf, – swiff), compiling .as, .fpa, .png, .mp3 into .swf.

Swiffy Flash conversion tool probably is the closest to automatic Flash to HTML5. And though it may not be able to convert complex apps and games, but with some tweaking it can convert lots of stuff. Applied by our Unity developers with Gravity Balls test game, it performed best in such aspects as timeline graphics and animations (exactly like in original Flash version), in-game mechanics, keyboard interactivity.

Pros:

• Adobe supports Animate CC
• Actionscript 3.0

Cons:

• needs a player to run the movie
• needs a server to run locally
• Flash based technology is practically obsolete

Find more tips on using Animate CC to convert Flash to HTML5/JavaScript in this video by Thomas Benner:

Of course, such auto conversion is far from perfect. With Swiffy we get the following limitations:

• Flash components do not convert. For games it may not be an issue, however, it can be problematic for applications relying on Flash components.
• Sound does not convert.
• Some graphical artifacts remain when moving screen to screen.
• New version is a bit less responsive than the Flash version. And it can be crucial in games, where even slight delays will ruin gameplay.

And main backdrop when using Animate CC, is that <canvas> element and the whole JavaScript in resulting HTML5 will be broken.

#2 Manual build from SWF with sources

Yes, the bitter truth about converting Flash to Unity, is that you actually have to rebuild everything from scratch. The good news is that it pays off by having relevant up-to-date game/app working smoothly across modern web, and any C# developer can do this.  

It will take less time and effort, if you do have source files, like we do for our test project. It is, in turn, based on a simple game of Gravity Ball. 

So, to convert Flash to Unity in our project we did the following:

• Assigned one junior C# developer with Mono framework and Unity Engine (SDK), Visual Studio Code (IDE);
• Time: 8 hours for an MVP, 10 hours for full release;
• Generated HTML5, JS and WebGL scripts, which required 50 MB of RAM (8 MB for the whole package);
• Included: high resolution pictures x4, icons x1 (auto-generated for each screen size), audio track x1 (5.6 MB, uncompressed), scripts.

Game components include sprites, collider 2D and 2D physics 2D. Scripts include drag by mouse and wall bounces. Here are the excerpts: first, a C# script for the mouse.

 private void OnMouseDrag()
    {
        _isHeld = true;
        _mouse.x = Input.mousePosition.x;
        _mouse.y = Input.mousePosition.y;
        
        var dragedPosition = Camera.main.ScreenToWorldPoint(_mouse);
        dragedPosition.z = _positionZ;
        _transform.position = dragedPosition;
    }

    private void OnMouseExit()
    {
        if (_isHeld)
        {
            _isHeld = false;
            _temporal.x = _mouse.x;
            _temporal.y = _mouse.y;
            _rigidBody.velocity = Vector2.zero;
            _rigidBody.AddForce(_temporal, ForceMode2D.Force);
        }
    }

And adding bounciness to walls:

   private void OnCollisionEnter2D(Collision2D other)
    {
        if (other.gameObject.tag.Equals(Constants.TAG_WALL))
        {
            _temporal.x = Random.Range(-2, 2) * Constants.WALL_COLLISION_MULTIPLAYER;
            _temporal.y = Random.Range(-2, 2) * Constants.WALL_COLLISION_MULTIPLAYER;
            _rigidBody.AddForce(_temporal, ForceMode2D.Impulse);
        }
    }

Building manually in Unity is one of the ways to port Flash to HTML5. There are ups and downs.

Pros:

• .Net, agnostic,cross-platform
• Multiple plugins for Unity and third parties
• Built-in support for game development
• 3D and 2D environments
• Running all kinds of servers (blockchains, recognitions, code/decode, multiplayer games, chats, video conferences, etc.)
• Conversion from Flash animations to Unity (GAF)
• Plugins for integrating Flash to Unity limited by complexity

Cons:

• Currently (27.02.2018) still no stable support for mobile browsers

#3 Manual build from SWF without sources

Yes, it sucks if you even don’t have access to Flash source files, but what you’re going to do. You just have to tuck the shirt in, get lots of coffee and do the job. Time one will have to spend depends on the scale of the game, features, assets, etc. With our little demo project, a rough estimation is this:

• 1 menu screen: 8 to 16 hours
• Each new screen in 2D/3D: 8 to 40 hours, with lights, shadows, particles, pre-made animations
• Testing and bug fixing: +25% additional time

Workflow sequence will go something like this:

• First, play the Flash movie;
• Figure out features and game logic (menus, buttons, level design, UI and fields, the workflow on each button);
• Level design – depends on the assets, sprites etc.;
• Assets for models – 2D and 3D artists working separately;
• Integrating plugins for video/audio, capturing the video;
• If online services or databases are at play – capturing and analyzing requests. A tip on solution: make a custom server, with back-end developers create a separate server with its database and server side scripting.
• Testing and fixing.

Whole scripts in Unity are licensed MIT, are free to use, distribute and modify.

using UnityEngine;
[RequireComponent(typeof(Rigidbody2D))]
public class DragAndPush : MonoBehaviour
{
    [SerializeField] private bool _isHeld;
        private Vector2 _temporal;
    private Vector3 _mouse;
    private float _positionZ;
    private Rigidbody2D _rigidBody;
    private Transform _transform;
    private void Start()
    {
        _rigidBody = GetComponent();
        _transform = transform;
        _temporal = Vector2.zero;
        _mouse = Vector3.zero;
        _positionZ = _transform.position.z;
    }
    private void OnMouseDrag()
    {
        _isHeld = true;
        _mouse.x = Input.mousePosition.x;
        _mouse.y = Input.mousePosition.y;
                var dragedPosition = Camera.main.ScreenToWorldPoint(_mouse);
        dragedPosition.z = _positionZ;
        _transform.position = dragedPosition;
    }
    private void OnMouseExit()
    {
        if (_isHeld)
        {
            _isHeld = false;
            _temporal.x = _mouse.x;
            _temporal.y = _mouse.y;
            _rigidBody.velocity = Vector2.zero;
            _rigidBody.AddForce(_temporal, ForceMode2D.Force);
        }
    }
    private void OnCollisionEnter2D(Collision2D other)
    {
        if (other.gameObject.tag.Equals(Constants.TAG_WALL))
        {
            _temporal.x = Random.Range(-2, 2) * Constants.WALL_COLLISION_MULTIPLAYER;
            _temporal.y = Random.Range(-2, 2) * Constants.WALL_COLLISION_MULTIPLAYER;
            _rigidBody.AddForce(_temporal, ForceMode2D.Impulse);
        }
    }
}
// For general 
public static class Constants
{
   public const float WALL_COLLISION_MULTIPLAYER = 10f;
   public const string TAG_WALL = "Wall";
   public const string TIME_LABEL = "Time Played: ";
   public const string WEBPLAYER_QUIT_URL = "https://www.google.com";
}

Note: when converting complex games, which will demand more time and preparations, Unity WebGL only supports baked GI. GI stands for “global illumination”, meaning basically light bouncing off of surfaces. Real-time GI is currently not supported in WebGL, only non-directional lightmaps. Find more specifications at Unity WebGl manual.