We will show you how to create, distribute, and experience these AR scenes in Tokyo, Osaka, Nagoya, Sapporo, Fukuoka, Kyoto,Kanazawa, Hiroshima and Niigata.

How to Create AR Cityscapes

Select a City Template

Access STYLY Studio to get started.
A STYLY account is required, so if you do not have an account, go to https://gallery.styly.cc/signup to sign up.

Log into STYLY Studio and click the “CREATE SCENE” button. Then, a list of templates will be displayed.

Click “NEW SCENE”

Select a city template.
Enter a title for your scene and click “CREATE”.

List of available city templates:

• Sapporo Odori Park (Hokkaido)
• Tokyo Shinjuku West Exit (Tokyo)
• Tokyo Shibuya Station (Tokyo)
• Niigata Furumachi (Niigata)
• Niigata Bandaijima (Niigata)
• Kanazawa Station (Ishikawa)
• Nagoya Station (Aichi)
• Kyoto Station (Kyoto)
• Osaka Shibatamachi (Osaka)
• Osaka Dotonbori (Osaka)
• Osaka Castle (Osaka)
• Hiroshima Station (Hiroshima)
• Fukuoka Tenjin Station (Fukuoka)

Select the city template

Using city templates to create AR scenes linked to the real world

In STYLY, you can create AR scenes using the default assets such as 3D models and effects.
You can also upload your own 3D models, images and videos to create scenes with more originality.

For more information on how to use assets provided in STYLY Studio and how to upload your own assets, read the following article:

Understanding Assets Which You Can Import into a Scene

How to import scenes and prefabs from Unity:

How to upload prefabs and scenes from Unity to STYLY

How to add animation to an asset using Modifiers:

STYLY Modifier Manual

Now, let’s place the assets in STYLY Studio.
We recommend putting them on the roof or walls of a building.

If you’re not sure where to place the assets, try putting them on the roof or walls of a building.

Realistic scale 3D city models

The 3D city models are the same size as real world buildings.
The assets will be placed in the same location in the real world as they are positioned in STYLY Studio.

The size of the 3D city models and real world buildings are the same

3D city models are not displayed during the AR experience

The 3D city models will not be displayed in the AR experience, as they are only used as a guide for building your scene.

STYLY Studio’s 3D city models will not be shown during the AR experience

Preview your scene with Your Position

Your Position allows you to view the scene from the viewer’s perspective.
Click “reset position” at the right of STYLY Studio to view the AR scene from Your Position’s perspective.

When building a scene, you will be inspecting it from various angles and heights, so it may start lacking the viewer’s ground level perspective. Go back and forth in multiple views to make sure your scene turns out exactly how you expect it to be.

The scene from Your Position’s perspective

Experience the AR scene anywhere from designated areas

To experience AR scenes using a city template, you must go to the actual city’s location.
For the exact areas of each city, see paragraph “Be at the actual city location before launching the scene”.

Using Scenes and Prefabs from Unity

Read how to upload your Unity scenes and prefabs to STYLY Studio below:

How to upload prefabs and scenes from Unity to STYLY

Points to note when creating AR Cityscapes

Do not delete city assets

When creating scenes using a city template, three assets are placed in the scene: the AR on City asset, the 3D city model, and the 3D city anchor.
Do not delete these three assets. If you delete them, the scene will not work as expected.

Assets that should not be deleted:
・AR on City asset
・3D City Model
・3D City Anchor

In the case of this scene, do not delete the AR on City, Tokyo Shibuya Station, and Tokyo Shibuya Station Anchor assets

How to restore city assets if you accidentally delete them

If you accidentally delete a city asset, open the Asset Selector and select the asset from Function.
You can add AR on City, the 3D city model and 3D city anchor assets from here.

If you delete the AR on City asset, add the AR on City asset to your scene.
If you delete a 3D city model, add the 3D city model that was originally in your scene.
If you delete a 3D city anchor, add the 3D city anchor that was originally in your scene.

The 3D city model and the 3D city anchor must be the same location.
If you are using the 3D city model of Tokyo Shibuya Station, make sure to match it with the Tokyo Shibuya Station Anchor.

Do not place a Skybox in your scene

When using XR Cityscape Assets, do not place a Skybox in the same scene. That applies to all Skyboxes in the Environment asset page.
If you place a Skybox in a scene, the scene will automatically switch to VR mode and you will not be able to see the environment in AR.

When using a city template, do not place a Skybox in your scene.

Do not use with the AR on Sky asset

A city template and the AR on Sky asset cannot be used together.
For more information on how to use AR on Sky, refer to the following article:

Manual for Sky Segmentation in AR Scenes

How to experience the AR Cityscape Scene

Download and Install the STYLY Mobile App

Download STYLY for iOS
https://apps.apple.com/jp/app/id1477168256

Download STYLY for Android
https://play.google.com/store/apps/details?id=com.psychicvrlab.stylymr

Devices supporting AR Cityscapes
https://developers.google.com/ar/devices
AR Cityscapes will only work on devices supporting Depth API.

1. Launch the STYLY mobile app and tap on My Page.
2. Tap the “Log In” button to log in.
3. A list of the scenes you have created will be shown, so tap the AR scene you would like to experience.
4. Tap the Download button to download the scene in advance.

My Page > Log In > Tap on the AR Cityscape scene > Download (Update)

Be at the actual city location before launching the scene

Make sure to be at the location of your city template before launching your scene.
For example, to experience an AR scene using the Tokyo Shibuya Station template, you will need to be in front of Shibuya Station in Tokyo.

To see the areas available for creating AR cityscapes, refer to the maps below:

AR Cityscapes Supported Areas
Sapporo Odori Park

Tokyo Shibuya Station

Nagoya Station

Kyoto Station

Osaka Dotonbori

Fukuoka Tenjin Station

Niigata Furumachi

When you arrive at the location, launch the STYLY mobile app and tap the “Play” button.

Tap “Play” after arriving at the location

Point your camera to the surrounding buildings for the app to recognize your current location. Now you can experience the AR scene in the city!

Point the camera to the top of surrounding buildings to experience the AR scene!

Start the scene on ground level

Make sure to be on ground level when you start the AR scene.
Launching an AR scene on the second floor or above or on a bridge will result in misalignment.

For questions about STYLY, bug reports, and improvement requests, please contact the STYLY FORUM: https://en.forum.styly.cc/support/discussions

For business inquiries, contact us from the link below:
https://styly.cc/contact

Cautions

It will not work properly under the following circumstances

• Roofed areas
  • Indoor, arcade shopping street, underground, etc.
• Dark places
  • At night and in areas with low outdoor lighting (the Shibuya Scramble Crossing is an exception because it is very bright even at night).
• Near the water’s edge
  • Places with water surface reflections such as rivers, ponds, lakes, and oceans

The post Manual for Creating AR Cityscapes of Major Cities in Japan first appeared on STYLY.

STYLY Release Note：STYLY-VR v2.9.2 (2021/12/21)

Template scenes and assets that already have the “Light Probe” feature implemented can now be used in Studio.
The template scene includes Reflection Probe and LightMap in addition to the Light Probe features, so you can create a scene with well-lit.

In this section, I will explain how to use the template scene in STYLY Studio, as well as the features of the Light Probe and other lighting settings.

List of template scenes

Dim Museum

In this template, objects are displayed in a marble-based set with natural lighting. There is also a space for setting captions in the back, which can convey the world view of the exhibition after the viewers concentrate on the works.

Template scene “Dim Museum”

Crypt Light

This template allows you to select your own images from custom assets to display on the wall. The European-style pillars, ceiling lights, and shadow textures are smooth, and the scene allows the viewer to concentrate on the work.

Template scene “Crypt Light”

Crypt Dark

This is a dark version of the Crypt Light template. You can choose between Light and Dark scenes to match the mood of your work. You can enhance the sense of immersion by using Narration and BGM.

Template scene “Crypt Dark”

What is the “Light Probe” that became available in this update?

Light Probe is a setting that simulates the lighting in the scene space for each section in advance, and stores the information about the lighting in the scene. Originally, Unity and STYLY are set to simulate lights in real time, but due to the load, the simulation is limited.

The lighting information is stored in advance for each section of the scene.

Let’s compare the scene without Light Probe setting and the scene with setting in the image.
By setting up the Light Probe, the lighting information of the space can be stored and set up without placing lights that are burdensome to the simulation such as Point Light.

This is a scene without Light Probe. Objects do not blend well with the background in areas not directly illuminated by the directional light.

Scene without Light Probe

This is a scene with the Light Probe set. Even in a shaded area, the lighting of the object and the background match each other naturally.

Scene with Light Probe

Specifically, the following characteristics are reflected.

• The accuracy of lighting such as indirect light has been improved, resulting in a more natural appearance.
• Light is simulated in advance, making the scene lighter.
• When using Unity, the degree of shadow detail and the rendering range can be adjusted.

Other lighting features set up in the template scene

LightMap

A “LightMap” is also set in the template scene.
LightMap is a feature that maps and stores the light shining on an object onto the object’s texture in advance. This is especially applicable to backgrounds such as walls and ceilings. It also simulates the light hitting the object beforehand, making the scene lighter and the objects look more natural.

The following is a scene without LightMap. If you don’t place point lights in the shaded areas, there will be dark areas. However, it is difficult to set up a point light that illuminates the entire scene naturally and does not make the scene heavy.

Scene without LightMap

