Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Join us on Thursday, June 8, for a Q&A with Unity's Content Pipeline group here on the forum, and on the Unity Discord, and discuss topics around Content Build, Import Workflows, Asset Database, and Addressables!
    Dismiss Notice

IsHTML - an Experimental HTML hack for UIs

Discussion in 'Project Tiny' started by abeisgreat, Jan 29, 2019.

  1. abeisgreat


    Nov 21, 2016
    Hey folks,

    I wanted to share something I've been working on that I call IsHTML. This is a project which uses browser APIs to draw native HTML as positioned and sized by a RectTransform inside a UICanvas.


    In the low quality example gif below, we see three instances of entities with IsHTML components. The top-left is a static element which is always aligned to that position. The middle is a rich element with HTML contents which changes on each frame and is animated using a regular Tiny Tween to move the entity. The bottom entity is an HTML input where a user can type. This bottom element also has various events tied to it to react to when the value changes.

    Just like when making a normal webpage, we can use CSS and complex HTML structures to create interesting UIs, however the position and scale of the parent will always be set by Tiny and we gain Tiny-native two-ways communication with the HTML.


    At first glance, this may seem strange, but it's a solid stop-gap for a bunch of issues we've seen on the forums like...

    Are there Inputfields?
    Use webpage form as placeholder for UI input...?
    Unity Tiny Video
    Direct User Action and invoking

    In the short term, IsHTML allows a work-around here using HTML/CSS/JS. As Tiny grows, we'll likely see these issues resolve so IsHTML's value will shift more towards an alternative way to build UIs for Tiny games targeting web.

    IsHTML allows use of any regular HTML tags which means things like <video>, <input>, <button> etc will work exactly as you'd expect.

    Here is the code from the Tag_InputBehavior.tsx example script.
    Code (JavaScript):
    2. namespace game {
    3.     export class Tag_InputBehaviorFilter extends ut.EntityFilter {
    4.         is_html: game.IsHTML;
    5.     }
    7.     export class Tag_InputBehavior extends ut.ComponentBehaviour {
    9.         data: Tag_InputBehaviorFilter;
    11.         OnEntityEnable():void {
    12.             let msg = "";
    14.             const updateMessage = (event: KeyboardEvent) => {
    15.                 const el = (event.srcElement as HTMLInputElement);
    16.                 msg = el.value;
    17.             };
    19.             const sendMessage = () => {
    20.                 alert(msg);
    21.             };
    23.             IsHTMLService.SetHTML(, <div style="display: grid; grid-template-columns: 1fr fit-content(100%);">
    24.                 <input onkeyup={updateMessage} placeholder="Type a message..."/>
    25.                 <button onclick={sendMessage}>Send</button>
    26.             </div>);
    27.         }
    29.     }
    30. }
    If you check out the IsHTMLService.SetHTML line, you may think I'm missing some quotes around my HTML string, but this is actually correct. In the Advance Usage section of the README I provide a tsconfig.override.json file which enables the Typescript compiler to handle a popular HTML template language called TSX (the Typescript version of React's JSX). If you don't like TSX, that's fine, SetHTML will also take a normal string, but TSX makes it easier to do things like binding functions to HTML events (as this example shows).

    Getting Started

    Check out the README on Github.

    When you find bugs or have issues...
    Please file an issue on the Github repo, it's much easier for me to track and fix things there.
  2. SzabolcsNagy


    Jan 28, 2019
    Man, you're a proper hero. It's the second time now that I prepare myself to sit down for a day or two and hack together a workaround for a problem of mine I find you solved the exact same issue. First with the canvas blurriness, now with attaching an onclick for a HTML element that is positioned on the Tiny Canvas.

    Really nice job!
    abeisgreat likes this.
  3. valourus123


    Nov 12, 2018
    interesting Ill keep my eye on this... good luck ;)
    abeisgreat likes this.