How to make a door that automatically opens and closes in Unity3d and Jibe

Posted on by

Today we’ll learn how to build a door in your Jibe world that automatically opens when an avatar approaches and then closes when the avatar walks away.  We’ll also make the door play a nice sound as it opens and closes.

Fire up your Unity editor, open your Jibe project, and let’s get crackin.

I recently built a basic house out of primitives in my own Jibe world.  It looks ok, but something is definitely missing.

Why is it so drafty in here? Oh. Yeah. No door.

Step 1: Building the Hinge and the Door

First, add a GameObject cube to your Scene.  Shrink it down and position it so that it’s sitting right up against the left surface of your doorway.  Name it Door Hinge in your Hierarchy.

How to add a GameObject cube to your Scene.

Your Door Hinge positioned correctly in your doorway.

Now create another GameObject cube, name it Door, and position it so that it fills your doorway completely.  Add a texture to it so it looks nice.

I like strong looking doors. This one fits the bill.

Now, you’ll see both your Door and Door Hinge objects in your Hierarchy.

So far so good, but we need to fix something.

For the door to work properly, you need to make the Door object a child of the Door Hinge.  To do that, just click and drag the Door object in your Hierarchy onto the Door Hinge object.

Once you do that, it will look like this.

Perfect.

This will now allow you to automatically move the Door based on how the Door Hinge is moving.  That’s how you make a door open smoothly, rotating on its hinge just like in the physical world.

Step 2: Install the iTween Visual Editor

If you’ve already installed the iTween Visual Editor, you can skip this step.

We’re going to use iTween to make the door move.  So open the Unity Asset Store and download a free copy of the iTween Visual Editor.

Opening the Unity Asset Store from inside the Unity editor.

This is what you want. Download it for free.

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: Add Two iTween Events to your Door Hinge

Select your Door Hinge in the Hierarchy folder and add two iTween Events to it.

How to add an iTween Event. Do this twice!

Name the first iTween Event opendoor and use the following values.

Settings for the opendoor iTween Event.

Name the second iTween Event closedoor and use the following values.

Settings for the closedoor iTween Event.

What you’ve got now are two iTween Events in your Door Hinge object.  Opendoor will smoothly open the door, and closedoor will smoothly close it.

Your Door Hinge object with both iTween events inside it.

Step 4: Create a Trigger Area for the Door and Add a Script

To create a door that automatically opens when an avatar approaches it and then closes when the avatar walks away, you’ll need to create a GameObject cube in your Scene that defines a Trigger Area.  When avatars walk into this Trigger Area, the door will open.  And when they leave this Trigger Area, the door will close.

Create another GameObject cube.  Name it Door Trigger.  Place it so that it covers an area directly in front of and behind your doorway.

How to add a GameObject cube to your Scene.

In the Inspector window, turn off the Mesh Renderer component (so your Door Trigger will be invisible) and turn on the “Is Trigger” function (so your Door Trigger will act as a trigger area).

A nice invisible Door Trigger.

Now you’ll need to add a script to your Door Trigger object that will do a few different things.  This script will talk to the two iTween Events you made earlier in your Door Hinge (telling it to rotate the door open and closed) as well as play a sound when the door moves.

Create a new Javascript script.

How to create a new Javascript script.

Name your script door open and close in your Project folder.  Click the Edit button and paste in the following code:

var target : GameObject;
var eventName1 : String;
var eventName2 : String;
var sound1 : AudioClip;

function OnTriggerEnter () {

iTweenEvent.GetEvent(target, eventName1).Play();
audio.clip = sound1;
audio.Play ();
}

function OnTriggerExit () {

iTweenEvent.GetEvent(target, eventName2).Play();
audio.clip = sound1;
audio.Play ();
}

function Update () {

}

Your new script.

Drag a copy of your door open and close script from your Project window into your Door Trigger object.

Step 5: Wire everything up!

