How do I make the Unity web player resize at runtime?

Question

I'm trying to make a web game that fills the user's browser window, and updates if the user re-sizes the browser window, like t$$anonymous$$s:

http://dat.marsxplr.com/play

T$$anonymous$$s is the HTML that I'm using:

     <html xmlns="http://www.w3.org/1999/xhtml">
         <head>
             <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
             <title>Game Title</title>
             <script type='text/javascript' src='https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/jquery.min.js'></script>
             <script type="text/javascript">
             <!--
             var unityObjectUrl = "http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js";
             if (document.location.protocol == 'https:')
                 unityObjectUrl = unityObjectUrl.replace("http://", "https://ssl-");
             document.write('<script type="text\/javascript" src="' + unityObjectUrl + '"><\/script>');
             -->
             </script>
             <script type="text/javascript">
             <!--
                 var config = {
                     width: window.innerWidth,
                     height: window.innerHeight,
                     params: { enableDebugging:"0" }
                    
                 };
                 var u = new UnityObject2(config);
                
                 jQuery(function() {
      
                     var $missingScreen = jQuery("#unityPlayer").find(".missing");
                     var $brokenScreen = jQuery("#unityPlayer").find(".broken");
                     $missingScreen.$$anonymous$$de();
                     $brokenScreen.$$anonymous$$de();
      
                     u.observeProgress(function (progress) {
                         switch(progress.pluginStatus) {
                             case "broken":
                                 $brokenScreen.find("a").click(function (e) {
                                     e.stopPropagation();
                                     e.preventDefault();
                                     u.installPlugin();
                                     return false;
                                 });
                                 $brokenScreen.show();
                             break;
                             case "missing":
                                 $missingScreen.find("a").click(function (e) {
                                     e.stopPropagation();
                                     e.preventDefault();
                                     u.installPlugin();
                                     return false;
                                 });
                                 $missingScreen.show();
                             break;
                             case "installed":
                                 $missingScreen.remove();
                             break;
                             case "first":
                             break;
                         }
                     });
                     u.initPlugin(jQuery("#unityPlayer")[0], "BoobieClicker.unity3d");
                 });
                
                 function GetUnity ()
                 {
                     var unity = document.getElementById("UnityObject");
                     if(unity == null) {
                     unity = document.getElementById("UnityEmbed");
                     }
                     return unity;
                 }
                
                 function resizeUnity()
                 {
                     var minW = 990;
                     var w;
                     if(document.all)
                     {
                        w = document.body.offsetWidth;
                     }
                     else
                     {
                        w = window.innerWidth;
                     }          
                                
                     if(w < minW)
                     w = minW;
                            
                     var unity = GetUnity();
                     unity.style.width = w;
                 }
      
             -->
             </script>
            
             <style type="text/css">
             <!--
             body {
                 margin: 0px;
                 padding: 0px;
             }
             div#unityPlayer {
                 cursor: default;
                 height: 100%;
                 width: 100%;
             }
             -->
             </style>
         </head>
         <body onLoad="resizeUnity()" onResize="resizeUnity()">
             <div class="content">
                 <div id="unityPlayer">
                     <div class="missing">
                         <a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now!">
                             <img alt="Unity Web Player. Install now!" src="http://webplayer.unity3d.com/installation/getunity.png" width="193" height="63" />
                         </a>
                     </div>
                 </div>
             </div>
         </body>
     </html>

The body tag is supposed to call resizeUnity() whenever the window is re-sized, but it doesn't seem to be working.

I've tested in Firefox and Chrome.

What am I doing wrong? :(

Answer 1

Best Answer

Answer by abhishekdeb · Mar 20, 2014 at 11:56 AM

You don't need to resize it every time. T$$anonymous$$s people have done awesome job. Check it here.

They are setting height of html and body element to 100% and making the height and width of the player 100% in teh config. Just go through the link and download the templates.

Add comment · Show 2 · Share

EvaXephon · Mar 20, 2014 at 07:33 PM 0

Share

Thank you! You are a gentleman, a scholar, and a livesaver!

abhishekdeb · Mar 21, 2014 at 04:08 AM 0

Share

welcome. :) glad it helped. Happy Coding.

How do I make the Unity web player resize at runtime?

1 Reply

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions