Create UI elements via HTML / TSX in Unity's Tiny (for Web).

As of this writing ([email protected]), Unity's Project Tiny (a.k.a. Tiny mode) has minimal support for rich, responsive UIs via the built-in UILayout methods. IsHTML is a hack which uses the existing Tiny UILayout then expands it by allowing HTML to be rendered in place of (on top of) the normal content.

IsHTML maps HTML directly onto a RectTransform which means changes to RectTransform (with the exception of rotation) will modify the elements position. For an example of tweening an IsHTML blob, see the example code.

This repo contains a configured project along with the required components (IsHTML) and behaviors (IsHTMLBehavior).

If you like this project, follow me on Twitter.

If you'd like to use IsHTML just for static HTML which wont change (tutorial pages, etc), then you can follow these steps to create an entity which is filled with HTML.

1. Copy Components/IsHTML.uttype, Components/IsHTMLConfiguration.uttype, and Scripts/IsHTMLBehavior.ts into your project.
2. Create an entity with a UICanvas parent, a RectTransform, a SpriteRenderer, a SpriteRendererOptions and an IsHTML entity.
3. Edit the html field on the IsHTML component with the content which will replace the sprite render during runtime.
4. Open your project file in the Inspector, click on the IsHTMLConfiguration to specify game-wide CSS styles. Check the sample project for an example.

If you'd like to do advanced interaction / event propegation (clicks, input value changes), then IsHTML supports the use of tsx (a simple HTML-in-Typescript templating language) for creating dynamic content.

First, look at the example code for the bouncing box.

After following the basic steps, you'll need to...

5. Copy tsconfig.override.json to the same location in your project. This tells Tiny to load .tsx files. To ensure editor support, any file which uses tsx templates, must have the .tsx extension instead of ts(like Scripts/Tag_BounceBehavior.tsx)
6. Use the IsHTMLService.SetHTML to set your content like in the TagBounce_Behavior or bind events like in TagInput_Behavior.

• IsHTML contains a copy of HDPI_Hacks to correct Screen DPI.
• IsHTML is only tested against Tiny projects built for the browser. I don't know anything about PlayableAds.

MIT