Outlining character animation - methods?

Started by
5 comments, last by LorenzoGatti 11 years, 5 months ago
Hello guys. Sorry for my English in advance.

In brief: I’d like to get my game characters outlined like in the game MyBrute (http://www.mybrutecheats.com/wp-content/uploads/2009/10/team-simulator.jpg)
The character animation consists of a number of images that move around (it all works on OpenGLES2.0, iOS). I’d want to outline the animation dynamically while it’s playing, with all the moving parts.
I’ve already tried:
1. To make a virtual texture out of the animation, then to get the information about this texture and make the stroke (but FPS goes down a lot), then to draw the texture in the scene.
2. To make a virtual texture out of the animation and then to use a pixel shader on it while rendering.
I have noticed that drawing a texture lowers FPS by 10%, which is quite strange to me.
Probably, someone could think of any solution? And why you think drawing a texture affects FPS so much?
Thanks a lot in advance!
Advertisement
You can probably do this in a shader.

Something like... if this pixel is transparent, then test the pixels around this pixel to see if any are NOT transparent, if any neighbors are NOT transparent then you are probably a border pixel and can draw it as black instead of it's alpha color.

Keep in mind you will need alpha testing off for this so that you are drawing transparent pixels.

Jeff.

Hello guys. Sorry for my English in advance.


You only need to apologize if it's your native language smile.png


In brief: I’d like to get my game characters outlined like in the game MyBrute (http://www.mybrutech...m-simulator.jpg)
The character animation consists of a number of images that move around (it all works on OpenGLES2.0, iOS). I’d want to outline the animation dynamically while it’s playing, with all the moving parts.
I’ve already tried:
1. To make a virtual texture out of the animation, then to get the information about this texture and make the stroke (but FPS goes down a lot), then to draw the texture in the scene.
2. To make a virtual texture out of the animation and then to use a pixel shader on it while rendering.
I have noticed that drawing a texture lowers FPS by 10%, which is quite strange to me.
Probably, someone could think of any solution? And why you think drawing a texture affects FPS so much?
Thanks a lot in advance!


Never, never, ever use FPS to measure performance-- it doesn't scale linearly! The difference between 1,000FPS and 900FPS is on the order of microseconds. The difference between 60FPS and 30FPS is literally hundreds of times that.

For your actual problem-- I would suggest doing things in three layers: At asset creation time, create a mask texture for each piece that consists of a scaled-up/blurred alpha mask (This could be an interesting read) At runtime, draw all your regular pieces as normal. Next, draw all the bits again, but this time bias the depth value slightly and use the blurred/fake distance field texture. So long as you have depth-testing enabled, fillrate consumption should still be at manageable levels since the original sprites will mask out areas already drawn to (early depth-stencil testing is out, but we don't care since this is an ultra-cheap shader) and we can skip all the complex outline shader work.

EDIT: Figures are approximate :)
clb: At the end of 2012, the positions of jupiter, saturn, mercury, and deimos are aligned so as to cause a denormalized flush-to-zero bug when computing earth's gravitational force, slinging it to the sun.
A bit offtopic but:
Difference between 1000 FPS and 900 FPS is 1 ms. Difference between 60 FPS and 30 FPS is 16.6 ms.

A bit offtopic but:
Difference between 1000 FPS and 900 FPS is 1 ms. Difference between 60 FPS and 30 FPS is 16.6 ms.

(1/30-1/60)/(1/900-1/1000) = 150

I guess you meant 0.1 ms.
If I understand correctly and you have a texture sprite-sheet for your characters already, I'd just load it into a texture object, bind an FBO to write to a second texture, and use a pixel shader to run a sobel edge-detection filter on it (these are pretty well documented, but if there's a problem just ask around here). Then just blit the result texture into your original one. That should leave you with one texture with all of your outlines baked in to the animation already.

This is something you should only need to do once, when the game starts up (or even offline, and save the results to a new sprite-sheet for the game to use).

Something like... if this pixel is transparent, then test the pixels around this pixel to see if any are NOT transparent, if any neighbors are NOT transparent then you are probably a border pixel and can draw it as black instead of it's alpha color.

This is the proper way to build outlines; to do it in a preprocessing step you need to leave enough transparent pixels between adjacent sprites in your sprite sheet and account for outline size in your draw calls, but it isn't a big deal.
Do you have variable scaling, or other features that require using a shader to generate throwaway outlines every frame?

Omae Wa Mou Shindeiru

This topic is closed to new replies.

Advertisement