Click Continue reading to see how!

If you look around for information on how to adjust brightness and contrast with blend states, you might find this:

Draw a full screen quad and use these color blend states:

Brightness: source = ONE, dest = ONE
Contrast: source = DESTCOLOR, dest = ZERO

While these would work, they might not be as you expect. Drawing with a 24/32bit per texel texture, the first would only allow you to adjust the brightness up from white, and the latter would only let you reduce contrast. That is probably not what people want. I suggest different settings:

Brightness: source = ZERO, dest = SOURCECOLOR
Contrast: source = DESTCOLOR, dest = SOURCECOLOR

This will allow brightness to be reduced instead of raised, and contrast can be increased as well as reduced.

So how do you actually do this in XNA 4 on Windows Phone 7?

First you will need a 1x1 texel white texture either through the content pipeline, or procedurally.

Add this member to your game class:

Texture2D whiteTexture;

In the LoadContent override method, add this to create the texture procedurally:

whiteTexture = new Texture2D(GraphicsDevice, 1, 1);
whiteTexture.SetData<Color>(new Color[] { Color.White });

You will also need a couple of integer members to hold brightness and contrast state:

int brightness;
int contrast;

Also, two blend states, one for brightness, and one for contrast:

BlendState brightnessBlend;
BlendState contrastBlend;

In the Initialize override method, we can set these other members (note that alpha blend states must match color blend states on WP7/Reach):

brightness = 255;
contrast = 128;

brightnessBlend = new BlendState();
brightnessBlend.ColorSourceBlend = brightnessBlend.AlphaSourceBlend =  Blend.Zero;
brightnessBlend.ColorDestinationBlend = brightnessBlend.AlphaDestinationBlend = Blend.SourceColor;

contrastBlend = new BlendState();
contrastBlend.ColorSourceBlend = contrastBlend.AlphaSourceBlend = Blend.DestinationColor;
contrastBlend.ColorDestinationBlend = contrastBlend.AlphaDestinationBlend = Blend.SourceColor;

Finally, in the Draw override method, after you have drawn to the screen, do the following (this assumes spriteBatch is initialized and that the default blend state is wanted next frame):

spriteBatch.Begin(SpriteSortMode.Immediate, brightnessBlend);
spriteBatch.Draw(whiteTexture, new Rectangle(0, 0, 480, 800), new Color (brightness, brightness, brightness, 255));
spriteBatch.End();

spriteBatch.Begin(SpriteSortMode.Immediate, contrastBlend);
spriteBatch.Draw(whiteTexture, new Rectangle(0, 0, 480, 800), new Color(contrast, contrast, contrast, 255));
spriteBatch.End();

GraphicsDevice.BlendState = BlendState.Opaque;

That's it, but there are a couple more things to mention. First is that the color values (the brightness and contrast integers) should be between 0 and 255, although you could use floats too. To clamp an integer between these values use:

value = Math.Max(Math.Min(value, 255), 0);

To test runtime adjustment of the brightness and contrast, I used input from the 4 quadrants of the screen. The top half adjusts brightness, the bottom contrast. The left side reduces the value and the right side increases it. To do this, add the following code to the Update override method:

foreach (TouchLocation t in TouchPanel.GetState())
{
   if (t.Position.Y <= 400)
      Adjust(t, ref brightness);
   else
      Adjust(t, ref contrast);
}

And the Adjust method (here it adjusts the value by 3 for each touch change at your pleasure, it also includes the clamping mentioned above):

private void Adjust(TouchLocation t, ref int adjustee)
{
   if (t.Position.X < 240)
      adjustee -= 3;
   else
      adjustee += 3;

   adjustee = Math.Max(Math.Min(adjustee, 255), 0);
}

You could expose this via sliders in an options page. The brightness would be particularly useful as you don't want people exiting the game to adjust screen brightness.

If you’ve watched the excellent sci-fi series Battlestar Galactica (the 2004+ series, not the original!), you may have noticed that during scene transitions, they use a cool effect that draws text in strips. For example, when the story jumps from a Cylon Baseship back to Galactica, it might cut to an outside view of BSG and have text in the lower left corner of the screen noting the time and place. The text fades in strips, which I thought was a pretty cool effect. I decided to replicate that in XNA.
First, let’s look at the end result:

You can see how the text is fading in strips. What isn’t really clear from the image is that the lines are moving horizontally, instead of only vertically like a Movie Maker effect. The program uses a multi step process to achieve this:

• The message is drawn to a rendertarget, and the texture is kept as the Destination texture.
• A brush texture is created by drawing a vignette texture to a rendertarget, based on the speed and size variables.
• An alpha map rendertarget is iteratively drawn on with the brush texture. Since the brush is made up of a vignette, it softens the fade in effect. A pure white texture would look much harsher.
• The destination texture is drawn with a custom shader that takes the alpha map texture as a parameter. The alpha of the destination texture is multiplied by the color value of the alpha map texture, thus fading the text in.
• The end result is an effect that looks much cooler than the standard “pop in text” or “fade entire text in”!

The example contains two classes in BSGText.cs:

