Search Unity

Access method from browser/ html

Discussion in 'Project Tiny' started by ZyXeM, Jan 9, 2019.

  1. ZyXeM

    ZyXeM

    Joined:
    Jul 10, 2015
    Posts:
    6
    I have two questions.

    the first is I can access a method or trigger inside the unity game from the html file?
    Like done in webGl with GameInstance.SendMessage().

    And my second question is: Can I use Html markups indside the the text components?
    I saw that there was an htmlText module, but I can't really figure out what it does or if it can help.

    Thank you,
     
  2. valourus123

    valourus123

    Joined:
    Nov 12, 2018
    Posts:
    12
    good question. I would like to know this as well ;)
     
  3. Nkon

    Nkon

    Unity Technologies

    Joined:
    Jun 12, 2017
    Posts:
    65
    Hi there,

    You can do something like this for example:
    Code (JavaScript):
    1.  
    2. namespace game {
    3.     export class ExampleSystem extends ut.ComponentSystem {
    4.         static LogMessage():void {
    5.             console.log("Button clicked!");
    6.         }
    7.      
    8.         OnUpdate():void {}
    9.     }
    10. }

    And in the HTML body:
    <button type="button" onclick="game.ExampleSystem.LogMessage()">Click Me!</button>


    Cheers!
     
    frankprogrammer likes this.
  4. valourus123

    valourus123

    Joined:
    Nov 12, 2018
    Posts:
    12
    thanks I did something like that but this is just a bit cleaner :)
     
  5. NiallT

    NiallT

    Joined:
    Sep 22, 2018
    Posts:
    20
    Basically, when you compile TypeScript to JavaScript, every namespace, class and object gets converted to a JSON object. That means you've got two access methods for the LogMessage function in the above:
    game.ExampleSystem.LogMessage()
    (as per nkon) or
    game["ExampleSystem"]["LogMessage"]()


    If you look in the compiled javascript, you'll see lots of expressions of the form
    function (e){<<whatever>>}
    . This is because JavaScript isn't really object oriented, and to pretend it is, you've got to write anonymous functions... but give them names.

    (Yes, JavaScript is a weird language.)
     
  6. valourus123

    valourus123

    Joined:
    Nov 12, 2018
    Posts:
    12
    I know, I'm more of a webdev anyway xD
     
  7. NiallT

    NiallT

    Joined:
    Sep 22, 2018
    Posts:
    20
    Fair enough. My default assumption is that most people here are coming from a “big Unity” background rather than web.
     
    valourus123 likes this.
  8. tomny

    tomny

    Joined:
    Sep 12, 2015
    Posts:
    15
    does this only work for static methods?
     
  9. Nkon

    Nkon

    Unity Technologies

    Joined:
    Jun 12, 2017
    Posts:
    65
    Hey,

    This is also possible:
    Code (JavaScript):
    1. namespace game {
    2.     export function LogMessage() {
    3.         console.log("Button clicked!");
    4.     }
    5. }
    and

    <button type="button" onclick="game.LogMessage()">Click Me!</button>


    But in practice this is quite similar to a static method. It don't think it works for class methods, like OnUpdate() or such.

    Is there a specific use case you're interested in?

    Cheers!
     
  10. tomny

    tomny

    Joined:
    Sep 12, 2015
    Posts:
    15
    Hi, I am trying to set a value of a component through the web page.

    static methods dont allow for "this.world" in

    Code (JavaScript):
    1. this.world.forEach([game.GameState], (gs) => {
    2.                     gs.Game=entryPointData.quiz;
    3.                     console.log("set game to " + entryPointData.quiz);
    4.                 });
     
  11. Nkon

    Nkon

    Unity Technologies

    Joined:
    Jun 12, 2017
    Posts:
    65
    Hi there,

    You can do this:
    const world = ut.HTML.HTMLService.oneWorld() as ut.World;


    Then you can use 'world.forEach' instead of 'this.world.forEach'.

    Cheers!
     
  12. NiallT

    NiallT

    Joined:
    Sep 22, 2018
    Posts:
    20
    Is that to be done in Typescript before building or in JavaScript after build?

    From the syntax, it could be either