FlatRedBallXna:Tutorials:Clipping Sprites

Introduction

Clipping is the process of removing part of a Sprite from being rendered by defining a rectangular area which will contain the Sprite. This tutorial will show you how to write code to clip Sprites within a rectangle. This form of clipping has some requirements:

  • The Sprite being clipped must not be rotated
  • The rectangular region which defines how the Sprite will be clipped must not be rotated
  • The original information for the Sprite must be available to the clipping code

This code will show you how to clip a Sprite given a static position. Moving a Sprite within the clip region and having it clip automatically is slightly more complicated; however, that process can be derived from this simpler process.

Setup

This tutorial will use Glue; however, the majority of what is is discussed here is code, so this tutorial can be followed along in pure code.

For this setup I will use an empty XNA 4 PC project called ClippingTutorial. See this page for information on how to create a new tutorial.

I will also create a Screen called ClippingScreen. See this page for information on how to create a Screen.

Defining the Clip Region

Now that we have a Screen, we can add an AxisAlignedRectangle:

  1. Add a new AxisAlignedRectangle object to your Screen. See this page for information on AxisAlignedRectangles in Glue.
  2. Name the AxisAlignedRectangle “ClipRegion”
  3. Set the ClipRegion Width to 200
  4. Set the ClipRegion Height to 200

Defining the Sprite

Next we’ll add a Sprite to our Screen. This Sprite will be clipped as it moves around the screen:

  1. Add a new Sprite to your Screen. See this page for information on Sprites in Glue.
  2. Add a new Texture file to your Screen. For this demo I’ll use a bear graphic: Bear.png
  3. Set the newly-added Sprite’s Texture to the newly added Texture.

Setting the Sprite’s initial position

By default the Sprite will be positioned in the center of the screen, where it will not be clipped. You will need to modify the starting position of the Sprite to see it get clipped. This can be done in the Screen’s CustomInitialize:

Clipping – the first pass

First, we’ll add some basic logic that controls whether the entire Sprite is visible or not. To do this, add the following code in your Screen’s CustomInitialize after modifying your Sprite’s position:

At this point the Sprite will disappear when it is fully outside of the ClipRegion AxisAlignedRectangle.

Modifying the Sprite

Next we’ll write the actual meat of clipping. The code needs to do the following:

  1. Identify how much to clip on each side
  2. Make any negative values equal 0 (which indicates there is nothing to clip on a given side)
  3. Adjust the TexturePixel values according to how much to clip
  4. Shift the Sprite

Keep in mind that this code assumes that Sprites use a positive TextureScale value, as opposed to explicit Width and Height values.

ClippedBear.PNG

Creating a portable function

We can take the above code to make a more portable function. The following code takes the above logic and modifies the variable names so it is a reusable function: