Posts Tagged ‘XNA’

720p Title Safe GUI Template

Saturday, June 19th, 2010

I am currently in the process of porting Hideout! to the Xbox 360 with XNA. As a part of this process, I needed to create a Photoshop GUI template for my GUI artist to ensure that our game would work well on all TVs. I thought this template may be useful to other developers as well:

Title-Safe-GUI-Template-PSD Title-Safe-GUI-Template-PNG

This file is essentially a compilation of notes from Best Practices for Indie Games and this topic. The guides (cyan lines) that you see are markings for 10% and 20% of total width and height. I chose these markings based on some comments by Shawn Hargreaves concerning development of professional games for the Xbox:

Native Xbox games have two different safe areas. They are strongly recommended to keep everything within 80%, and strictly required to keep everything within 90%. A single UI pixel outside the 90% region is an instant cert fail. UI outside the 80% region is going to get mentioned in the cert report, and they’ll most likely be asked to fix it, but if a big commercial developer pushes back and decides they don’t want to do that, it’s not a totally rigid requirement.

For indie games, there is no official cert and thus no rigid fail threshold. Our recommendation for indie games is exactly the same as for commercial titles: Microsoft thinks all games should keep all UI within the 80% region, and would love it if every developer would do this.

I have included notes about font size, as well as how much space is needed if you would like to make a 4:3 alternative.

4:3 Alternative

This 4:3 alternative can be achieved by simply changing the BackBuffer width in XNA to 960px instead of 1280px and letting XNA do the rest of the scaling. To stay within the 20% to 10% title safe area, you will need between 256 (20%) and 288 (10%) pixels in between left, center, and right aligned GUI elements. When you have shrunk the width to 960px, your GUI elements should still just fit within the title safe area after being moved closer together so long as you have left this extra space.

Concluding Thoughts

As a designer, I do understand the challenge of creating a well balanced and pleasing layout without being able to use 20% of your screen space… But that said, I must say that if you are looking to create a game that everyone can enjoy (which I hope you are), you should take on the challenge of keeping all critical elements within that 80% area. The minimum font size of 14 points is also a bit on the small size: Do not use this for common gameplay text, but instead lean towards around 20 point at minimum.

Simple, fast, GPU-driven multi-textured terrain

Thursday, May 6th, 2010

In this article, I will be outlining the method of multi-textured terrain that I used in my recently completed XNA Real Time Strategy (RTS) project, Toy Factory. I have also expanded this tutorial to cover organic (blended) and deformed terrain. This method enables you to produce a similar result to Riemer’s XNA Tutorial on Multitexturing, but allows for more flexible optimization of your terrain by separating the multi-texturing from the surface geometry.

Left: Toy Factory multi-texturing | Right: Deformed, organic multi-texturing

Left: Toy Factory multi-texturing | Right: Deformed, organic multi-texturing

If you are OK with having a flat terrain, this method will achieve extremely high framerates no matter how large your surface is. If you want deformed terrain, this method will still provide a strong starting point that allows for easy optimization of the geometry.

Part 1: Drawing some simple geometry

We’ll start with a large, square, two-triangle plane and draw a “ground” texture onto it using our own custom HLSL effect file. This ground texture will describe the type of terrain that we want to draw. In this case, hardwood is red, carpet is blue, and tile is green. This is the ground texture that I am going to use:

ToyFactory Multi-texturing Ground Texture

So our current goal is to simply draw that texture onto two very large triangles.

The C# Side

These variables need to be accessible to your initialization and drawing methods:

Effect terrainEffect;
VertexPositionTexture[] vertices;
VertexDeclaration vertexDeclaration;

Inside of your initialize method, let’s load the effect (we’ll put the HLSL code in “Content\Effects\Terrain.fx”) and set up the 6 vertices that we will be drawing:

            // Load the effect:
            terrainEffect = game.Content.Load<Effect>(@"Effects\Terrain");
            // Load the ground texture:
            Texture2D ground = game.Content.Load<Texture2D>(@"Ground");
            // Set the texture parameter of our effect to the ground:
            terrainEffect.Parameters["Ground"].SetValue(ground);

            // Initialize our verticies:
            vertices = new VertexPositionTexture[6];
            for (int i = 0; i < vertices.Length; i++)
                vertices[i] = new VertexPositionTexture();

            // Initialize our vertex declaration:
            vertexDeclaration = new VertexDeclaration(device, VertexPositionTexture.VertexElements);

            Vector3 topLeft = new Vector3(0f, groundHeight, 0f);
            Vector3 topRight = new Vector3(width, groundHeight, 0f);
            Vector3 bottomLeft = new Vector3(0f, groundHeight, height);
            Vector3 bottomRight = new Vector3(width, groundHeight, height);

            Vector2 topLeftTex = new Vector2(0f, 0f);
            Vector2 topRightTex = new Vector2(1f, 0f);
            Vector2 bottomLeftTex = new Vector2(0f, 1f);
            Vector2 bottomRightTex = new Vector2(1f, 1f);

            vertices[0].Position = topLeft;
            vertices[0].TextureCoordinate = topLeftTex;
            vertices[1].Position = bottomRight;
            vertices[1].TextureCoordinate = bottomRightTex;
            vertices[2].Position = bottomLeft;
            vertices[2].TextureCoordinate = bottomLeftTex;
            vertices[3].Position = topLeft;
            vertices[3].TextureCoordinate = topLeftTex;
            vertices[4].Position = topRight;
            vertices[4].TextureCoordinate = topRightTex;
            vertices[5].Position = bottomRight;
            vertices[5].TextureCoordinate = bottomRightTex;

The following code will go in your draw method to draw the vertices to the screen using the effect that we will create:

                terrainEffect.CurrentTechnique = terrainEffect.Techniques["Terrain"];
                terrainEffect.Parameters["View"].SetValue(camera.ViewMatrix);
                terrainEffect.Parameters["Projection"].SetValue(camera.ProjectionMatrix);

                terrainEffect.Begin();
                terrainEffect.CurrentTechnique.Passes[0].Begin();

                device.VertexDeclaration = vertexDeclaration;
                device.DrawUserPrimitives(PrimitiveType.TriangleList, vertices, 0, numTriangles);

                terrainEffect.CurrentTechnique.Passes[0].End();
                terrainEffect.End();

The HLSL Side

Let’s call this file “Terrain.fx”. We’ve already referenced to the parameters and technique in this effect file in the above C# code. Note lines 12-14 where I ensure that no smoothing from the sampled texture happens by setting the min, mag, and mip filters to “None”. If you want to smooth between terrain types, you could try setting those values to “Linear” instead (but this will require modification of some code that we will look at latter in this tutorial).

// HLSL to simply sample from a texture

// Input parameters.
float4x4 View;
float4x4 Projection;

texture Ground;
sampler GroundSampler = sampler_state
{
    Texture = (Ground);

    MinFilter = None;
    MagFilter = None;
    MipFilter = None;
    AddressU = clamp;
    AddressV = clamp;
};

// Vertex shader input structure.
struct VS_INPUT
{
    float4 Position : POSITION0;
    float2 TexCoord : TEXCOORD0;
};

// Vertex shader output structure.
struct VS_OUTPUT
{
    float4 Position : POSITION0;
    float2 TexCoord : TEXCOORD0;
};

// Vertex shader program.
VS_OUTPUT VertexShader(VS_INPUT input)
{
    VS_OUTPUT output;

    //generate the view-projection matrix
    float4x4 vp = mul(View, Projection);
    output.Position = mul(input.Position, vp);

    output.TexCoord = input.TexCoord;

    return output;
}

float4 PixelShader(VS_OUTPUT input) : COLOR
{
	float4 colour =	tex2D(GroundSampler, input.TexCoord);
	return colour;
}

technique Terrain
{
    pass Main
    {
        VertexShader = compile vs_2_0 VertexShader();
        PixelShader = compile ps_2_0 PixelShader();
    }
}

This should result in the following, which is already recognizable as a ground plane that follows the pattern we described in our “ground” texture (zoomed in on the top right corner of the texture):

