Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

So I've been scouring the interwebs for a couple of days with regards to how to implement sprite masking in XNA 4 and C#. Coming from a pet project I did in Flash, this was pretty easy as masks are part of the AS3 library, so implementing one was as simple as giving it a shape, size, and moving the X and Y co-ordinates of the mask to follow my character sprite.

Now I'm looking to do something similar in XNA. Think the Flash move in Pokemon lighting up caves, or, a better contextual example, the torch light effect in Terraria (alas, I can't find suitable pictures, but hopefully the gist is there).

So, essentially, I want to surround my sprite character with a circle - anything within that circle on the map is visible, and everything outside the circle is black.

The ways I've seen people similarly implement masks is via the StencilBuffer, Pixel Shading and via sprite overlay (You have a sprite of your "viewable area", you draw that on top of your player sprite and fill the rest of the viewport with black). Considering the latter two don't really have many directly applicable example projects that I can learn from on the internet (The one applicable StencilBuffer example I found is for WP7 dev, and no Pixel Shader stuff directly solves my problem), I've been leaning more towards the third idea of having a "viewpoint restriction" sprite that you place on top of the character sprite, then fill the rest of the map with black.

Is it possible to do this? And if so, could someone please help and link me to something relevant/give me some sample code/pseudo-code to work from. Again, I don't know if even this is the most effective way or if it's just easier to implement a proper mask with a Pixel Shader or StencilBuffer, but I have no idea how to go about that.

What do you guys think the best solution here would be?

share|improve this question
A simple implementation, assuming that the viewport will be a fixed size is to just draw a texture above everything else with a transparent circle cut out of the middle. It would save processing power by not having to use Shaders, but would however lack the dynamics of them. – Austin Brunkhorst Jul 22 '12 at 8:59

Well, a pixel perfect way would be to use a stencil buffer where you you make the shape you want in advance and set that as the stencil then draw. But a crude method would be to use distance checks and don't draw anything outside that region and then just draw a black frame with a cutout around what you want (sort of like a stencil buffer)

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.