How do I make my webplayer fill the entire browser window?

Question

I have seen couple unity web player projects that use the full screen - that is the full size of the current browser page, How is it done?

Answer 1

Answer by AngryAnt · Dec 09, 2009 at 01:31 PM

If you take a look at the default HTML file generated when building a webplayer, you'll notice that the size of the webplayer is specified there in "width" and "height" HTML properties.

Replacing these specific dimensions with "100%" will scale your web player to the full size of the browser window.

Remember to save your modified HTML file in a different location than where you're building new webplayers to or at least rename it. Otherwise new rebuilds of the webplayer will overwrite your changes.

Also notice that most browsers have a default margin set which will result in a white frame around your content if you set it to 100%, 100%. To remove that, you'll need to add a bit of CSS to the <head></head> section of your HTML:

<style type="text/css" media=screen>
   body
   {
      margin: 0px;
      padding: 0px;
   }
</style>

10 Show 4 · Share

Xin · Dec 10, 2009 at 12:53 AM 0

Share

the Margin tip is really great, thanks

davebuchhofer · Dec 10, 2009 at 02:36 PM 0

Share

For the html challenged, where would you place the CSS code? in one of the document.writes?

davebuchhofer · Dec 10, 2009 at 02:41 PM 0

Share

to answer myself, yes, placing it in the document.write() block just under the if (hasUnity) does work

AngryAnt · Dec 11, 2009 at 10:12 AM 0

Share

You don't need to place the style script within any of the JS code - just place it somewhere between the and tags.

Answer 2

Answer by Jaap Kreijkamp · Dec 09, 2009 at 02:04 AM

I believe you're talking about using the full browser window instead of full screen. The way to do this is by using javascript in the webpage to determine your browser window size and then dynamically generate the plugin code with the width and height properties of the plugin code set to the calculated window width/height.

0 Show 1 · Share

Xin · Dec 09, 2009 at 10:38 AM 0

Share

Thanks Jaap. is there a example code to lookat? is where should I look in the Doc?

Answer 3

Answer by Aubrey-Falconer · Dec 11, 2009 at 04:54 PM

Please check out the source of Mars Explorer's play page - it achieves cross browser full viewport viewing, a beautiful plugin installation, super cool loading graphics (requires Pro), etc.

http://dat.marsxplr.com/play

0 Show 2 · Share

grimmy · Nov 02, 2011 at 07:03 AM 0

Share

I'm looking at a way to do the same rescaling of the Unity webplayer without needing to reload the game every time. I see Mars Explorer does this really well but there don't seem to be any clues in the web page source code. Are you doing some browser>Unity communication for this?

edit: I actually embedded your full source code (including your unity3d file) to my test page but when I resized the browser window, the webplayer still reloads. I don't understand this as there is no difference between our Unity builds OR our Javascript on the server. Any ideas what this could be?

grimmy · Nov 02, 2011 at 08:14 AM 0

Share

SOLVED-I was calling the GetUnity() function twice in one of my included files. As soon as I removed the second call the page refreshes the webplayer's scale automatically.

Answer 4

Answer by bigkahuna · Dec 11, 2010 at 10:50 AM

This method doesn't work with Unity 3.x any more. Anyone know how to do it in Unity 3.x?

0 · Share

Answer 5

