PasswordInput.oninput = enableOrDisableSubmitButton Post a message to the C# code to indicate auth was skipped.ĮmailInput.oninput = enableOrDisableSubmitButton Attach the click handler for the "Sign in later" link.ĭ = '0.5s' PasswordInput.removeAttribute('disabled') SubmitButton.removeAttribute('disabled') Authentication failed, so show an error message. Vuplex.postMessage('auth_success:' + authToken) Post a message to the C# code to send the auth token (). returns an auth token if the email address is valid andĬonsole.log('Unexpected error occurred during authentication: ' + error) Make an HTTP request to a mock authentication API that tAttribute('disabled', true) ĮtAttribute('disabled', true) Disable the controls while making the authentication request. Attach the submit button click handler. Get references to the interactive elementsĬonst emailInput = document.getElementById('email') Ĭonst passwordInput = document.getElementById('password') Ĭonst submitButton = document.getElementsByTagName('button') Ĭonst errorMessage = document.getElementById('error') Ĭonst successMessage = document.getElementById('success-message') Ĭonst signInLaterLink = document.getElementsByTagName('a') To see the CSS, check out the files on GitHub. Then, I implemented the HTML and CSS for a simple signin UI and placed those files into the StreamingAssets directory.After that, I added a new Assets/StreamingAssets directory for the HTML and CSS files to go into.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. I then created a new scene named UnityHtmlUiExample with a CanvasWebViewPrefab configured to occupy the entire screen.Next, I installed 3D WebView for Windows and macOS from the Asset Store.I started by creating a new Unity project.You can see the completed project here on GitHub. Use 3D WebView's message passing API to send messages from JavaScript to C#.įor 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.Add a CanvasWebViewPrefab to the scene and set its Initial Url to point to our HTML file using a special streaming-assets:// URL.Place the UI's HTML, CSS, and other assets in the project's StreamingAssets folder.Here's our high-level plan for creating the UI: 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. 3D WebView renders web content to textures that can be displayed anywhere in Unity scenes.These are areas where 3D WebView really blows other solutions out of the water. Best-in-class documentation, product quality, and support.Seamless cross-platform support across most devices ( Windows, macOS, Android, iOS, UWP, and more to come).And there's no better browser for Unity than 3D WebView. To display HTML, we're going to need a browser. 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. So, it's largely a tradeoff between development speed versus runtime performance. HTML and CSS are more powerful and flexible than Unity's UI system.Īs 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.You can leverage your company's web development skills and existing web designs.Serving parts of your UI from a web server allows you to update it without updating the entire app.It's easier to create a responsive design that changes based on screen size (for example, using flexbox).Rapid development using state-of-the-art front-end tooling (like browser DevTools, hot-reloading, and frameworks like React.js).You can use the plethora of existing web UI components (like date pickers, charts, Google Maps embed).Unity has its own proprietary UI system, so why would we want to use HTML? Here are just some of the advantages: If you want to jump to a specific section, you can use the following links: In this article, I show how surprisingly easy it is to create a UI in Unity using standard HTML, CSS, and JavaScript.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |