Click me!: How to make an object move and play a sound when you click on it in Jibe and Unity3d

I’ve been playing a lot of Portal 2 lately, and one of my favorite elements from the Portal series is the lovely Weighted Companion Cube.

Today we’ll explore how to create a Companion Cube in Jibe and Unity3d that will spin and speak to you when you click on it.

If you’d like to see my other tutorials about Jibe and Unity3d, you can find them all here.

- Step 1: Get a Companion Cube

I found a nice model here on TurboSquid.  Pull the .3DS model file into your Unity project folder (don’t forget the textures!) and drag it into your Unity Scene.

Hello, old friend!

You’ll probably want to add a Mesh Collider to it so it won’t be a phantom object.  Select your cube in the Scene and add a Physics Mesh Collider.

How to add a Physics Mesh Collider in the Unity editor.

Viewing your cube in the Inspector. Mesh Collider added!

- Step 2: Install iTween.

We’re going to use iTween to program the animation.  You’ll need to grab a free copy of the iTween Visual Editor.

From inside your Unity editor, just open the Unity Asset Store and search for iTween.

How to access the Unity Asset Store from within the Unity editor.

Download the one on the RIGHT.

Once you’ve downloaded the iTween Visual Editor, it will be automatically installed in your Project folder.  But remember do the following step to set up the iTween Visual Editor to correctly work with Javascript.

Select this!

You only need to do this once.  Then you’ll always be able to use Javascript with the iTween Visual Editor.

- Step 3: Write a script that will trigger an animation and sound when you click on the cube.

Create a new script in the Unity editor and call it “click to play sound and itween.”

How to create a new script in the Unity editor.

Your new script in the Unity editor.

Here’s the code for the script so you can copy/paste:

var target : GameObject;
var eventName : String;
var sound1 : AudioClip;

function OnMouseDown() {
audio.clip = sound1;
audio.Play ();
iTweenEvent.GetEvent(target, eventName).Play();
}

function Update () {
}

Once you’ve saved the script, drag the script file from your Project window onto the cube.

Your new script sitting inside the cube.

You’ll change the Target, Event Name, and Sound 1 variables in your script later.

- Step 4: Add a sound to your Cube.

In Portal, the Companion Cubes cannot speak.  But you can find a great sound clip of GLaDOS explaining that fact here.  Download that clip, edit it however you like in something like Audacity, and be sure to save it as an Ogg Vorbis file so it is compressed nicely.

Pull the sound clip into your Unity project, and then drag it from your Project folder onto your cube.

Your sound file sitting inside your cube.

You’ll probably want to uncheck the box next to Play On Awake.  Otherwise, the sound file will automatically play.  We want it to trigger only when someone clicks on the cube.

- Step 5: Add a rotation effect to your cube using iTween.

While you have your cube selected in your Scene, add an iTween event.

How to add an iTween event in the Unity editor.

You can use iTween events to do all kinds of things like moving objects around a scene or even changing their size and color.  But we just want our cube to spin lazily around when someone clicks on it.

iTween settings to make the cube spin around the Y axis.

The above iTween event settings will cause your cube to rotate slowly around its Y axis.  In the Name field, call this event something like “spinme.”

- Step 6: Set the variables in your “click to play sound and itween” script.

The last thing you need to do is make sure the proper variables are set in the “click to play sound and itween” script inside your cube.

Good to go!

For Event Name, type “spinme” (the name of the iTween event you just created.)

For Sound 1, click the little circle to the right of the field and select your companion cube sound from within your Project.

For Target, click the little circle to the right of the field and select your cube object from within your Scene.

That’s it!  You’re all done.  Save your Scene and upload your project to your Jibe world.

Now, whenever any avatar in your Jibe world clicks on the companion cube, it will start spinning lazily while the sound clip plays.

You can check out the final cube in my own Jibe world.

Have fun!

A boy and his cube.

-John “Pathfinder” Lester

6 thoughts on “Click me!: How to make an object move and play a sound when you click on it in Jibe and Unity3d

  1. Super post – iTween is a great library, highly recommended! Now, please place the weighted companion cube in the incinerator and we can get back to testing! :)

    One small tip – since the object in this example is a cube, adding a box collider would be the most efficient way to proceed – a mesh collider is more expensive on physics, and should only be used where accurate collisions are required for more complex shaped objects.

  2. Pingback: Customized Reality: Creating Local and Networked Events in Jibe and Unity3d | Be Cunning and Full of Tricks

  3. Pingback: Building Things in Jibe if you’re a Newbie – Primitives and Model Packages | Be Cunning and Full of Tricks

  4. Finally got around to doing this tutorial. Had problems with the ‘click to play sound…’ script. It gives me an error dialog stating “has not finished compilation yet. please wait until compilation of script has finished and try again”. After waiting and googling the error, I discovered this error is actually referring to the red error message in the bottom left of the screen! Poor IDE design!!! “Unknown identifier iTweenEvent”. I did download iTween folder into my Project. Is there other initialization required for iTween?

    • Aha! I forgot to include the “Prepare Visual Editor for Javascript Usage” step in the tutorial. My bad.

      I’ve just updated the blog tutorial. You’ll now see that missing step included at the end of Step 2.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s