ToyFactory Multi-texturing Ground - Drawn

ToyFactory Multi-texturing Ground Texture - Drawn in 3D

Part 2: Using the graphics card to decide which texture to draw

Now, time for some magic! Let’s pass in three more textures to our effect:

We can include these new textures the same way we did with the ground texture, but we’ll use them slightly differently:

The C# Side

In your initialize method, add lines 6-12 to load the textures:

            // Load the ground texture:
            Texture2D ground = game.Content.Load<Texture2D>(@"Ground");
            // Set the texture parameter of our effect to the ground:
            terrainEffect.Parameters["Ground"].SetValue(ground);

            // Load the terrain textures:
            Texture2D hardwood = game.Content.Load<Texture2D>(@"Hardwood");
            terrainEffect.Parameters["GroundText0"].SetValue(hardwood);
            Texture2D tile = game.Content.Load<Texture2D>(@"Tile");
            terrainEffect.Parameters["GroundText1"].SetValue(tile);
            Texture2D carpet = game.Content.Load<Texture2D>(@"Carpet");
            terrainEffect.Parameters["GroundText2"].SetValue(carpet);

            // Now let's set some new parameters that we will be using latter in our HLSL code:
            terrainEffect.Parameters["GroundText0Scale"].SetValue(terrainHardwoodDensity);
            terrainEffect.Parameters["GroundText1Scale"].SetValue(terrainTileDensity);
            terrainEffect.Parameters["GroundText2Scale"].SetValue(terrainCarpetDensity);

The HLSL Side

Now we have the different terrain types loaded into the effect as parameters. With these new terrain textures and their respective “scale” parameters, we can now draw them repeating across the entire ground plane — to do this, we use the “AddressU = wrap” and “AddressV = wrap” parameters in the sampler code for these new textures (see lines 13-14, 25-26, 37-38). Here’s what our new samplers in the HLSL should look like:

float GroundText0Scale;
float GroundText1Scale;
float GroundText2Scale;

texture GroundText0;
sampler GroundText0Sampler = sampler_state
{
    Texture = (GroundText0);

    MinFilter = Linear;
    MagFilter = Linear;
    MipFilter = Linear;
    AddressU = wrap;
    AddressV = wrap;
};

texture GroundText1;
sampler GroundText1Sampler = sampler_state
{
    Texture = (GroundText1);

    MinFilter = Linear;
    MagFilter = Linear;
    MipFilter = Linear;
    AddressU = wrap;
    AddressV = wrap;
};

texture GroundText2;
sampler GroundText2Sampler = sampler_state
{
    Texture = (GroundText2);

    MinFilter = Linear;
    MagFilter = Linear;
    MipFilter = Linear;
    AddressU = wrap;
    AddressV = wrap;
};

Next, we will put some logic in our pixel shader that will sample from only one of the three terrain textures, depending on what colour we receive from the “ground” texture:

float4 PixelShader(VS_OUTPUT input) : COLOR
{
	float4 colour = tex2D(GroundSampler, input.TexCoord);

	if(colour.r == 1)
	{
		colour = tex2D(GroundText0Sampler, input.TexCoord * GroundText0Scale);
	}
	else if(colour.g == 1)
	{
		colour = tex2D(GroundText1Sampler, input.TexCoord * GroundText1Scale);
	}
	else
	{
		colour = tex2D(GroundText2Sampler, input.TexCoord * GroundText2Scale);
	}

	return colour;
}

This will result in Toy Factory-style multitexturing that is super-fast, no matter what the size of your ground is. You can adjust the scaling of each type of terrain by using the “Scale” parameters that are passed into the effect.

Toy Factory Multi-texturing

Toy Factory Multi-texturing

Part 3: Organic terrain blending

Though these hard cut edges worked well for our indoor environment, many games will require a smoother blending between terrain types to create the illusion of an organic and natural terrain. To achieve this effect, simply change the ground sampler’s min, mag, and mip filters and change the logic of the pixel shader:

