< Back

Getting Started

UI Display Function

Loading Function

Text to Animated Function

Load Scripts form Text

Actor Function

Interaction Function

Advanced Function

Loading Backgrounds

In this sample, you may use loadBackground function to toggle and load different backgrounds by pressing buttons with specific behaviors. Furthermore, you may optionally use the showBackground function to show/hide the background. Copy and paste the code to your custom web page so that you can have characters talking with different backgrounds.

Using the loadBackground and showBackground Functions
Images	Solid Color

Controls Behaviors

This sample contains 7 buttons, their behaviors are:

Click the first button, BG1, to load an image (BG_1.jpg) as background. The background will be 80% opaque.
Click the second button, BG2, to load another image (BG_2.jpg) as background. The background will be totally opaque.
Click the third button, BG3, to load the second image (BG_2.jpg) as background. The background will be totally opaque with fill-up-to-player mode.
Click the fourth button, BG4, to load the second image (BG_2.jpg) as background. The background will be totally opaque but fade out in 5 seconds.
Click the fifth button, Black, to set the background color black.
Click the sixth button, Gray, to set the background color gray.
Click the seventh button, White, to set the background color white.
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.loadActor("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode6/Background.uctmodel", {
                idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode6/Affirmative.uctidle"
            });
        });
    });

    function loadBackground1() {
        player.loadBackground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode6/BG_1.jpg", {
            alpha: 0.8
        });
    }
    function loadBackground2() {
        player.loadBackground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode6/BG_2.jpg", {
            alpha: 1
        });
    }
    function loadBackground3() {
        player.loadBackground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode6/BG_2.jpg", {
            alpha: 1,
            fit: "fill"
        });
    }
    function loadBackground4() {
        player.loadBackground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode6/BG_2.jpg", {
            alpha: 1,
            loaded: function () {
                player.showBackground(false, 5.0);
            }
        });  
    }    
    function loadBackground5() {
        player.setBackgroundColor( "#000000" );  
    }    
    function loadBackground6() {
        player.setBackgroundColor( "#E8E8E8" );  
    }    
    function loadBackground7() {
        player.setBackgroundColor( "#FFFFFF" );  
    }
</script>

Copy and paste the codes in-between the <head> and </head> tags of your custom web page.
The purposes of the functions (you may determine if you want to copy one or more of the latter 4 functions into your page):
- $(function (): This function defines the address, the position of the CrazyTalk Web Player in the custom web and loads a default actor (Background.uctmodel) with a assigned idle motion (CTDefWebPreview.uctidle) once your page is opened. This function is a must because you need to have an actor before loading a background image.
- function loadBackground1(): This function loads a background image (BG_1.jpg) with transparency.
- function loadBackground2(): This function loads a background image (BG_2.jpg) without transparency.
- function loadBackground3(): This function loads a background image (BG_2.jpg) and expand the image to fill up the entire view of the player.
- function loadBackground4(): This function loads a background image (BG_2.jpg) and makes the background fade out in 5 seconds.
  
  Note:
  
  The compatible image formats are: *.jpg, *.jpeg, and *.png.
- function loadBackground5(): This function set the background color to black.
- function loadBackground6(): This function set the background color to gray.
- function loadBackground7(): This function set the background color to white.

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.loadActor(){...}: For more information about the modification method for the loading a default actor function, please refer to the Loading Actors section.

function loadBackground1, loadBackground2, loadBackground3 and loadBackground4

Replace the below addresses of the *.jpg files with the ones where you have uploaded your custom background images.
In loadBackground1: https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode6/BG_1.jpg
In loadBackground2, loadBackground3 and loadBackground4:
https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode6/BG_2.jpg

Note:

Please note that the paths can be relative or absolute addresses.
alpha: The value (from 0 to 1) determines the transparency level (from 0% to 100%) of the background image when it is loaded.

function loadBackground3

fit: Replace the value after this parameter to determine the fitting relations between the image and the player.
- fill: Expand the image in its original ratio enough to remove any margins between the image and the player.
- fit: Fit to show the entire image within the player.

function loadBackground4

player.showBackground(false, 5.0)
- If you want to create a fade in or fade out effect for the background, then you need to copy and paste these lines of code into the loadBackground method.
- true/false: Set the value to true/false to show/hide the background.
- The number: The number in the parentheses is the duration time (in seconds) for fading in or fading out the background image.

function loadBackground5, loadBackground6, loadBackground7

player.setBackgroundColor( "#000000" )

If you want to set the hexadecimal value of the background color, then change the number (000000 ~ FFFFFF) after the "#" sign.

If you want to set the color in RGB format (0,0,0 ~ 255,255,255), then you need to change the code as shown below:

player.setBackgroundColor({
    r: 0,
    g: 33,
    b: 255
});

<div id="unityPlayer" style="width: 640px; height: 480px;">
</div>
<input type="button" value="BG1" onclick="loadBackground1()" class="button" />
<input type="button" value="BG2" onclick="loadBackground2()" class="button" />
<input type="button" value="BG3" onclick="loadBackground3()" class="button" />
<input type="button" value="BG4" onclick="loadBackground4()" class="button" />

<input type="button" value="Black" onclick="loadBackground5()" class="button" />
<input type="button" value="Gray" onclick="loadBackground6()" class="button" />
<input type="button" value="White" onclick="loadBackground7()" 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.

Controls for Loading and Showing Backgrounds

Copy the <input.../> lines to the positions where you want to embed the buttons in-between the <body> and </body> tags of your custom web page.

Note:

The function and the button that calls it must be individually put within the head and body blocks in pairs.
You can only copy and paste the desired buttons and the functions to your custom web pages.

These seven <input.../> lines form seven buttons on the web. Each of them will call the function declared within the head block after being clicked.