Unity Html5

Posted on  by



Unity Html5

Unity is the ultimate game development platform. Use Unity to build high-quality 3D and 2D games, deploy them across mobile, desktop, VR/AR, consoles or the Web, and connect with loyal and enthusiastic players and customers. (Rather than using an external web renderer, and then copying the texture into Unity). It only renders a subset of HTML/JS, so it is primarily suited to building up interfaces from scratch, but it is quite useful, fast, and I believe it supports touch events.

Unity Html5

In this article, I show how surprisingly easy it is to create a UI in Unity using standard HTML, CSS, and JavaScript. If you want to jump to a specific section, you can use the following links:

Why HTML?

Unity Html5 Games

Unity has its own proprietary UI system, so why would we want to use HTML? Here are just some of the advantages:

Unity Html5 Mobile Browser

  • You can use the plethora of existing web UI components (like date pickers, charts, Google Maps embed).
  • Rapid development using state-of-the-art front-end tooling (like browser DevTools, hot-reloading, and frameworks like React.js).
  • It's easier to create a responsive design that changes based on screen size (for example, using flexbox).
  • Serving parts of your UI from a web server allows you to update it without updating the entire app.
  • You can leverage your company's web development skills and existing web designs.
  • HTML and CSS are more powerful and flexible than Unity's UI system.

As wonderful as HTML is, there is a tradeoff, which is that embedding a browser does utilize more memory and CPU than just using Unity's built-in UI system. So, it's largely a tradeoff between development speed versus runtime performance. Being able to develop faster often makes this tradeoff worthwhile, however if your application requires the highest possible performance, you may want to stick with Unity's built-in UI system.

Tools needed

To display HTML, we're going to need a browser. And there's no better browser for Unity than 3D WebView. Here's why:

  • Seamless cross-platform support across most devices (Windows, macOS, Android, iOS, UWP, and more to come).
  • Best-in-class documentation, product quality, and support. These are areas where 3D WebView really blows other solutions out of the water.
  • 3D WebView renders web content to textures that can be displayed anywhere in Unity scenes. In contrast, alternative products usually work by floating a native 2D webview over the Unity game view, which doesn't work for 3D or VR.

Overview of approach

Here's our high-level plan for creating the UI: Casio driver download.

  • Place the UI's HTML, CSS, and other assets in the project's StreamingAssets folder.
  • Add a CanvasWebViewPrefab to the scene and set its Initial Url to point to our HTML file using a special streaming-assets:// URL.
  • Use 3D WebView's message passing API to send messages from JavaScript to C#.

Implementation

Unity Html Viewer

Unity html5 game

For this example, I decided to create a simple signin UI that asks the user for their credentials, sends an authorization request to an API, and sends the resulting auth token to the app's C# code. You can see the completed project here on GitHub.

  1. I started by creating a new Unity project.
  1. Next, I installed 3D WebView for Windows and macOS from the Asset Store.

Unity Html5 Game

  1. I then created a new scene named UnityHtmlUiExample with a CanvasWebViewPrefab configured to occupy the entire screen. I really just copied and pasted 3D WebView's CanvasWebViewDemo scene, but it's also easy just to add a Canvas to a new scene and drag a CanvasWebViewPrefab into it.
  1. After that, I added a new Assets/StreamingAssets directory for the HTML and CSS files to go into.
Unity Html5
  1. Then, I implemented the HTML and CSS for a simple signin UI and placed those files into the StreamingAssets directory. Below is the HTML from signin.html. To see the CSS, check out the files on GitHub.

Unity Html5 Support

  1. In the Unity editor, I then set the CanvasWebViewPrefab's Initial URL field to streaming-assets://signin.html so that it loads the page.
  1. Finally, I hit play to see the UI in action:

I also installed 3D WebView for Android and tested on Android: Transmit antonym examples.

Unity Html5 Ui

Closing thoughts

Unity Html5

Although I kept this example simple, it's easy to think of valuable improvements that we could add. For example, we could modify the signin page to give users the option to signin with Google or Facebook. Or we could implement the UI in React.js and share UI components across multiple views. I plan to write articles about both of these topics in the future. If you're interested in creating your own Unity UIs with HTML, go get 3D WebView and let me know if you have questions or feedback!