Collaborating using web-based tools with Jibe: Animations and iTween

I recently wrote about some of the affordances of having a multiuser virtual world displayed in a webpage.  To illustrate this, here’s an example:

Left to Right: Twitter + Jibe + Dabbleboard

A multiuser Jibe world can be embedded in any webpage.  So what you see in the above screenshot is a webpage that has a Twitter widget on the left, my Jibe world in the middle, and a shared Dabbleboard on the right.  If you’re wondering how I did this, you can simply visit my Jibe page and take a peek at the HTML source.  Pretty simple stuff.

I’ve just started learning how to use a great tool called iTween.  It’s a powerful and easy to use animation system for Unity created by Bob Berkebile, and you can pick it up for free in the Unity Asset Store.  I’ve also been using another free Unity tool called the iTween Visual Editor, created by David Koontz.

These tools allow you to animate and move anything in the Unity editor, which can then be uploaded into a multiuser Jibe world. You create waypoints in the virtual environment and can see lines connecting each waypoint so you can easily visualize the exact path that an object will move along.

I’m a total newbie at all of this, so I love meeting people to discuss ideas and brainstorm.  Recently, I was in my Jibe world and wanted to show someone else my ideas for different pathways I was planning to lay out for my flying dragons.  We walked around my Jibe world together, checking out what I had already set up while talking on voice.

Then I had an idea.  I pulled up an aerial screenshot of my Jibe world’s terrain.  Dropped it into the Dabbleboard.  Drew some lines on it to show my plans for some new pathways.  The person I was meeting with then added some lines and waypoints of their own to the Dabbleboard to illustrate their own ideas.  You can see some of the results in the above screenshot.

Bingo.  Collaboration.

It was a great experience for me to be able to walk and talk with someone while we explored my Jibe world and simultaneously sketched out new ideas.  Really simple, and really powerful.  And a fun way to learn, too.

If you know of any other web-based tools that might integrate nicely on a webpage with Jibe, please let me know in the blog comments or join our conversations in our Jibe-Unity3d Google Group.  Thanks for sharing your ideas!

-John “Pathfinder” Lester

3 thoughts on “Collaborating using web-based tools with Jibe: Animations and iTween

  1. This might be a fun widget to add video conferencing to a unity page:

    Also, why have the chat window take up space in the unity world? While you type the wasd keys move the camera, it’s distracting. You could put something like an IRC widget next to the world to replace that and obscure less of the view… or you could add IRC and tiny chat to a pop up window so users could move it around.

    So many directions this can go… hmmm…

  2. Pingback: Interactivity in Virtual Worlds: Using Triggers in Jibe and Unity3d | Be Cunning and Full of Tricks

  3. Hi!
    I just wanted to add something that I came across last night.
    The Mixamo animation store for Unity.
    You get to it through the Unity Asset store by opening the Asset store Window from the top drop-down menu in your project (you probably already know this).
    Then just search the asset store for Mixamo and download the free Mixamo store interface.

    It allows access to a repository of basic animations that import directly onto your chosen character in Unity. You can preview the animation in your scene and on your character before purchasing. Yes, the animations cost. But the ease-of-use may make it worth it.

    Here is a quick clip explaining the Mixamo-Unity animation store
    (about a 1/4 way down the page):

    So far, the library seems pretty limited. I am not sure they will open up this animation market-place for outsider animators to upload content, but I hope so!

    I also see on the Mixamo main site (reached through the web rather than the asset store), that one can upload a character and apply real-time animations to it right there in the interface and then re-download and import into your project. Here is their main site, which also has a video:

    Happy animating!

Leave a Reply

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

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

Facebook photo

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

Connecting to %s