Preliminary Exploration on the Art Workflow of “Dead Cell”

Basic ideas:
Use in Maya aiutility Material rendering “pixel level”colornormal Sequence slicing.
Use “Load File into Stack” in Photoshop to arrange the sequence hierarchically.
To psb The format is saved in unity, modify secondary textures versus pivot

1. Analyze the workflow of dead cells

When I came into contact with “Dead Cell” in 18 years, the author discovered the characteristics of its art:

Although it is a pixel drawing, the flow of the action is not like drawing frame by frame, it is more like three rendering two.
Different light will have different shading effects on the sprites. If it is a normal, I can’t believe it is a normal map drawn by hand.
Some monsters are only distinguished by color and armor. If the color is directly replaced to be understandable, some monsters have more accessories and props than the other. If you still repaint it frame by frame, it feels unreasonable.
But at that time, Xiaobai still didn’t have enough knowledge reserves to solve this problem. Until recently, he thought of it and started preliminary exploration.

Use the peeling tool to extract the source material of “Dead Cells”. The animation sequence is arranged in a disorderly manner, not like it is arranged directly by pixel pitch, but used psb Format, save the sequence in layers.

The color sprites only retain the inherent colors, and no shadows are added. Each color sprite uses a normal sprite. This uses sprite editor It is also possible to assign a map to it.

I tried it roughly according to this idea, and got a final try, only using sprite Sequence, each sequence corresponds to a piece of normal information.

Share the operation process below.

2. Use Maya to export the sequence

2.1 Pixel-level rendering

To render the picture into a pixel style, you need to turn off anti-aliasing. Here I use the Arnold renderer. arnold renderer Lieutenant General filter type Set as closest Mode, and set the graphic storage to 32*32(According to project requirements here, but it is recommended to use 2 To the power of).

And use maya hardware When rendering, turn off all options directly in anti-aliasing, if you use maya software In the anti-aliasing quality, adjust the edge anti-aliasing to a low quality.

2.2 Set the intrinsic color and normal

Also use the Arnold rendering mode, in hypershade In arnold→aiutility The texture template creates two new shaders:

① One is used to render the intrinsic color, and the shader mode To flatcolor mode To colorcolor Node link basecolor Stickers.

② One is used to render the normal, and the shader mode To flatcolormode To normal, The others do not need to be changed.

2.3 Rendering sequence

This part directly uses the traditional process: set the start frame and end frame in the rendering settings, and then use Maya’s rendering sequence function to export tiff Format sequence image (used here png Will not keep alpha Channel, export tiff The format does not affect the subsequent entry into unity).

3. Use Photoshop to load the sequence

Enter Photoshop, select “File” → “Script” → “Load File into Stack”, select the sequence file, and finally click OK.color versus normal Load once each.

In this way, you can prepare to enter the unity, or you can create a sequence frame from the layer first, and preview the animation in ps for any problems.

4. Enter unity and post modification

4.1 Import unity

In Photoshop, it is saved as a psb large file format and imported directly into unity.

When exporting Ps files, you can refer to the naming suffix:Normal sprite (XXX_NormalMap.psb) and color sprite (XXX_BaseColor.psb).

4.2 Post-modification

4.2.1. Pixel-level items usually set: (insoecrtor attribute)

① Set Filterr to Pixel;

② Compression is set to None.

4.2.2. Slice settings: (This step is for the XXX_BaseColor.psb operation, enter from the sprite editor button)

① In Slice, set pivot to bottom (according to project requirements here, pivot is the unity of anchor points, usually the anchor point is placed at the bottom in the character animation),mathod is set to smart (this step is very important, it is a pit).

② spriteEditor → secondart textures, set in the small window, name → _NormalMap, Texture select the imported normal map file.

4.2.3. Lighting settings

In unity, 2D light rendering usually uses URP (universal RP). In the Light 2D setting, you need to turn on Use Normal Map to complete it.

5. Summary

In the development speech of the art director of “Dead Cell”, it was mentioned that they had made a small tool to carry out this set of workflow, but the author speculated that it may be a tool that takes the entire process in place in one step (save the need to import the middle into the stack Step), or an auxiliary tool for uniformly processing pixels and batch modifying colors (this can be inferred from the protagonist’s blue pants in 3D and yellow pants in 2D. It may be a tool similar to ps to modify colors).

Or related to the emission channel, which can uniformly process the color information of the light emitted in the slice.

In addition, the efficiency of traditional 2D pixel painting in art animation is too low. “Owl Boy” is a mechanism of 2D pixel art, but even if the game process is not long, its development still takes 10 years. It can be seen that the traditional pixel animation It takes a long time, so “Dead Cells” provides us with a new idea to use 3D to 2D for efficient animation work.

Using screen post-processing to unify the pixel style is also a new idea.

In short, traditional craftsmanship will inevitably decline in the face of industrialization. The industrialization trend of game research and development must require us to continuously explore more efficient workflows. Just like the film and television industry, Disney will not give up 3D transformation because of the more ingenuity and feelings of hand-drawn animation.


Art Design Deep Dive: Using a 3D pipeline for 2D animation in Dead Cells
Dead Cells 3D to 2D Animation crunching

Author: IWSE


Related Posts