STYLY Modifier Manual

In this article, we explain about “Modifiers” through the following two sections (Overview / Practice ).
First, we explain the overview of Modifiers and show you how they work.

Overview

Modifier is a functionality to add effects to assets like animations and interaction functionalities on STYLY Studio. We call the functionality itself and the applied effects as Modifiers. Before we released Modifiers, users had to use Unity and PlayMaker to add effects to objects. Modifiers is a solution to add functionalities to objects easily and without coding. Modifiers are compatible with the devices listed in the Modifier Supported Environment table below, making it easy to create impressive scenes in VR/AR.

Modifier Supported Environment

Layer	Device type	App Platform
VR	PCVR	Steam
VR	Standalone VR	Quest2
VR	Mobile	Android/iPhone
AR	Mobile	Android/iPhone
Web	Web Browser	Web Player

How to install apps

Introduction of Modifiers

Let us introduce some of the Modifiers provided on STYLY Studio.

Interaction
Modifiers of the “Interaction” category allows you to add modifiers that are useful when creating interactive artworks such as games.

Example : Make equippable

Style change
Modifiers of the “Style change” category change the look of assets.
However, there are 3D models which do not look as expected due to shape or other factors. (Texture mapping follows the UV of the object.)

Example : Stars

Animation
Modifiers of the “Animation” category apply animations to assets like rotation, transition etc.

Example：Rotate

Humanoid Animation
Humanoid Animations are animations for Unity’s Humanoid models.
Modifiers of the “Humanoid animation” category can be used to animate humanoid assets. (*To use it, please make your assets as prefabs with Humanoid support in Unity and upload them to STYLY.)

Example：Breakdance Motion

STYLY is a platform that allows non-engineer/programmer artists to easily create and publish VR/AR works.

For example.
“I can use Blender, but I can’t use Unity…”
“I don’t know how to program on Unity.”
“I can only use Adobe software.”
Even artists and creators who are without engineering skills can easily create animations and interactive works with Modifiers.

You can also upload and use 3D models created with 3DCG software such as Blender, image data such as JPG/PNG, and video data such as .mp4.

Please refer to the following article for how to upload.

Create your own VR/AR creations by adding modifiers to the assets you uploaded!

Practice

In the practice section, you will actually learn how to use modifiers and create a simple scene.

To use STYLY Studio, you need to create an account before you will go through the following steps.
To create an account, please refer to the following article.

Opening STYLY Studio

Let’s access STYLY Studio.
https://gallery.styly.cc/studio

Or click on the STUDIO button in the upper right corner of the STYLY Gallery page to access it.

In STYLY Studio, click “CREATE SCENE” button.

Select the AR Scene Template if you want to create an AR scene, or the VR Scene Template if you want to create a VR scene.

This time, we will select the VR Scene Template and create a VR scene.
After selecting the template, the scene will be displayed on your screen as shown below.

Now you are ready to go.

Appling Modifiers

Let’s get used to using the modifier by actually placing the assets on the scene.

First, we will add assets.
Select the “Asset Button” in the upper left menu bar.

When the asset menu appears, select “3D Model” and then “Model”.

Choose a 3D model of your choice.
In this article, we will use “Leather Sofa Wine Red”.

Select a 3D model and it will be placed on the scene.

When you select a model, it will be highlighted in the list.

Then, select the gear icon and choose “Add modifier” to display the menu.

A list of modifiers will then be displayed.

Scroll down to see the various modifiers. The input box with “search…” at the top is a search field. It can be used to search for Modifiers.

This time, we will add a “Rotate” animation modifier to the sofa. Enter “Rotate” in the search field to search for an animation modifier.

Click on “[Animation] Rotate”.
The sofa object will start to rotate.
Also, a modifier setting field will be added below the object’s row.

 Modifier List

The Modifier has many other effects as well.
You can also create simple game-like scenes with no code. Let’s try it out!

Intercation

You can equip objects to the controller, make them grabable, and destroy objects.

[Interaction] Make equippable

The controller can be equipped with an object.

[Interaction] Make draggable

Make it possible to grab and move objects.

[Interaction] Make breaker / Breakable

Colliding the Breaker’s object with the Breakable will destroy the Breakable object.

