Stylized VFX and Animation Production for Games
Events
Subscribe:  iCal  |  Google Calendar
Los Angeles US   27, Sep — 1, Oct
Moscow RU   4, Oct — 8, Oct
Prague CZ   5, Oct — 7, Oct
São Paulo BR   10, Oct — 15, Oct
Latest comments

We stream high end result to hololens from Unity so imagine this through an AR HMD!

Very informative thread, thank you! Inspiring and reassuring to see the process behind such amazing renders. I started using UE4 a month ago, for a work in my firm and I'm still struggling with some concepts! I wish to see more article like this! Thibault (from France)

Your post is very good and meaningful. How long will it take you to write and post? thank you for sharing slither io

Stylized VFX and Animation Production for Games
14 September, 2018
Interview
VFX

Woo Kim talked about his stunning VFX made for Dungeon Hunter Champions: splash, character and background animation, shaders, the path of generalists and more.

Introduction

Salut! My name is Woo Kim, and I’m from Korea. I’m working as Senior VFX Artist at Gameloft Montreal. Recently I’ve been participating in Dungeon Hunter Champions project. My main role is making VFX for UI, but I also make some in-game VFX.

My career path is a little bit complicated.

At the very beginning, I was a General 3D character artist. I did concept art, modeling, texturing, rigging, and animating. When I started working at my first company, I didn’t know anything and could only do drawing with pencil on the paper. So it was super hard because I had to learn multiple software solutions at the same time and do everything on my own. But I learned many things and I began dreaming about being game art generalist. As a result, I tried to establish my own company (and become Art Director) but completely failed. So I ran away from the game industry and became a motion graphic designer. Two years later when I received an offer from a game company, I hesitated. However, my love for game art eventually made me come back to the game industry.

I made a lot of videos within a couple of years, that’s why the companies invited me to be a VFX Artist. At that time, I found a lot of fun in the game VFX field and it perfectly fit my skillset because I had some knowledge of FX, 2D & 3D art, motion graphics, and some script. However, I also had a desire to be a UI Artist because I majored in visual communication design (though dropped out during the last semester) and learned about UI.

Luckily, I got a UI / VFX artist position. I remotely worked as Art Director at a Thailand company and also became a UI Art Team Lead lead at one of the major companies in Korea. After another couple of months, I received an offer from Gameloft.

Some people said my career was too messy, but I can’t agree with that. I think game art isn’t a separate thing, but more organic, and learning various areas of it is increasingly crucial. 

Splash Animation

I made the animation below from only one illustration, so I had to detach every single part and repaint the background. It was the toughest and most boring part.

Layer Structure of Bounty Hunter splash animation (All rights reserved @Gameloft Montreal)

Usually, I prefer to work on the project without any extra plugins as much as it’s possible. Extra plugins can save time and ease the process, but they are not perfect for tiny modification. That’s why I rigged every part through expression (script) with built-in effects by myself.

Facial rigging controllers with Script (All rights reserved @Gameloft Montreal)

If you want to create a cool animation with After Effect, here are 5 essential functions you should know: puppet tool, mesh warp, 3D layer, expression controllers, and script. That’s all.

But a technique is just a technique. I know it’s a cliche but the most important factor is the sense of expression and motion. You should keep observing everything that moves around you and anatomize well-made artworks to enhance your skills. 

Character Animation

When I animate something, the first thing that I do is set the personality of the character. Is she/he composed or pugnacious, thin or heavy, angry or happy? I also imagine the action that has happened right before the current scene, because animation is not isolated. It has its own flow, continuity, narrative, and tells a story to the viewer. Thinking about the source of the current motion will give you extra room for storytelling. You also have to consider the atmosphere: crowded, sacred, ruined, battlefield, etc. The story depends on the environment. After the personality of the scene is set, details appear naturally. 

Champions for loading video. Bounty Hunter, Frog Ninja (All rights reserved @Gameloft Montreal)

For example, the Bounty hunter usually has a fiery temper, but on the loading screen when he is simply preparing for battle expressing madness will be odd. Therefore, I animated him as heavy and taciturn with inner anger. By contrast, the personality of Frog Ninja is playful and funny, and I don’t want to make him look serious.

Hand gesture for Boon Sister (All rights reserved @Gameloft Montreal)

You shouldn’t disobey the principles of the real world too much. We can tweak gravity, elasticity, and friction depending on the genre, but there is always a line. If you cross it (especially unintendedly), the viewer may feel uncomfortable. It will feel fake, ruin the character and interrupt the viewer’s immersion into the story.

Arm animation for Bounty Hunter, Cartoonic Ink, Cartoonic Water (All rights reserved @Gameloft Montreal)

For example, when the Bounty hunter is smashing a demon on the ground, the animation follows physics and isn’t exaggerated too much. On the contrary, ink and water behavior differs from reality because of the art style, yet is kept within the boundaries and tries to imitate real-life liquid main features.

Finger and hair rigging  with Null objects & Scripts (All rights reserved @Gameloft Montreal)

I would love to use some black magic, but as I said before, there is no one-click solution for it. I divide meshes, pin bones, link them through the script, and animate them with the keyframe.

