Elements
Last updated
Last updated
There are 6 categories of elements that can be placed inside in the clubhouse and set up further interactions. These elements are shown in the Scene Hierarchy and on the Hang Tool Bar. You will be able to edit, add, or delete any element.
Virtual Camera: these are cameras you place inside your clubhouse to capture a scene. You can create as many as you'd like for cinematic views in your visual novel, or use them for broadcasting.
3D Object: you can add 3D objects into the clubhouse. We have a few types of 3D object, which we will go into more details below.
Light: these are dynamic lights that you can place inside the clubhouse.
Display: you can place as many displays as you want inside the clubhouse. mtion supports a variety of display types, such as web cam, browser source, window/desktop capture, image/video etc.
Shape: this is the primitive objects that you can spawn inside the clubhouse. You can freely adjust all axis of the primitive object to achieve your desired shape as well as adding textures of your choice. More details below.
Avatar: you can import your 3D VRM and VSF avatar models into the clubhouse - give your avatar a proper home! More details below.
Audio: add static or spatial audio anywhere in your clubhouse!
Play Mode: this will let you go into Play Mode so you can test out your game/interactive experiences quickly while building it.
You can add any of these elements by clicking on the corresponding icon on the Hang Tool Bar. A useful tip is to first navigate to the desired location inside the clubhouse and then click the add element button. This way, the element will be added to the front and center of your current viewpoint within the clubhouse.
Elements in the clubhouse are tagged with their respective icons. Clicking on these icons will allow you to edit them further. Alternatively, you can click on the element from the Scene Hierarchy to achieve the same result.
When you select an element, a gizmo will appear. You can use the three arrows to change the element's position in three dimensions. Rotating the orbs around the gizmo will rotate the element. Additionally, you can move the element in a free-style manner by dragging the cube in the center of the gizmo.
To adjust the size of an element (except for the virtual camera element), you can drag the center block of the gizmo.
When you select an element, you will notice that the Inspector Panel on the right side of the app appears. This allows you to further edit the selected element using all the available options on the Inspector Panel.
Here's a video tutorial guide if you are not the reading type 👇
When selecting a normal virtual camera, you'll notice all the available options appearing on the Inspector Panel. These options allow you to further edit the camera. Here are a few of the main sections in the Inspector Panel:
🕹 General: You can rename the camera. Once renamed, you will notice that the name is also updated in the Scene Hierarchy. Additionally, you can duplicate or delete this camera.
🚠 Transform: This is the second method of moving the selected element. Instead of dragging directly on the gizmo, you can input the number values in the "position" and "rotation" parameters, or drag on the blue "x," "y," and "z" letters in each parameter box. You can also adjust the size of the selected element by changing the value in the "scale" parameter. However, please note that this function is only available on the other three types of elements and not the camera element, as the camera size does not matter since it captures whatever is in front of it.
🏒 Actions: If this element is set to an action, then you will see an overview of the action in this section. We will touch more on this on this page 👉 Set Up Interactions
🎥 Camera: In this section, you can change the camera transition type and set up hotkey commands to trigger the camera transition. There are 2 main transition type for camera transitions:
Cut: Refers to a dry cut transition when changing to this camera view.
Intrp: An abbreviation for interpolation, which refers to a transition via a selected type of interpolation when changing to this camera view.
⚙ Settings: In this section, you can edit further more on the selected camera.
Interpolation: When you click on this button, a dropdown menu will appear. Here, you will see all the different types of interpolation you can apply to this camera transition.
Duration: You can specify the length of the transition to this camera. You can either input the number value directly or adjust the time length by dragging the blue "s" letter.
FoV: Stands for Field of View. You can adjust the camera's FoV by inputting the numerical value directly or by dragging the blue dot to adjust the value.
Sway: Enabling this feature will create a hand-held camera feeling and add another layer of immersion to your stream. You can adjust the intensity level of the sway using the intensity slider.
🎛 Post Processing: In this section, you can adjust various post processing parameters for the selected camera. Some of these parameters are disabled by default, so you need to enable them by ticking the box at the right end of the slider before making any adjustments.
DoF: Stands for Depth of Field. This post processing parameter allows you to adjust your camera's focus point. If you notice that your input object, such as a VTuber avatar, appears blurry from the camera view, you most likely need to adjust the DoF to bring the focus back to your avatar.
👉 Please note that the control panel for Attached Cameras will NOT include the "transform" section, as these cameras are tied to specific input objects and cannot be moved around.
Here's a video tutorial guide if you are not the reading type 👇
When selecting a display element, you'll notice all the available options appearing on its respective Inspector Panel. These options allow you to further edit the input object. Here are a few of the main sections in the Inspector Panel:
🕹 General: You can rename the input object. Once renamed, you will notice that the name is also updated in the Scene Hierarchy. Additionally, you can duplicate or delete this input object. There are a few more options in the General section worth mentioning:
Visible (Eye Icon): Unselecting this icon will make the display invisible. It is a useful feature when you want to temporarily hide a display. Instead of deleting it and setting it up again in the future, you can simply unselect this option. You can also connect this option to your Stream Deck button using mtion's Stream Deck plug-in. This allows you to hide or reveal things with the push of a button while livestreaming.
Attached Camera: This is where you can attach a virtual camera to this selected display, so the camera will only capture this particular display. You can do this by clicking on the “Create” button. After attaching a camera, a "Remove" button will appear, allowing you to delete the attached camera if desired.
🚠 Transform: Same as the Transform section in the Camera element’s Inspector Panel, except now you can actually adjust the size of the selected element by changing the value in the "scale" parameter.
🖼 Input Object: Click on the Type dropdown menu to see all the different sources you can bring into your clubhouse.
Most of the options for placing different types of input sources inside your clubhouse are pretty straightforward.
To add Videos and Images from your local computer, simply select the respective type. Once you've selected an input object type, scroll to the bottom of the control panel and click on the "Load" button to upload the file from your computer. For video types, you have the option to upload a single video or a video playlist. The playlist option allows you to upload an entire folder of videos, which will then be shuffled and played in sequence.
To add Window or Desktop Captures, select the respective type and scroll to the bottom of the control panel and select the source you want to be captured.
To add an IRL webcam into your clubhouse, select “Connected Camera”, then scroll down to the “Camera” section, click on the button to access the dropdown menu, and you will find all your connected cameras in this list, simply pick the one you would like to use and then hit the “Start” button.
To add a Browser Source to your clubhouse, select "Website" and then find the "URL" section at the bottom. Copy and paste the browser source in this section.
To add your vtuber avatar to your clubhouse, select “Vtube Feed” and then select your avatar tracking software at the bottom “Vtube Feed” section.
💡 You can apply the chroma keying effect to any video or camera feed that has a green screen. Simply load in the source and enable the Chroma Keying section. You can fine-tune the color and threshold values to achieve the desired result.
💡 Check out this video for more tips on how to creatively use green screen in mtion studio. You don't even need a physical green screen to achieve some of the amazing effects demonstrated in this video.
✂ Crop: In this section, you can crop the input object.
⚙ Settings: This section includes a noteworthy feature called "Diegesis". When enabled, this feature adapts the input object to the environment lighting, making it appear more immersed in the clubhouse and as if it is physically present. Sources like "image" or "VTube Feed" will greatly benefit from this function. See examples below:
Here's a video tutorial guide on both objects and lights if you are not the reading type 👇
When you select an object element, you will see all available options on the Inspector Panel for the selected object. These options allow you to further edit the object. The options in the Inspector Panel are similar to those other types of elements, but with fewer choices.
💡 There are 3 types of Objects, each one has a slightly different icon:
Normal 3D Object: the basic object, you can move it around, adjust its size, duplicate or delete, and that’s it.
Physics Enabled Object: this type of object has physics attached to it, meaning it will react to graphics, and can be interacted by Action Enabled Object.
Interactive Object: this type of object has actions attached to it, meaning it comes with pre-scripted interactive actions that you can further custom when designing interactions on top of it. We also refer to this type of object as “toys”.
*We will discuss more on how to set up interactions and build minigames with these types of objects in this section 👉 Set Up Interactions
💡 To add an Object Element, click on its corresponding icon. This will open up the Asset Browser, which allows you to view the library of 3D assets. To add a selected object to the clubhouse, simply select it and hit the "Add" button.
You can filter and search various different assets as well.
When you select a light element, you will see all available options on the Inspector Panel for the selected light. These options allow you to further edit the light. The options in the Inspector Panel are similar to those of other types of elements, but with fewer choices. You can change the types of light, adjust the intensity, as well as adjust the color in the “Light” section of the control panel.
There are two types of light to choose from: "Point Light," which is essentially a ball of light, or "Spot Light," which casts a focused beam of light onto a surface. If you choose "Spot Light," pay attention to the blue arrow in the light element gizmo in the clubhouse. The direction in which the blue arrow is pointing is where the light beam will be cast.
If you do not want to see the light object in the scene but still want its effect on the environment, you can disable the Gizmo icon.
You can add a shape primitive object by clicking on the shape icon on the Hang Tool Bar. This will allow you to freely customize the shape of the 3D object, as well as automatically generate and apply desired texture to the 3D object. This feature is still WIP, and we will be adding more to this at a later time.
You can upload an image of your choice for texture, it will get automatically wrapped around the shape you deisgned. Here's an example:
You can import all your avatars into your mtion clubhouse, and set up noval interactions for your avatars within the environement. To learn how to import your models and avatar related topics, visit this page.
To delete an element, simply hit the delete key or click on "Remove Element" in the General section of the Inspector Panel with the selected element.
When you are done editing the elements you've set up in your clubhouse, you may choose to lock them so they don't accidently get moved around. You can do so by clicking on the "lock" icon in each elements option.
The play button on the right end of the Hang Tool Bar is quite useful. Turning it on will make the clubhouse go into a play mode, which means whatever objects that are being moved during this mode will get reset back to their original spots upon exiting the play mode. This is particular useful when your community is interacting with your space and messing everything up. It's like having a magic wand to place everything back after kids made a mess!
