< Back

Getting Started

UI Display Function

Loading Function

Text to Animated Function

Load Scripts form Text

Actor Function

Interaction Function

Advanced Function

Changing Background at Certain Times

In this sample, then bind function is used to get the time of playback for changing given background images.

Using the bind Function

Controls Behaviors

This sample contains 1 button and its behaviors are:

Change script for the character and auto play back.
Change given background images at pre-defined times.
Please view the source code here.

Sample Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js"></script>
<script type="text/javascript" src="https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.min.js"></script>
<script type="text/javascript">
    var player = new CTWebPlayer();

    $(function () {
        player.playerUrl = "https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.unity3d";
        player.init($("#unityPlayer"), function () {

            player.showPlaybar(false);

            var urls = ["https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG0.jpg",

                        "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG1.jpg",
                        "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG2.jpg",
                        "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG3.jpg",
                        "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG4.jpg",
                        "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/Peach.uctproject",
                        "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/Friendly.uctidle",
                        "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/Peach.uctscript",
                        "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/Peach_01.uctscript"];
            player.preLoadFiles(urls, {
                thread: 9,
                loaded: function() {
                    player.loadProject("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/Peach.uctproject", {
                        playerAfter:-1,
                        showActor: false,
                        idleMotionUrl:"https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/Friendly.uctidle"
                    });
                     player.loadScript("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/Peach.uctscript", {
                        playAfter: 2,
                        loaded: function(){
                            initialBackground();

                            player.actorTransform({

                                scale: 40,
                                positionX: 18,
                                positionY: 83,
                                duration: 0
                            });

                            player.showActor(true, 0);
                        }
                    });
                }//executed after loaded
            });//pre-loading
        });//initial
    })//$function


    function initialBackground(){
        player.loadBackground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG0.jpg", {
            name: "Initial",
            alpha: 1,
            fit: "fill"
        });
    }

    function LoadandChange(){
        player.loadScript("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/Peach_01.uctscript", {
            playAfter:1,
            loaded: function(){
                player.showActor(true, 0);
            }
        });
        var WashScreen = 0;
        var FadeTime = 1;//the sec for fading in and out
        var BGArray = {"item": [
            {
                "time": 5.5,
                "BG": "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG1.jpg"
            },
            {
                "time": 11.5,
                "BG": "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG2.jpg"
            },
            {
                "time": 17.5,
                "BG": "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG3.jpg"
            },
            {
                "time": 23.5,
                "BG": "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Last/BG4.jpg"
            }
        ]};
        player.bind( "playerstatus", function (event) {
            if( event.status == "startplay" )
            {
                if (WashScreen == 1)
                {
                    WashScreen = 0;
                }
            }
            else if( event.status == "playing" )
            {
                $.each(BGArray.item, function (key, value) {
                    if (event.time > (value.time - FadeTime) && event.time < (value.time - FadeTime + 0.02)) {
                        player.showBackground(false, FadeTime);
                    };//fading out the BG image
                    if (event.time > value.time && event.time < (value.time + 0.02)){
                        player.showProgressbar(false);
                        player.loadBackground(value.BG, {
                            name: "BGImage",
                            alpha: 0,
                            fit: "fill",
                            loaded: function (status) {
                                player.showBackground(true, FadeTime);
                            }
                        });
                    }//fading in the BG image
                });
            }
            else if( event.status == "pause" )
            {
                WashScreen = 0;
            }
            else if( event.status == "stop" || event.time == event.length)
            {
                if (event.time == event.length)
                {
                    player.showProgressbar(true);
                }
                WashScreen = 1;
            }
        });//bind
    }//LoadandChange
</script>

Copy and paste the codes in-between the <head> and </head> tags of your custom web page.
The purposes of the functions or variable:
- $(function (): This function defines the address, the position of the CrazyTalk Web Player in the custom web, preloads the material files this example needs, loads the project and script without playback, and sets the background images.
The adjustable codes in the functions:
$(function ()
- Replace the below address of the CrazyTalk Web Player with the one within your self-hosting server.
  https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.unity3d
- player.loadProject(){...}: For more information about the modification method to the function loading a default project, please refer to the Loading Projects section.
- player.loadScript(){...}: For more information about the modification method to the function loading a default script, please refer to the Loading Scripts section.

function initialBackground()

Show the initial background image. Please refer to the section below for more information.
- Loading Backgrounds

function LoadandChange()

This function loads another script for the actor and auto plays it afterward.
It also gets the web player status with bind function in order to change the background image at certain time.
FadeTime: This variable is used to define the fade in and fade out time (in second) for the next given background image.

BGArray: This array stores the given images. You are free to add as many images as you want. To insert one new image, you need to copy and paste the code below (do not forget the comma "," after each element in this array except the last one) into this array:

{
"time": 0,
"BG": "http://......"
},

Afterward, change the number after

"time": to determine the time for showing the new image; and
"BG": to put the address of the corresponding image that will be shown at the given time.

player.bind("playerstatusss", function (event){...}): For more information about the modification method to the bind function, please refer to the Getting Player Status section.

<div id="unityPlayer" style="width: 640px; height: 480px;">
</div>

<input type="button" value="New Scene With Background Fading out / in Effects" onclick="LoadandChange()" class="button" />

Web Player

Copy and paste the codes from <div> to </div> into the position where you want to embed the web player in-between the <body> and </body> tags of your custom web page.
Modify the numbers after the width: and height: parameters in the first line to customize the size of the player.