The following is a scene with LightMap set up. The settings for the textures in the room being illuminated are saved in the textures themselves, so the scene is rendered in a lightweight and natural light.

Scene with LightMap

Reflection Probe

In addition, a feature called “Reflection Probe” has been pre-set in the template scene. As the name suggests, this feature allows you to get a simulation of the reflected light. It can be used to show the specular reflection of metal, marble, etc. in a beautiful way.

The following is a scene without Reflection Probe set. Without setting the material and shader, the reflection will look unnatural.

Scene without Reflection Probe

The following is a scene with the Reflection Probe set. The surrounding objects are reflected naturally in the central specular object. Also, depending on the type of shader, the scene can easily be made lighter than simulating with shaders at any time, so you can expect to save weight when placing multiple objects.

Scene with Reflection Probe

How to use the template scene and assets

Let’s try using a template scene that already has the above features implemented.
This time, a “sample scene” with objects already placed in the template scene is also prepared, and you can use it from there.

How to use a template scene

Template scenes can be used from STYLY Studio.
If you are new to STYLY Studio, please refer to the STYLY Started Guide here.

To use a template scene, create a scene in STYLY Studio and open “Assets” indicated by the red frame in the upper left corner.

Select “Assets” in STYLY Studio.

Click on “3D object” under Asset, then Then select “Featured”.

3D object

Featured

Open Featured to see the template scene we will be using is available.
Let’s start by explaining how to use the DimMuseum Set. Select “DimMuseum Set”.

DimMuseum Set

If you open the DimMuseum Set, you will find the following templates. Select “DimMuseum_room_sclupter”.

Select “DimMuseum_room_sclupter”

Select “DimMuseum_room_sclupter” and it will look like this.
In this case, we have already set up the lighting for the scene, so select the “Directional Light” icon and turn it off.
This will open the template.

Turning off the “Directional Light

The next step is to actually place the objects in the template scene.
This time, we will place a custom asset from STYLY Studio.
As before, click on “3D object” and continue Select “Primitive”.

3D object

Primitive

Select “Change Texture Sphere” and place it.
This time, I added the STYLY logo in the “Please upload an Image File” field.
To see how the specular reflection looks, I set the “Metalic” and “Smoothness” values to 1.
Once the settings are made, select the blue “ADD TO SCENE” button and place it on the pedestal.

Change Texture Sphere

This time, we will set it as shown in the red frame above

Also, under the object, select “Featured > DimMuseum Set > Dim Museum Shadw Circular” and place the round shadow in the following image on the pedestal.

Select “DimMuseum_shadow_circular” and place the shadow.

As you can see below, we have placed an object on the template pedestal that also reflects the simulation of the specular surface.
In this template scene, the image of the object reflected by the object placed in the scene will be the image of a virtual object.

I was able to place objects with simulated lighting and specular reflection.

You can also place text that will serve as a caption.
After selecting “3D object > Featured > DimMuseum Set”, select “CustomAsset” in the upper tab, and you can select “DimMuseum_ScreenText” as shown below.

Select “DimMuseum_ScreenText” from “CustomAsset”.

Enter “Title text” and “main text” here (English only) and select “ADD TO SCENE” to create a text object.

Insert text in “Title text” and “main text” and select “ADD TO SCENE”.

By creating and arranging objects in this way, you can reflect natural lighting on various types of objects, as shown in the following image. If you are a modeler or photogrammetrist, please try placing your own models in this way.

Various objects can be placed and displayed.

If you follow the same procedure as in DimMuseum and select “3D object > Featured > Crypt Set”, you can also use CryptLight and CryptDark templates. Here, if you select “Crypt_photoframe_wood” from Custom Asset, you can display an image with a frame that matches this template.

You can set up a framed image from “Crypt_photoframe_wood”.

You can use your favorite painting or image as the photo part of the hand in the following image and place it beautifully.

Image of a template scene with your original image set

How to use the sample scene

You can also copy a sample scene that already has sample objects placed in it to your own account.
After logging in to STYLY Studio, click on the URL below and the sample scene will be added to the scene list in the STUDIO screen.
If you want to check the placement image first, or if you want to use the shadows and other settings as they are, it is convenient to open this page.

︎ DimMuseum_Sample URL

︎ Crypt_Light_Sample URL

︎ Crypt_Dark_Sample URL

I hope you will try to publish your scenes created with STYLY Studio.

In this article, I explained about Light Probe, which is a new feature added to STYLY, and introduced a template scene asset using it.
Please exhibit your own 3DCG or images and try out the texture of the lighting.
In the future, STYLY MAGAZINE will also introduce how to set up Light Probe and LightMap in Unity, so please check out those articles as well.

The post Template scene/asset guide using Light Probe first appeared on STYLY.

*The AR Human Template discussed here is not AR that extends specific body parts such as the face or feet, but rather AR that expands the space around a human (the subject). In other words, the experience is designed to extend the area within a few meters around the person.

Using the Wearable AR Human Template

This article explains two different production approaches.

One approach is to create based on the templates provided by STYLY, and the other is to build around your own assets.

By reading through to the end, you will be able to create an AR Human Template and try it out on Instagram.

Creating an AR Human Template with Modifier

The AR Human Template is created using the “Modifier” feature in STYLY Studio.
A Modifier is a function in STYLY Studio that allows you to add effects such as “animation” and “interaction” to assets.

Additionally, the effects themselves are referred to as “Modifiers.”
Previously, STYLY required the use of Unity or PlayMaker to add functions, but now, anyone can easily add movement and animation to objects directly from the browser.

For a comprehensive overview and detailed functionality of Modifiers, please check past articles.

STYLY Modifier Starter Guid

Creating Based on Templates

Several pre-made AR Human Templates are available in STYLY Studio.

You can replace existing assets that make up the template.
By referencing them to some extent, you can create your own unique expression.

For example, you can keep the same composition shown in the template but replace only the assets, or keep the assets and change the composition instead. This can serve as a source of inspiration or a shortcut in the production process.

Since this is an AR content experience that involves using a smartphone to view the scene, beginners may find it difficult to grasp how assets placed in STYLY Studio appear in the real-world space, and what kind of effects can create an engaging visual expression.
In such cases, the template’s presentation can be a helpful reference.

Copying a Scene to STYLY Studio

1. First, make sure you are logged into STYLY Gallery.
   
   

   Logged into STYLY Gallery

   1. If the top right corner of the STYLY Gallery screen shows “Not Logged In,” select “Login.”
      
      

      Select Login

      Enter your email address and password, then select “Login.”
      

      

      If logged in, your icon will be displayed

   2. If the top right corner of the STYLY Gallery screen shows “Logged In” (your icon is displayed), you are already logged in.

1.  
2. Click the copy button below. *If you are not logged in, the scene will not be copied to your account.
3. Once the scene has been added to the scene list in STYLY Studio, the process is complete.
    
   

   Scene added to the scene list

Let’s open the scene right away.
From here on, we will explain based on the opened scene.

Template Structure and Key Usage Points

First, let’s go over the structure and key points of the template to get an overall understanding.

Template Structure

The template consists of two main types of elements.

These are non-interactive base assets and interactive assets.

Interactive Objects

Assets without an eye icon are essential parts required for any AR Human Template and cannot be interacted with.

Interactive assets can be modified by clicking on the Modifier icon to add movement.

The template already includes both of these types of assets.

By clicking the Modifier icon, you can select operation items for the asset.

Select assets from the search box

Parameters corresponding to the operation items will be displayed

Key Points for Using the Template

The template includes circles labeled 1m / 0.65m / 0.2m.

These circles are placed to help balance the relationship between the subject and the surrounding space when placing assets.

Circles placed in the template

The 0.65m (1.3m total) area represents the Personal Space.
This is the ideal range for placing assets around a person.

Personal Space

The 1m (2m total) area represents the Social Space.
This is suitable for placing environmental assets.
Use the circles as guides when designing your scene.

Social Space

The innermost 0.2m (0.4m total) circle represents the Intimate Space.
This area is not ideal for placing assets as they may overlap with the person.

Intimate Space

The template we are using already includes placements that take these circles into account.
With this in mind, here are two key points to consider when using the template:

1. How to place the assets
2. How those assets will move

Keep these two perspectives in mind.
Now, let’s use the template to create an AR Human Template.

Creating with the Template

When you open the template, you will see several assets already placed.
Now, let’s add animation using Modifiers.

This time, we will adjust the parameters of the animations that have already been applied.
By following this process, you will get a better idea of how to create your unique expression while using the template as a base.

1. 1. Screen when opening the copied scene
       
      

      Screen when opening the copied scene

   2. Select “Ring” and click the Modifier icon to choose the operation options for the asset.
       
      

      Click the Modifier icon to add a Modifier

       
   3. In the search box, select [Animation] Heartbeat.

Select [Animation] Heartbeat

1. Confirm that the Modifier has been added and check the current parameter values.
    
   

   Current parameter values

2. Adjust the parameters and apply the changes.
   Here, set Beat duration to 2, Hold duration to 1, and Amplitude to 0.1, then select “Apply.”
    
   

   Set Beat duration to 2, Hold duration to 1, and Amplitude to 0.1, then select Apply

3. Select “Ring” and click the Modifier icon to add [Style change] wood maple flat.
    
   

   Click the Modifier icon to add [Style change] wood maple flat

   

As a result of these operations, we were able to modify the appearance and scale of the background ring.

The presentation now has a more playful feel compared to the original template.

