Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Unite 2023 Registrations are now LIVE! We are thrilled to announce that Unite 2023 Registration is now live and open for all!
    Dismiss Notice
New Forum User Notice Unite 2023 Registrations are now LIVE!

Export template/etc is bad (5.6.0p4)

Discussion in 'WebGL' started by Stardog, Jul 14, 2017.

  1. Stardog

    Stardog

    Joined:
    Jun 28, 2010
    Posts:
    1,887
    The export code I see here is basically this:

    Code (CSharp):
    1. <script src="/Build/UnityLoader.js"></script>
    2. <script>var gameInstance = UnityLoader.instantiate("gameContainer", "/Build/GameName.json");</script>
    3. <div id="gameContainer" style="width: 960px; height: 600px; margin: auto"></div>
    The code should be morelike this:
    Code (CSharp):
    1. <script src="/Build/UnityLoader.js"></script>
    2. <script>var gameInstance = UnityLoader.instantiate("game", "/Build/GameName.json");</script>
    3. <canvas id="game"></canvas>
    So, why is there a useless wrapper "gameContainer"? A canvas is created at runtime as a child of this. Why not just have canvas at root?

    Why is it adding inline code to gameContainer, even when you remove it, like in my second example.
    Capture.PNG

    Why is canvas id #canvas? There should be no hashes.

    Why is it adding more inline width/height to the child canvas?

    Why is there two divs below the canvas for the loading bar? They are set to "display: none" at the end. Is it now embedded? How to have no loading bar?

    Has this changed in 2017.1?
     
    Last edited: Jul 14, 2017
    Stardog, Jul 14, 2017
    #1

  2. alexsuvorov

    alexsuvorov

    Unity Technologies

    Joined:
    Nov 15, 2015
    Posts:
    327
    Hello Stardog.

    This is good question. Technically it is possible to use a canvas element as a placeholder. However, this would introduce some difficulties. Specifically, the position of the loading logo, loading progress bar and the build popup box should be relative to the game contents. Currently those elements are appended as children of the game div container (which also embeds the game canvas). Such setup makes it much easier to change the position, alignment or visibility of the whole game window (including the associated logo, loading bar and popup window), as you just need to control the embedding div container. Note that you can not have the helper elements as children of the canvas itself.

    Consider a setup where you provide only a canvas as an embedding parameter for the loader. Then the loader would have to create those helper elements externally to the canvas. So if, for example, the owner of the canvas decides to hide the canvas, the associated elements, created by the loader, wont be hidden. Of course, it is possible to work around it, and cover most of the use cases, but it would make the whole setup more complex, not less.

    Another very good question. This is actually a workaround for the event handling code, implemented in the current version of Emscripten. The #canvas id has a special meaning for the Emscripten handler code, and informs the event handler to use the Module.canvas element instead of trying to resolve the id from the document. The previously used canvas id was only compatible with a setup when you can have a single build on the page. The new embedding setup allows you to have any number of games embedded on the same page, so it would be impossible to resolve the duplicate canvas ids. For the same reason, the page should not try to find the game canvas by id, instead the page should access the canvas through gameInstance.Module.canvas (this eliminates any issues when having multiple games embedded on the page). In other words, the game canvas does not need any id at all, so it might be completely removed in the future.

    Note that according to HTML5 spec, #canvas is a perfectly valid id for an html element. If you happen to use canvas id in your already existing styles, you may use either #gameContainer canvas {...} or #\#canvas {...} instead.

    The size of the canvas is inherited either from the container size or from the instantiation parameters (can be overridden). Could you explain the actual problem in more details?

    Simply provide an dummy progress function for the loader:
    Code (JavaScript):
    1. <script>var gameInstance = UnityLoader.instantiate("gameContainer", "/Build/GameName.json", { onProgress: function(){} });</script>
     
    alexsuvorov, Jul 18, 2017
    #2