• BSGText
• BSGTextManager

The latter is a manager class that makes it easier to use multiple BSGText objects at once, and the former contains the actual nuts and bolts that make the effect work. The Manager is very simple to use and is demonstrated in the example project, and I won’t cover it here as it’s fairly boring. Now, let’s go over the cool parts that make the effect work:

//create new rendertargets for the effect
            currentAlpha = new RenderTarget2D(parentManager.graphicsDevice, (int)size.X, (int)size.Y, 0, SurfaceFormat.Color);
            RenderTarget2D destination = new RenderTarget2D(parentManager.graphicsDevice, (int)size.X, (int)size.Y, 0, SurfaceFormat.Color);

//-----------------------------------------------------------------------
//| First, we want to create the destination texture.
//| The destination texture is simply the text drawn to a rendertarget,
//| and is how the text will look once it's fully transitioned in.
//-----------------------------------------------------------------------
//set the rendertarget
parentManager.graphicsDevice.SetRenderTarget(0, destination);

//clear it with a transparent color
parentManager.graphicsDevice.Clear(Color.TransparentBlack);

//begin spritebatch
parentManager.spriteBatch.Begin();

//draw the message
parentManager.spriteBatch.DrawString(parentManager.font, message, Vector2.Zero, Color.White);

//end spritebatch
parentManager.spriteBatch.End();

//set rendertarget back to the backbuffer
parentManager.graphicsDevice.SetRenderTarget(0, null);
//grab the destination texture. We don't need the destination rendertarget anymore now.
destinationTex = destination.GetTexture();

//---------------------------------------------------------------------------------
//| Now, we need to setup a blank alpha map. The alpha map is used to iteratively
//| add alpha to the destination image, thus fading it in in strips.
//---------------------------------------------------------------------------------

parentManager.graphicsDevice.SetRenderTarget(0, currentAlpha);

//all blank for right now
parentManager.graphicsDevice.Clear(Color.TransparentBlack);

parentManager.graphicsDevice.SetRenderTarget(0, null);

//=======================================================================
//| setup a new "brush" rendertarget.
//| The brush is used to iteritively add alpha to the alpha map, so the
//| text gets drawn in strips.
//=======================================================================

//setup the size based on the percentage variables
RenderTarget2D rt = new RenderTarget2D(parentManager.graphicsDevice,
(int)(destinationTex.Width * xSizePercent),
(int)(destinationTex.Height * ySizePercent),
0, SurfaceFormat.Color);

//draw the vignette texture to the rendertarget. We could use a solid color, but again,
//it wouldn't be as smooth as it is with a soft-edged vignette texture.
parentManager.graphicsDevice.SetRenderTarget(0, rt);
parentManager.graphicsDevice.Clear(Color.TransparentBlack);
parentManager.spriteBatch.Begin(SpriteBlendMode.Additive);
parentManager.spriteBatch.Draw(parentManager.vignetteTex, new Rectangle(0, 0, rt.Width, rt.Height), Color.White);
parentManager.spriteBatch.End();
parentManager.graphicsDevice.SetRenderTarget(0, null);
This is the setup code for the effect. It’s heavily documented so it should be pretty easy to follow – basically, we’re drawing the message to a rendertarget so we have the “destination” texture, creating a brush texture by drawing a vignette texture to another rendertarget, and setting up an alpha map rendertarget that we’ll use to iteritively draw the brush to.
Let’s look at the update code next:
//there are 3 strips
for (int i = 0; i < 3; i++)
{
    //the middle strip goes faster to match the effect.
    int spd = i == 1 ? speed * 2 : speed;

    //draw and move the strip
    for (int x = 0; x < spd; x++)
    {
        currentPos[i].X += brush.Width * .5f;
        UpdateText(currentPos[i]);

        //if we've passed the edge of the texture, loop back and increment the Y axis
        if (currentPos[i].X >= (destinationTex.Width + brush.Width))
        {
            //stop looping if we've reached the end of our assigned secion + plus some buffer
            if (currentPos[i].Y < (brush.Height * 2) + ((i + 1) * (destinationTex.Height / 3)))
            {
                currentPos[i].X = -brush.Width;
                currentPos[i].Y += brush.Height * .5f;
            }
            else
            isDone = true;
        }
    }
}
…
private void UpdateText(Vector2 currentPos)
{
    //grab the last result
    Texture2D prev = currentAlpha.GetTexture();

    parentManager.graphicsDevice.SetRenderTarget(0, currentAlpha);
    //clear the rendertarget
    parentManager.graphicsDevice.Clear(Color.TransparentBlack);
    parentManager.spriteBatch.Begin(SpriteBlendMode.Additive);
    //draw the last result
    parentManager.spriteBatch.Draw(prev, Vector2.Zero, Color.White);
    //and draw the new brush over it
    parentManager.spriteBatch.Draw(brush, currentPos, Color.White);
    //done!
    parentManager.spriteBatch.End();
    parentManager.graphicsDevice.SetRenderTarget(0, null);
}