By utilizing or referencing existing templates, you can create your own unique expressions.

Experiencing it on STYLY Mobile

Select the globe icon at the top left of the screen to publish your scene (you can choose between public or private).

Click Publish to make it public

Once published, the scene can be experienced on various platforms. On desktop, you can access it from STYLY Gallery, while on smartphones, it can be experienced using the dedicated STYLY Mobile app.

Experiencing on Desktop

On desktop, you can scan the displayed QR code with your smartphone to launch the STYLY Mobile app. If you haven’t installed the STYLY Mobile app yet, you’ll need to install it first. (This QR code can always be accessed from STYLY Gallery.)

Scan the QR code from STYLY Gallery on desktop to experience it

Experiencing on Smartphone

1. After launching STYLY Mobile, select your scene from My Page.
2. Select the button labeled “Download.”
   
   

   Select Download

3. Select the button labeled “View.”

Select View

Follow the on-screen instructions to slowly move your smartphone over a flat surface.

After a moment, the “Tap the screen to start” message will appear, allowing you to begin the experience.

By adjusting the subject’s outfit and pose, as well as the surrounding environment, you can create even more compelling content that fits well with the AR Human Template.

Uploading to Instagram

After selecting “View,” you will find a settings button at the bottom right of the STYLY Mobile app experience screen.
From there, you can switch to recording mode.

By recording a video, the file will be saved to your camera roll, making it possible to upload to Instagram.

 

 

 

 

 

View this post on Instagram

 

 

 

 

 

 

 

 

 

 

 

Lakeia (@keiabeia___) shared this post

Creating with Your Own Assets

In the AR Human Template, in addition to the pre-existing assets placed within the template, you can also use custom 3D models created with modeling software or assets purchased from websites.

Here, we will explain how to upload your own assets.

1. Select the upload icon located at the top left of the screen.
   
   

   Upload icon at the top left of the screen

2. Select the “My uploads” section.
   
   

   Select My uploads

3. Select the “3D model” section.
   
   

   Select 3D model

4. Select the file for the asset stored on your local device from the “Select” option.
   
   

   Select local asset file

    

   

   Select a file stored locally

5. Confirm that the asset is selected and choose “Upload.”

   

   Confirm asset selection and choose Upload

   
   
   

   Uploading screen

   
   
   

   Upload complete screen

In this guide, we uploaded an asset stored as a local file, but you can also upload assets created in Unity.
Check out the following article for more details.

How to upload from Unity to STYLY

How to upload prefabs and scenes from Unity to STYLY

For guidelines on delivering a more immersive and comfortable experience, refer to the following article.

STYLY Studio Manual – Production Guideline for a Wearable “AR Human Template”

For questions about STYLY, bug reports, and feature requests, visit the STYLY FORUM
https://jp.forum.styly.cc/support/discussions

Edited by SASAnishiki

The post STYLY Studio Manual – Making a Wearable “AR Human Template” first appeared on STYLY.

I will introduce the key points to appreciate the scene, how she used Modifiers, and how she arranged them.

About Luna Woelle

Luna Woelle

Born in Slovenia, born in 2000. Digital artist, graphic designer, DJ. Designer and visual curator of the experimental label “Mizuha”. Instagram: https://www.instagram.com/wo11.e SoundCloud: https://soundcloud.com/luna-woelle Bandcamp: https://mizuhamizuha.bandcamp.com/album/biosphere

（Quoted from
https://newview.design/en/fest2021/ )

Instagram: https://www.instagram.com/wo11.e　

SoundCloud: https://soundcloud.com/luna-woelle

Bandcamp: https://mizuhamizuha.bandcamp.com/album/biosphere

About “Imaginary Robotics AR”

This work is an AR work.

I recommend that you experience it in a large space.

When the work is launched, a rotating robot object will appear.

Viewing in AR

Built around a white object, the robot combines mechanical movement with sculptural beauty.

Precisely crafted

Even the smallest parts are meticulously crafted.

Fun even at the micro level

The combination of objects and Modifier gives life to the sculpture and expresses its presence.

Strong presence

Modifier Application Points

You can actually copy a scene on STYLY Studio and check it against the following explanations.

How to copy a scene on STYLY Studio

1. First, please login to STYLY Gallery.
   
   

   Select LOGIN in the upper right corner of the STYLY Gallery screen if you don’t login to STYLY Gallery.

   
   
   

   Enter your email address and password and select LOGIN.

   
   
   

   You are logged in. (Your icon will be displayed)

2. Click on the Copy button below. *You must be logged in to copy to your account.

   

    

3. When the scene is added to the scene list on STYLY Studio, you finished copying.
    
   

   Copied scene is added.

   
   

   Explanation

This section explains how she used Modifiers on STYLY Studio.

Complecated Structure

147_stylymodifier_center02 is the object in the center of the robot; it uses the Modifier for Rotate in Animation.

Rotate is used.

