(ctrl+shift+b in vscode)

S

SingtaaOP•3/19/25, 4:35 AM

OneJS by default picks up changes to your

@outputs/esbuild/app.js

@outputs/esbuild/app.js

@outputs/esbuild/app.js

@outputs/esbuild/app.js (which is what

esbuild

esbuild

esbuild

esbuild compiles to)

Kkirbyfanner Hello @Singtaa ! I pressed it last night and it didn't seem to help. That said,...

S

SingtaaOP•3/19/25, 10:07 PM

Tyty! Let's debug this. Can you try running esbuild via the terminal using

node esbuild.mjs

node esbuild.mjs

node esbuild.mjs

node esbuild.mjs ?

S

SingtaaOP•3/19/25, 10:09 PM

ah so it looks like your VSCode isn't picking up the correct

.vscode/tasks.json

.vscode/tasks.json

.vscode/tasks.json

.vscode/tasks.json

S

SingtaaOP•3/19/25, 10:09 PM

what's your

.vscode/tasks.json

.vscode/tasks.json

.vscode/tasks.json

.vscode/tasks.json look like right now?

S

SingtaaOP•3/19/25, 10:10 PM

oh, generally I'd use the

Open VSCode

Open VSCode

Open VSCode

Open VSCode button on ScriptEngine to open up VSCode as that'll open it with the right folder

S

SingtaaOP•3/19/25, 10:12 PM

"Status Effect" system, like a buffs/debuffs bar in games like MMOs?

S

SingtaaOP•3/19/25, 10:17 PM

hmm I think the architecture is gonna be dependent on your setup. But yes JS is much more dynamic than C#. And you can access all .Net/C# from JS via the

CS.*

CS.*

CS.*

CS.* namespace in JS. You can also eval any arbitrary JS code (from string) at runtime via

ScriptEngine.JsEnv.Eval()

ScriptEngine.JsEnv.Eval()

ScriptEngine.JsEnv.Eval()

ScriptEngine.JsEnv.Eval()

S

SingtaaOP•3/19/25, 10:19 PM

yup you got it!

Qqbjn Is there way to use text inputs? or am I missing something trivial...

S

SingtaaOP•3/21/25, 6:37 AM

<textfield />

<textfield />

<textfield />

<textfield />

S

SingtaaOP•3/21/25, 6:37 AM

if you ctrl+click on a tag (i.e.

div

div

div

div), you should be able to see the ts definitions of all the built-in tags

S

SingtaaOP•3/21/25, 6:39 AM

here's the reference on Unity's side: https://docs.unity3d.com/Manual/UIE-ElementRef.html Note that not all controls are for runtime. Some are Editor-only

HHaptic @Singtaa Is there an easy way to add a placeholder to <textfield> ?

S

SingtaaOP•3/23/25, 7:56 AM

Yes

useEffect(() => {
    const tf = tfref.current?.ve as TextField
    tf.textEdition.placeholder = `Ask me anything...`
}, [])

useEffect(() => {
    const tf = tfref.current?.ve as TextField
    tf.textEdition.placeholder = `Ask me anything...`
}, [])

useEffect(() => {
    const tf = tfref.current?.ve as TextField
    tf.textEdition.placeholder = `Ask me anything...`
}, [])

useEffect(() => {
    const tf = tfref.current?.ve as TextField
    tf.textEdition.placeholder = `Ask me anything...`
}, [])

S

SingtaaOP•3/23/25, 7:57 AM

I'm not sure why Unity does it this way (via

TextInputBaseField<T0>.textEdition

TextInputBaseField<T0>.textEdition

TextInputBaseField<T0>.textEdition

TextInputBaseField<T0>.textEdition). :dontknow:

S

SingtaaOP•3/23/25, 7:57 AM

https://docs.unity3d.com/6000.0/Documentation/Manual/UIE-uxml-element-TextField.html

S

SingtaaOP•4/3/25, 10:31 AM

Take a look at the three custom controls that come with OneJS: GradientRect, Flipbook, and Img. For example:

using UnityEngine;
using UnityEngine.UIElements;

// Custom Controls have to be in the OneJS.Dom namespace if you want them to be automatically
// included in the OneJS runtime.
namespace OneJS.Dom {
    public class GradientRect : VisualElement {
        static readonly Vertex[] vertices = new Vertex[4];
        static readonly ushort[] indices = { 0, 1, 2, 2, 3, 0 };

        public Color[] Colors { get; set; }

        public GradientRect() {
            generateVisualContent = GenerateVisualContent;
        }