texture Ground;
sampler GroundSampler = sampler_state
{
    Texture = (Ground);

    MinFilter = Linear;
    MagFilter = Linear;
    MipFilter = Linear;
    // use "clamp" to avoid unwanted wrapping problems at the edges due to smoothing:
    AddressU = clamp;
    AddressV = clamp;
};
float4 PixelShader(VS_OUTPUT input) : COLOR
{
 float4 groundSample = tex2D(GroundSampler, input.TexCoord);

 float4 colour = float4(0,0,0,1);
 colour += tex2D(GroundText0Sampler, input.TexCoord * GroundText0Scale) * groundSample.r;
 colour += tex2D(GroundText1Sampler, input.TexCoord * GroundText1Scale) * groundSample.g;
 colour += tex2D(GroundText2Sampler, input.TexCoord * GroundText2Scale) * groundSample.b;

 return colour;
}

Let’s use these three textures instead:

This will result in the following, more organic looking terrain:

Toy Factory Multi-texturing - Organic

Toy Factory Multi-texturing - Organic

You can also modify the “ground” texture to include softer edges between values to have a smoother blending of terrain types.

Part 4: Mapping the terrain to complex geometry (deformable terrain)

When developing the fog of war for Toy Factory, I discovered a great trick that Catalin Zima used in his fog of war sample. In his sample he used world coordinates to determine the colour/alpha value for a given pixel in the pixel shader. This concept can also be applied in our sample by simply using the X and Y world coordinates to determine the texture coordinate that will be passed to the sampler.

The C# Side

Our C# code can change a bit now because we are no longer using texture coordinates. Instead, we will purely be using world coordinates. At this point you can change the vertex declaration to use VertexPositionColor, which is a little faster than the old VertexPositionTexture due to less data being sent to the graphics card. Or, you can scrap the old vertex buffer altogether and draw your own imported model, a custom mesh that has been optimized using a quadtree, or anything else you want!

Add the following to your initialize method:

            terrainEffect.Parameters["MapWidth"].SetValue(mapWidth);
            terrainEffect.Parameters["MapHeight"].SetValue(mapHeight);

The following code will draw an existing model with the effect, but you could also use a heightmap-generated mesh as well.

                foreach (ModelMesh mesh in terrainModel.Meshes)
                {
                    foreach (Effect effect in mesh.Effects)
                    {
                        effect.CurrentTechnique = terrainEffect.Techniques["Terrain"];
                        effect.Parameters["View"].SetValue(camera.ViewMatrix);
                        effect.Parameters["Projection"].SetValue(camera.ProjectionMatrix);
                        mesh.Draw();
                    }
                }

The HLSL Side:

Add the following two parameters:

float MapWidth;
float MapHeight;

And change your vertex and pixel shaders and input/output structures:

// Vertex shader input structure.
struct VS_INPUT
{
    float4 Position : POSITION0;
};

// Vertex shader output structure.
struct VS_OUTPUT
{
    float4 Position : POSITION0;
    float4 WorldPos : TEXCOORD0;
};

// Vertex shader program.
VS_OUTPUT VertexShader(VS_INPUT input)
{
    VS_OUTPUT output;

    //generate the view-projection matrix
    float4x4 vp = mul(View, Projection);
    output.Position = mul(input.Position, vp);
    output.WorldPos = input.Position;

    return output;
}

float4 PixelShader(VS_OUTPUT input) : COLOR
{
	float2 mapPosition = float2(input.WorldPos.x / MapWidth, input.WorldPos.z / MapHeight);
	float4 groundSample = tex2D(GroundSampler, mapPosition);

	float4 colour = float4(0,0,0,1);
	colour += tex2D(GroundText0Sampler, mapPosition * GroundText0Scale) * groundSample.r;
	colour += tex2D(GroundText1Sampler, mapPosition * GroundText1Scale) * groundSample.g;
	colour += tex2D(GroundText2Sampler, mapPosition * GroundText2Scale) * groundSample.b;

	return colour;
}

And here’s the result — It needs a bit of artistic work, but all the functionality that you need should be at your fingertips!

Toy Factory Multi-texturing - Organic & Deformed

Toy Factory Multi-texturing - Organic & Deformed