Weekly Report

Hello everyone! This week I worked on changing the color of the sprites.

It is necessary to prepare a shader to realize the color change. It's very professional and difficult.😩But ... unity had a very useful feature called shader graphs!🤗Shader graphs allow you to create shaders without coding by connecting nodes on the editor.

In fact, I haven't coded nothing for the shader this time. I was able to quickly get the color change method that I didn't know how to do the most. It is possible to assign colors by grayscale gradation as in Photoshop's gradation map.

Now, as a condition for changing the color of a fighting game, it is common that the target is pixel art or 3D. Of course Hellversus is neither. Sprites are drawn with antialiased lines and shadows. Skullgirls is the only 2D fighting game with the same conditions. Nobody knew how to do it, the method was a black box … 😭

But I got some hints from the indie fighting game development community. First of all, I was told about the site related to how to make Skullgirls sprites.

• reference1 
• reference2 

What I read from here is that the shadow and the base color are prepared separately. So I prepared two kinds of sprites, shadow and others.

However, if I change the base color with this method, the color of the translucent part of the line drawing will also change. Therefore, I gave up the antialiasing line and tried to change it to a line and Base color drawn with dots.

However, while researching shader graphs, I came up with a way to combine line drawings separately.

This method has been extremely successful and has been the closest to its original purpose! 😉I tested the Zudrada shirt changing to purple.

But there are still problems. This method requires three sprites, line, shadow, and base, which increases management costs and data volume.😩So I asked a community member to teach me how to use RGB channels to include multiple pieces of information in a single sprite. What a wonderful person! 😭I want to thank them someday.

I decided to give the blue channel the line, the green the shadow, and the red the base color information. If you put this together in one image, it will look like ...

Scary💀

The shader graph will be used for final rendering based on this image. During this work, I came up with a way to change the shadow color, so I've implemented it as well.

The result is here. It's almost the same as the original image! 🤣The only thing I can't use antialiasing is the border of the base color that isn't separated by a line, but it's not a big area so I don't really care.

The shader is complete! 👍Next, consider the rules for creating sprites.

The base color refers to the red channel, so sprite creation should be painted this way. However, this is very hard to see and it is difficult to notice unpainted areas and Overhang.🤔

So I made a Photoshop script to change to the above color after painting with easy-to-understand colors. I also created a script to output the palette.

When the output image and palette are loaded into unity, the color of the character is finally changed!

Did it!🥳 

To be honest, I didn't expect it to end this week. Thanks to the community and the developers of unity.🙏

By learning the shader graph this time, it seems that various expressions other than color change will be possible. I can now easily do the glow effect as well.

I plan to use this to create a background effect for Super Arts.

With the establishment of sprite production rules, Zdrada's clean up is finally underway! Also a long time ago, I recruited volunteers for Sprite Paint on Discord, but it seems that I can finally ask for a formal recruitment.

I came up with a good reward for Abyss Tier. That is to request one of the character's palettes! Please look forward to.😉

Next week, I'm planning to produce a sprite copy and bonus content immediately. 

That's all today.
Have a nice day!