        void GenerateVisualContent(MeshGenerationContext mgc) {
            var rect = contentRect;
            if (rect.width < 0.1f || rect.height < 0.1f)
                return;
            if (Colors.Length == 1) {
                vertices[0].tint = Colors[0];
                vertices[1].tint = Colors[0];
                vertices[2].tint = Colors[0];
                vertices[3].tint = Colors[0];
            } else if (Colors.Length == 2) {
                vertices[0].tint = Colors[0];
                vertices[1].tint = Colors[0];
                vertices[2].tint = Colors[1];
                vertices[3].tint = Colors[1];
            } else if (Colors.Length == 3) {
                vertices[0].tint = Colors[0];
                vertices[1].tint = Colors[1];
                vertices[2].tint = Colors[2];
                vertices[3].tint = Colors[2];
            } else if (Colors.Length == 4) {
                vertices[0].tint = Colors[0];
                vertices[1].tint = Colors[1];
                vertices[2].tint = Colors[2];
                vertices[3].tint = Colors[3];
            }

            var left = rect.xMin;
            var right = rect.xMax;
            var top = rect.yMin;
            var bottom = rect.yMax;

            vertices[0].position = new Vector3(left, bottom, Vertex.nearZ);
            vertices[1].position = new Vector3(left, top, Vertex.nearZ);
            vertices[2].position = new Vector3(right, top, Vertex.nearZ);
            vertices[3].position = new Vector3(right, bottom, Vertex.nearZ);

            MeshWriteData mwd = mgc.Allocate(vertices.Length, indices.Length);
            mwd.SetAllVertices(vertices);
            mwd.SetAllIndices(indices);
        }
    }
}

using UnityEngine;
using UnityEngine.UIElements;

// Custom Controls have to be in the OneJS.Dom namespace if you want them to be automatically
// included in the OneJS runtime.
namespace OneJS.Dom {
    public class GradientRect : VisualElement {
        static readonly Vertex[] vertices = new Vertex[4];
        static readonly ushort[] indices = { 0, 1, 2, 2, 3, 0 };

        public Color[] Colors { get; set; }

        public GradientRect() {
            generateVisualContent = GenerateVisualContent;
        }

        void GenerateVisualContent(MeshGenerationContext mgc) {
            var rect = contentRect;
            if (rect.width < 0.1f || rect.height < 0.1f)
                return;
            if (Colors.Length == 1) {
                vertices[0].tint = Colors[0];
                vertices[1].tint = Colors[0];
                vertices[2].tint = Colors[0];
                vertices[3].tint = Colors[0];
            } else if (Colors.Length == 2) {
                vertices[0].tint = Colors[0];
                vertices[1].tint = Colors[0];
                vertices[2].tint = Colors[1];
                vertices[3].tint = Colors[1];
            } else if (Colors.Length == 3) {
                vertices[0].tint = Colors[0];
                vertices[1].tint = Colors[1];
                vertices[2].tint = Colors[2];
                vertices[3].tint = Colors[2];
            } else if (Colors.Length == 4) {
                vertices[0].tint = Colors[0];
                vertices[1].tint = Colors[1];
                vertices[2].tint = Colors[2];
                vertices[3].tint = Colors[3];
            }

            var left = rect.xMin;
            var right = rect.xMax;
            var top = rect.yMin;
            var bottom = rect.yMax;

            vertices[0].position = new Vector3(left, bottom, Vertex.nearZ);
            vertices[1].position = new Vector3(left, top, Vertex.nearZ);
            vertices[2].position = new Vector3(right, top, Vertex.nearZ);
            vertices[3].position = new Vector3(right, bottom, Vertex.nearZ);

            MeshWriteData mwd = mgc.Allocate(vertices.Length, indices.Length);
            mwd.SetAllVertices(vertices);
            mwd.SetAllIndices(indices);
        }
    }
}

using UnityEngine;
using UnityEngine.UIElements;

// Custom Controls have to be in the OneJS.Dom namespace if you want them to be automatically
// included in the OneJS runtime.
namespace OneJS.Dom {
    public class GradientRect : VisualElement {
        static readonly Vertex[] vertices = new Vertex[4];
        static readonly ushort[] indices = { 0, 1, 2, 2, 3, 0 };

        public Color[] Colors { get; set; }

        public GradientRect() {
            generateVisualContent = GenerateVisualContent;
        }

