In this article, I will explain how to create a concert scene where a model created by VRoid Studio can sing and dance, with particle stage effects.
By understanding the basics, you can use your original model, use a different song, or use original paritcle effects and create a original concert scene.
![Gif_particlelive - STYLY これから作るパーティクルライブの完成イメージです](/wp-content/uploads/2019/03/Gif_particlelive.gif)
This is the final image of the concert scene we are going to create
There are 11 chapters, and there will be 4 articles in this series.
This article will be about chapter 6, and I will explain how to transfer base information such as songs and animations from the CandyRockStar Project (CRS Project).
Transfer base information (Songs, Animations) from the CandyRockStar Project (CRS Project)
We will transfer some songs, animations, particles, and shaders from the CandyRockStar Project (CRS Project), and import them to our project.
Preparation
First, we will change the MainCamera settings to be able to check stage effects more easily with the game view when playing the Editor.
Please change the Inspector settings as in the image below.
![camera001 - STYLY Main Cameraオブジェクトの設定](/wp-content/uploads/2019/03/camera001.png)
Main Camera Object settings
Uncheck Directional Light and deactivate it.
![camera002 - STYLY Directional Lightを非アクティブ化](/wp-content/uploads/2019/03/camera002.png)
Deactivating Directional Light
That is all for the settings.
![camera003 - STYLY 設定完了後のゲームビュー](/wp-content/uploads/2019/03/camera003.png)
Game view with the changed settings
Next, we will start the transferation, so download the CRS Project, and open the project in Unity 2019.3.6f1. The preparation is complete.
Click here to check which Unity versions are compatible with STYLY.
https://document.styly.cc/doc/docs/en-US/creator/creator_plugin_intro/#about-the-corresponding-unity-version
Unity-Chan “Candy Rock Star” Live Demo
https://github.com/unity3d-jp/unitychan-crs
Transfer Song
Type in “unite” in the CRS project search box, and find “Unite In The Sky(full)”.
![project006 - STYLY 曲の検索](/wp-content/uploads/2019/03/project006.png)
Search for song
Select it and then right click → select Show in Explorer and open “Unite In The Sky (full).mp3”.
Drag & drop the mp3 file into your created project, and the transfer of the song is done.
![project007-1 - STYLY 曲の取り込み](/wp-content/uploads/2019/03/project007-1.png)
Transfer Song
Transfer Character Animation
Type in “C86” in the CRS project search box, and find “C86unitychan_003_NOT01_Final”.
![project008 - STYLY アニメーションの検索](/wp-content/uploads/2019/03/project008.png)
Search for animation
Select it and then right click → select Show in Explorer and open “C86unitychan_003_NOT01_Final.fbx”.
Drag & drop the fbx file into your created project, and the transfer of the animation is done.
![project009-1 - STYLY アニメーションの取り込み](/wp-content/uploads/2019/03/project009-1.png)
Transfer Animation
Next, we will set the animation, and check the animation working in the Editor.
Select the “C86unitychan_003_NOT01_Final” you imported, select the Rig tab in the Inspector window, and change the Animation Type to Humanoid and Apply.
![project010 - STYLY Animation TypeをHumanoidに変更](/wp-content/uploads/2019/03/project010.png)
Change Animation Type to Humanoid
Create a new Animation Controller by Right click → Create → Animation Controller.
![project011 - STYLY Animation Controllerの作成](/wp-content/uploads/2019/03/project011.png)
Create Animation Controller
Double click the Animation Controller and open the Animator window, and create a New State by right click → Create State → Empty.
![project012 - STYLY Animation Controllerの編集](/wp-content/uploads/2019/03/project012.png)
Edit Animation Controller
D&D “Take001” which you can find under “C86unitychan_003_NOT01_Final” into Motion in the Inspector window of the New State.
![project013 - STYLY Motionの設定](/wp-content/uploads/2019/03/project013.png)
Motion settings
Finally, set an Animation Controller with VRoid, select Apply Root Motion and check that the animation works in the Editor.
![project014-1 - STYLY Animation Controllerの適用](/wp-content/uploads/2019/03/project014-1.png)
Apply Animation Controller
Transfer Particle effects
In the CRS projects, there are particles that occur according as the character’s hand moves. We will transfer these particles too.
First, we need to prepare with these steps.
Type in “spray” in the CRS project search box, and find the spray folder, so export it.(Right click → Export Package)
![particle000-1 - STYLY CRSプロジェクトからパーティクルのエクスポート](/wp-content/uploads/2019/03/particle000-1.png)
Exporting particle from CRS project
Double click the Package and import it to the project. (UnityChanStage will be created under Assets)
![particle000-2 - STYLY パーティクルのインポート](/wp-content/uploads/2019/03/particle000-2.png)
Import Particle
Next, we will create the Particle.
Open GameObject → Effects → Particle System in the Editor menu.
Change the name to “Spray”, and change the Inspector settings as in the image below.
![particle001 - STYLY パーティクル設定1](/wp-content/uploads/2019/03/particle001.png)
Particle Settings 1
![particle002 - STYLY パーティクル設定2](/wp-content/uploads/2019/03/particle002.png)
Particle Settings 2
![particle003 - STYLY パーティクル設定3](/wp-content/uploads/2019/03/particle003.png)
Particle Settings 3
In order to change Size over Lifetime, adjust it from open editor.
![Gif_particlelive003 - STYLY over Lifetimeの設定](/wp-content/uploads/2019/03/Gif_particlelive003.gif)
over Lifetime settings
There will be 4 vertices, and the Time, Value will be as in below.
? | Time | Value |
1 | 0 | 0 |
2 | 0.086 | 1 |
3 | 0.877 | 1 |
4 | 1 | 0 |
Set the Renderer Mode to Mesh, click the + icon to be able to set 4 meshes, and set meshes from the Particles folder beneath the Spray folder, as in the image below.
![particle005 - STYLY Rendererの設定補足](/wp-content/uploads/2019/03/particle005.png)
Renderer settings
To change the particle colors to pink, edit the Material. Select “effector01”, which is included in “Spray”, and change the Emmission in the Inspector window to pink.
![particle006 - STYLY カラーの変更](/wp-content/uploads/2019/03/particle006.png)
Change Color
D&D effector01 to Material in Renderer, and set it.
![particle007 - STYLY マテリアルの設定](/wp-content/uploads/2019/03/particle007.png)
Material settings
The other settings are as in below. To change effect area, click ▼ and select “Random Between two constants”.
![Gif_particlelive002 - STYLY Random Between Two Constantsで範囲指定](/wp-content/uploads/2019/03/Gif_particlelive002.gif)
Change effect area with Random Between Two Constants
・Start Liftime → 0.2 , 0.7
※Random Between two constants
・Start speed → 0.2 , 1.2
※Random Between two constants
・Start size → 0.03 , 0.2
※Random Between two constants
・Start rotation → -180 , 180
※Random Between two constants
・Simulation space → world
・Scaling mode → shape
・Check the following options and edit
・Emission
Rate over Time → 0
Rate over Distance → 70
・Shape
Radius → 0.04
Randomize direction → 1
・Limit Velocity over Lifetime
Speed → 0
Dampen → 0.08
・Force over Lifetime
x,y,z → -6, -6, -6
6, 6, 6
※Random Between two constants
Space → world
Randomize → Check
・Size over Lifetime
Adjust from open editor in the upper right hand
・Rotation over Lifetime
Angular Velocity → 500 , 2500
※Random Between two constants
・Renderer
Render Mode → Mesh
Mesh → effChip01
effChip04
effChip05
effChip06
Material → effector01
Trial Material → none
Render Alignment → local
Cast Shadows → on
Receive Shadows → Check
Create a Prefab from the Particle
![particle008 - STYLY パーティクルをPrefab化](/wp-content/uploads/2019/03/particle008.png)
Create a Prefab from the Particle
D&D “Spray” from the Hierarchy to the Project folder, and create a Prefab. Then, change the Position and Rotation.
- Position(0, 0.01, 0)
- Rotation(-90, 0, 0)
Move the Spray Prefab to under each of the following character objects.
- J_Bip_L_Hand
- J_Bip_R_Hand
- J_Bip_R_UpperLeg
- J_Bip_L_UpperLeg
Arranging Particle placement
Particle Transfer 2
Next, we will create a confetti particle effect.
First, the preparation steps.
Type in “confetti” in the CRS project search box, and find the Confetti folder, so export it. (Right Click → Export Package)
Double click the Package and import it to the project.
Next, we will create the Particle.
Select Create Empty in the Hierarchy, and name the created object “Confetti”, set Transform as in the image below.
![confetti001 - STYLY 名称とTransformの変更](/wp-content/uploads/2019/03/confetti001.png)
Change name and Transform settings
Create a Particle from GameObject → Effects → Particle System within Editor, and set it as a child object of Confetti.
Set Particle as in below.
![confetti002 - STYLY パーティクル設定1](/wp-content/uploads/2019/03/confetti002.png)
Particle Settings 1
![confetti003 - STYLY パーティクル設定2](/wp-content/uploads/2019/03/confetti003.png)
Particle Settings 2
![confetti004 - STYLY パーティクル設定3](/wp-content/uploads/2019/03/confetti004.png)
Particle Settings 3
Additional Settings
Set the Renderer Mode to Mesh, click the + icon to be able to set 4 meshes, and set meshes from the Confetti folder, as in the image below.
![confetti005 - STYLY Rendererの設定補足](/wp-content/uploads/2019/03/confetti005.png)
Renderer additional settings
Duplicate the created Particle with Ctrl + D, and change Transform.
![confetti006-1 - STYLY パーティクルの複製とTransformの変更](/wp-content/uploads/2019/03/confetti006-1.png)
Duplicate particle and change Transform
Create a Directinal light as a child object of the Confetti object.(Select the Confetti object and right click → Light → Directional light)
Set the Directional light as in below.
![confetti007 - STYLY Directional lightの追加と編集](/wp-content/uploads/2019/03/confetti007.png)
Add Directional light and edit
The confetti particle is done.
Shader transfer
Next, we will tranfer the stage floor.
![Gif_Vizualiser - STYLY ステージ床のシェーダ](/wp-content/uploads/2019/03/Gif_Vizualiser.gif)
Stage floor shader
Type in “Visualizer” in the CRS project search box, and find the Visualizer folder, export it.(Right click → Export Package)
![visualizer001 - STYLY Visualizerフォルダのエクスポート](/wp-content/uploads/2019/03/visualizer001.png)
Export Visualizer folder
Export the stage object too.
![visualizer002 - STYLY stageオブジェクトのエクスポート](/wp-content/uploads/2019/03/visualizer002.png)
Export stage object
Double click the Package and import it to the project.
Then, we will create the stage floor.
Create a Quad object in Hierarchy, and name it “Visualizer”.(Right Click → 3D Object → Quad)
Note:I set Transform Position x, y, z to 0
D&D the “EQfloor” mesh from the stage folder to the Visualizer object Mesh.
![visualizer003 - STYLY Visualizerオブジェクトの作成と設定1](/wp-content/uploads/2019/03/visualizer003.png)
Visualizer object creation and settings 1
The Mesh Collider is unneeded, so we Remove component.
Set mesh renderer as in below. For Material, D&D “Element0” from the Visualizer folder.
![visualizer004 - STYLY Visualizerオブジェクトの作成と設定2](/wp-content/uploads/2019/03/visualizer004.png)
Visualizer object creation and settings 2
Set ShaderNoneBlack to the Texture of Visualizer Shader, and we’re done.(Select → ShaderNoneBlack)
![visualizer005 - STYLY Visualizerオブジェクトの作成と設定3](/wp-content/uploads/2019/03/visualizer005.png)
Visualizer object creation and settings 3
That is all for today’s article!
For the next 3rd article, I will explain how to create the stage, and how to structure the concert using a timeline.
[Related Articles]