UI HTML - Get Scene

🌵 Needle Engine
1

Hi !

I try to make my UI by HTML.
For it, I would like to get my context from my needle component outside of it.

How could I get it ?

Original Post on Discord

by user 224464722878005248

2

You can get the web component (<needle-engine>) using this.context.domElement and you can query the dom/document just using document

3

Ok but how could I get the different Objects/Scripts in my Canvas by outside ?

I tried

let test = document.getElementsByClassName("Needle")

Which works but I would like to get the variable Score from my Script GlobalVariables from my gameObject LevelBoundary

I could get the HTML component from my script so it does
Script => HTML

But if I want to make a Pause button, I need to get the Canvas environment
So HTML => Scripts

by user 224464722878005248

4

You can read a bit about that here: Needle Engine Scripting | Needle Engine Documentation

5

I tried to get my Custom Script like that (because I can’t use Needle.Type), it doesn’t work, did I missed something ?

import "./styles/mainScreen.css";
import React from 'react';
import ReactDOM from 'react-dom/client';
import { useEffect } from "react";
import GlobalVariables from "./scripts/GlobalVariables"

export default function App() {
    let test = null;


    useEffect(() => {
        test = Needle.findObjectOfType(GlobalVariables)
        console.log(test)
    }, []);

    return(<div className="App">
        <p> Score : {test?.Score} </p>
        <p> Vie : {test?.life} </p>
    </div>
    )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

by user 224464722878005248

6

You need to expose your type to the global scope using globalThis globalThis - JavaScript | MDN

7

è.g. do this in your code: globalThis["aestscripts"].GlobalVariables = GlobalVariables

8

for example in main.ts

9

and access it from vanilla js via aestscripts.GlobalVariables

10
11

Like this ?

[main.ts]
import { GlobalVariables } from './scripts/GlobalVariables';
import "@needle-tools/engine";

globalThis["aestscripts"].GlobalVariables = GlobalVariables

by user 224464722878005248

12

unknown.png
unknown.png850×136 14.1 KB

by user 224464722878005248

13 
[main.ts]
import { GlobalVariables } from './scripts/GlobalVariables';
import "@needle-tools/engine";

const aestscripts = {};
aestscripts.GlobalVariables = GlobalVariables;
globalThis["aestscripts"] = aestscripts;
14

Oookay

by user 224464722878005248

15

Or maybe just globalThis["aestscripts"] = { GlobalVariables } works too

16

It works better

by user 224464722878005248

17

aestscripts is not necessary, just a namespace for your stuff - you could put it in the global namespace directly. But its better to be tidy and dont pollute the global namespace :slightly_smiling_face:

18

Okay thanks
I have again a little error, I get correctly the type GlobalVariables (thank you very much)
But with this script :

import "./styles/mainScreen.css";
import React from 'react';
import ReactDOM from 'react-dom/client';
import { useEffect } from "react";

export default function App() {
    let globalVariables = null;


    useEffect(() => {
        globalVariables = Needle.findObjectOfType(aestscripts.GlobalVariables)
        console.log(globalVariables)
    }, []);

    return(<div className="App">
        <p> Score : {globalVariables?.Score} </p>
        <p> Vie : {globalVariables?.life} </p>
    </div>
    )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

I get this error :

by user 224464722878005248

19

unknown.png
unknown.png815×108 15.9 KB

by user 224464722878005248

20

Okay, we need to wait for the scene

by user 224464722878005248