In education, technology moves more slowly than in the consumer world. Institutions must eke all of the value out of their existing hardware, and even when they do make new hardware purchases, the hardware is still not requisitioned with games in mind. This means that when we are charged with building software that is accessible on the vast majority of operating systems and hardware available to schools, our development tools and technology platform need to help us reach those goals.
Like it or not, educators do not enjoy bothering their tech admin to download and install software. They would much rather be able to point students at a URL link and get them playing. This means that while native app distribution is a strategy available to most game developers; it is only helpful to us insofar as it supports the minority of schools with large tablet deployments. At the end of the day browser is king when it comes to educational software distribution.
Because of the deprecation of Flash and the rise of HTML5, a couple of technology platforms have risen to the challenge of supporting games in the browser without a plugin. One of them is Unity. Unity supports compiling C# code into javascript using a proprietary tool called Unity. Unity supports compiling C# code into javascript using a proprietary tool called IL2CPP and an open-source community tool called Emscripten.
While this system is extremely powerful, it leaves Filament wanting in a few key areas:
- Long build times. It takes a really long time to build javascript from C#. Unity is continually working to improve build times but it’s a big challenge considering the complexity of the build process.
- High memory consumption. An empty Unity scene uses something like 300 – 400 MB of memory in the browser. Most chromebooks only have 1 GB of memory to spare for all of the Chrome tabs the user has open.
- No official mobile browser support. While certain very very simple Unity games can run with a lot of tweaking in a mobile browser, for the most part we have to distribute native apps as well as the “universal” browser version to reach all of the places we need to reach.
- No IE support. Let’s face it. A lot of schools are still on older versions of Windows and are using the browser that comes with the operating system, Internet Explorer.
But here is the thing, we love Unity! From a creative standpoint it has everything our designers, artists, and programmers want in a content creation, animation, and scripting tool. So we embarked on a quest to use Unity for content creation and rapid prototyping but combine it with some system that builds faster, uses less memory, and works on mobile browsers and Internet Explorer.
unity3d-pixi is born. Initially developed during Fall 2016, It provides a runtime for a subset of Unity 2D functionality written in Typescript as well as a set of C# scripts to generate the Typescript equivalent of Unity scenes, prefabs, and other assets. As the name implies, the runtime is built on top of Pixi.JS, a feature-rich WebGL rendering pipeline with a Canvas 2D fallback to support browsers all the way back to Internet Explorer 10.
Some things that you can do in unity3d-pixi and Unity:
- Develop responsive UI with Canvas, Rect Transform, Button, Text, and nine slice sprites.
- Add custom scripts to entities and set string, int, bool, array, and object reference properties in the editor.
- Create prefabs and instantiate them dynamically along with their dependencies.
- Add a camera shake effect.
- Pack textures into spritesheets by tag.
- Animate transform, sprite, color, and more on the dope sheet.
- Create animation state machines with conditional transitions.
- Write coroutines. Yeah!
We chose to use Typescript because it has a lot of the language features provided by C# but it translates directly to Javascript. We are also using Webpack, Babel, and the Awesome Typescript Loader to let us use the ES6-only language features in Typescript such as Generators, Sets, and Maps. With generators we have a coroutine implementation that has a very similar syntax to the Unity coroutine API. Sets and Maps let us do single statement operations that would be much more complex to implement with Arrays and Objects. In the future, when browsers more widely implement native support for these ES6 features, we will be able to drop or lessen our reliance on Babel and pick up a performance boost.
There are some advantages and disadvantages of this new engine.
As you can see, unity3d-pixi fills all of the gaps that we identified in Unity WebGL, but it is missing a number of features to make high fidelity 3-D games in the browser. In contexts that do not require mobile browser or Internet Explorer, Filament can make a bigger game on a smaller budget in Unity WebGL. Filament is excited to continue to expand the capabilities of unity3d-pixi so that we can leverage the power of Unity in places that Unity WebGL or any of it’s other 11 supported platforms cannot reach.