Creating Stylized VFX in Unity

Etienne POV, a winner of Riot Creative Contest 2017 (Stylized VFX category) shared some details of his stunning entry created in Unity!

Etienne POV, a winner of Riot Creative Contest 2017 (Stylized VFX category) shared some details of his stunning entry created in Unity!

Introduction

Hi, my name is Etienne, I’m 22, and I’m from France. I have been a Game Art student for 5 years now and I also work for Shiro Games as a VFX artist.

I started learning VFX last year because I was interested in it and that’s one of the fields my courses didn’t cover so I was very curious about how it worked.

To be honest, when I started my Game Art studies, I didn’t know what I wanted to do later. But there was something I was sure about: I wanted to create video games. So, at first we learned how to draw and I thought “oh, I want to be a concept artist that’s so cool!“. Then, we learned 2D animation and I was like “oh, that’s awesome too, so, I want to be a 2D animator now!“. As time went on, we learned 3D and my reaction was the same! I ended up loving all the fields and couldn’t choose one to specialize in. But, once I discovered VFX, I realized it covered everything I love. You need a solid culture of everything there, like 2D skills, 3D skills, shader, motion, timing, colors, composition, etc. That’s why I enjoy VFX the most!

Task approach

Before working on a VFX, I think about the theme so that I can do some research about the style and the relevant codes. In the case of the Riot Creative Contest 2017, it was Star Guardian. Then I think about the timing, how many parts the VFX is going to have and the way it is all going to move. So, I divided the work into 6 parts:

  1. Summoning the arrow (Anticipation)
  2. Transforming the arrow (Aftermath, but also a second Anticipation)
  3. Shooting the arrow
  4. Huge star shape explosion (Climax)
  5. Stun status effect (Aftermath of the “Huge star shape explosion“, but also Anticipation for the “Stars explosion status effect“)
  6. Stars explosion status effect (Aftermath of the “Stun status effect“)

Once I am satisfied with what I have, I take a blank piece of paper to gather all my ideas and everything I find cool to put in the VFX (like hit impact, symbols, shockwave, etc.). I call that a laboratory theory part because all the ideas you gather on the paper need to be tested. It’s also a step where I have to think about how to harmonize all the different parts of the VFX without creating a mess.

Since it was a Star Guardian theme, I knew I would need a lot of Stars Alphas textures, and also some cool trails to achieve good looking shooting stars effect.
For the colors, I chose pink, a common color in Magical girl theme, and its complementary color – yellow.
I wanted to use a magical girl reference, so I thought it was a good idea to set up the same kind of animation to the arrow’s transformation (from a galaxy skin to its true form).

VFX structure and software 

For this project, I used Unity, Shaderforge for shaders, Photoshop for the textures and 3ds Max for the 3D model. 

For the first part (the arrow summoning) I used a mesh with a shader that masks out the arrow along the X-axis. I remapped the mask and recolored it with a gradient to have this glowy transition.

I added an animation on the star particle emitter so that they would follow the arrow’s apparition.
And the same goes for the shooting star.

Once the arrow hits the B sphere, there’s a star explosion blending with the ground. The shader I used here works just like the arrow’s transformation. A mask on the Y-axis with a remap on it helped to achieve this color gradient.

As for the arrow transformation, it doesn’t really have anything to do with materials or deformers. It’s just a scale animation on the mesh!

Shooting elements

Shooting elements are animated through the trajectory. For the twin trail, there’s a simple rotation by a common center pivot. And since they derive from the arrow, they will rotate on their common center pivot and translate in the world. This is how I created the shooting trajectory trace.

As for the final conclusive hit with the flying stars and the star pattern on the ground, I combined a bunch of VFX together to create a ‘’beauty shot’’. There was a huge work to do in term of composition and balance in order to make this effect interesting and homogenous.

Once I was happy with how the beauty shot looked like, I animated everything.

On top of the star 3D model, I added another mesh covering the star’s edges to add a halo around. To make it more fabulous, I added some rays. The final touch here was the stars and the trails to make it look more magical!

Feedback

When making a readable VFX for a stylized scene, you need to pay a lot of attention to the overall shapes and colors. I did a lot of iterations where I had to add/delete some VFX because sometimes there were too many particles and it was not readable. Same goes for textures when the shapes were too complicated and created too much visual noise.
In parallel, you have to do a lot of tweaking on the timing for the VFX to be at its best and catch the spectator’s attention.

This type of VFX is game-friendly, even for mobile, however, it will need some optimization of shaders since I used a heavy master shader on all my particles. I was too short of time to optimize them as much as I wanted for my contest entry!

Etienne POV, FX artist at Shiro Games

Interview conducted by Kirill Tokarev 

Join discussion

Comments 7

  • Anonymous user

    Amazing Skill VFX effects!!!!!

    0

    Anonymous user

    ·4 months ago·
  • grigorimagid

    I'm Just Starting to get into VFX For Games, and this breakdown has value to me. thanks for sharing :)

    0

    grigorimagid

    ·3 years ago·
  • Dois

    Wow... excellent work. I feel so inadequate after seeing this.

    0

    Dois

    ·4 years ago·
  • 罗鑫

    酷啊

    0

    罗鑫

    ·5 years ago·
  • ZeroTwo

    非常棒的创意 谢谢你的分享

    0

    ZeroTwo

    ·5 years ago·
  • Zubair

    Really appreciated your creativty..

    0

    Zubair

    ·5 years ago·
  • Anonymous user

    Amazing Tutorial!
    Thanks for sharing

    0

    Anonymous user

    ·5 years ago·

You might also like

We need your consent

We use cookies on this website to make your browsing experience better. By using the site you agree to our use of cookies.Learn more