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.
From inside your Unity editor, just open the Unity Asset Store and search for iTween.
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.
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.
Rename your camera GameObject to Camera – Flying.
- Step 4: Connect your CubeChair to your Camera and add an iTween Path.
- Find the ChairController script in your Project folder and drag it onto the CubeChair.
- 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.
- Find the iTweenPath script in your Project folder and drag it onto the CubeChair.
- 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.
- 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.
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.
- 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.
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.
- 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.
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.
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. ;)
-John “Pathfinder” Lester