IsHTML for Tiny mode
Create UI elements via HTML / TSX in Unity's Tiny (for Web).
About
As of this writing (Tiny@0.13.4), 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.
Basic Usage (Static HTML)
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.
- Copy
Components/IsHTML.uttype
,Components/IsHTMLConfiguration.uttype
, andScripts/IsHTMLBehavior.ts
into your project. - Create an entity with a
UICanvas
parent, aRectTransform
, aSpriteRenderer
, aSpriteRendererOptions
and anIsHTML
entity. - Edit the
html
field on theIsHTML
component with the content which will replace the sprite render during runtime. - Open your project file in the Inspector, click on the
IsHTMLConfiguration
to specify game-wide CSS styles. Check the sample project for an example.
jsx
/tsx
)
Advanced Usage (Interactive HTML via 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...
- 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 usestsx
templates, must have the.tsx
extension instead ofts
(likeScripts/Tag_BounceBehavior.tsx
) - Use the
IsHTMLService.SetHTML
to set your content like in the TagBounce_Behavior or bind events like in TagInput_Behavior.
Notes & Issues
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.
License
MIT