Have you ever met a door that didn’t make a sound when it opened or closed?  I didn’t think so.  Download this free door sound, drag it into your Project folder, and then drag it into your Door Trigger object.

Finally, look carefully at the Inspector window view of your Door Trigger object.  Make sure that Event Name 1 and 2 are set to opendoor and closedoor respectively, that Sound 1 is set to the name of your door sound, and that the Target is set to the Door Hinge object in your scene.

When everything is wired up correctly, your Door Trigger object should look like this.

Houston, we are ready for liftoff.

Congratulations!  You’re done!

You can see a working version of this door in my own Jibe world.

If you enjoyed this tutorial, check out my other blog posts about Jibe and Unity3d.  I also give live online tutorials if you’d like learn more.  And be sure to join our Jibe-Unity3d Google Group.  That’s a great place to ask questions and meet people.

Now I just need a Welcome Mat.

SPECIAL THANKS to Tia Winters for “door brainstorming” with me.  Our brainstorming session was my inspiration to write this tutorial.

-John “Pathfinder” Lester

28 thoughts on “How to make a door that automatically opens and closes in Unity3d and Jibe”

  1. Beautiful! Nice clear explanation. Ties together several Unity concepts of iTween, triggers, audio, parent/child, etc. Do you need the Door Hinge? Could you just add the iTween event to the Door? Also, how could you cause the door to open with ‘point & click’ like SL? Can you trigger on a ‘click’ event in the Door object?

    Reply ↓

  2. How would you make the animation of the door opening and closing appear to other avatars that are in world and not just on your screen? I assume this would involve setting up something in the network controller, but i wasn’t sure if Jibe had any special scripts to make this easier?

    Reply ↓

    • Hi Ryan,

      There’s an example script in the Jibe kit for sending custom data across the network, plus there’s also the Jibe iTween script that shows a simple example of synchronizing an event – the goal of the jibe kit is to make sending network messages as simple as possible, so once you spot the pattern you may see that network triggers are just a few extra lines of code.

      The general concept is to have a script that has a public method for receiving notification of an event. The same script also handles the playback of the event itself. The playback method (OpenDoor, PlaySound, DoSomething, whatever you call it) can be called by either the trigger / click / direct user interaction, or in response to the listener method that is called by Network Controller to trigger the playback method.

      Take a look at the SampleCustomData script for an example of a user clicking a GUI button, and the corresponding code in Network Controller for handling that custom data send and receive, or look at the Jibe iTween code for an alternative approach.

      I included a bit more information on this in the Jibe product manual, head to page 60 for details!

      Hope this helps,

      Chris

      Reply ↓

  3. Great trip today to Franco Grid. Visited Kareltje Krasker’s build aaftrwerds and learned about the fascinating use for science education that he is making on his sim. He has linked electricity usage and water levels to objects on his sim so that the objects change when the usage changes. This would be a great science education hypergrid adventure! Thanks again for leading the way around the world via these grids:)

    Reply ↓

  6. Grat thing, this ITween!
    But I have a problem… I want to make openable door by clicking the mouse button, and I did it with the function OnMouseDown and ITween Event rotateby. but I don’t know how can I close them with second mouse click. Is it posible tu make this with ITween?
    Tahnk for help
    Lukas

    Reply ↓

  7. Hello,

    So far this seems so very well done. The sad thing is iTween is not showing up in my component tab. I notice it under my project though. Any idea why?

    Reply ↓

    • Hello there,

      When downloading the iTween tool using the Unity Asset store, it can tend to not install itself in the appropriate folders. Currently, your iTween files are all most likely located in a folder labeled iTween Editor in your projects window. This is nice, but will not let the iTween tool show up inside the Unity Engine.

      To fix the issue, you must move the files to a few different locations. To do this, locate your project under your My Documents->Unity Projects folder.

      Firstly, grab the “iTween.cs”, “iTweenEvent.cs”, “iTweenPath,cs” and the folder named “Helper Classes”, and move them all into your unity plugins folder. If you do not already have a plugins folder created, create a new folder in your Assets folder and name it “Plugins”.

      Second, take the gizmo icon file, named “iTweenIcon”, and move it to the unity Gizmo folder. Again, if you do not already have a Gizmo folder, inside the Assets folder for your project, create a new folder named “Gizmos” and paste it inside.

      Lastly, take the entire “Editor” folder that is currently in the iTween Editor folder, and move it to the Unity Editor named “Editor” folder. This is usually under Assets->Standard Assets, but may be elsewhere if you have moved files around.

      Afterwards delete the original iTween Editor folder, since it should be empty except for a README file now.

      *Also, because you have moved the files around manually to their appropriate places, there is no longer a need to “prepare Visual Editor for JavaScript usage”, as we have just taken care of that. Clicking on the option will most likely cause Unity to inform you that there is no need to do this as the files have already been moved.

      This should solve your issue with the Editor not showing up in the components tab. If it does not, please let me know!

      -Drew

      Reply ↓

  8. Hi, thank you for make this tutorial, i found it very useful. but i just cant find the way to make it works properly . Can you explain a little more this quote (“Make sure that Event Name 1 and 2 are set to opendoor and closedoor respectively” ) i dont know how to conect the Event Name with the opendoor and close door in the script. Thks in advance.

    Reply ↓

  9. great tutorial…..thank you
    i have a problem, this is working great if I enter into the targetEnter and wait for the door to open completely and then exit the targetExit. But if i enter the targetEnter and exit the targetExit without completing the door animation, the door stops at wrong point and then it closes. Eg: if i enter n exit fast then the door will rotate to 360 degrees.
    Is there anything that there is fix rotation for opening and closing?

    Reply ↓

  10. Hi – I managed to get this working on a door so thanks so much! it really is great. Can you please explain how I would go about implementing this on multiple doors within the same scene? I’ve tried duplicating but they are both behaving strangely …ie one opens when the other closes etc. I’ve also tried renaming everything on the second door but still the same problem (eg – door 2). Any help is greatly appreciated!

    Reply ↓

  14. While the advice you are trying to give people is appreciated, your method for opening and closing doors is flawed by design. In your tutorial, you forgot to take into account the situations that a few people have already encountered. For example, what if you enter/exit the area before the door has finished its animation, and also what if there are multiple entities in a simulation attempting to use the door at once? In either example, your “Rotate By” design will cause the door to become improperly aligned at best, and crazily spin at worst. This is because it registers each action as a trigger, and will continue to “Rotate By” even if it was not closed/opened all the way beforehand, or already entirely open/closed.

    A better result can be achieved by instructing people to use the iTween “Rotate To”. Once selected, then approach it the same was as you listed in your blog, however this time you will be checking the “rotation” box. Then, in the Vector3 tab, under whichever axis you wish, input 90 deg, or -90 degrees for the “openDoor” iTween. Then check the “Time” box, and set it to a nice value, 3 will also work for this case.

    For the “closeDoor” iTween event, again set the iTween to “Rotate To”, select the “rotation” box, and then leave the values at 0. Check the “time” box again, and then set it to 3 or whatever value you had set the previous “openDoor” event.

    Using this approach, no matter how many entities enter the trigger zone, the door can only rotate between the set values, and will function correctly regardless of the number of triggers it receives.

    I realize this blog is old, and that the iTween tool may have not been updated at the you wrote this tutorial, but an edit would be a good idea to help people who are running into the issues you may have overlooked.

    Reply ↓

  17. Ignore my last question as I got it to work after finding out what I did wrong and I was wondering if you have done a tutorial on making the main menu for games?

    Reply ↓

  19. Hi there, thanks a lot for the opportunity, many people show that it really works…
    a) How can I create a swinging gate with this approach ???

    b) Can I use itween with c# ???

    ‘Any positive feedback is highly appreciated’
    ***Thank you all***

    Reply ↓

Leave a comment