How to create a “flying camera tour” in Jibe and Unity3d

Here at ReactionGrid, we love it when people ask us questions about Jibe (our multiuser virtual world platform based on Unity3d).  Jibe is a rapidly evolving platform, and the most innovative ideas for both using and improving Jibe always come directly from our users.  Which is why we encourage everyone to submit questions and new feature ideas via the ticket system on our support portal.

Today I saw a ticket from a new Jibe user asking if it was possible to create a flying camera tour in their Jibe world. They wanted people to be able to click something and have their avatar’s camera fly around on a predefined tour path through their Jibe world.

We include in our Jibe platform a Presentation Screen System that lets people automatically set their camera view when they sit down to watch a slideshow or video presentation.  And with a few tweaks, you can use the scripts from this system to easily create a flying camera tour experience.

Here’s how to do it.

- Step 1: Get iTween and the iTween Visual Editor.

The easiest way to make things move around in Unity and Jibe is to use iTween.  You’ll need to grab a free copy of both the iTween Visual Editor and the basic iTween package.

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 both of these for free.


Download both of these into your Jibe project in the Unity editor.  iTween lets you create waypoints in the 3d environment and see lines connecting each waypoint so you can easily visualize the exact path that an object will follow.  We’ll use this feature later to move our camera around the Jibe world.

- Step 2: Create a CubeChair.

Go into your Project window and fine a CubeChair object.  Drag it from your Project window into your Scene window.

A CubeChair. Ergonomic and Functional.

CubeChairs are included with Jibe, and your avatar will sit on them if you click on the cube.  But we’re going to modify this chair and make it do much more.

- Step 3: Create a new Camera.

Create a new camera GameObject in your Scene.

How to create a new camera GameObject.

A new camera GameObject in your Scene.

Rename your camera GameObject to Camera – Flying.

- Step 4: Connect your CubeChair to your Camera and add an iTween Path.

  1. Find the ChairController script in your Project folder and drag it onto the CubeChair.
  2. In the Chair Controller (Script) component in the Inspector window, select the Camera – Flying GameObject as the Screen Camera and the JibeSkin object in your Project folder as the Gui Skin.
  3. Find the iTweenPath script in your Project folder and drag it onto the CubeChair.
  4. In the ITween Path (Script) component in the Inspector window, add some iTween nodes (waypoints) that define the route that you want your Camera – Flying GameObject to follow as it flies around.   Set your iTween Path Name to be flycam test path.
  5. Move your Camera – Flying GameObject so that it is at the same X/Y/Z coordinates as the first node of your iTween path.

Once you’ve got all that set up, your CubeChair should look like this in the Inspector.

The final settings for your CubeChair.

Whenever you’ve got the CubeChair selected in your Scene window, the visual route of your iTween Path will be displayed inworld.  Here’s what mine looks like.

An iTween path.

- Step 5: Set up your Camera so that it will follow your iTween path.

Select your Camera – Flying GameObject.  In the Inspector window, disable the Camera component and the Audio Listener by unchecking the boxes.

While you have your Camera – Flying GameObject selected, add an iTween Event.

How to add an iTween Event.

In the Inspector window, modify the settings in the ITween Event (Script) component so that your camera will be following a path (select “flycam test path” from the pulldown menu) and choose whatever additional iTween Event settings you wish.  I wanted my camera to automatically follow a basic path back and forth in a pingpong loop, and you can see how I did that below.

Final settings for your Camera - Flying GameObject.

You’re done!

- Step 6: Testing it all out in Jibe.

Whenever someone clicks on the CubeChair in your Jibe world, their avatar will automatically sit down.  And you’ll notice that the Jibe cursor changes when it moves over a CubeChair to let folks know that it is something they can sit on.

See how the Jibe cursor has a tiny chair icon on it? That means you can click to sit.

Once someone sits down, they will see a new button in the upper left of their Jibe window labelled Screen Camera.  If they click on that button, they will immediately see the view from the Camera – Flying GameObject that is flying around your Jibe world.

And to return their view to normal, users just click on the Player View button.

Notice the Screen Camera button in the upper left.

Watching the world through a flying camera tour. Note the Player Camera button to switch my view back to normal.

Want to really highlight something you’ve built in your Jibe world?  Let your visitors sit back and see the sights by creating your own flying camera tour!

And if you visit my Jibe world, you’ll see that my own flying camera tour takes you on a little journey to the Great Sphinx at Giza.  ;)

Take care,
-John “Pathfinder” Lester

3 thoughts on “How to create a “flying camera tour” in Jibe and Unity3d

  1. Wonder if this is an innovative alternative to Prezi.com? Will this camera control rotate upside down and zoom in/out? If so, create an Unity scene that is your presentation. Do the fly path with iTween. Video it. And, offer personal tours of your thoughts.

  2. In Second Life, rather than “flying camera” I like to call such things “OBE” — Out of Body Experience. :) I do like RIchard’s idea for presentations in a Jibe environment. It would be great to construct 3D illustrated timelines, flow charts, and plans with multiple contingencies and interlocking parts.

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