We have three different positions that are kept track of in an array. These are used to draw the brush texture, and have multiple “strips” adding alpha to the alpha map at different positions. This will be clearer when you watch the output of the finished program – it looks like there are three distinct lines that are adding slices of the text in. An important note is that the middle slice is slightly faster than the outer two, hence the line that initializes the spd variable. (note: If you haven’t used or seen conditional operators before that line might look strange – it’s essentially C# shorthand for an if statement. Check out the MSDN page (http://msdn.microsoft.com/en-us/library/ty67wk28%28v=VS.100%29.aspx) for a more technical description.)
Next, here’s the draw code. There’s not much to look at – the real magic happens in the shader, which we’ll examine afterwards.

//set the shader's alpha texture to our current alpha texture
parentManager.effect.Parameters["alpha"].SetValue(currentAlpha.GetTexture());

spriteBatch.Begin(SpriteBlendMode.AlphaBlend, SpriteSortMode.Immediate, SaveStateMode.None);

//start the custom BSG text effect shader
parentManager.effect.Begin();
parentManager.effect.CurrentTechnique.Passes[0].Begin();

//draw the destination texture
spriteBatch.Draw(destinationTex, position, Color.White);

parentManager.effect.CurrentTechnique.Passes[0].End();
parentManager.effect.End();
spriteBatch.End();
And finally, here’s the shader that ties everything together:
BSGTextEffect.fx
//the texture that's being drawn with the shader
sampler TextureSampler : register(s0);

//the alpha texture map
texture2D alpha;
sampler2D alphaSampler = sampler_state
{
	Texture		=	<alpha>;
	MinFilter	=	Linear;
	MagFilter	=	Linear;
	MipFilter	=	Linear;
	AddressU	=	WRAP;
	AddressV	=	WRAP;
};

float4 PixelShader(float2 texCoord : TEXCOORD0) : COLOR0
{
    //Look up the original image color.
    float4 c = tex2D(TextureSampler, texCoord);

    //Look up the alpha value at the alpha texture.
    float4 alpha = tex2D(alphaSampler, texCoord);

    //Despite the name we don't actually use alpha 
    //(mainly so you can more easily see it for yourself if you enable the debug text)
    //instead we use a grayscale gradient texture, so any color component will work for us.
    c.a *= alpha.r;

    return c;
}

technique BSGText
{
    pass Pass1
    {
        PixelShader = compile ps_2_0 PixelShader();
    }
}

Nothing too complicated going on here either! The shader looks up the color of the pixel in the alpha map at the same position as the current pixel, and multiplies the alpha by it’s color. Note how the alpha map really isn’t an alpha map as we’re using it’s red color channel, but we could easily change it to use alpha if we wanted. But by using grayscale instead, it’s slightly easier to see the output for debugging, and works just the same.
So there were are. A fullly featured Battlestar Galactica text effect, using nothing more than a few rendertargets and a tiny HLSL shader! Commander Adama would be proud.

Download the sample code here

They both deal with building the basic skeleton of the game, starting with planning and gamestate management and continuing with keyboard and mouse input.

If your interested in other RPG-related tutorials and content for XNA, here's some:

• Nick "Not an MVP Anymore" Gravelyn's Tile Engine Series
• Jamie McMahon series of 44 RPG Tutorials
• The Role Playing Game Starter Kit on XNA Creator's Club
• Jim "Evil MVP" Perry's book RPG Programming with XNA Game Studio 3.0

• 100% test coverage of the GUI library (I leave it to the educated reader to determine if that means anything useful)
• Control navigation with the game pad and cursor keys
• The GUI library contains controls for buttons, check boxes, radio buttons, horizontal and vertical scroll bars, text boxes, lists now

Pie Menu

For the people who want some UI stuff in XNA, here’s a small sample that contains a Pie Menu Component, attached to a cursor. If you don’t know what a pie menu is, read about it on wikipedia.

Now, about the sample.

My PieMenu supports deep menus. Currently it is just a quick version, made in two days. Because of this, the graphics are not spectacular, and some things may not be extremely flexible right now (the parameters passed to delegates).

But as it is, each menu entry has associated with it an image, a text description, and a delegate, for the action that should be performed. The PieMenu also supports submenus, as seen in this sample.

The cursor can operate in two modes: mouse-friendly and gamepad friendly. In the mouse friendly mode, the menu options are selected with the cursor, while in gamepad friendly mode, they are selected with the left thumbstick.

The current sample contains the following menus:

• Change Gamerpic: allows navigation through a series of submenus, to select a gamerpic that will be displayed in the window
• Change Background Color: randomly chooses a new background color
• Toggle Input Mode: toggles between the mouse and gamepad friendly input modes. Default is mouse, so if you don’t have a gamepad, don’t worry.
• Exit : exits the sample.

This is just as an example. The menu can be easily customized. Also, the Cursor.ShowPieMenu() function has an overload that allows you to specify the menu that will be shown. This allows for different menus, depending on the selected object (this is NOT illustrated in this sample)

Controls:

• Gamepad A or Mouse Click : open menu, or selected submenu
• Gamepad B, or Mouse Click when no submenu selected: return to upper menu / exit menu

You can find the sample here.