Style Change

You can change the appearance of an object.
However, there are 3D models which do not look as expected due to shape or other factors. (Texture mapping follows the UV of the object.)

[Style Change] Stars

Changes the appearance to a star pattern.

Star color : Color of the stars
Background color : Color of the background
Number of stars : Number of stars arranged in a grid.

[Style Change] Rim light

Changes the appearance to a rim light with glowing outlines.

Light Color：Color of the light
Intensity : The intensity of the light

[Style Change] Gradient Color

Changes the appearance to a gradient color

Start color: The color which the gradient stars with
End color : The color which the gradient ends with

[Style Change] Dots

Changes the appearance of polka dots.

Dot Color : Color of the dots
Background Color : The background color
Number of dots : The number of the dots arranged in a grid

[Style Change] Change Color

Changes the color of the appearance.

Color : The color to change to

[Style Change] Checker board

Changes the look to a checkerboard pattern.

Color 1 : Color of the rectangle in a different position than Color 2.
Color 2 : Color of the rectangle in a different position than Color 1.
Number of squares : Number of square patterns arranged in a grid.

[Style change] Wood

Changes the appearance to the wood grain pattern.

[Style change] Rock

Changes the appearance to a rock.

[Style change] Marble

Changes the appearance to a marble.

[Style change] Lava

Changes the appearance to lava.

Animation

You can rotate, scale and move objects.

[Animation] Rotate

Rotates an object

Angular Velocity X : Velocity to rotate around the X axis.
Angular Velocity Y : Velocity to rotate around the Y axis.
Angular Velocity Z : Velocity to rotate around the Z axis.

[Animation] Heartbeat

Make objects stretch and contract at a constant rhythm.

Beat Duration : Duration of a beat
Hold Duration : Time interval of beats
Amplitude：Amount of stretch and contract

[Animation] Orbit

Moves an object in a circle

Radius : Radius of the circle
Angle Velocity X : Velocity of moving around the X axis.
Angle Velocity Y : Velocity of moving around the Y axis.
Angle Velocity Z : Velocity of moving around the Z axis.

[Animation] Go and back

Applies a round trip animation of a certain distance from the placement position to a relative destination.

Destination X: X coordinate of the destination.
Destination Y: Y coordinate of the destination.
Destination Z: Z coordinate of the destination.
Trip time: one-way trip time

[Animation] Move straight

Applies an animation that moves in the specified direction at a constant speed.

Velocity X : X axis velocity
Velocity Y : Y axis velocity
Velocity Z : Z axis velocity

[Animation] Go and back like spiral

Applies an animation that follows a spiral trajectory.

Velocity X: Velocity in the X direction of the spiral axis
Velocity Y: Velocity in the Y direction of the spiral axis
Velocity Z: Velocity in the Z direction of the spiral axis
Trip time: One-way trip time to the destination
Radius: Radius of the spiral
Orbit angular velocity: Velocity of the spiral rotation

[Animation]Go and back like waves

Add an animation that follows an up-and-down trajectory like a wave.

Velocity X: Changes the velocity in the X direction of the moving axis.
Velocity Y: Changes the velocity in the Y direction of the moving axis.
Velocity Z: Changes the velocity in the Z direction of the moving axis Z.
Trip time: Change the time it takes to move to the destination.
Wave height: Changes the height of the vertical motion.
Wave period: Changes the speed of vertical motion.

[Animation] Move to loop

Applies an animation that repeatedly moves in a straight line relative to the object’s placement position.

Destination X: X coordinate of the destination
Destination Y: Y coordinate of the destination
Destination Z: Z coordinate of the destination
Duration: Trip time from placed position to the destination

Humanoid Animation

Humanoid Animation is an animation that supports the Humanoid model, which is Unity’s humanoid-compatible animation format. If you want to use it, make your model to a prefab in Unity with Humanoid support, and upload it to STYLY.

[Humanoid Animation] Breakdacing Motion

Adds the animation of breakdance.

[Humanoid Animation] Standing

Adds the animation of standing.

[Humanoid Animation] Sitting Laughing

Adds the animation of sitting and laughing

[Humanoid Animation] Rumba dancing

Adds the rumba dance animation.