Birdfox117

‎The unity toolbox of HTML5 frameworks.Easy to test web server websites on mobile phone.Easy to test and see clearly which html5 framework is better and more suitable for you! -Find more awesome frameworks you have never know -Easily learn html5 to create apps,even if you are a developer or a. Using a C-Panel interface to upload your UNITY3D game to the Internet so it can be played by anyone through a web browser. See: www.unity3dschools.com for m. Unity’s WebGL build allows you to render 2D and 3D graphics in a web browser without the need for additional tools or plug-ins. When you publish a WebGL build, Unity builds an HTML5/Javascript program. You can deploy the program online for users to access in a web browser. Mark step as completed. I tried to open Sample.unity and then import unity-webview.unitypackage, but I can not find the url string so that I can change it. – Amir Jaouani Oct 19 '17 at 10:51 There is.

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 has its own proprietary UI system, so why would we want to use HTML? Here are just some of the advantages:

• 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

Unity Html Viewer

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:

• 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

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.

2. Next, I installed 3D WebView for Windows and macOS from the Asset Store.

3. 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.

4. After that, I added a new Assets/StreamingAssets directory for the HTML and CSS files to go into.

5. 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.

6. In the Unity editor, I then set the CanvasWebViewPrefab's Initial URL field to streaming-assets://signin.html so that it loads the page.

7. Finally, I hit play to see the UI in action:

I also installed 3D WebView for Android and tested on Android:

Closing thoughts

Unity Webgl Player Games

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!