        void GenerateVisualContent(MeshGenerationContext mgc) {
            var rect = contentRect;
            if (rect.width < 0.1f || rect.height < 0.1f)
                return;
            if (Colors.Length == 1) {
                vertices[0].tint = Colors[0];
                vertices[1].tint = Colors[0];
                vertices[2].tint = Colors[0];
                vertices[3].tint = Colors[0];
            } else if (Colors.Length == 2) {
                vertices[0].tint = Colors[0];
                vertices[1].tint = Colors[0];
                vertices[2].tint = Colors[1];
                vertices[3].tint = Colors[1];
            } else if (Colors.Length == 3) {
                vertices[0].tint = Colors[0];
                vertices[1].tint = Colors[1];
                vertices[2].tint = Colors[2];
                vertices[3].tint = Colors[2];
            } else if (Colors.Length == 4) {
                vertices[0].tint = Colors[0];
                vertices[1].tint = Colors[1];
                vertices[2].tint = Colors[2];
                vertices[3].tint = Colors[3];
            }

            var left = rect.xMin;
            var right = rect.xMax;
            var top = rect.yMin;
            var bottom = rect.yMax;

            vertices[0].position = new Vector3(left, bottom, Vertex.nearZ);
            vertices[1].position = new Vector3(left, top, Vertex.nearZ);
            vertices[2].position = new Vector3(right, top, Vertex.nearZ);
            vertices[3].position = new Vector3(right, bottom, Vertex.nearZ);

            MeshWriteData mwd = mgc.Allocate(vertices.Length, indices.Length);
            mwd.SetAllVertices(vertices);
            mwd.SetAllIndices(indices);
        }
    }
}

using UnityEngine;
using UnityEngine.UIElements;

// Custom Controls have to be in the OneJS.Dom namespace if you want them to be automatically
// included in the OneJS runtime.
namespace OneJS.Dom {
    public class GradientRect : VisualElement {
        static readonly Vertex[] vertices = new Vertex[4];
        static readonly ushort[] indices = { 0, 1, 2, 2, 3, 0 };

        public Color[] Colors { get; set; }

        public GradientRect() {
            generateVisualContent = GenerateVisualContent;
        }

        void GenerateVisualContent(MeshGenerationContext mgc) {
            var rect = contentRect;
            if (rect.width < 0.1f || rect.height < 0.1f)
                return;
            if (Colors.Length == 1) {
                vertices[0].tint = Colors[0];
                vertices[1].tint = Colors[0];
                vertices[2].tint = Colors[0];
                vertices[3].tint = Colors[0];
            } else if (Colors.Length == 2) {
                vertices[0].tint = Colors[0];
                vertices[1].tint = Colors[0];
                vertices[2].tint = Colors[1];
                vertices[3].tint = Colors[1];
            } else if (Colors.Length == 3) {
                vertices[0].tint = Colors[0];
                vertices[1].tint = Colors[1];
                vertices[2].tint = Colors[2];
                vertices[3].tint = Colors[2];
            } else if (Colors.Length == 4) {
                vertices[0].tint = Colors[0];
                vertices[1].tint = Colors[1];
                vertices[2].tint = Colors[2];
                vertices[3].tint = Colors[3];
            }

            var left = rect.xMin;
            var right = rect.xMax;
            var top = rect.yMin;
            var bottom = rect.yMax;

            vertices[0].position = new Vector3(left, bottom, Vertex.nearZ);
            vertices[1].position = new Vector3(left, top, Vertex.nearZ);
            vertices[2].position = new Vector3(right, top, Vertex.nearZ);
            vertices[3].position = new Vector3(right, bottom, Vertex.nearZ);

            MeshWriteData mwd = mgc.Allocate(vertices.Length, indices.Length);
            mwd.SetAllVertices(vertices);
            mwd.SetAllIndices(indices);
        }
    }
}

Ssy Hello, sorry if this is an elementary question (I'm new to OneJS and webdev), bu...

S

SingtaaOP•4/8/25, 8:26 AM

Hello! Have you dragged the tailwind.uss onto your StyleSheets list?

S

SingtaaOP•4/8/25, 8:27 AM

When you start the

tailwind

tailwind

tailwind

tailwind watcher task in VSCode, it'll generate a

tailwind

tailwind

tailwind

tailwind uss files under your Project's Assets folder

TTailwind Mechanics @Singtaa what's the status on webgl support for OneJs? Is it functional currentl...

S

SingtaaOP•4/8/25, 12:42 PM

No, not right now. I will need to take some time to properly integrate this into OneJS so that the setup process won't be so involved.

GitHub

puerts/unity/Assets/webgl/upm at master · Tencent/puerts

PUER(普洱) Typescript. Let's write your game in UE or Unity with TypeScript. - Tencent/puerts

TTailwind Mechanics Ok thank you, we have a need for a large scale browser ui for mobile and webgl t...

S

SingtaaOP•4/8/25, 12:55 PM

My immediate priorities right now is roughly: 1) New site and documentation for OneJS (moving to Nextra), 2) Open-sourcing OneJS base repo, 3) Game-ready UIs, and then 4) WebGL support. No specific ETAs but 1) 2) and 3) should happen within 2 months.

TTailwind Mechanics If we were using OneJs in a Unity codebase to deploy for mobile only, would the ...

S

SingtaaOP•4/8/25, 12:57 PM

I believe you'd need to check/uncheck some platform boxes for the native plugins as is the case for most Unity deployments. If you want to test this to make sure for your own pipeline, you can install PuerTS directly and see if there are any problems there (mobile vs webgl).

(ctrl+shift+b in vscode)

Similar Threads