Unity2Canvas

Technical Description Q&A

How does the product work?

The product is a Unity extension, which is installed alongside your standard Unity installation. It adds an additional menu to Unity with the text "Unity2Canvas". When you open the menu you can go to "Settings" or directly "Build".
Building gathers all your game data across all prefabs, scenes and some project settings and serializes them to a binary file. All C♯ code gets transpiled to JavaScript. All of that gets put together in a folder, alongside your audio and image files and some additional JavaScript files provided by us, which serve as implementations of UnityEngine and mscorlib.

How is it constructed?

It's a Visual Studio solution with multiple C♯/JavaScript projects and some additional tools. One part is our implementation of UnityEngine's functionality. One part is the extension itself. One part is what we call the UnityPlayer, which is responsible for the initial load of the game.

What does the Editor Extension request?

Unity version 5.4+
May request administrator access on your machine to install it.
A valid Unity project that compiles and runs within Unity.
A few settings to be manually entered before the first build.

What is the input?

A valid Unity project and a few settings. For more details look into the answer of the next question.

What is the workflow?

In steps:

  1. You create a Unity project or take an existing one.
  2. You create the folders you want, the scenes you want, the game objects you want. You import textures and audio files that you want. You write the code you want in C♯.
  3. You try out your game within Unity to see it's working properly.
  4. When you feel like trying out your game in the browser, instead of going to the regular build menu, you go to the Unity2Canvas menu.
  5. You enter a bunch of easy configurations there like "default resolution", "project name", "limit fps yes/no", "output directory", etc and then you press Build.
  6. You watch and wait for the progress bar to fill up.
  7. If there are errors afterwards, there are three possible ways to continue:
  8. - Review and modify your code, because it is trying to use something unsupported (like MeshRenderer).
  9. - Contact us and tell us that there is this feature you love and believe should be supported, but it's not and we should definitely add it.
  10. - Contact us and tell us we have a bug and we will try to fix it as soon as possible.
  11. If there were no errors, you open the output directory in your browser on localhost (assuming you have a working HTTP server on localhost, if not - install one or transfer all the output to a sandbox HTTP server that you have access to).
  12. You observe that your game loads and check to see if everything is working as it would inside of Unity.
  13. If it's not - you contact us immediately to complain and explain to us the case, so we can figure it out as soon as possible and deliver a fix.
  14. If you want, you can also review the output JavaScript and debug it within the browser as it would be human readable.
  15. Repeat from step #2 until satisfaction is achieved.
  16. Finally build your project in Release mode, instead of Debug mode.
  17. Observe that everything is still OK and the output size is smaller.
  18. Upload the output on a live server and shoot us an email that we are awesome ;)

What are the contents of a project?

The contents of a project are just like any other Unity projects: scenes, prefabs, gameobjects, C♯ scripts, etc. You just have to keep in mind that you are limited to 2D stuff.

What happens when you take a Unity project and hit export?

You get a progress bar and eventually most likely get a list of errors about unsupported things that you need to change or maybe even discuss with us as some might be implementable. Eventually as you clean up the errors, the progress bar reaches the end and you are done.

What’s in the folder?

The output folder contains images (atlases), audio files, text files, JavaScript files and a data file that need to be loaded. The data file contains all of the game's data like prefabs, scenes, gameobjects, components, etc. serialized in a very constricted binary format, which we read and deserialize when the game begins. The script files would be: mscorlib.jb, UnityEngine.js, and Main.js which is all of your C♯ code transpiled to JavaScript and put in a single .js file. Other than that there may be one .css file and an .html file.

How do you use Unity in a container?

You could just change the .html file inside of the WebPlayerTemplates folder to be the one of the webpage on which you want to deploy your game and the game will create it's own canvas in the designated element and stay within that. Or alternatively if you want to make sure things are separated completely you could just make the output .html file have nothing in it other than an empty div to contain the game's canvas element and then use an iframe to insert that anywhere you want.

How would you advise running in a container for Facebook?

Iframe.