• Showcase
  • Sonic Fan Project!

I've been working on creating a Sonic character using Spine for animation over the past month. This is just a little sample of what I have so far. I'll be posting more animations soon. I think I have like 6 animations nearing completion now. I was going to bundle them all together but I'm just gonna piece meal them out.

My motivation for doing this is that I believe Spine is the future of 2D animation in video games due to its lightweight nature, smooth frame rate, and ability to be edited at runtime. I've put a lot of effort into making my Spine animations function more like 3D models. I'm still experimenting with what I can do, but so far the results look promising. Once I have enough animations done I am going to be putting this into Construct 3 and I'll make a build for people to play.

One thing I'm currently trying to figure out is how to add normal map shadows to my Spine rigs. Indie game developers who create pixel art games use normal maps for their shadows and it looks great. I'd like to replicate that effect. Can anyone offer any suggestions or advice?

Related Discussions
...

Great, the movement of the flicked nose is cute 😃 I'm looking forward to seeing all the animations!

Regarding how to add normal-map shadows, are you looking for how to create the texture? If so, I think this article might be helpful, although this is how to create assets for Unity:
https://blog.unity.com/en/games/2d-art-creation-in-dragon-crashers

If what you are looking for is how to use your normal-map at runtime, asking it here is hard to find by other Construct 3 users, so I suggest you make a new post on Runtimes:
viewforum.php?f=7

Or, you may want to ask your question on the following thread, which is posted by the Construct 3 Runtime developer:
Construct 3 Spine runtime released

That sonic animation is very cute! :nerd: Looking forward to seeing more! 8)

Misaki escreveu

Great article! I didn't realize how intricate and useful hand-painting normal maps could be. Knowing the meaning of each color is key. This is exactly what I was looking for and it makes sense, considering the use of normal maps in recent pixel art games. I'm interested in trying Affinity Designer as well. I'd love to break free from PS.

Also I'll be sure to ask the C3 Spine developer about how normal map painting is implemented in their runtime.

Harald escreveu

Thanks Harald! It's much appreciated!

By the way would it be possible for a mod to combine my Mickey Mouse thread and this thread. Titled 'Makapixel's Spine Projects' I have a lot more in store. I'm gonna tackle a Nintendo character next after Sonic (still more to show yet) I don't want to take up a bunch of individual threads. That seems unfair.

mikedssx escreveu

By the way would it be possible for a mod to combine my Mickey Mouse thread and this thread. Titled 'Makapixel's Spine Projects' I have a lot more in store. I'm gonna tackle a Nintendo character next after Sonic (still more to show yet) I don't want to take up a bunch of individual threads. That seems unfair.

I'm afraid not even moderators can combine or rename threads. Feel free however to open a new thread and re-post your previous content that you would like to merge, it's not a big issue 🙂.

There are software tools available for generating normal maps from images.

You can use Laighter (free/open-source https://github.com/azagaya/laigter), I myself use SpriteIlluminator which is has slightly more features but is paid. They use algorithms to generate normal maps based off some parameters you give to it (embossing and beveling mostly).

I'm using it in my RPG game and the results are quite good for how little effort it takes. To get it to work well with Spine, in the atlas export uncheck the Rotation checkbox and add sufficient padding for box-selection. This way everything will be facing the same direction and you can generate a normal map that will perfectly map to the full atlas.

Hey jawny thanks for the link. I checked it out, bought the software and I'll be trying it out soon. I was also taken down a rabbit hole after doing a bit of research and I found this video. Figured I should share it too incase there are any other construct devs here. Hey jawny by the way, when you use normal maps on your spine atlases what happens when the character rotates there arms does that change the position of the lighting or is it entirely based on the sheet and because it never rotates or moves the normal map doesn't either?

Thanks for sharing your findings @jawny and @mikedssx!

mikedssx escreveu

Hey jawny by the way, when you use normal maps on your spine atlases what happens when the character rotates there arms does that change the position of the lighting or is it entirely based on the sheet and because it never rotates or moves the normal map doesn't either?

While I cannot speak for Construct 3 shaders specifically, there is one general thing to understand with normalmaps: the red channel does not correspond to "right", it rather corresponds to "positive U" direction (within the atlas texture that's right). Similar with the green (positive V direction, within the texture that's up) and blue (direction orthogonal to surface) channels respectively. Now this is where tangents and bitangents (or binormals) come into play: positive U direction is described by the tangent, positive V direction by the bitangent (binormal) and obviously, orthogonal-to-surface direction by the vertex-normal (the input normal, before the normalmap is applied). These three vectors are deformed and rotated along with your animation, so when an arm is rotated, its tangent, binormal and normal vectors are rotated accordingly. This ensures that a normal map is acting as expected in combination with transformations like rotation.

So to answer your question: the only problem that needs to be prevented is that a normalmap is generated for each attachment, and then the attachment is rotated 90, 180 or 270 degrees by the texture packer, which does not know that red must point in positive U direction. So rotation needs to be disabled in the texture packer in this case. When generating a normal map from the packed output atlas texture (after attachments have been rotated during packing) instead of single input attachments, rotation can be enabled in the preceding packing step. The drawback of generating the normalmap from the packed atlas texture is that when re-packing attachments slightly differently, the normalmap also needs to be re-created accordingly.

A side note: There are special implementation details where bitangents (binormals) are generated from the normal and tangent to simply save vertex data and computation time, or even the tangents can be calculated in the fragment shader.

7 meses depois

I've been really interested in what Sonic would look like in a 2D game if he looked like his old 90s art. I like pixel art and sprites as much as the next guy but I much prefer hand drawn or hand drawn like images.

I created an extremely flexible rig but with that came a lot of manual animation work. Also the crunchiness of the final art needs work. Also I didn't do any rough anims for this, all of it was cobble together in Spine by eye. I'd probably do rough poses next time as it's faster.

By the way I created the art from old 90s concept art of Sonic by Naoto Oshima, one of the fathers of Sonic. All art created from white squares, rectangles and circles and all colors were adjusted using slot colors. Voice samples taken from Sonic Adventure 2 (Ryan Drummond's Sonic) This was just a fun little experiment.

    mikedssx I love the movement when he jumps and makes a vertical spin, it's very Sonic! 😃
    After watching this animation several times, I noticed that the inner part of the rear ear seems to suddenly disappear when the landing movement (In video time, it happens around 0:01). Other than that, it is very smooth and nice!

      Misaki Thanks Misaki! As for the inner part of the rear ear. I guess I missed that. I need to start making a physical checklist that I go down line by line to make sure I don't miss these mistakes!

      Very cool animation again, @mikedssx! 😎
      I have to state however that Sonic usually makes forward (clockwise) flips! 😉 This brings me to the next character I would love to see animated in Spine: Guile from Street Fighter II doing his iconic backflip kick! 😃