UI HTML - Get Scene

🌵 Needle Engine
21

I succeed to get my GlobalVariables object, but it’s very unstable to get my score and life variable
I tried to use an interval to upload my score count on my html by cycle but it makes it blinking ^^’

by user 224464722878005248

22

Blinking?

23

Heu okay I have a real bug it’s very, very, very confusing
I write it

by user 224464722878005248

24

Ok so
I want to display my life and Score on the left corner of my windows

I succeed to get the Score from my component from my object from my needle scene
BUT

If I only do a

useEffect(() => {
        setGlobalvariables(Needle.findObjectOfType(aestscripts.GlobalVariables))
    }, [])

I have an error because the Needle scene is not correctly launched, so I tried to use a timer.
But, if I use the timer in a useEffect, Needle.findObjectOfType(aestscripts.GlobalVariables) return undefined

If I use it outside a useEffect it works ! But the App component is launched not just one time but 3 times so it makes multiples timer which make the page crash

by user 224464722878005248

25

(I’ll make you a schema to be more explicite)

by user 224464722878005248

26

It seems like something related to the React lifecycle to me

27

you can await the scene being ready: Needle Engine Scripting | Needle Engine Documentation

28

unknown.png
unknown.png1069×1286 143 KB

by user 224464722878005248

29

Hi !

For those who watch this post, here the answer :
I’m using the vite template, so I needed to create my HTML uniquely in javascript.
So all of my UI is in my index.html :

by user 224464722878005248

30 
<body>
  <script>
    // hack for simple-peer
    window.global = window;
    var parcelRequire;
  </script>
  <script type="module" src="./src/generated/gen.js"></script>
  <script type="module" src="./src/main.ts"></script>
  
  
  <div id="App">
    <div id="item"><img id="flower" src="./include/flower.png"></svg><p id="score">0</p></div>
    <div id="item"><img id="life" src="./include/coeur.png"></svg><p id="vie">0</p></div>
  </div>

  <div id="Menu">
    <button id="button-menu">
      <img id="img-menu" src="./include/pause.svg"></img>
    </button>
  </div>

  <needle-engine className="Needle" loadstart="loadingStarted" progress="loadingProgress" loadfinished="loadingFinished"></needle-engine>

by user 224464722878005248

31 
  <script type="text/javascript">
    let imgbuttonInd = 0;
    let globalVariables = null;
    let playerMove = null;

    const button = document.getElementById('button-menu');

    function loadingStarted() { console.log("START") }

    function loadingProgress() { console.log("LOADING...") }

    function loadingFinished() { 

      console.log("FINISHED!") ;

      button.addEventListener('touchstart', pauseHandler);
      button.addEventListener('click', pauseHandler);

      // Récupère le component globalVariable depuis Needle
      globalVariables = Needle.findObjectOfType(aestscripts.GlobalVariables)
      playerMove = Needle.findObjectOfType(aestscripts.PlayerMove)

      // Récupère les éléments du DOM  afficher
      let score = document.getElementById("score")
      let vie = document.getElementById("vie")

      // Initialise l'interval d'update des éléments HTML
      const updatingInterval = setInterval(() => {
        score.innerHTML = globalVariables.Score.toString()
        vie.innerHTML = globalVariables.life.toString() 
      }, 200)
    }

    // Fonction du button pause
    function pauseHandler() {

      let imgbutton = document.getElementById("img-menu");

      if(imgbuttonInd == 0) {
        imgbutton.src = "./include/play.svg";
        imgbuttonInd = 1;
        playerMove.pause()
      } 
      
      else if (imgbuttonInd == 1) {
        imgbutton.src = "./include/pause.svg";
        imgbuttonInd = 0;
        playerMove.play()
      }
    }
    </script>
</body>
</html>

by user 224464722878005248

32

With it in my main.ts :

by user 224464722878005248

33 
import { GlobalVariables } from './scripts/GlobalVariables';
import { GenerateLevel } from './scripts/GenerateLevel';
import { PlayerMove } from './scripts/PlayerMove';
import "@needle-tools/engine";

globalThis["aestscripts"] = { GlobalVariables, GenerateLevel, PlayerMove}

by user 224464722878005248

34

Thanks @marcel :cactus: for his help !

by user 224464722878005248