In this sample, you may use the loadProject function to load different projects
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 different scenarios.
Using the LoadProject Function
Note:
Please note that the JavaScript code for fading in the foreground
descriptions in this example is not shown on this page.
Please refer to the
Loading Foregrounds
section for more information about
how to use foreground images.
Controls Behaviors
This sample contains 4 buttons, their behaviors are:
Click the first button, Project1, to load the first project (Load_project1.uctproject)
with background, and auto-play after the project is loaded. The actor
will have an idle motion (Female.uctidle) after the playback stops.
Click the second button, Project2, to load the second project (Load_project2.uctproject)
with background, and you need to wait for 10 seconds before the player auto-plays after the project
is loaded. The actor will also have an idle motion (Female.uctidle) after the playback stops.
Click the third button, Project3, to load the third project (Load_project3.uctproject)
with background, and auto-play after the project is loaded. The actor
will be hidden but still with an idle motion (Female.uctidle) after the playback stops.
Click the fourth button, Project4, to load the fourth project (Load_project4.uctproject)
without any background, and auto-play with a message shown in the Console
panel of your web browser after the project is loaded. The actor will
have an idle motion (Female.uctidle) after the playback stops.
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
and plays a default project (Load_project.uctproject) once
your page is opened.
functionnProject1(): This function loads and
plays a defined project
(Load_project2.uctproject).
functionProject2(): This function loads a defined project (Load_project.uctproject) and cause the character to perform
a given idle motion for 10
seconds. Afterwards, the true content of the project starts to playback.
functionProject3(): This function loads and plays a defined project (Load_project.uctproject) without showing the character.
functionProject4(): This function loads and plays a defined project (Load_project.uctproject) without showing the background.
In addition, it also brings up a message text, 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
Replace the below address of the *.uctproject file with the one
where you have uploaded your custom project. https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode3/Load_project.uctproject
functionProject2(), Project3(), Project4()
Replace the below address of the *.uctproject file with the one
where you have uploaded your custom project. https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode3/_Male.uctproject
Note:
If the custom project file is uploaded to the identical server where your custom web
pages are, then simply change the
entire address (http://...uctproject) to the file name of the
custom project.
Otherwise, you must replace the entire address with the complete address
(URL) of the custom project file.
playAfter: The value determines the
seconds for the player to wait before starting to play
the true content of the project. A negative value means not
to play back after the project is loaded.
showActor: This Boolean (true for
false) value determines if the character will be shown
or hidden when the project is loaded.
showBackground: This Boolean (true for
false) value determines if the background will be
shown or hidden when the project plays.
idleMotionUrl: Replace the below addresses of the *.uctidle files with the ones
where you have uploaded your custom idle motions. https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode3/_Male.uctidlehttps://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode3/Affirmative.uctidle
Note:
If the custom project file is uploaded to the identical server where your custom web
pages are, then simply change the
entire address (http://...uctproject) to the file name of the
custom project.
Otherwise, you must replace the entire address with the complete address
(URL) of the custom project file.
loaded: function (status) {}: If you want to execute more commands, functions or
methods after the custom project is loaded, then add them into this function in-between the curly brackets.
They will instantly be executed after the custom project is loaded.
In this case, the console panel will display loaded!.
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 Projects
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 four <input.../> lines form four buttons on the web. Each of them will call the function declared
within the head block after being clicked.