Project Wonderland (v0.5): Assembling Worlds

Introduction

In Project Wonderland v0.5, you may use tools available in the Project Wonderland client to create instances of Cells (called "Components" in the GUI) in the world, and use visual tools to move, rotate, and scale the object. This tutorial describes how to accomplish these tasks.

Naming Conventions of Cells in the GUI

One potentially confusing aspect of assembling worlds is the differing terminology used by developers and that which appears in the graphical user interface (GUI) in the Project Wonderland client. Developers are familiar with the concept of Cells, which represent 3D volumes in the world. In the GUI, Cells are called Components. These Components deliver new functionality to Project Wonderland.

Using the Insert -> Component dialog

To create a new instance of a Component in the world, you may using the Component Palette, accessible via the Insert -> Component main menu item. Developers bundle Components (which they refer to as Cells) into modules; these Components register themselves with the system and automatically appear in the Component Palette.

1. Launch your Wonderland client
2. Select Insert -> Component from the main menu

Your Component Palette window should look something like the following. On the left is a list of names of Component types, each with an (optional) image preview on the right. The exact kinds of Components that appear depend upon which modules you have installed.

Figure 1: The Component Palette

To insert a new instance of a Component in the world:

1. Select a desired type of Component
2. Click Create

An instance of your new cell should appear directly in front of your avatar. For example, the following is what appears after you create an instance of the Audio Recorder Component in the world. Note that you may create more than one instance of a Component, and each will appear in front of your avatar, in whatever direction you are facing.

Figure 2: A new instance of an audio record in the world (Click on the image to view a full-sized version)

Using the Shortcuts window

The Shortcuts windows appears on the HUD (heads-up display) and presents small preview icons for each kind of Component. You may drag-and-drop the icons into the world to create an instance of the Component in the world.

1. Select Window -> Shortcuts from the main menu
2. Scroll to the desired Component
3. Click and drag and Component preview image into the Project Wonderland client window
4. A new instance of the Component is created in the world in front of your avatar

The following shows the Shortcuts HUD visible in the Project Wonderland client:

Figure 3: The Shortcuts HUD (Click on the image to view a full-sized version)

Move, rotate, and scale a Component using the visual affordances

Once you create a new instance of a Component in the world (whether from the Component Palette or the Shortcuts HUD), you can position it in the world and change its appearance through a set of visual affordances (or manipulators). Specifically, you can move it, resize it, and rotate it.

1. Position your mouse over the Component you wish to edit, and right-click. A context menu should appear.
2. Select Edit... from the context menu

Your Component should now be adorned with three arrows along the x, y, and z axes. Each should be colored to indicate along which axis it lies (red for the x-axis, green for the y-axis, and blue for the z-axis). You may click and drag on either one of these arrows and reposition the cell along each axis. These changes take effect immediately, so any other client in-world seeing the new Component should see it move too.

When you select Edit... from the context menu, a HUD frame appears. This frame has three toggle buttons, one to toggle the display of the translate affordances, one to toggle the display of the rotate affordances, and third to toggle the display of the resize affordance (from left-to-right in that order). There is also a Details... button that displays a separate frame showing the numerical values of the position, rotation, and scale. The affordance HUD frame with a translate affordance visible appears as:

Figure 4: The affordance HUD with the translate affordances visible (click on the image to view a full-sized version)

You may make each individual affordance appear or disappear by clicking on the toggle button. You may have all three affordances be visible at once.

The affordance to rotate your Component consists of three discs aligned along each axis. The color of the disc denotes about which axis the rotation will take place (the red disc will rotate about the x-axis, the green disc will rotate about the y-axis, and the blue disc will rotate about the z-axis). To rotate the Component, click on the desired colored disc and drag in the direction you which to rotate the Component. An example of rotating the Component should appear something like this:

Figure 5: The affordance HUD with the translate and rotate affordances visible (click on the image to view a full-sized version)

The semi-transparent black sphere is used to resize your Component. You may only resize the Component in equal dimensions in the x, y, and z axes. To resize, click on the sphere and drag your mouse either towards (to shrink) or away (to grow) from the center of your Component. An example of resizing the Component should appear something like this:

Figure 6: The affordance HUD with the translate, rotate and resize affordances visible (click on the image to view a full-sized version)

You may also change the size of each of these affordances using the slider bar on the frame labelled Affordance Size. This will increase the length of the move arrows, and increase the radius of the rotate discs and the resize sphere. You may wish to play around with different affordance sizes. In some cases (e.g. for rotating and resizing), changing the affordance size will control the granularity at which you can make adjustments to the appearance of your Component.

If you wish to edit the numerical values for the translation, rotation, and scale, click the Details... button on the affordances HUD. This displays a sister HUD window; you may edit the values in this HUD window directly.

Figure 7: The details HUD visible (click on the image to view a full-sized version)

You may also have affordances visible for more than one Component at a time. To control whether the affordances are visible for another Component, you may right-click on the Component and select Edit, or if the HUD frame is visible:

1. Left-click on the desired Component. The name of the cell should now appear in the HUD frame and the state of the toggle buttons and resize slider should automatically update themselves to reflect the settings for the newly selected Component
2. Click the desired toggle buttons to show or hide the affordances

To dismiss the affordances, you may either click the toggle button or (a better way) you may close the HUD frame and all of the visible affordances on your client will disappear.

Duplicating and deleting Components

You may also duplicate an existing Component or delete an existing Component using menu items found on the context menu. To duplicate an existing Component in the world:

1. Right-click on the desired Component
2. Select Duplicate from the context menu

To delete a Component from the world:

1. Right-click on the desired Component
2. Click Yes on the confirmation dialog

Note that these changes take effect immediately and are visible on all clients.

Moving, rotating, and scaling a Component using the Cell Editor

In addition to the visual affordances, you may edit properties of a Component (including its position, rotation, and scaling) using the Cell Editor dialog. To display the dialog:

1. Right-click on the desired Component
2. Select Properties... from the context menu

You should see a frame appear outside of the Wonderland client window. It should look something like this:

Figure 8: The Cell Editor window (click on the image to view a full-sized version)

The dialog consists of three panes: on the upper-left is a tree view of all of the Components in your world. In the lower-right is a list of Capabilities for the selected Component in the tree view. For the selected Capability, its properties are displayed on the right half of the window. To edit the translation, rotation, and scaling of a Component:

1. Select the Position category from the left hand-side Capabilities list
2. Change the desired values for the origin, rotation, and scaling for each individual axis.
3. The changes take effect immediately. In order for the changes to persist after you close the Cell Editor window, click Apply. If you wish to revert to the original values when you opened the window, click Revert.

Note that this dialog box cooperates with the visual affordances: if you update the translation, rotation, or scaling of a Component using the visual affordances, the new values automatically appear in the Cell Editor dialog.