< Back

Getting Started

UI Display Function

Loading Function

Text to Animated Function

Load Scripts form Text

Actor Function

Interaction Function

Advanced Function

Getting Mouse Events

In this sample, you may use bind function to retrieve event data from the mouse, such as clicking or the position of the mouse. This is a very powerful function which helps to enable user actions such as changing avatar expressions, talking scripts, altering background images, etc.

You may refer to the Mouse Event Example page to learn more about the use of the clicking event of the mouse to show or hide a custom foreground image.

Using the bind Function

Mouse Action: X: Y:

Controls Behaviors

This sample contains 1 player and 3 labels, their behaviors are:

You are able to click with the left, middle and right mouse buttons on the player. The player will pass the clicking events.
The first label (labAction) shows the clicking events.
The second and third labels (labX, labY) show the position of the cursor within the player.
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/SampleCode16/Interaction_mouse_event.uctproject", {
                playAfter: 0,
                idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode16/Affirmative.uctidle"
            });

            player.bind("mousemove", function (event) {
                $("#labX").text(event.clientX);
                $("#labY").text(event.clientY);
            });

            player.bind("click", function (event) {
                var Action;
                switch (event.button) {
                    case 0:
                        Action = "Left mouse button pressed.";
                        break;
                    case 1:
                        Action = "Middle mouse button pressed.";
                        break;
                    case 2:
                        Action = "Right mouse button pressed.";
                        break;
                    default:
                        Action = "No button pressed.";
                        break;
                }
                $("#labAction").text(Action);
            });
        });
    });
</script>

Copy and paste the lines of code in between the <head> and </head> tags of your custom web page.

The purposes of the function:

$(function (): This function defines the address and position of the CrazyTalk Web Player in the custom web page. It contains three methods -

player.loadProject(){...}: This method loads and plays a default project (Interaction_mouse_event) with an assigned idle motion (CTDefWebPreview.uctidle) once your page is opened.
player.bind("mousemove", function (event){...}): This method gets the position (x, y) of the mouse cursor on the web player and assigns them in text format to two labels, labX and labY.

player.bind("click", function (event){...}): This method gets the events of the mouse cursor on the web player and assigns them in text format to a label, labAction.

Note:

Please note that the label names mentioned above must be identical to the ones given to the controls within the body block.

The adjustable code in the function:
$(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 loading a default project, please refer to the Loading Projects section.

Adjust the codes within the last method to change the reaction of the web player when mouse events occur. The current reactions generated by the code event.button are:

case 0: Assign a string, "Left mouse button pressed.", to variable Action.
case 1: Assign a string, "Middle mouse button pressed.", to variable Action.
case 2: Assign a string, "Right mouse button pressed.", to variable Action.

case 3: Assign a string, "No button pressed.", to variable Action.

Note:

You are free to add different main functions you have learned in the other pages of sample code into these cases so that these functions can be triggered by certain mouse events.

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

Mouse Action:<label id="labAction" style="color:red"></label>
X:<label id="labX" style="color:red"></label>
Y:<label id="labY" style="color:red"></label>

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 Showing Events

These codes are for showing the mouse events. You may optionally copy and paste them into your custom web pages, which will not cause any issues, allowing the bind function to work perfectly even if your web pages do not contain these codes.

Copy the Mouse Action:<label.../> line to add a label to show the mouse events on the player.
Copy the X:<label.../> line if you want to show the X position of the mouse cursor on the player in percentage.

Copy the Y:<label.../> line if you want to show the Y position of the mouse cursor on the player in percentage.

Note:

Please note that these label names mentioned above must be identical to the ones given to the controls within the head block.

Copy the last <input.../> line to the position where you want to embed the button in-between the <body> and </body> tags of your custom web page. This button will collect the values the viewer enters in the text-editing boxes listed above and then execute the gazing behavior for the actor by calling the function defined in the head block.