Search Unity

  1. Unity Asset Manager is now available in public beta. Try it out now and join the conversation here in the forums.
    Dismiss Notice
  2. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  3. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

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:
    51
    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:
    51
    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:
    16
    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:
    16
    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:
    51
    Is that to be done in Typescript before building or in JavaScript after build?

    From the syntax, it could be either