Pre-rendered sequences (All rights reserved @Gameloft Montreal)

Sometimes I use pre-rendered cloth simulation and 3D animation in 3ds Max. But as you’ve noticed, most of my work has a cartoonish style, and in this case, realistic simulated effects or materials (such as fabric, hair, water, etc.) don’t fit.

Background Artwork

The background art is my favorite. It was made by Sergey Samarskiy, he is a really great artist. The images are integrated into the actual engine. In contrast to the splash art animation, here I had to seriously think about optimization and take care of it. I needed to consider the size of textures, polygon counts, draw calls and the actual situation around VFX. The main goal was to make the scene abundant but not distracting since it’s a background, and the champions in front are more important.

To achieve the goal, I set some rules:

  • There should be a large-scale but slow movement
  • The lighting and the color of the sky should not be too intense
  • The background should have its own rhythm for the entire effect & motion

Forest theme (All rights reserved @Gameloft Montreal)

The forest theme is my favorite background. I wanted to make a peaceful forest with a plenty of tiny movements. Most of the time everything is moving slowly, but sometimes a few things speed up or get closer to the camera. These moments are unexpected and break the boring looping feeling.

Another thing I like to make is 3D looking art pieces with an orthographic projection. You can check a few 3D animated flat meshes below.

Future city and  Asia themes (All rights reserved @Gameloft Montreal)

As you’ve noticed, those are just flattened meshes. But you can express the movement and the dimension in completely different ways, for example with skinning. It takes a considerable amount of time and effort but it’s worth it.

A Shader Instead of Lighting

I didn’t use lighting components at all. I know it looks like lighting but in fact, I just used a shader.

Even though the skies below are changing slowly andinsignificantly, the changes are taking place within wide areas. Overlapping a large area caused an overload, so I’ve tried to use a simple shader instead. Technically, it just a mixture of 2 textures or one distorting texture.

Skies for each background, wide area affected but with weak intensity (All rights reserved @Gameloft Montreal)

It was a really interesting work, and I want to give credits to my art director Remi Despret. Without his support, I wouldn’t be able to make it. Merci beaucoup!

Shading Language

I played with Shader Forge for a couple of days when I began to learn shaders. Visual scripting is very handy and I believe it will take a huge part of tech art in the future. But I think it isn’t the best way to fully understand how graphics work. You can achieve a good result via visual scripting tool but if you want to make something awesome that you haven’t seen before, you have to invest your time into studying the fundamentals. I’ve been trying to write custom shader by myself without any plugin. Of course, it is a tough way with a lot of pain and stress if you have an artistic mind. But as you start understanding the nodes and the logic behind them, you are able to make greater artworks. The knowledge of shaders unlocks our imagination, and it actually had a positive effect on my creativity.

I’m not a veteran of tech art, so I am very cautious about giving a piece of advice. I just want to say “don’t try to find an easy way and deal with the challenges right away. Spend time on studying the shading language itself rather than browsing how to avoid doing it. Tools are constantly changing but fundamental techniques and the basic knowledge will not change that easily (at least within a decade).

The Trick Behind the Sphere

The sphere was made with UV mapping trick. I previously wrote an article about it in Korean, so if you know Korean check it here.

An example from the article:

The trick is simple. I slightly tweaked the angle of the spherical UV map and rendered the part behind the sphere in another pass.  It moves in the opposite direction to make my sphere look more like 3D. Any other decorations are made without any tricks. I played with the vertex position, vertex color, rotating UVs, etc. I controlled every property in each object by C# script.

Advice for Future Generalists

I find becoming and being a generalist quite hard, and I’ve been struggling every single moment on the way to this goal. But I want to cheer up the people who are on the same path. It’s very tough, it may deprive you of the well-balanced life, and sometimes other people can underestimate your skills. 2 or 3 years ago I often heard some words like “so, what’s your specialty? Sorry, we don’t need all round handyman.” I found it rude. But right now I know that I have my own special field. It isn’t a common area, and only a few people specialize in it because it’s not an easy one. This area is for professionals who have wide knowledge. So, if you are interested in varying the working fields, expanding the knowledge and skills and feel delighted with being able to handle different tasks, just keep going straight ahead – this is your talent. Just keep in mind three principles:

  • Don’t care about negative outside interference. Be brave!
  • Carefully choose the subject to learn. There’s always a lack of time because we have to study so many things, so beware of wasting time. Don’t follow trendy tools and be focused on fundamental knowledge first.
  • Enjoy your work. Naturally, you’ll be stressed out while creating, but making what you really love and feel passionate about will help you to get rid of the stress.

Thanks for reading my story. Keep it up!

 
 
 

Find more awesome VFX on Woo’s Vimeo, ArtStation and Behance.

Woo Kim, VFX, UI, 2D & 3D Artist at Gameloft Montreal

Interview conducted by Kirill Tokarev

Leave a Reply

Be the First to Comment!

avatar
wpDiscuz
Related
Education
Environment Art Program
Education
Electives
Education
Character Art Program
Education
Environment Art Program