A custom preloader in Unity part 1/3

Unity 2.6 is now out and they made the indie version free! Thanks unity team!

Unity is used a lot for offline and iphone content and perhaps not so much as a 3D replacement for flash. As a flash programmer, there’s certain things you wanna know, like how to make a preloader.

I will describe 3 ways to make a preloader, the last being the most complex and most impressive ;)

The first way is just to customize the default preloader.

Here’s what the preloader looks like by default:

Default Unity Preloader

There’s 5 elements in there, that you can customize by passing parameters to the object and embed tags in html:

  • bordercolor : the border is always there and its always 1 pixel
  • backgroundcolor
  • logoimage : will replace the unity logo, will be centered, and will never stretch till the edges, it will leave a 10pixel margin
  • progressbarimage : the image of the actual bar, it will be stretched and it shows what the empty bar looks like
  • progressframeimage : what a full progress bar looks like, it’s not stretched, just covered by the progressbarimage

Here’s where those elements go:

Unity Preloader Elements

This is what it looks like in code:


<object id="UnityObject" classid="clsid:444785F1-DE89-4295-863A-D46C3A781394" width="600" height="450" codebase="http://webplayer.unity3d.com/download_webplayer-2.x/UnityWebPlayer.cab#version=2,0,0,0">
<param name="src" value="myProject.unity3d" />
<param name="bordercolor" value="337af1" />
<param name="backgroundcolor" value="ffcc99" />
<param name="logoimage" value="logo.png" />
<param name="progressbarimage" value="bar.png" />
<param name="progressframeimage" value="frame.png" />

<embed id="UnityEmbed" src="myProject.unity3d" width="600" height="450" type="application/vnd.unity" bordercolor="337af1" backgroundcolor="ffcc99" logoimage="logo.png" progressbarimage="bar.png" progressframeimage="frame.png" pluginspage="http://www.unity3d.com/unity-web-player-2.x" />
</object>

Tags: , , , , ,

