Unity 3.0 Webplayer at 100%

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);

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">« created with <a href="http://unity3d.com/unity/" title="Go to unity3d.com">Unity</a> »</p>
</body>

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">« created with <a href="http://unity3d.com/unity/" title="Go to unity3d.com">Unity</a> »</p> -->
</body>

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

Hi Illya,

I'm having a tough time sizing my player to 100% as well. The guys over at Hello Racer (http://www.helloracer.com/) did it but looking at the code, it's a different type of embed.

Is there a parameter that we can pass to UnityObject.js that will play full screen?

Replacing X and Y with 100% just breaks it.

Alas, I am but an artist and codeage makes my head pop.

Thanks for any pointers.

-Spence

Sorry guys - I kept trying to post the whole thing but I think the answer section was actually using it to format (and chop) this post... btw - the top section was so you could customize your web player (replace art and Piano.unity3d with your goodies) - Happy Holidays - Illya


<!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>
        <script type="text/javascript" src="http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject.js"></script>
        <script type="text/javascript">
        <!--
        function GetUnity() {
            if (typeof unityObject != "undefined") {
                return unityObject.getObjectById("unityPlayer");
            }
            return null;
            }
            if (typeof unityObject != "undefined") 
            {
                var params = 
                {
                    backgroundcolor: "000000",
                    bordercolor: "000000",
                    logoimage: "Technical_Designs_Splash.png",
                    progressbarimage: "Technical_Designs_ProgressBar.png",
                    progressframeimage: "Technical_Designs_ProgressFrame.png",
                    disableContextMenu: true

                };
            unityObject.embedUnity("unityPlayer", "Piano.unity3d", "100%", "100%", params);
            }
        -->
        </script>
        <style type="text/css">
        <!--
        body {
    position:fixed;
    font-family: Helvetica, Verdana, Arial, sans-serif;
    background-color: #000000;
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></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"> </p>
</body>
</html>

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. : ])

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