Search Unity

  1. We are migrating the Unity Forums to Unity Discussions. On July 12, the Unity Forums will become read-only. On July 15, Unity Discussions will become read-only until July 18, when the new design and the migrated forum contents will go live. Read our full announcement for more information and let us know if you have any questions.

How to embed my game in a specific div ?

Discussion in 'Project Tiny' started by ThomasAstrakhan, Dec 10, 2018.

  1. ThomasAstrakhan

    ThomasAstrakhan

    Joined:
    Oct 1, 2018
    Posts:
    1
    Hello.
    I would like to know two things :
    1. How can I make my game to show only in a specific div on my website ? (like a banner or something) Because now I can only display the game in full page.
    2. How can I disable the autofocus ? I don't want my page to scroll to the game at the loading.
    Thank you !
     
  2. TheRoccoB

    TheRoccoB

    Joined:
    Jun 29, 2017
    Posts:
    54
    You might want to consider running the game as a separate page / index file and running it in an iFrame.

    If you need the frame to be responsive (change size dynamically), just google for "responsive iframe".
     
  3. v_vuk

    v_vuk

    Unity Technologies

    Joined:
    Jul 11, 2017
    Posts:
    36
    Focus especially is something we need to work on a bit; right now the shell is designed to run full screen, largely intended for mobile. However, if you load the code (game.js) from your own HTML file, you can create a canvas element with id `UT_CANVAS` and we'll use that instead of creating our own.
     
    TheRoccoB likes this.
  4. ovirta

    ovirta

    Joined:
    Mar 20, 2015
    Posts:
    42
    @v_vuk, @etienne_unity (sorry to ping Etienne but you seemed to be active yesterday :) )

    Digging up old threads but 'UT_CANVAS' tip seems to be working still for Unity Project Tiny. I would like to dynamically change the canvas (and div sizes) where Unity app is embedded.

    From Unity Editor project settings one can change Auto vs fixed size viewport. This helps a little but what if I would like to have project occupy width: 100% and height: 50%. By modifying the javascript and html files of the project by hand this is doable but is quite tedious.

    Example from Unity Tiny Sample HelloWorld js & html

    Code (CSharp):
    1.  
    2.   <div style="height: 500px">
    3.     <canvas id="UT_CANVAS"></canvas>
    4.   </div>
    5.  
    Code (CSharp):
    1.  
    2.       canvas.width = canvas.parentNode.clientWidth;
    3.       canvas.height = canvas.parentNode.clientHeight;
    4.       // canvas.width = width;
    5.       // canvas.height = height;
    6.  
    Is there a documented way to manipulate UT_CANVAS size?

    Thanks!
     
    RemIsWho likes this.
  5. liaofeng7

    liaofeng7

    Joined:
    Jan 25, 2019
    Posts:
    1