Similarly, Rotation is used for 147_stylymodifier_head03/_new01 (Initially, 147_stylymodifier_head03 is hidden. (Click on the eye symbol to display it).

It forms the outer shell of the rotating robot.

Outer shell

Because of the high degree of perfection of each Prefab part, even a simple modifier alone can be used to create something cool.

By changing the structure of Prefab and the combination of Animation, you can create your own Imaginary Robotics.

Original Robot

How to experience the VR scene

If you are accessing from a smartphone, click the “Experience Scene” button (*For first-time users, please refer to the following instructions).

After clicking, the following screen will appear.
If you have already downloaded the smartphone version of STYLY, select “Continue on Browser.

Then select “Play on Mobile App” to experience the scene.

If you have an HMD device, click the “Experience Scene” button on your PC (Web browser), then click the VR icon on the scene page.

Download STYLY for Smartphone

Download STYLY for Steam
https://store.steampowered.com/app/693990/STYLYVR_PLATFORM_FOR_ULTRA_EXPERIENCE/

Download STYLY for Oculus Quest
https://www.oculus.com/experiences/quest/3982198145147898/

Want to know more about how to experience a scene?
For more information on how to experience VR scenes, please refer to the following articles

[Summary] How to experience STYLY scenes VR/AR(Mobile) / Web Browser Introduction by step

The post Luna Woelle Modifier Scene Description first appeared on STYLY.

*The AR human template referred to here is not AR that augments not only specific body parts such as the face or feet, but which enhances the space around the person (the subject). In other words, the target of the augmented experience has a range of several meters centered on the person.

Wearable AR Human Template in use

Learning Examples for the AR Human Template Work

Here are some scenarios in which the AR Human Template was used.

The common features described below are examples of works created in accordance with the guidelines (components to be considered) when creating AR Human Templates.

①STAR LIGHT

 

 

 

 

 

この投稿をInstagramで見る

 

 

 

 

 

 

 

 

 

 

 

Lakeia (@keiabeia___)がシェアした投稿

②FLOATING EMOJI AROUND

 

 

 

 

 

この投稿をInstagramで見る

 

 

 

 

 

 

 

 

 

 

 

MIXAR Powered by STYLY(@mixar.gallery)がシェアした投稿

③WABI

 

 

 

 

 

この投稿をInstagramで見る

 

 

 

 

 

 

 

 

 

 

 

MIXAR Powered by STYLY(@mixar.gallery)がシェアした投稿

Use the following AR Human Template on your own smartphone. It will be easier for you to picture how it looks if you have someone else who can act as the subject for you.

Scan the QR code in the STYLY mobile app to launch the scene.

For a better AR experience, position the origin by tapping the smartphone screen parallel to the flat ground. Ideally, the origin mark should be roughly two meters away in as open a space as possible and then tap it. (The position of the origin mark indicates where the AR will appear.)

WABI

Understanding the components of the AR Human Template

When creating an AR Human Template in the STYLY Studio, the following components must be considered before creating a standard template or pattern.

The three primary components to be considered for the human experience are the subject (3D human model), the asset (3D models and 2D material, such as image), and the placement (distance and relationship between the subject and the asset).

The Subject (3D human model)

Assuming the specific situation in which you will use the AR Human Template, design the extent of the experience to be had from the starting point of the 3D human model.

Place the 3D human model at the center of the circle that represents the origin (0,0,0) in the STYLY Studio and consider the presence of the human subject.

Design with the subject as the starting point

As you have experienced in the previous section, the AR model will appear from the origin mark displayed when the AR Human Template (AR scene) of the STYLY mobile app is launched.

The origin mark indicates the subject’s position at the production stage.

Launching the AR scene (plane surface detection)

The Asset (3D models and 2D materials, such as image)

The assets you use will contribute to the visuals of the AR Human Template and the emotional impact on those who will see it.

The goal is to reflect the kind of AR experience you want to create. The viewer will be able to clearly identify the starting point of the experience if the tone and manner of the assets are expressed in line with the theme and concept of the work.

Example of asset combination

The following three points must be considered for assets used in the Human AR Template.

1. Use the“Human AR Template XX”
   The Human AR Template XX is a guide to help you create wearable AR Human Templates (AR scenes) in the STYLY Studio. The template is automatically hidden when launching an AR scene in the STYLY mobile app.
   
   

   Human AR Template XX

    

2. Do not delete the “AR Template Grid”
   The AR Template Grid is a grid to facilitate the creation of AR scenes. The grid is automatically hidden when launching an AR scene in the STYLY mobile app.
   
   

   AR Template Grid

    

3. Use “Enable AR Occlusion” setting and the AR Occlusion feature.
   The “Enable AR Occlusion” setting is set by default when a new AR scene is created.
   

   Enable AR Occulusion

   
   A thorough instruction regarding the placement (distance and relationship between the subject and the asset) is given in the next section.

   For further details on the AR occlusion feature, please refer to the following articles.
   We have added a new feature “AR Occlusion” that integrates Reality and Virtuality in the STYLY Studio

4. Avoid using “Skybox”
   Using Skybox will not allow you to view the real landscape.
   
   

   Skybox

The Placement (distance and relationship between the subject and the asset)

Similar to how an optimal distance must exist for interpersonal communication depending on the situation, there must be a suitable distance relationship between the subject and the asset in the AR Human Template.

The following tips will help you to understand the characteristics of each space for appropriate positioning of the subject and assets. 

Moreover, you must preview how these positions will appear in the real world when you experience the AR Human Template (AR scene) to evaluate whether they match the image you have in mind.

Distance Guide

The following three main guides should be considered:

• Social space inside and outside the 1m (2m diameter) notation
  • Suitable range for environmental asset placement.

Social Space

• Personal space within 0.65m (1.3m diameter) notation
  
  • Suitable range for person-centered asset placement.

Personal Space

• Intimate space inside the 0.2m (0.4m diameter) notation
  • Not a suitable area for asset placement because assets can overlap with a person.

Intimate Space

This GIF animation demonstrates how to position the asset appropriately in relation to the subject.

Arrangement example

In addition, the presence or absence of the AR Occlusion feature creates the following differences in viewing and experience.

The same AR scene with/without AR occlusion is activated at the same position behind the red traffic cone.

Start the scene behind the red traffic cone.

With the AR occlusion function on the left, the subject (human 3D model) is displayed behind the red traffic cone because the positional relationship in real space is reflected.

Meanwhile, without the AR occlusion function on the right, the subject (human 3D model) is displayed in front of the red traffic cone.

Left: With AR occlusion, Right: Without AR occlusion

The AR occlusion function must be used to facilitate the natural blending of the 3DCG into reality.

Create an AR Human Template with STYLY Studio

Using previous examples of work and components as a guideline, let us create a wearable AR Human Template with a human at its center.

STYLY Studio Manual – Making a Wearable “AR Human Template”

Also, if you are interested in learning more about the STYLY mobile app, please refer to the following article.

How to make STYLY Mobile AR scene/experience manual

For questions about STYLY, bug reports, and improvement requests, please contact the STYLY FORUM
https://en.forum.styly.cc/support/discussions

Edited by SASAnishiki
Translated by passerby1

The post STYLY Studio Manual – Production Guideline for a Wearable “AR Human Template” first appeared on STYLY.

I will introduce the key points to appreciate the scene, how she used Modifiers, and how she arranged them.

About cpnnn

cpnnn

3D artist and designer.
She is active beyond place, language, and dimension, providing works to artists in Japan and abroad, and presenting collaborative work.

（Taken from the official NEWVIEW website https://newview.design/works/paradise-type-ice/ )

Twitter : https://twitter.com/cpnnn
Instagram : https://www.instagram.com/cpnnn_

About “egg”

The artist explains her work as follows.

From the first time I saw shark eggs at the aquarium, I was fascinated by their beautiful organic form and very fragile mechanism. Sharks have a variety of ways to reproduce. Nanook and tiger sharks spawn by wrapping their eggs around rocks and seaweed, and their eggs grow slowly over several months to a year or more. The only protection for the baby sharks is an outer translucent drawstring (aka “mermaid purse”), and the survival rate is said to be very low.

The egg is already “born” into this world, but the creature inside it is not yet “born.
The “egg” is the memory of what has not yet been born.

This scene uses STYLY’s Modifier function to add movement to various objects.
Please experience the sea of memories in VR.

Recommended environment: VR (experience in a soft place such as a sofa or bed is recommended)

Music: a rap of ice – 10,10,10

Taken from cpnnn’s Instagram ( https://www.instagram.com/p/Ca9hqWmLo1E/ )

egg

The motif of this spatial work is a shark’s egg, which allows the viewer to experience memories.

The distinctive feature of this work is its unique use of color.

Beautiful colors

Instead of primary blue, the gradation of blue colors expressed by reflections of natural objects such as the sky and the sea are reflected in the objects and spaces, creating a unique color palette.

The flower object has a specular reflection and constantly changes color as it rotates on its own axis.

Specular reflection

And objects like gates are covered with stone textures.

Gate

By cloaking it in sculptural imagery, the space is constructed as a symbolic object of this work.

At the far end of the scene, there is a shark egg object.

Shark

The eggs sometimes start to move and feel as if they are about to hatch.

Points she used Modifiers

You can actually copy a scene on STYLY Studio and check it against the following explanations.

How to copy a scene on STYLY Studio

1. First, please login to STYLY Gallery.
   
   

   Select LOGIN in the upper right corner of the STYLY Gallery screen if you don’t login to STYLY Gallery.

   
   
   

   Enter your email address and password and select LOGIN.

   
   
   

   You are logged in. (Your icon will be displayed)

    

    

2. Click on the Copy button below. *You must be logged in to copy to your account.

   

    

3. When the scene is added to the scene list on STYLY Studio, you finished copying.
    
   

   Copied scene is added.

   
   

   Explanation

The following is an explanation of which kind of Modifiers are used on STYLY Studio.

The duck object called single_rubberduck includes [Animation] Go and back like spiral and [Animation] Rotation.

[Animation] is used.

Similarly, light-L includes [Animation] Go and back like waves to make the object move with the waves.
The color is also changed by [Style change] Rim Light.

[Animation] and [Style change] are used.

The [Animation] Go and back like waves is also used on the cushion object to create a modifier that makes it look like it is being rocked by waves.

[Animation] Go and back like waves is used.

By using the Modifier, the motion is effectively created as if it is really being moved by the waves.

For the shark-egg-inner object, [Style change] Rim Light is used to change the color, and [Animation] Heartbeat is used.

[Animation] and [Style change] are used

Heartbeat animation causes the eggs to occasionally move.
This effectively creates the illusion that the eggs are about to hatch.

The use of Modifiers very effectively creates physical movement.
By creating physical movement, it makes the eggs appear as if they really exist.
Let’s try using Modifiers to create effective motion!

How to experience the VR scene

If you are accessing from a smartphone, click the “Try Now” button (*For first-time users, please refer to the following instructions).

After clicking, the following screen will appear.
If you have already downloaded the smartphone version of STYLY, select “Continue on Browser.”

Then select “Play on Mobile App” to experience the scene.

If you have an HMD device, click the “Try Now” button on your PC (Web browser), then click the VR icon on the scene page.

Download STYLY for Smartphone

Download STYLY for Steam
https://store.steampowered.com/app/693990/STYLYVR_PLATFORM_FOR_ULTRA_EXPERIENCE/

Download STYLY for Oculus Quest
https://www.oculus.com/experiences/quest/3982198145147898/

Want to know more about how to experience a scene?
For more information on how to experience VR scenes, please refer to the following articles.

[Summary] How to experience STYLY scenes VR/AR(Mobile) / Web Browser Introduction by step

The post cpnnn Modifier scene Description first appeared on STYLY.

I will introduce the key points to appreciate the scene, how he uses Modifier, and how he arranged it.

About nyu

nyu

Born in 2000. 

Instagram: https://www.instagram.com/nyu_uyn_nyu/

About “Biotope”

When the work is launched, a tunnel of abstract patterns unfolds before your eyes.

Tunnel

Once through the tunnel, a space composed of different objects opens up.

Alien space constructed by objects

There are plants growing that look like seaweed.

In the sea?

An intricate abstract object sits in the center.

Objects

Objects strongly indicate their presence through rotation and other movements.

The coloring, which looks both metallic and visceral, is distinctive and disastrous.

Sense of Presence

The title “Biotope” means “biological environment.”

I feel that the objects stretched out like mucus and the intricate geometric patterns represent a virtual biological environment.

Even though there are no living creatures there, the traces of their existence are used as motifs to create the spatial works.

Points to utilize Modifier

You can actually copy a scene on STYLY Studio and check it against the following explanations.

How to copy a scene on STYLY Studio

1. First, please login to STYLY Gallery.
   
   

   Select LOGIN in the upper right corner of the STYLY Gallery screen if you don’t login to STYLY Gallery.

   
   
   

   Enter your email address and password and select LOGIN.

   
   
   

   You are logged in. (Your icon will be displayed)

    

2. Click on the Copy button below. *You must be logged in to copy to your account.

   

    

3. When the scene is added to the scene list on STYLY Studio, you finished copying.
    
   

   Copied scene is added.

   
   

   Explanation

The following is an explanation of how he used Modifier on STYLY Studio.

center obj is an object placed on the center stage.

He used Rotate in Animation of Modifier. The abstract state can be viewed from various angles.

center obj

The same Rotate of Animation is used for the sowrd circle.
In this sowrd circle, multiple objects are assembled into a circle when prefabricated. The axis is set to the center so that it rotates nicely.
When placing multiple objects in a circle, be careful of the position of the axes.

sowrd circle

Rotate Animation is also used for the drill object.
Although simple to use, Rotate is very versatile. Use Rotate when you want to give information to an object without changing its position.

drill

Rotate in Animation is also used for the long object. The vertical rectangular objects are placed at different angles, so Rotate is used to create a gradient of light.

long

He used Heartbeat in Animation at a cable circle. The size of the animation can be changed to make it appear as if it were alive.

cable circle

Because of the intricate structure of the work, instead of making large movements, we use animations that do not change position but change size and rotate to create a scene with a large amount of information without affecting the overall structure.

Instead of using Modifier carelessly, make effective use of them to enrich the scene.

How to experience the VR scene

If you are accessing from a smartphone, click on the “Try Now” button (*For first-time users, please refer to the following instructions).

After clicking, the following screen will appear.
If you have already downloaded the smartphone version of STYLY, select “Continue on Browser.

Then select “Play on Mobile App” to experience the scene.

If you have an HMD device, click the “Try Now” button on your PC (Web browser), then click the VR icon on the scene page.

Download STYLY for Smartphone

Download STYLY for Steam
https://store.steampowered.com/app/693990/STYLYVR_PLATFORM_FOR_ULTRA_EXPERIENCE/

Download STYLY for Oculus Quest
https://www.oculus.com/experiences/quest/3982198145147898/

Want to know more about how to experience a scene?
For more information on how to experience VR scenes, please refer to the following articles

[Summary] How to experience STYLY scenes VR/AR(Mobile) / Web Browser Introduction by step

The post nyu Modifier Scene Description first appeared on STYLY.

Snapping refers to automatically locking the position and rotation of an object when it enters a predefined range.

Setting Up the Board for Placement

Generate a Plane and a Cube. Rename the Plane to “BasePanel” and the Cube to “BasePoint.”

The Plane acts as a visible base, while the Cube serves as the trigger and position setting for snapping the object.

Set the Transform of the BasePanel and BasePoint as follows:

Add the “XR Socket Interactor” component to BasePoint from Add Component.

Enable the “Hover Socket Snapping” option in BasePoint’s “XR Socket Interactor” settings. This allows the object to automatically snap into position when it enters the snap range while being held.

Check the “Is Trigger” option in BasePoint’s Collider settings.

Uncheck the “Mesh Renderer” option.

Setting Up the Object to Be Placed

Generate a Cube and rename it to “SnapBlock.” Set its Transform as follows:

Add the “XR Grab Interactable” component from Add Component.

To prevent the SnapBlock from floating or rotating, disable “Use Gravity” and enable “Is Kinematic” in its Rigidbody settings.

Execution

This time, we introduced how to snap objects.

The post STYLY for Vision Pro: How to snap and move objects first appeared on STYLY.

How to Implement Hand Gestures

This time, we will implement a method to change the color of the Cube when a hand gesture is made.

Create an empty object in the Hierarchy by selecting Create Empty. Then, attach “XR Hand Tracking Events” from Add Component.

Add a Cube to the Hierarchy and add “Gesture Hand” from Add Component.

In the Hand Tracking Event of “Gesture Hand,” attach the object with “XR Hand Tracking Events” attached.

Select a hand shape from Samples-STYLY→Reusable Assets→Hand Gestures→Hand Poses.

Since we want to change the color when making a thumbs-up gesture, attach “ThumbsUp” to Hand Shape Or Pose.

Add ScriptMachine to the Cube and create a new Graph. Connect the nodes as shown below.

Set up the Gesture Tracker as shown below.

Execute.

This is a video mentioned in the wiki.

This time, we introduced how to implement hand gestures.

The post STYLY for Vision Pro: How to implement hand gestures first appeared on STYLY.

How to Implement Tracking

In the Scene, add “Head and Hand tracker” from Samples-STYLY→Head and Hand tracker.

This time, we will make a Cube follow the hand.

Create a Cube and set its Scale to (0.1, 0.1, 0.1).

Make the Cube a child of the Head and Hand tracker’s child object.

We will track the right hand this time.

Set the Cube’s Position to (0, 0, 0).

This Position is relative to the right hand, so with some adjustments, you can track a point that is slightly offset from the hand.

Execute.

We have introduced the method of implementing tracking this time.

The post STYLY for Vision Pro: How to implement tracking first appeared on STYLY.

In this article, we’ll explain how to integrate Visual Scripting with STYLY for Vision Pro.

Download the sample scene that summarizes the features available in STYLY for Vision Pro.

Use Unity version 2022.3.27f.

This tutorial will show you how to grab an object and apply some effect to it.

Grabbing Objects with Visual Scripting

Open the downloaded project in Unity Hub.

Click the Add button.

Open the downloaded project in Unity Hub

Select the downloaded folder and click Open to open the project.

Open the project

Click the + button at the bottom of the Project tab, select Scene, and create a new scene.

Create a new scene

For this tutorial, name the scene [GrabScene].

GrabScene

Next, create the object to be grabbed. Click the + button in the Hierarchy, select 3D Object → Cube, and create a cube.

Select 3D Object → Cube to create a cube

Name it [GrabCube] and add the XR Grab Interactable component.

Add the XR Grab Interactable component

XR Grab Interactable is a component that allows objects to be grabbed in the XR space.

This C# script is integrated with STYLY for Vision Pro, so you can use it directly.

Changing the Color of Grabbed Objects with Visual Scripting

XR Grab Interactable has many functions.

If you want to learn more about its features, refer to the Unity manual.

Open the Interactable Event section in the XR Grab Interactable component.

Open the Interactable Event in XR Grab Interactable

Click the + button for both Select and Select Exited, then drag and drop as shown below.

Drag and drop to add

Click No Function, then select Script Machine → TriggerUnityEvent.

Script Machine → TriggerUnityEvent

In Select, enter [StartGrab] as shown below.

StartGrab

For Select Exited, enter [ExitGrab].

Select triggers actions when the object is grabbed.

Select Exited triggers actions when the object is released.

Attach a Script Machine to the [GrabCube] object.

Change the Source to Embed.

Change Source to Embed

Click Edit Graph to display the Script Graph.

Add the following nodes to the Graph Editor:

• UnityEvent
• Renderer Get Material
• Color Literal
• Set Color

Note: Images are provided for nodes that might be unclear.

Renderer Get Material

Set Color

Connect the nodes as shown below.

In the UnityEvent node, enter [StartGrab] as set in the XR Grab Interactable’s Select event. Set the Color to the color you want when the object is grabbed; in this case, it’s set to red.

StartGrab

Select all the connected nodes, and duplicate them by pressing Ctrl+D (or Cmd+D on Mac).

Similarly, enter [ExitGrab] in the UnityEvent node and set the Color to the color you want when the object is released. In this case, it’s set to white.

ExitGrab

Uploading to STYLY for Vision Pro

In Unity, the Transform units are in meters. The current [GrabCube] might be too large, so resize it to a 30 cm cube.

Resizing the cube to 30 cm per side

The [GrabCube] has a RigidBody attached, so gravity will cause it to fall. To prevent this, create a base for it to sit on.

Create a new Cube in the scene and position it underneath the [GrabCube]. You don’t need to change its size.

Placing the base

When uploading multiple objects, group them together and create a Prefab.

Create an empty GameObject, name it [GrabPrefab], and move both the [GrabCube] and the base under it.

Prefab creation

Drag and drop the [GrabPrefab] into the Project window to create a Prefab (you’ll see the icon turn blue).

Drag and drop GrabPrefab into the Project window

Right-click on the Prefab [GrabPrefab] and select STYLY → Build prefab.

STYLY → Build prefab

Your browser will open automatically.

After creating an account and logging in, you’ll see a screen like this. Click on [+ New content].

+ New content

Set a title—[GrabColor] is used in this example.

Next, drag and drop the generated folder from the [_Output] folder within your project into the Select file section, then click Upload to finish.

All other settings remain at their default values.

Upload

This time, we introduced how to integrate Visual Scripting with STYLY For Vision Pro.

The post Introduction to Unity Visual Scripting Part 10: Cooperation with STYLY For Vision Pro first appeared on STYLY.

In this article, we will explain how to create and play animations using Visual Scripting, as well as how to play audio.

Creating Animations in Unity

Animation is a feature built into Unity that allows you to create animations by setting keyframes.

To play the animation created using Visual Scripting, let’s first create the object to be animated.

Click the + button in the Hierarchy, select 3D Object → Cube to create a Cube.

3D Object → Cube

Name it [AnimationCube].

AnimationCube

From the top menu bar, select Window → Animation → Animation to open the Animation window.

Animation Window

With [AnimationCube] selected, click the Create button in the Animation window.

Create in the Animation Window

Set the Position of AnimationCube to (10, 0, 0).

Set Position to (10, 0, 0)

Click Add Property, then click the + next to Transform → Position.

Transform → Position

This time, we will make the object move back and forth.

Move the timeline to 0:30 and set Position.x to -10.

Set Position.x to -10

Click the play button in the Animation window to play the animation.

Play Button in Animation Window

The animation is now playing.

Playing the Animation

Playing Animations with Visual Scripting

Click the + button in the Hierarchy and select Create Empty to create an empty GameObject.

Name it [UXManager].

“`html

UXManager

Attach a Script Machine to [UXManager].

Create a folder named Macros, and inside it, create a Graph named [UXController].

UXController

Double-click AnimationCube in the Animations folder to open the Animator window.

Animator Window

Right-click on CubeAnimation and select Delete.

Delete

In the empty space of the Animator window, right-click and select Create State → Empty.

Create State → Empty

Drag and drop CubeAnimation from the Animations folder into the Animator window.

Drag and drop CubeAnimation into the Animator window

Right-click on the New State and select Make Transition, then connect the arrow to CubeAnimation.

Connect the arrow to CubeAnimation

Click the + button in the Parameters section of the Animator window, select Bool, and name it [Play].

Play

Select the arrow connecting New State and CubeAnimation in the Animator window, and click the + button in the Conditions section of the Inspector.

By doing this, the next animation will play when [Play] becomes True.

Click the + button in the Conditions section of the Inspector

Set the animation to play when the spacebar is pressed.

Create a GameObject variable in Variables named [Cube] and set the Value to [AnimationCube].

Add [Cube] to the Graph Editor.

Add [Cube] to the Graph Editor

Add the following nodes to the Graph Editor.

*Only the nodes that are difficult to understand are shown in the images.

• Get Key Down (Key)
• If
• SetBool (Name, Value)

SetBool (Name, Value)

Connect the nodes as shown below.

Set the Bool Name to [Play], which was set in the Animator.

Since we set the animation to play when [Play] is True, check the Value box.

Connect the nodes

Press play. The animation will play when the spacebar is pressed.

Playing the Animation

Playing Audio with Visual Scripting

This time, we will use free audio.

You can download the audio from this download page.

You can also use any audio you like.

“`html

Drag and drop the downloaded audio file directly into the Assets folder.

Drag and drop the downloaded audio file into the Assets folder

Click the + button in the Hierarchy, then select 3DObject → Cube to create a Cube.

Name the Cube [SpeakerCube].

SpeakerCube

Click AddComponent on SpeakerCube and add the [Audio Source] component.

Audio Source

Add a GameObject variable named [Speaker] to UXManager’s Variables.

Set the Value to [SpeakerCube]. Add [Speaker] to the Graph Editor.

Add a GameObject variable named [Speaker]

Add the following nodes to the Graph Editor.

*Only the nodes that are difficult to understand are shown in the images.

• On Update
• Get Key Down (Key)
• If
• Set Clip
• Play

Set Clip

Play

Drag and drop the downloaded audio file into the Graph Editor.

A window like the one below will appear; select the top option.

Drag and drop the downloaded audio file into the Graph Editor

Connect the nodes as shown below.

Set the space key for Get Key Down.

Set Clip Node: You can set the audio file in the Audio Source’s Audio Clip.

Connect the object with the Audio Source attached to the middle-left port.

Connect the audio file to the bottom-left port of the Audio Source’s Audio Clip.

“`html

Play Node: This node plays the audio file set in the Audio Clip of the Audio Source.

Connect the object with the Audio Source attached to the bottom-left port.

Connect the nodes

Press the play button to run the scene. The AnimationCube begins to move along with the music.

Run the scene

This time, we introduced how to animate and play audio using Visual Scripting.

Next time, we’ll cover integration with STYLY for VisionPro.

Introduction to Unity Visual Scripting Part 10: Cooperation with STYLY For Vision Pro

The post Introduction to Unity Visual Scripting Part 9: Animation and Audio first appeared on STYLY.

Introduction to Unity Visual Scripting Part 7: Creating a target game using Raycast and List (Part 1)

This article is part of a two-part series explaining how to create a shooting game using Raycast and List.

In this article (the second part), you will learn:

• Raycast
• Destroy
• Removing elements from a List
• How to use Tags

Using Raycast to Retrieve Object Information

A Ray is a beam of light emitted in a specified direction, and it can be used to obtain information about the objects it hits.

Add a GameObject type variable named [Camera] to the Variables.

Assign the MainCamera in the scene to the Value.

Add [Camera] to the Graph Editor.

Add [Camera] to the Graph Editor

Add the following to the Graph Editor:

• On Update
• Get Key Down
• If
• Get Mouse Position
• Screen Point To Ray
• RayCast

※ Only unclear node images are provided.

Screen Point To Ray

RayCast

Enter Mouse 0 (left-click) for the Key in Get Key Down.

The GIF shows what happens when you enter Mouse 0 for the Key in Get Key Down, which isn’t visible without scrolling.

Enter Mouse 0 in the Key field of Get Key Down

Connect the nodes as shown below.

By connecting the Camera component and Mouse Position to the left port of Screen Point To Ray, it creates Ray information from the camera. Connecting this to Raycast allows you to shoot a Ray.

Connect nodes

Let’s confirm whether the Ray is being cast successfully.

Add the following nodes to the Graph Editor:

• Debug Log (Message)
• Get Collider
• Get Game Object

Get Collider

Get Game Object

Connect the nodes as shown below.

The Collider of the object hit by the Ray is obtained, and from there, the object’s information is retrieved to display the name of the target in the Console.

Connect nodes

Run the scene. You can display the name of the target you clicked.

Run the scene

Delete the Retrieved Object

As part of the game elements, let’s first create a floor.

Click the + button in the Hierarchy, then click 3D Object → Plane to create a Plane.

Set the Plane’s Transform as shown below.

Set the Plane’s Transform

Next, register a new Tag to distinguish between the floor and targets.

Tags allow you to categorize objects, enabling you to change the processing based on the object’s Tag.

Click on the Tag of the [Target] prefab in the Project and then click Add Tag.

Click Add Tag

Click the + button, enter [Target] in the New Tag Name field, and then click Save.

This registers a new Tag.

Now, the [Target] prefab has the [Target] Tag, allowing you to perform operations based on this Tag.

Register a new Tag

Add the following nodes to the Graph Editor:

• If ×2
• String Literal
• Get Tag
• Equal
• Destroy
• Aot List Remove

※ Only unclear node images are provided.

Add [TargetList] from the Variables.

Get Tag

Destroy

Aot List Remove

Connect the nodes as shown below. Enter “Target” in the String.

Here is an explanation of the nodes:

1. The middle-right port of Raycast checks if the Ray hits an object. If it hits, it returns True; if it doesn’t, it returns False. In this case, if the Ray hits, the process moves to the next step.
2. The Tag of the GameObject is retrieved, and if it matches [Target], it returns True, proceeding to the next step.
3. The middle-left port of Remove connects to the list containing the object to be removed.

The bottom port connects to the object to be removed from the list.

If you don’t remove the object from the list before deleting it, an error may occur. Therefore, you remove the object from the list first, and then delete the object using the Destroy node by connecting the object to the bottom-left port.

Connect nodes

Run the scene.

Run the scene

And with that, the project is complete. Below is an example that includes a scoring feature, which was created after reviewing Unity Visual Scripting tutorials in Parts 3 and 4.

If you have extra time, give it a try!

With scoring feature

Introduction to Unity Visual Scripting Part 3: How to calculate time and score [Part 1 of the continuous hit game]

Introduction to Unity Visual Scripting Part 4: Switching screens and displaying scores [Part 2 of the continuous hit game]

If you get stuck, you can check the completed sample here:

https://github.com/Manufuki/HitTargetSample.git

In the next installment, Part 9, we’ll cover how to play sounds and animations using Visual Scripting.

Introduction to Unity Visual Scripting Part 8: Creating a target game using Raycast and List (Part 2)

The post Introduction to Unity Visual Scripting Part 8: Creating a target game using Raycast and List (Part 2) first appeared on STYLY.

Introduction to Unity Visual Scripting Part 6: How to add collision detection with Collision

This article is divided into two parts and explains how to create a target shooting game using Raycast and List.

What you will learn in this part (Part 1):

• Adding elements to a List
• Random
• For loops
• Instantiate

Final Image

Final Image

Create Random Coordinates with the Random Function

The Random function outputs a random number within a specified range.

Click the + button in the Hierarchy and create an empty GameObject.

Create a GameObject

Name it [AimLabManager].

[AimLabManager]

Attach a Script Machine to [AimLabManager], create a new graph in a folder called Macros, and save it there.

Name the graph [AimLabGraph].

[AimLabGraph]

Since we want to generate targets every few seconds, we need to set a timer.

Add a variable to measure time. Add a Float variable [Time] to the Variables in [AimLabManager], and add [Time] to the Graph Editor.

Add a Float variable [Time] to [AimLabManager]

Add the following nodes to the Graph Editor.

• Get Delta Time
• Add
• If
• Greater
• Set Object Variable ×2
• Float Literal

※ Only unclear node images are provided.

Get Delta Time

Add

Connect the nodes as shown below.

This time, we will generate a target every 0.5 seconds, so input 0.5 into Greater.

If the time exceeds 0.5 seconds, the [Time] will be reset to zero. Therefore, two Set Object Variable nodes are prepared.

Prepare two Set Object Variable nodes

Next, we will create random coordinates. Add Random Range and Vector3 Create(X, Y, Z) to the Graph Editor.

Select the Random Range with Result (Float Output).

If you choose the Int type, the random numbers will be integers.

This time, we will add randomness with a Float variable.

Also, since we want to add randomness to the X and Y axes, create two Random Range nodes.

Random Range

Vector3 Create(X, Y, Z)

Connect the nodes as shown below.

The upper variable in Random Range is the minimum value, and the lower variable is the maximum value, which will generate a random number within that range.

This time, set the X-axis to -4 to 4 and the Y-axis to 0 to 3.

Connect nodes

Use Instantiate to Create Objects and Add Them to the List

We can use Instantiate to create objects, so we’ll use it to create the targets.

First, create a Prefab for the target. Click the + button in the Hierarchy, then click 3D Object → Sphere to create a Sphere.

Name it [Target].

Create a Sphere

Drag and drop Target into the Asset folder in the Project window to turn it into a Prefab.

Drag and drop to create Prefab

After converting it to a Prefab, delete the Target from the Hierarchy.

Drag and drop the Prefabbed Target into the Graph Editor, and when the following window appears, press Enter to add it.

Drag and drop the Prefabbed Target into the Graph Editor

Add Instantiate and Get Identity to the Graph Editor.

Instantiate, Get Identity

Instantiate, Get Identity

Connect the nodes as shown below. Here is an explanation of each port on the Instantiate node:

Get Identity contains a Quaternion value of (0,0,0,1).

Connect nodes

Run the program. A [Target] is now generated at random coordinates.

Generate [Target] at random coordinates

Use a For Loop to Assign Numbers to the Objects in a List

Add an Aot List type List variable. Name it [TargetList] and add it to the Graph Editor.

Add an Aot List type List variable

Add the following nodes to the Graph Editor:

• Add Item
• Count Item
• For Loop
• Get List Item
• Integer To String
• Set Name

※ Only unclear node images are provided.

Integer To String

Get List Item

Set Name

Connect the nodes as shown below.

The instantiated object is output from the lower right port of Instantiate, so use Add Item to add it to the list.

The middle left port of Add Item connects to the list to which you want to add, and the lower port connects to the object to be added to the list.

After that, rename the Targets in the list.

The For Loop repeats the process connected to the Body for a specified number of times.

The First port has the initial value input.

The value in the Step port is added to the First value with each iteration, and when it equals the Last value, the For Loop ends, and the process exits through the Exit port.

Here’s what happens after the Body:

The Index outputs the current loop count as an Int.

To String is used to convert the Index to a String.

The list is numbered starting from 0 based on the order in which items are stored.

Get Item retrieves the information stored in the list at the number connected to the Index.

Finally, Set Name is used to rename the objects.

The object to be renamed is connected to the second port from the top, and the new name is connected to the port below it.

Connect nodes

Run the program. The generated objects can now be numbered sequentially from 0.

Objects numbered sequentially from 0

Limit the Number of Targets Generated

Add the [Target List] variable to the Graph Editor.

Add the following nodes to the Graph Editor:

• Count Items
• Greater
• If

※ Only unclear node images are provided.

If

Add these nodes after On Update.

This time, we will generate up to four objects.

Enter 3 into Greater (the count starts at 0, so 0 through 3 counts as four items).

When the elements in [Target List] exceed 4, Greater will return True, preventing the process after If from executing.

Connect nodes

Run the scene. You can now limit the number of targets generated to four.

Limit the number of targets generated to four

Here is an overview of all the Visual Scripting nodes used this time.

Overview of the nodes

The next article will introduce a mechanism where targets disappear when clicked.

Introduction to Unity Visual Scripting Part 8: Creating a target game using Raycast and List (Part 2)

The post Introduction to Unity Visual Scripting Part 7: Creating a target game using Raycast and List (Part 1) first appeared on STYLY.

Introduction to Unity Visual Scripting Part 5: Basic operations on objects using AddForce and TransForm

This time, we will explain how to implement collision detection using Collision.

Collision-Based Hit Detection

Add an empty GameObject to the Hierarchy and name it [HitManager].

[HitManager]

Attach a Script Machine to [HitManager], create a new graph in a folder called Macros, and save it there.

Name the graph [HitGraph].

Attach Script Machine to [HitManager], save it in the Macros folder, and rename the graph to [HitGraph].

Click the + button in the Hierarchy and create a Cube from 3D Object. Name it [TopObj].

[TopObj]

Set the Position of [TopObj] to (0, 5, 0), and attach a Rigidbody from AddComponent.

Make sure to uncheck the Is Trigger option in the Box Collider.

Attach Rigidbody and uncheck Is Trigger in Box Collider.

Next, add another Cube to the Hierarchy and name it [UnderObj].

Set the Position of [UnderObj] to (0, 0, 0).

[UnderObj], (0, 0, 0)

Preparation is complete.

Add a GameObject type variable [HitObj] to the HitGraph’s Variables in [HitManager], and set its Value to TopObj.

Set Value to TopObj

Add On Collision Enter, Debug.Log, and String Literal to the Graph Editor, and add [HitObj] from Variables.

Add On Collision Enter, Debug.Log, String Literal

Add On Collision Enter, Debug.Log, String Literal

Add On Collision Enter, Debug.Log, String Literal

This Collider is what will be used for collision detection.

Collider

On Collision EnterThis node is executed when objects with Colliders collide.On Collision StayThis node is executed continuously while objects with Colliders are in contact.On Collision ExitThis node is executed when objects with Colliders separate.

The left port connects to the object that is involved in the collision.

The right port contains information about the object that the Collider has collided with.

The Contacts port stores the collision points, normals, and the two colliders involved in the collision.

The Impulse port stores the impact of the collision.

The Relative Velocity port stores the relative speed of the other object at the time of collision.

The Data port contains information about the other object.

Connect the nodes as shown below. In this case, we will have On Collision Enter execute when something collides with HitObj.

Connect nodes

Run the program.

Displaying the collided object’s information [UnderObj] in the Console

When objects collide, the information of the collided object [UnderObj] is displayed in the Console.

Hit Detection Using Triggers

Check the Is Trigger box on the Box Collider of [TopObj].

Check Is Trigger

By checking Is Trigger, the objects will no longer collide with each other and will pass through each other.

Add On Trigger Enter to the Graph Editor.

Add On Trigger Enter

Disconnect On Collision Enter and connect the nodes as shown below.

Connect nodes

Since Trigger does not involve actual contact, there is no information such as collision points or impacts.

Run the program.

Displaying the collided object’s information [UnderObj] in the Console

When the objects touch each other, the information of the touched object [UnderObj] is displayed in the Console.

This time, we covered how to create collision detection.

In the next session, we will introduce Raycast and List.

You can check the next article from the link below.

Introduction to Unity Visual Scripting Part 7: Creating a target game using Raycast and List (Part 1)

The post Introduction to Unity Visual Scripting Part 6: How to add collision detection with Collision first appeared on STYLY.

Introduction to Unity Visual Scripting Part 4: Switching screens and displaying scores [Part 2 of the continuous hit game]

This time, we will explain the basic operations of objects using AddForce and Transform.

Moving with AddForce

Add an empty GameObject to the Hierarchy and name it [ObjectController].

Rename GameObject to [ObjectController]

Attach a Script Machine to [ObjectController].

Click New to create a graph.

Attach Script Machine to [ObjectController]

Click New on the Script Machine to create a graph.

Create a folder named Macros, and save it as [ObjectManager] within that folder.

Create a folder and save it as [ObjectManager]

Add a Cube to the Hierarchy, set its Position to (0, 0.5, 0), and add a [Rigidbody] from AddComponent.

This time, we will move this object.

Set Cube Position to (0, 0.5, 0) and add [Rigidbody] from AddComponent

Rigidbody is a feature in Unity that handles physics calculations.

It allows you to add gravity or apply forces to an object.

Rigidbody

Next, add a Plane to the Hierarchy to place this object on.

Add Plane

Set its Position to (0, 0, 0).

Add a GameObject type variable to the ObjectController’s Variables, name it [Cube], and set its Value to the Cube.

Add a GameObject type variable to the ObjectController’s Variables.

Add nodes to respond when the space key is pressed, and connect them as shown below.

Connect nodes

Add an Add Force node to the Graph Editor.

Enter the direction you want to apply force in the Force value.

Add Force

AddForce is a node that applies force to an object.

This time, we want to make the object jump, so we entered (0,300,0). Feel free to try other values.

The second node from the top of AddForce connects to the object you want to move.

Add [Cube] from Variables to the Graph Editor, and connect the nodes as shown below.

Connect nodes

Run the program.

Jump with the space key

Press the space key to jump.

Moving Objects with Transform

Movement

Add Get Position, Set Position, Vector3Literal, and Add to the Graph Editor.

Add Get Position, Set Position, Vector3Literal, and Add

Add Vector3Literal

Disconnect AddForce and remove the Rigidbody from the Cube.

To remove a component that has been added, click the three dots on the right and select Remove Component.

Disconnect AddForce and remove Rigidbody

Add another Cube from Variables to the Graph Editor. In Vector3Literal, enter the distance to move when the space key is pressed.

This time, enter (0,1,0).

Get Position retrieves the coordinates of the object connected to the node.

Set Position assigns the coordinates connected to the bottom port to the position of the node connected to the middle port.

Reconnect the nodes as shown below.

Connect nodes

Let’s run it.

Moved up

Scaling

Add Get Local Scale and Set Local Scale to the Graph Editor.

Add Get Local Scale and Set Local Scale

Disconnect the Get Position and Set Position connections.

Change the value of Vector3Literal to (1,1,1).

Get Local Scale retrieves the scale of the object connected to the node.

Set Local Scale assigns the scale connected to the bottom port to the scale of the node connected to the middle port.

Connect the nodes as shown below.

Connect nodes

Run the program. The object will grow by 1 meter each time you press the space key.

Grows larger with each press of the space key

Rotation

Add Rotate to the Graph Editor.

Add Rotate to the Graph Editor

Rotation is calculated differently from Position and Scale, so a separate function called Rotate is provided.

Disconnect the nodes used for scaling, and reconnect them as shown below.

This time, we will rotate the object by 30 degrees each time, so enter (30,0,0) for the Vector3 value.

For Rotate, connect the current angle to the second port from the top, and the amount to rotate to the third port from the top.

Connect nodes

Run the program. Each press of the space key rotates the object by 30 degrees.

Rotates 30 degrees with each press of the space key

Rotating to a Specific Angle

Add Euler (Euler) and Set Rotation to the Graph Editor.

Add Euler (Euler) and Set Rotation

Add Set Rotation

Disconnect the nodes used for rotation and reconnect them as shown below. Set the value of Euler to (0,30,0).

For Set Rotation, connect the object to be modified to the middle port and connect the Quaternion type variable to the bottom port.

Connect nodes

Run the program. When you press the space key, the Cube rotates 30 degrees on the Y-axis.

Rotates 30 degrees on the Y-axis when the space key is pressed

This time, we learned how to move objects.

In the sixth session, we will introduce collision detection.

You can check the next article from the link below.

Introduction to Unity Visual Scripting Part 6: How to add collision detection with Collision

The post Introduction to Unity Visual Scripting Part 5: Basic operations on objects using AddForce and TransForm first appeared on STYLY.

Introduction to Unity Visual Scripting Part 3: How to calculate time and score [Part 1 of the continuous hit game]

This time, we will continue from the previous rapid tapping game tutorial.

We will add features to switch screens and display scores.

Displaying Text using SetText

Let’s add variables named [ScoreText] and [TimeText] to the GameController’s Variables.

Select TMPro→Text Mesh Pro UGUI as the Type.

For ScoreText, drag and drop the Score from the Canvas in the Hierarchy into the Value field.

For TimeText, do the same with Time from the Canvas.

[ScoreText]&[TimeText]

Add a ToString node to the EditorGraph.

This node can convert Int or Float types to String type (text).

So, you will generally use this node when displaying numbers as text.

ToString

To add text before the numbers, add Concat (Arg0, Arg1) and String Literal nodes to the GraphEditor.

The more Args you have, the more sentences you can concatenate.

Concat (Arg0, Arg1)

String Literal

Enter the text “[Score:]” into the String Literal.

Concat combines two different strings into one. The text that comes first is placed at the top, and the text that comes later is placed at the bottom.

Add TextMeshPro UGUI:SetText to the GraphEditor.

TextMeshPro UGUI:SetText

Score Calculation

Let’s start by implementing the score calculation feature.

Connect the nodes as shown below, continuing from the previous score calculation.

Add [ScoreText] from Variables to the GraphEditor. Connect the UI of TextMeshPro UGUI that you want to change to the middle port of SetText, and connect the text to be displayed to the bottom port.

Connect nodes

This completes the score calculation part.

Time Calculation

Next, we will complete the time calculation feature. Duplicate the nodes used in the score calculation by pressing Ctrl (Cmd on Mac) + D.

Connect the duplicated nodes to the previous time calculation nodes.

Add TimeText from Variables to the Graph Editor.

Connect the middle port of SetText to TimeText, and connect the previous time calculation node to ToString.

Set the content of the String to [Time:].

Connect nodes

This completes the time calculation feature.

Displaying the Time-Up Screen using SetActive

Since the time limit for the rapid tapping game is 10 seconds, let’s display the time-up screen when the time is up.

Add a Boolean variable [Stop] to Variables, with the Value set to False (the checkbox is unchecked).

Add the following variables to the GraphEditor: TextMeshPro UGUI type variable [ResultText] with the Value set to Canvas→TimeUp→ResultScore, GameObject type variables [ResultUI] and [RestartButton].

Set the Value of [ResultUI] to Canvas→TimeUp.

Set the Value of [RestartButton] to Canvas→TimeUp→RestartButton.

Add variables

Add the previously created variables and [Time] to the GraphEditor.

Add If, Less, On Update, and SetVariable nodes to the GraphEditor.

If, Less, On Update, SetVariable

Connect the nodes as shown below. Using Less allows you to compare numbers.

This time, when the remaining time is less than 0, the Less condition matches the state of the [Time] object, and the process runs from the True branch of If, setting the Boolean variable [Stop] to True.

Connect nodes

Next, let’s display the time-up screen using SetActive.

SetActive is a node that sets an object to active or inactive.

Active/inactive refers to whether all functions of an object are enabled or disabled.

When an object is inactive, it stops the functionality to display it on the screen, making it invisible.

Add SetActive to the EditorGraph.

SetActive

Continue connecting the nodes. Connect the nodes as shown below.

Connect the object you want to set as active to the middle port of SetActive.

The bottom Bool value allows you to choose whether the object is active or inactive.

If the checkbox is checked, the object is active. If it is unchecked, the object is inactive.

Connect nodes

This time, we want to activate the ResultUI, so check the box.

Next, let’s display the result of the score.

Duplicate the node used to display the score text by pressing Ctrl (Cmd on Mac) + D.

Ctrl (Cmd on Mac) + D

Add Score from Variables.

Continue by connecting the nodes as shown below.

This time, since we want to display the result in [ResultText], connect [ResultText] to SetText.

SetText→[ResultText]

This completes the feature to display the time-up screen.

Scene Transition using LoadScene

We will enable the restart functionality by reloading the scene when the RestartButton is pressed.

Add an On Pointer Click event, similar to the score button.

Add LoadScene (Scene Name) to the GraphEditor.

LoadScene (Scene Name)

You can transition to another scene by entering the name of the scene to transition to in the SceneName field of Load Scene.

This time, enter [ClickGameSample] as the SceneName in Load Scene.

Connect the nodes as shown below.

Connect nodes

Let’s run it.

Time&Score

This completes the rapid tapping game.

The post Introduction to Unity Visual Scripting Part 4: Switching screens and displaying scores [Part 2 of the continuous hit game] first appeared on STYLY.

This time, we will use what we have learned in the first, second sessions to create a rapid tapping game.

The rapid tapping game tutorial is divided into two parts, and this article is the first part.

Previous articles can be found at the following links

Introduction to Unity Visual Scripting: Learn the basics of connecting nodes

Introduction to Unity Visual Scripting Part 2: How to display “Hello World” using If statements, key input, and coroutines

Overview of the Rapid Tapping Game

The game challenges you to see how many times you can click a button within 10 seconds.

FIN

Installing a Package in Unity

Please download the sample with only the UI layout done.

https://github.com/Manufuki/ClickGameUISample.git

Click the green “Code” button and select Download ZIP. Extract the downloaded ZIP file.

If you get stuck,

download the example created by the author.

https://github.com/Manufuki/ClickGame.git

Github

Click Asset→Import Package→Custom Package.

Asset→Import Package→Custom Package

Select ClickGameUpdate and click “Open”.

ClickGameUpdate→Open

Click Import.

Import

Click Import TMP Essentials.

Import TMP Essentials

It may not be displayed depending on your environment, but there is no problem.

Button Input with Visual Scripting

Open the “ClickGameSample” scene from the imported package.

Add a GameObject to the Hierarchy by clicking CreateEmpty, and rename it to [GameController].

Attach a Script Machine to [GameController] from AddComponent.

GameController→Script Machine

Click New on the Script Machine to create a graph.

Create a folder named Macros, and save it as [GameManager] within that folder.

Macros→GameManager

Add On Pointer Click to the GraphEditor.

On Pointer Click

Add a GameObject type variable to Variables.

Name the variable [Button] and set the Value to the Button in the Canvas.

Add GameObject Variables

Drag and drop the Button into the GraphEditor and connect the nodes as shown below. This completes the button functionality.

By connecting the object that acts as the button to the left port of On Pointer Click, you can make it execute when that object is clicked.

Connect nodes

Calculations with Visual Scripting

Next, we will perform score and time calculations for the rapid tapping game.

The basic calculation nodes are as follows:

Main nodes

This time, we will use the Add node. There are different types of Add, and the variables to be used are in parentheses.

Since Generic supports all variables, it is generally recommended to choose the Add node labeled Generic.

The same applies to other calculation nodes.

Generic

Add Int type and Float type variables to Variables.

Name the Int type variable [Score] and set the Value to 0.

Name the Float type variable [Time] and set the Value to 10.

Add variables

Add the [Time] and [Score] variables to the Graph Editor.

Score Function

Let’s start by creating the Score function.

Add an Integer Literal.

Integer Literal

Enter 1 into the variable.

1

Add a Set Object Variable.

Set Object Variable

By using Set Variable, you can assign a value to a variable. Set the variable part to Score in the second port from the top.

Connect the object storing the variable to the next port down, and connect the value to be assigned to the bottom port.

Score

The node should look like this:

Connect nodes

Time Limit

Next, let’s add the time limit feature.

Add Subtract, Get Delta Time, and If nodes to the Graph Editor.

Subtract

Get Delta Time can retrieve the time between the previous frame and the current frame.

Get Delta Time

If

Add a Set Object Variable. Set the variable to be assigned to Time.

Then connect the nodes as shown below.

Connect nodes

Run the program and focus on the Variables.

When you click the button, the Score variable will increase by 1 each time.

The Time variable decreases in accordance with the passage of time.

Play scene

This time, we covered score calculation and time calculation.

In the next second part, we will learn about displaying text, using SetActive, and scene transitions.

You can check the second part of the article from the link below.

Introduction to Unity Visual Scripting Part 4: Switching screens and displaying scores [Part 2 of the continuous hit game]

The post Introduction to Unity Visual Scripting Part 3: How to calculate time and score [Part 1 of the continuous hit game] first appeared on STYLY.