A way that I know works is to use [WebTemplates][1] - this will allow you to create a custom template that you can choose when you select your Player Settings. Here is the code to a file called "index.html" - you'll want to put this in your project under Assets>WebPlayerTemplates>FullWindowTemplate (create the directories). Here is the code (HTML):

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <title>%UNITY_WEB_NAME%</title>
         %UNITY_UNITYOBJECT_DEPENDENCIES%
         <script type="text/javascript">
         <!--
         var unityObjectUrl = "%UNITY_UNITYOBJECT_URL%";
         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 unityPlayerObject;
             jQuery(function() {
                 var config = {
                     width: %UNITY_WIDTH%, 
                     height: %UNITY_HEIGHT%,
                     params: %UNITY_PLAYER_PARAMS%
                 };
                 config.params["disableContextMenu"] = true;
                 var u = new UnityObject2(config);
 
                 var $missingScreen = jQuery("#unityPlayer").find(".missing");
                 var $brokenScreen = jQuery("#unityPlayer").find(".broken");
                 $missingScreen.hide();
                 $brokenScreen.hide();
                 
                 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], "%UNITY_WEB_PATH%");
                 unityPlayerObject = u;
                 ResizeUnity();
             });
           function ResizeUnity()
         {
             GetWindowSize();
             
             var unity = unityPlayerObject.getUnity();
             if(unity != null)
             {                    
                 unity.style.width = winWidth + "px";
                 unity.style.height = winHeight + "px";
             }
         }
         var minWidth = %UNITY_WIDTH%, minHeight = %UNITY_HEIGHT%;
         var winWidth, winHeight;
         function GetWindowSize()
         {
             if(typeof(window.innerWidth) == 'number')
             {
                 ///Non-IE or IE 8+
                 winWidth = window.innerWidth;
                 winHeight = window.innerHeight;
             } 
             else
             {
                 if(document.documentElement && 
                     (document.documentElement.clientWidth || document.documentElement.clientHeight))
                 {
                     //IE 6+ in "Standards Compliant Mode"
                     winWidth = document.documentElement.clientWidth;
                     winHeight = document.documentElement.clientHeight;
                 } 
                 else
                 {
                     if(document.body && (document.body.clientWidth || document.body.clientHeight))
                     {
                         //IE 4 compatible
                         winWidth = document.body.clientWidth;
                         myHeight = document.body.clientHeight;
                     }
                 }
             }
                     
             winWidth = Math.round(winWidth);
             winHeight = Math.round(winHeight);
             
             if(winWidth < minWidth)
                 winWidth = minWidth;
             if(winHeight < minHeight)
                 winHeight = minHeight;
         }
         -->
         </script>
         <style type="text/css">
         <!--
         body {
             font-family: Helvetica, Verdana, Arial, sans-serif;
             background-color: white;
             color: black;
             text-align: center;
         }
         a:link, a:visited {
             color: #000;
         }
         a:active, a:hover {
             color: #666;
         }
         p.header {
             font-size: small;
         }
         p.header span {
             font-weight: bold;
         }
         p.footer {
             font-size: x-small;
         }
         div.content {
              position:absolute;
              left:0px;
              top:0px;
         }
         div.broken,
         div.missing {
             margin: auto;
             position: fixed;
             top: 50%;
             left: 50%;
             width: 193px;
             margin-top: -32px;
             margin-left: -97px;
         }
         div.broken a,
         div.missing a {
             height: 63px;
             position: relative;
             top: -31px;
         }
         div.broken img,
         div.missing img {
             border-width: 0px;
         }
         div.broken {
             display: none;
         }
         div#unityPlayer {
             cursor: default;
             height: 100%;
             width: 100%;
         }
         -->
         </style>
     </head>
     <body scroll="no" 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 class="broken">
                     <a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now! Restart your browser after install.">
                         <img alt="Unity Web Player. Install now! Restart your browser after install." src="http://webplayer.unity3d.com/installation/getunityrestart.png" width="193" height="63" />
                     </a>
                 </div>
             </div>
         </div>
     </body>
 </html>

Once this is in the appropriate directory in your project, you will have a new option for player settings. When you generate the web build, you will see an additional file called "index.html" file in the folder with the usual two files (xxxx.html and xxxx.unity3d). If you point your browser at the xxxx.html file and open it, the unity player will open to the extents of the browser window. One thing to keep in mind is that you want to set your player resolution to something small - like 640x480 so that you won't get scroll bars on smaller windows. [1]: http://docs.unity3d.com/Manual/UsingWebPlayertemplates.html

How do I make my webplayer fill the entire browser window?

8 Replies

Unity Answers is in Read-Only mode

Follow this Question

Related Questions