CODEWITHSUNDEEP
javascriptcssunity-game-engineresizeunityscript
chaosTechnician
chaosTechnician

Reputation: 1700

Resizing Unity WebPlayer element when resizing browser

I'm trying to get a Unity WebPlayer control to resize when the browser is resized. Here's the code I think is pertinent:

<!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">
        <!--
        function GetUnity() 
        {
            if (typeof unityObject != "undefined") 
            {
                return unityObject.getObjectById("unityPlayer");
            }
            return null;
        }

        function ResizeUnity()
        {
            //This function properly assigns innerWidth and Height to winWidth and winHeight
            GetWindowSize();

            var unity = GetUnity();
            if(unity != null)
            {
                //This does not properly resize anything at all
                unity.width = winWidth;
                unity.height = winHeight;
            }
        }
    }

    if (typeof unityObject != "undefined") 
    {
        GetWindowSize();
        //This replaces the unityPlayer div below with an actual WebPlayer object
        unityObject.embedUnity("unityPlayer", "WebPlayer.unity3d", winWidth, winHeight, params);            
    }
    -->
    </script>
    <style type="text/css">
    <!--
    div#unityPlayer {
        cursor: default;
        height: 100%;
        width: 100%;
    }
    -->
    </style>
    </head>
    <body margin="0" marginwidth="0" marginheight="0" 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!">
                    </a>
                </div>
            </div>
        </div>
    </body>
</html>

From various alert()s in the code, I can verify that ResizeUnity() is being called when I change the size of the window. I can verify that winWidth and winHeight are getting proper values assigned to them upon resizing. But, no matter what I do to the browser window, the Unity WebPlayer object stays the same size it was when it was loaded.

What am I doing wrong?

Upvotes: 2

Views: 5098

Answers (2)

Jorge Galv&#227;o
Jorge Galv&#227;o

Reputation: 1893

You need to adjust the properties of the div that contains your game. Most of the times CSS is enough to do that, you don't need JavaScript.

Here is a working example that displays a game using the browser's full width and height:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
        <script type="text/javascript" src="http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js"></script>
        <script type="text/javascript">
            var u = new UnityObject2();
            jQuery(function() {
                u.initPlugin(jQuery("#unityPlayer")[0], "http://unity3d.com/files/live-demos/angrybots/AngryBots.unity3d");
            });
        </script>
        <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }
        #unityPlayer {
            position:fixed;
            top:0px;
            left:0px;
            height: 100%;
            width: 100%;
        }
        </style>
    </head>
    <body>
        <p>Some text that will be hidden...</p>
        <div id="unityPlayer"></div>
        <p>Some more text that will also be hidden.</p>
    </body>
</html>

Upvotes: 0

chaosTechnician
chaosTechnician

Reputation: 1700

It seems the GetUnity() function wasn't grabbing an element high enough up its div hierarchy for me to resize the correct element. Updating my ResizeUnity() function with this did the trick:

function ResizeUnity()
{
    //This function properly assigns innerWidth and Height to winWidth and winHeight
    GetWindowSize();

    var unity = document.getElementById('unityPlayer');
    if(unity != null)
        {                   
            unity.style.width = winWidth + "px";
            unity.style.height = winHeight + "px";
        }
}

Upvotes: 2

Related Questions