Search Unity

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:
    19
    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:
    36
    @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!