IsHTML - an Experimental HTML hack for UIs

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.

What?

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.

Why?

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 window.open(link)

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.

Example
Here is the code from the Tag_InputBehavior.tsx example script.

Code (JavaScript):

1.  
2. namespace game {
3.     export class Tag_InputBehaviorFilter extends ut.EntityFilter {
4.         is_html: game.IsHTML;
5.     }
6.  
7.     export class Tag_InputBehavior extends ut.ComponentBehaviour {
8.  
9.         data: Tag_InputBehaviorFilter;
10.  
11.         OnEntityEnable():void {
12.             let msg = "";
13.            
14.             const updateMessage = (event: KeyboardEvent) => {
15.                 const el = (event.srcElement as HTMLInputElement);
16.                 msg = el.value;
17.             };
18.  
19.             const sendMessage = () => {
20.                 alert(msg);
21.             };
22.  
23.             IsHTMLService.SetHTML(this.data.is_html, <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.         }
28.  
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.

 

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!

 

interesting Ill keep my eye on this... good luck