2 Responses to “A custom preloader in Unity part 1/3”

  1. sinan says:

    hii
    thnx for help.

    i use your first way but cant make it. still i see unity logo. i send you my code can you say what i do wrong?

    3 Boyutlu Online Simülasyon

    function DetectUnityWebPlayerActiveX
    on error resume next
    dim tControl, res, ua, re, matches, major
    res = 0
    set tControl = CreateObject(”UnityWebPlayer.UnityWebPlayer.1″)
    if IsObject(tControl) then
    if tControl.GetPluginVersion() = “2.5.0f5″ then
    ‘ 2.5.0f5 on Vista and later has an auto-update issue
    ‘ on Internet Explorer. Detect Vista (6.0 or later)
    ‘ and in that case treat it as not installed
    ua = Navigator.UserAgent
    set re = new RegExp
    re.Pattern = “Windows NT (\d+)\.”
    set matches = re.Execute(ua)
    if matches.Count = 1 then
    major = CInt(matches(0).SubMatches(0))
    if major < 6 then
    res = 1
    end if
    end if
    else
    res = 1
    end if
    end if
    DetectUnityWebPlayerActiveX = res
    end function

    function GetUnity () {
    if (navigator.appVersion.indexOf(”MSIE”) != -1 && navigator.appVersion.toLowerCase().indexOf(”win”) != -1)
    return document.getElementById(”UnityObject”);
    else if (navigator.appVersion.toLowerCase().indexOf(”safari”) != -1)
    return document.getElementById(”UnityObject”);
    else
    return document.getElementById(”UnityEmbed”);
    }

    function DetectUnityWebPlayer () {
    var tInstalled = false;
    if (navigator.appVersion.indexOf(”MSIE”) != -1 && navigator.appVersion.toLowerCase().indexOf(”win”) != -1) {
    tInstalled = DetectUnityWebPlayerActiveX();
    }
    else {
    if (navigator.mimeTypes && navigator.mimeTypes["application/vnd.unity"]) {
    if (navigator.mimeTypes["application/vnd.unity"].enabledPlugin && navigator.plugins && navigator.plugins["Unity Player"]) {
    tInstalled = true;
    }
    }
    }
    return tInstalled;
    }

    function GetInstallerPath () {
    var tDownloadURL = “”;
    var hasXpi = navigator.userAgent.toLowerCase().indexOf( “firefox” ) != -1;

    // Use standalone installer
    if (1)
    {
    if (navigator.platform == “MacIntel”)
    tDownloadURL = “http://webplayer.unity3d.com/download_webplayer-2.x/webplayer-i386.dmg”;
    else if (navigator.platform == “MacPPC”)
    tDownloadURL = “http://webplayer.unity3d.com/download_webplayer-2.x/webplayer-ppc.dmg”;
    else if (navigator.platform.toLowerCase().indexOf(”win”) != -1)
    tDownloadURL = “http://webplayer.unity3d.com/download_webplayer-2.x/UnityWebPlayer.exe”;
    return tDownloadURL;
    }
    // Use XPI installer
    else
    {
    if (navigator.platform == “MacIntel”)
    tDownloadURL = “http://webplayer.unity3d.com/download_webplayer-2.x/UnityWebPlayerOSX.xpi”;
    else if (navigator.platform == “MacPPC”)
    tDownloadURL = “http://webplayer.unity3d.com/download_webplayer-2.x/UnityWebPlayerOSX.xpi”;
    else if (navigator.platform.toLowerCase().indexOf(”win”) != -1)
    tDownloadURL = “http://webplayer.unity3d.com/download_webplayer-2.x/UnityWebPlayerWin32.xpi”;
    return tDownloadURL;
    }
    }

    function AutomaticReload () {
    navigator.plugins.refresh();
    if (DetectUnityWebPlayer())
    window.location.reload();

    setTimeout(’AutomaticReload()’, 500)
    }

    3 Boyutlu Online Simülasyon

    var hasUnity = DetectUnityWebPlayer();
    var brokenUnity = false;
    if (hasUnity) {

    document.write(’ \n’);
    document.write(’ \n’);
    document.write(’ \n’);
    document.write(”);

    // if Unity does not define to GetPluginVersion on Safari on 10.6, we presume the plugin
    // failed to load because it is not compatible with 64-bit Safari.
    if (navigator.appVersion.indexOf(”Safari”) != -1
    && navigator.appVersion.indexOf(”Mac OS X 10_6″) != -1
    && document.getElementById(”UnityEmbed”).GetPluginVersion == undefined)
    brokenUnity = true;

    // 2.5.0 cannot auto update on ppc. Treat as broken.
    else if (document.getElementById(”UnityEmbed”).GetPluginVersion() == “2.5.0f5″
    && navigator.platform == “MacPPC”)
    brokenUnity = true;
    }
    if (!hasUnity || brokenUnity) {

    var installerPath = GetInstallerPath();
    if (installerPath != “”) {
    // Place a link to the right installer depending on the platform we are on. The iframe is very important! Our goals are:
    // 1. Don’t have to popup new page
    // 2. This page still remains active, so our automatic reload script will refresh the page when the plugin is installed
    document.write(’ \n’);
    if (brokenUnity)
    document.write(’ \n’);
    else
    document.write(’ \n’);
    document.write(’ \n’);

    // By default disable ActiveX cab installation, because we can’t make a nice Install Now button
    // if (navigator.appVersion.indexOf(”MSIE”) != -1 && navigator.appVersion.toLowerCase().indexOf(”win”) != -1)
    if (0)
    {
    document.write(’ Title’);
    document.write(’ Contents’);
    document.write(”");

    var innerUnityPrompt = document.getElementById(”InnerUnityPrompt”);

    var innerHtmlDoc =
    ‘\n’ +
    ”;

    innerUnityPrompt.innerHTML = innerHtmlDoc;
    }

    document.write(’\n’);
    }
    else {
    document.write(’ \n’);
    if (brokenUnity)
    document.write(’ \n’);
    else
    document.write(’ \n’);
    document.write(’ \n’);
    }

    // hide broken player
    if (brokenUnity)
    document.getElementById(”UnityEmbed”).height = 0;

    // Reload when detected unity plugin – but only if no previous plugin is installed
    // – in that case a browser restart is needed.
    if (!brokenUnity)
    AutomaticReload();
    }

    This content requires the Unity Web Player
    Install the Unity Web Player today!

    http://www.fnshyl.com bilgi@fnshyl.com 555 697 73 00

  2. admin says:

    Code that has
    document.write(’\n’);
    In it cannot possibly be correct.

    What you should do is combine the bolded parameters in my example HTML code with this javascript: http://code.google.com/p/aquiris-u3dobject/

Leave a Reply

Security Code: