Scribd
Upload
60 views30 pages

Lessons Learned Getting Wonderball Heroes To Webgl: Israeli Unity Developers Meetup 19/4/2015

The document summarizes lessons learned in porting the 2D game Wonderball Heroes from Unity 4.5.4 to WebGL using Unity 5. Key challenges included dealing with a new Unity version, new WebGL platform, and new IL2CPP compiler. Issues addressed were compatibility bugs, debugging difficulties, and optimizing the large initial build size down to 28MB. Suggested tools for WebGL development included browser dev tools, Charles proxy, and Nginx web server. Resources for further information on WebGL, Unity 5 upgrades, and Emscripten were also provided.

Uploaded by

Anonymous moDfc081Z
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
60 views30 pages

Lessons Learned Getting Wonderball Heroes To Webgl: Israeli Unity Developers Meetup 19/4/2015

The document summarizes lessons learned in porting the 2D game Wonderball Heroes from Unity 4.5.4 to WebGL using Unity 5. Key challenges included dealing with a new Unity version, new WebGL platform, and new IL2CPP compiler. Issues addressed were compatibility bugs, debugging difficulties, and optimizing the large initial build size down to 28MB. Suggested tools for WebGL development included browser dev tools, Charles proxy, and Nginx web server. Resources for further information on WebGL, Unity 5 upgrades, and Emscripten were also provided.

Uploaded by

Anonymous moDfc081Z
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
You are on page 1/ 30

+ =

Lessons Learned Getting


Wonderball Heroes To WebGL
Israeli Unity Developers Meetup
19/4/2015
Lior Tal Oren “De-Panther” Weizman
Unity Developer (Moon Active) Unity Developer (Total-Viz)
http://www.tallior.com http://de-panther.com/
Moon Active
Wonderball Heroes

2D “Destroy All Pegs” Game


Over 1 Million Downloads

Developed in Unity 4.5.4


WebGWhat ?!

WebGL: JavaScript API for rendering


interactive 2D or 3D graphics inside an HTML5
<canvas> element
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 Compiled
C++ JavaScript
Boo Code (IL)

Mono Compiler IL2CPP Emscripten


Challenges

New Version New Platform New Compiler


(Unity 5) (WebGL) (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 Settings
o 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 versions
o 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

Binary image for heap


Code (converted to js) memory (Emscripten)

Supporting files for


Game data
initialization
(all assets, scenes, etc)

Same as this folder, only Embeds the game


compressed (gzip) content
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
First Streamed Level

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
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 Tal Oren De-Panther Weizman


[email protected]
[email protected]
http://de-panther.com/
http://www.tallior.com
We’re Hiring!

Unity Developer
[email protected]
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

You might also like