Community

Question

I have run into a problem when I change the 800 and 600 to 100%. It does not properly size the window to full screen. Instead I get a squashed screen.

html code:

unityObject.embedUnity("unityPlayer", "WebPlayer.unity3d", 800, 600, params);

Answer 1

My solution to this problem was to use a small piece of javascript to find the dimentions of the webpag, before creating the unity object, then using thes values as the height and width.

Chriz.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    Unity Web Player | WebPlayer

        if (typeof unityObject != "undefined") {
            return unityObject.getObjectById("unityPlayer");
        }
        return null;
    }
    if (typeof unityObject != "undefined") {

          var myWidth = 0, myHeight = 0, borderSize = 20;
              if( typeof( window.innerWidth ) == 'number' ) {
                //Non-IE
                myWidth = window.innerWidth - borderSize;
                myHeight = window.innerHeight - borderSize;
              } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                //IE 6+ in 'standards compliant mode'
                myWidth = document.documentElement.clientWidth - borderSize;
                myHeight = document.documentElement.clientHeight - borderSize;
              } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
                //IE 4 compatible
                myWidth = document.body.clientWidth - borderSize;
                myHeight = document.body.clientHeight - borderSize;
              }

        var params = {
        backgroundcolor: "000000",
        bordercolor: "000000",
        textcolor: "FFFFFF",
        //logoimage: "MyLogo.png",
        //progressbarimage: "MyProgressBar.png",
        //progressframeimage: "MyProgressFrame.png"
        disableContextMenu: true
        };
        unityObject.embedUnity("unityPlayer", "WebPlayer.unity3d", myWidth, myHeight, params);

    }
    -->
    </script>
    <style type="text/css">
    <!--
    body {
        font-family: Helvetica, Verdana, Arial, sans-serif;
        background-color: black;
        color: white;
        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 {
        margin: auto;
        width: 100%;
    }
    div.missing {
        margin: auto;
        position: relative;
        top: 50%;
        width: 193px;
    }
    div.missing a {
        height: 63px;
        position: relative;
        top: -31px;
    }
    div.missing img {
        border-width: 0px;
    }
    div#unityPlayer {
        cursor: default;
        height: 100%;
        width:  100%;
    }
    -->
    </style>
</head>
<body>
    <!-- <p class="header"><span>Unity Web Player | </span>WebPlayer</p> -->
    <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>
    <!-- <p class="footer">&laquo; created with <a href="http://unity3d.com/unity/" title="Go to unity3d.com">Unity</a> &raquo;</p> -->
</body>

Answer 2

Hi Spencer,

Yeah it is very hard to get information about the new 3.0 Unity html format I had to go to Wikileaks to get some help (Actually I got some help from some cool Unity guys at Unite 2010)

I have finally got something that works. Attached is my template that I am using for full-screen publishing. It also is set up to customize the player load screen to use custom art and turn off the right-click menu pop-up.

(Replace the WebPlayer.unity3d with your file and you should be good to go)

Have a Merry Christmas - html in your stocking :-) ),

Illya

            };
        unityObject.embedUnity("unityPlayer", "WebPlayer.unity3d", "100%", "100%", params);
        }
    -->
    </script>
    <style type="text/css">
    <!--
    body {
        position:fixed;
        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 {
        margin: auto;
        width: 640px;
    }
    div.missing {
        margin: auto;
        position: relative;
        top: 50%;
        width: 193px;
    }
    div.missing a {
        height: 63px;
        position: relative;
        top: -31px;
    }
    div.missing img {
        border-width: 0px;
    }
    div#unityPlayer {
        position:fixed;
        cursor: default;
        height: 480px;
        width: 640px;
    }
    -->
    </style>
</head>
<body>
    <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>
    <p class="footer">&laquo; created with <a href="http://unity3d.com/unity/" title="Go to unity3d.com">Unity</a> &raquo;</p>
</body>

Answer 3

Here is something to add. If you use 100% on size, and you format your graphics (2D) to simply draw based on the screen size(i.e screen.width/2 - (gui/2), etc..) You get a much faster and easier solutions, as no matter what size you stretch your window, the GUI and your product looks fine. If you put the GUI in a PIXEL location, your stuck with that size. (so you get scroll bars if the uses makes the screen smaller, even if you have 100% on the sizes) So in one of my earlier proejcts, it does not resize, but in all my later ones, my GUI is based on screen size location positioning and that is the key to allow unity to use the 100% on the web player. (or at least that is my current conclusion, but as always subject to change based on the facts presented. : ])

Answer 4

0

Have your user right click on the app and click "Full Screen" Presto Chango

answered Dec 05 '12 at 07:06 PM

paprocjo
50 ● 1 ● 5 ● 5

(comments are locked)

Answer 5

0

I had to change the tag to:

<body marginheight="0" topmargin="0" vspace="0" marginwidth="0" leftmargin="0" hspace="0" style="margin:0; padding:0">

To get rid of a slight border

answered Apr 22 '11 at 06:24 PM

Ryan Deluz
2

(comments are locked)

Community

Unity 3.0 Webplayer at 100%

Follow this question

Welcome to Unity Answers

Unity Answers tutorial video!

Related Questions