lessons learned with unity and webgl
TRANSCRIPT
Lior Tal
Unity Developer (Moon Active)http://www.tallior.com
Oren “De-Panther” Weizman
Unity Developer (Total-Viz)http://de-panther.com/
+ =
Lessons Learned Getting
Wonderball Heroes To WebGLIsraeli Unity Developers Meetup
19/4/2015
Moon Active
Wonderball Heroes
2D “Destroy All Pegs” Game
Over 1 Million Downloads
Developed in Unity 4.5.4
WebGL: JavaScript API for rendering
interactive 2D or 3D graphics inside an HTML5
<canvas> element
WebGWhat ?!
Why WebGL ?
Chrome (M42) dropped NPAPI support
WebGL In Unity
- Released in Unity 5 as Preview
- OpenGL ES2
- Officially supports Chrome & Firefox
- Platform Limitations:● Networking
● Audio features
● Script debugging
● Threads
● File I/O
Unity WebGL Build Process
C#
UnityScript
Boo
Compiled
Code (IL)C++ JavaScript
Mono Compiler IL2CPP Emscripten
Challenges
New Version
(Unity 5)
New Platform
(WebGL)
New Compiler
(IL2CPP)
New Version (Unity 5)
- Auto Update - Most of the heavy lifting
- Animator - Changes to “Apply Root Motion”
- AudioSource - new “Spatial Blend”
- Check Plugins for compatibility with Unity 5 !
New Platform (WebGL)
Encountered 2 WebGL related bugs:- No WWW error reporting
- AudioSource.mute doesn’t work
… Already Fixed in Unity 5.1
New Compiler (IL2CPP)
- New & Innovative Tech → Bugs
- Issues with JSON.NET
○ Received a “street version” from the publisher ([email protected])
○ No support for generic arrays (Fixed in 5.0.1)
- Check Plugins for compatibility with IL2CPP !!
Developing for WebGL
- Minimal code changes from WebPlayer → WebGL
- Build Settings
o Optimization Level
- Player Settingso Browser Memory
o Cache
o Enabling Exceptions
o WebGLTemplates
Developing for WebGL
- Debug HELL (JavaScript Console FTW)
- Compression (gzip)
- Full Screen button - need workarounds
- Mixing domains (CORS)
- New Native Plugin = “.jslib”
Our Dev Process
- #if (UNITY_WEBPLAYER || UNITY_WEBGL)
- JS Wrapper for FB SDK
- Test as much as possible in editor
Our Dev Process #2
- Local Web Server (quick updates)
- Redirection to two versionso Chrome → WebGL
o Other Browsers → WebPlayer
Optimizations
Goal - Minimize Download Size
Initially 300 MB !!- Compression
- Optimization Level
- Exception Support
- Streaming
- Custom Build Script
- Stripping*
Build Stats
- Editor.log shows stats
after finishing a build
- Assets listed in
decreasing size
Compression
- Only for non-development builds
- .htaccess on supported servers
- Otherwise, need to manually rename some
stuff
Optimization Level
- Enables optimizations (Emscripten emcc parameters)
- More optimizations == slower builds
Exception Support
- Enable / Disable Exception Support
Build Output
Game data
(all assets, scenes, etc)
Code (converted to js)Binary image for heap
memory (Emscripten)
Embeds the game
content
Supporting files for
initialization
Same as this folder, only
compressed (gzip)
Streaming In WebGL
- No official solution out of the box, but...
- ...Using an editor script by Unity Developer
(Thanks @jonasechterhoff !)o Shared in the Unity Beta Group
- Implemented as a [PostProcessBuild] step
In a Streamed Web Player:
“The index of the first level that will have
access to all assets under Resources”
http://docs.unity3d.com/Manual/class-PlayerSettingsWeb.html
First Streamed Level
Streaming WebGL Solution
1. Split “game.data” and “fileloader.js” to smaller files (one
per scene)
2. Add Resources to .data file of “First Streamed Level”
3. Combine all the new “fileloader” files into one
4. Change the code to run the game after first scene
downloaded
5. Downloads scenes one by one
Custom Build Script
- Removes unneeded scenes
- Removes resources from the build
- Removes texture usage & downloads them
at runtime
Final Results
- The game runs smoothly !!- Final build size: 28 MB
- New users - can play after 3 MB
- No need to install any plugin
- Loading time is longer than WebPlayer
Thank You !
Lior [email protected]
http://www.tallior.com
Oren De-Panther [email protected]
http://de-panther.com/
Tools
● Browser Developer Tools (Chrome, Firefox)
o JS console, Network requests
● Charles (web proxy)
o View network requests + responses
● NGINX - lightweight, portable web server
o Setup a local test environment
Resources
WebGL
● Owlchemy Labs Port to WebGL - https://hacks.mozilla.org/2014/10/unity-games-in-webgl-
owlchemy-labs-conversion-of-aaaaa-to-asm-js/
● WebGL Streaming - http://forum.unity3d.com/threads/webgl-with-streaming-option-like-
webplayer.316620/
● Fullscreen - http://forum.unity3d.com/threads/webgl-fullscreen-from-within-the-unity-app.318518/
● Emscripten - http://kripken.github.io/emscripten-site/docs/getting_started/Tutorial.html
● http://forum.unity3d.com/forums/webgl.84/
● http://docs.unity3d.com/Manual/webgl-gettingstarted.html
● WebGL Native Plugin - http://docs.unity3d.com/Manual/webgl-
interactingwithbrowserscripting.html
Unity 5
● Upgrade Guide - http://docs.unity3d.com/Manual/UpgradeGuide5.html