Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Lessons Learned with Unity and WebGL

35,915 views

Published on

Lessons we learned while getting Wonderball Heroes on WebGL using Unity 5.

The slides share our challenges, optimizations made and general tips for working with Unity and WebGL.

Published in: Software

Lessons Learned with Unity and WebGL

  1. 1. 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 WebGL Israeli Unity Developers Meetup 19/4/2015
  2. 2. Moon Active
  3. 3. Wonderball Heroes 2D “Destroy All Pegs” Game Over 1 Million Downloads Developed in Unity 4.5.4
  4. 4. WebGL: JavaScript API for rendering interactive 2D or 3D graphics inside an HTML5 <canvas> element WebGWhat ?!
  5. 5. Why WebGL ? Chrome (M42) dropped NPAPI support
  6. 6. 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
  7. 7. Unity WebGL Build Process C# UnityScript Boo Compiled Code (IL) C++ JavaScript Mono Compiler IL2CPP Emscripten
  8. 8. Challenges New Version (Unity 5) New Platform (WebGL) New Compiler (IL2CPP)
  9. 9. 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 !
  10. 10. New Platform (WebGL) Encountered 2 WebGL related bugs: - No WWW error reporting - AudioSource.mute doesn’t work … Already Fixed in Unity 5.1
  11. 11. New Compiler (IL2CPP) - New & Innovative Tech → Bugs - Issues with JSON.NET ○ Received a “street version” from the publisher (nebraskadev@gmail.com) ○ No support for generic arrays (Fixed in 5.0.1) - Check Plugins for compatibility with IL2CPP !!
  12. 12. 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
  13. 13. Developing for WebGL - Debug HELL (JavaScript Console FTW) - Compression (gzip) - Full Screen button - need workarounds - Mixing domains (CORS) - New Native Plugin = “.jslib”
  14. 14. Our Dev Process - #if (UNITY_WEBPLAYER || UNITY_WEBGL) - JS Wrapper for FB SDK - Test as much as possible in editor
  15. 15. Our Dev Process #2 - Local Web Server (quick updates) - Redirection to two versions o Chrome → WebGL o Other Browsers → WebPlayer
  16. 16. Optimizations Goal - Minimize Download Size Initially 300 MB !! - Compression - Optimization Level - Exception Support - Streaming - Custom Build Script - Stripping*
  17. 17. Build Stats - Editor.log shows stats after finishing a build - Assets listed in decreasing size
  18. 18. Compression - Only for non-development builds - .htaccess on supported servers - Otherwise, need to manually rename some stuff
  19. 19. Optimization Level - Enables optimizations (Emscripten emcc parameters) - More optimizations == slower builds
  20. 20. Exception Support - Enable / Disable Exception Support
  21. 21. 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)
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. Custom Build Script - Removes unneeded scenes - Removes resources from the build - Removes texture usage & downloads them at runtime
  26. 26. 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
  27. 27. Thank You ! Lior Tal liortal53@gmail.com http://www.tallior.com Oren De-Panther Weizman depanther@gmail.com http://de-panther.com/
  28. 28. Unity Developer We’re Hiring! hello@moonactive.com
  29. 29. 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
  30. 30. 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

×