< Back

Getting Started

UI Display Function

Loading Function

Text to Animated Function

Load Scripts form Text

Actor Function

Interaction Function

Advanced Function

Loading Actors

In this sample, you may use the loadActor function to toggle and load different actors by pressing buttons with specific behaviors. Copy and paste the code to your custom web page so that you can have different characters talking in identical scenarios.

Using the loadActor Function

Controls Behaviors

This sample contains 2 buttons, their behaviors are:

Click the first button, Actor1, to load and show the first actor (Actor.uctmodel) with idle motion (CTDefWebPreview.uctidle) after the playback stops.
Click the second button, Actor2, to load and show the second actor (Actor2.uctmodel) with a message shown in the Console panel of your web browser after the actor is loaded. However, the actor is not assigned with any idle motion after the playback stops.
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.loadProject("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode4/Actor.uctproject", {
             playAfter: 0,
             idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode4/Affirmative.uctidle"
         });
     });
 });
 function Actor1() {
    player.loadActor("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode4/Actor3.uctmodel", {
        showActor: true,
        idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode4/Affirmative.uctidle"
        });
    }
function Actor2() {
    player.loadActor("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode4/Actor2.uctmodel", {
        showActor: true,
        loaded: function (status) {
            console.log("Actor loaded!");
            }
        });
   }
</script>

Copy and paste the code 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 following 4 functions into your page):
- $(function (): This function defines the address, the position of the CrazyTalk Web Player in the custom web and loads and plays a default project (Actor.uctproject) once your page is opened.
- functionnn Actor1(): This function loads another actor (Actor.uctmodel); meanwhile, assigning an idle motion (CTDefWebPreview.uctidle) to the newly loaded actor.
- function Actor2(): This function loads another actor (Actor2.uctmodel) without idle motion. In addition, it also pops up a messsage text, Actor loaded!, in the console panel.

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 for the default project function, please refer to the Sample Code 3 - Load Projects section.

function Actor1 and Actor2

Replace the below addresses of the *.uctmodel files with the ones where you have uploaded your custom actors.
In Actor1: https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode4/Actor3.uctmodel
In Actor2: https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode4/Actor2.uctmodel

Note:

If the custom actor files are uploaded to the identical server where your custom web pages are, then simply change the entire addresses (http://...uctmodel) to the file names of the custom actors.
Otherwise, you must replace the entire addresses with the complete addresses (URL) of the custom actor files.

showActor: The Boolean (true for false) value determines if the character will be shown or hidden when the project is loaded.

function Actor1

idleMotionUrl: Replace the below address of the *.uctidle file with the one where you have uploaded your custom idle motion.
https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode4/Affirmative.uctidle

Note:

If the idle motion file is uploaded to the identical server where your custom web pages are, then simply change the entire address (http://...uctidle) to the file name of the custom idle motion.
Otherwise, you must replace the entire address with the complete address (URL) of the idle motion file.

function Actor2

loaded: function (status) {}: If you want to execute more commands, functions or methods after the custom actor is loaded, then add them into this function in-between the curly brackets. They will instantly be executed after the custom actor is loaded.
In this case, the console panel will display Actor loaded!.

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

<input type="button" value="Actor1" onclick="Actor1()" class="button" />
<input type="button" value="Actor2" onclick="Actor2()" 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 Actors

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 pair.
You can only copy and paste the desired buttons and the functions to your custom web pages.

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