Development Diary #02

By | Blog, XNA Games | 2 Comments

It will be a smaller update then the previous one’s, because i was quite busy with real life stuff. Most of my time went into designing a new design for our front garden, i must keep the misses happy ain’t i :).

I am just lucky that my girl supports me in this and provides some time for me to actually code and design my game. Enough chatting about that, on to the game. The main issue i was facing is that this project began as a simple test for me, just to see how tiling worked and to see if i would make some similar results. Once i got that properly working, the editor came to life. I just kept on adding new stuff to the editor that soon the design was just a mess. Now it was time to bring an engine to life, that i can use the code for both the editor and the game itself (a prototype game only exists then). After many line’s of code written and creating textures for everything i stood where i was a few weeks ago, and soon the game will be ready to be play for the public, even with special hardware from sites as

Now it was time to add some actual game flow. I wanted that the game consist out of several missions that the player can play. Now these missions must support multiple maps (if i need them), to use teleporters or elevators or just plain doors, that will lead in to a different area. To support this kind of feature i needed to rewrite a lot inside the engine’s core, this took some time to get it in way i wanted it to be.

After the support of missions, cinematics (cut scene’s) came to life. Because let’s face it, a game without some story telling or some automatic gameplay (intro’s orso) isn’t much fun. As i am not really the greatest story teller, i just suck at it… I am trying to do my best. After some night’s of programming, i finally had my cinematic system the way i want it. This system provides me with all kinds of stuff that i can use to automate the world, or just show dialogs to the player. All the cinematics will be loaded from Content XML files when they are needed. This way its easy to add new features and to adjust settings inside the cinematics.

Here is a short video of this system:

See it in HD on youtube

WordPress problems

By | Blog, XNA Games | No Comments

I seem to be having some wordpress problems here. As i cannot post any long posts anymore. I tried to solve it with a .htaccess file as they say of the forum, but this didn’t do the trick for me :(.

I hope i can fix this soon…

Edit: It seems to my host doesn’t like some words that i used to make up my story. In this particular story i used the word “in to” without the space.

Development Diary #01

By | Blog, XNA Games | One Comment

Ok so i guess it is time for an update regarding my upcoming game called “Wages Of War” (working title).

Here is a video showing off my latest build of the game:

See it in HD on youtube

What is new since my latest video showing you how to create the lightning system i use.

[list bullet="arrow"]
  • The lightning system has been updated with some small tweaks to make is visually a bit better.
  • Some basic AI has been added.
    • For now only a Bot and a Turret
    • Navigation paths and a pathplanner
    • Steeringbehaviours for the Bot – Path Following, Wander and Obstacle Avoidance for now.
  • Some more components have been added, now game object can also consists of multiple body parts (see Player and Bot).
  • Many texture updates, i still need to make all graphics myself so ;-). Also depth maps and normals maps have been created for all the textures.
  • A few more weapons have been added. This includes the Flame thrower and a Beam weapon.
  • Many updates to the editor i use. (see below)
  • An inventory screen has been added to make it a bit easier for me to select weapons
  • There should be some more points… but i cant seem to remeber them right now.

In the new video you should be able to see most of the new points i discussed here. If you want to know anything in particular, just ask :).

The Editor

The editor i created for this game is helping me alot. This also includes fast testing many times of new things i implemented, but also i can make levels is no time. The only problem i am facing so far are the textures :P, because i am not that great of an artist in creating textures.

I am not going to explain in detail what the editor is all about or what its features are so far, because this editor will likely stay for private use only and thus not really user friendly :).

Here are some screenshots of the current build of the editor:

2D (Deferred) Lighting

By | Blog, XNA Games | 36 Comments

2D Lighting Posts :

Last weekend i spended most of my time trying to create a lightning effect for my xna game that would support more then three lights at the same time (i had all lightning inside one shader, inside an array) and still support SM2.0. So i began building my own lightning system and the basics of it are now ready. This lightning system will first render four different types of textures:

  • The Color Map of the entire scene
  • The Depth Map of this scene (where needed)
  • The Normal Maps of all the objects inside the scene (where needed)
  • A combined effect that will become my Light Map.

Here are some examples of my current effect in action:

[Following up post effect]

Read more: 2D Lightning Continued

Now it is time for some code and let you try to achieve the same effect in your project and/or game.

Before we begin we need to declare some variables that we will be using inside most of the code segments.


private RenderTarget2D _colorMapRenderTarget;
private RenderTarget2D _depthMapRenderTarget;
private RenderTarget2D _normalMapRenderTarget;
private RenderTarget2D _shadowMapRenderTarget;
private Texture2D _shadowMapTexture;
private Texture2D _colorMapTexture;
private Texture2D _normalMapTexture;
private Texture2D _depthMapTexture;

private VertexDeclaration _vertexDeclaration;
private VertexPositionTexture[] _vertices;

private Effect _lightEffect1;
private Effect _lightEffect2;

Before we can use any of these RenderTargets or Effects we must initialize or load them ofcourse. So before you do anything fancy with them, call the following initialization before you are going to render.


PresentationParameters pp = Globals.GraphicsDevice.PresentationParameters;
int width = pp.BackBufferWidth;
int height = pp.BackBufferHeight;
SurfaceFormat format = pp.BackBufferFormat;

_colorMapRenderTarget = new RenderTarget2D(graphicsDevice, width, height, 1, format);
_depthMapRenderTarget = new RenderTarget2D(graphicsDevice, width, height, 1, format);
_normalMapRenderTarget = new RenderTarget2D(graphicsDevice, width, height, 1, format);
_shadowMapRenderTarget = new RenderTarget2D(graphicsDevice, width, height, 1, format);

_lightEffect1 = Globals.ContentManager.Load<Effect>("ShadersLightningShadow");
_lightEffect2 = Globals.ContentManager.Load<Effect>("ShadersLightningCombined");

_vertices = new VertexPositionTexture[4];
_vertices[0] = new VertexPositionTexture(new Vector3(-1, 1, 0), new Vector2(0, 0));
_vertices[1] = new VertexPositionTexture(new Vector3(1, 1, 0), new Vector2(1, 0));
_vertices[2] = new VertexPositionTexture(new Vector3(-1, -1, 0), new Vector2(0, 1));
_vertices[3] = new VertexPositionTexture(new Vector3(1, -1, 0), new Vector2(1, 1));
_vertexDeclaration = new VertexDeclaration(Globals.GraphicsDevice, VertexPositionTexture.VertexElements);

Now that we have initialized and loaded the rendertargets and effect files, we can use them during our render process. The following steps will guide you through the rendering setup, altough i have my render setup like this you can always change this to your own needs. As long as you just get the three textures that are needed during the steps after this one.

ColorMap, DepthMap and NormalMap drawing:

// Set the render targets
graphicsDevice.SetRenderTarget(0, _colorMapRenderTarget);

// Clear all render targets
graphicsDevice.Clear(ClearOptions.Target | ClearOptions.DepthBuffer, Color.Black, 1, 0);

// Draw your scene here

// Reset the render target
graphicsDevice.SetRenderTarget(0, null);
graphicsDevice.SetRenderTarget(0, _normalMapRenderTarget);

// Clear all render targets
graphicsDevice.Clear(ClearOptions.Target | ClearOptions.DepthBuffer, Color.Black, 1, 0);

// Draw all your normal maps here

graphicsDevice.SetRenderTarget(0, null);
graphicsDevice.SetRenderTarget(0, _depthMapRenderTarget);

// Clear all render targets
graphicsDevice.Clear(ClearOptions.Target | ClearOptions.DepthBuffer, Color.Black, 1, 0);

// Draw all your depth maps here

// Deactive the rander targets to resolve them
graphicsDevice.SetRenderTarget(0, null);

// Gather all the textures from the Rendertargets
_colorMapTexture = _colorMapRenderTarget.GetTexture();
_normalMapTexture = _normalMapRenderTarget.GetTexture();
_depthMapTexture = _depthMapRenderTarget.GetTexture();

Now you should have three textures containing the scene in color, normal and depth variants. Like these:

[pictureframe image="" align="left" lightbox="true" title="" link="" width="300" height="224"] [pictureframe image="" align="left" lightbox="true" title="" link="" width="300" height="224"] [pictureframe image="" align="left" lightbox="true" title="" link="" width="300" height="224"]

With the normal and depth textures we will begin drawing our lightmap. Our lightmap render function will make use of the shadowmap render target and after the render the generated texture will be returned.

private Texture2D GenerateShadowMap()
graphicsDevice.SetRenderTarget(0, _shadowMapRenderTarget);
graphicsDevice.Clear(ClearOptions.Target | ClearOptions.DepthBuffer, Color.Black, 1, 0);

graphicsDevice.RenderState.AlphaBlendEnable = true;
graphicsDevice.RenderState.SourceBlend = Blend.One;
graphicsDevice.RenderState.DestinationBlend = Blend.One;

// For every light inside the current scene, you can optimize this
// list to only draw the lights that are visible a.t.m.
foreach (var light in LightCollection)
_lightEffect1.CurrentTechnique = _lightEffect1.Techniques["DeferredPointLight"];


foreach (var pass in _lightEffect1.CurrentTechnique.Passes)

// Draw the full screen Quad
graphicsDevice.VertexDeclaration = _vertexDeclaration;
graphicsDevice.DrawUserPrimitives(PrimitiveType.TriangleStrip, _vertices, 0, 2);


// Deactivate alpha blending...
graphicsDevice.RenderState.AlphaBlendEnable = false;
// Deactive the rander targets to resolve them
graphicsDevice.SetRenderTarget(0, null);

return _shadowMapRenderTarget.GetTexture();

The HLSL code required to render this is as following. Please note that this only supports Point lights at the moment, i am working on implementing more.


float screenWidth;
float screenHeight;

float lightStrength;
float lightRadius;
float3 lightPosition;
float3 lightColor;

Texture NormalMap;
sampler NormalMapSampler = sampler_state {
	texture = <NormalMap>;
	magfilter = LINEAR;
	minfilter = LINEAR;
	mipfilter = LINEAR;
	AddressU = mirror;
	AddressV = mirror;

Texture DepthMap;
sampler DepthMapSampler = sampler_state {
	texture = <DepthMap>;
	magfilter = LINEAR;
	minfilter = LINEAR;
	mipfilter = LINEAR;
	AddressU = mirror;
	AddressV = mirror;

struct VertexToPixel
	float4 Position : POSITION;
	float2 TexCoord : TEXCOORD0;

struct PixelToFrame
	float4 Color : COLOR0;

VertexToPixel VertexToPixelShader(float4 inPos: POSITION0, float2 texCoord: TEXCOORD0)
	VertexToPixel Output = (VertexToPixel)0;

	Output.Position = inPos;
	Output.TexCoord = texCoord;

	return Output;

PixelToFrame PointLightShader(VertexToPixel PSIn) : COLOR0
	PixelToFrame Output = (PixelToFrame)0;

	float3 normal = tex2D(NormalMapSampler, PSIn.TexCoord).rgb;
	normal = normal*2.0f-1.0f;
	normal = normalize(normal);

	float depth = tex2D(DepthMapSampler, PSIn.TexCoord);

	float3 pixelPosition;
	pixelPosition.x = screenWidth * PSIn.TexCoord.x;
	pixelPosition.y = screenHeight * PSIn.TexCoord.y;
	pixelPosition.z = depth;
	//pixelPosition.w = 1.0f;

	float3 shading;
	if (depth > 0)
		float3 lightDirection = lightPosition - pixelPosition;
		float distance = 1 / length(lightPosition - pixelPosition) * lightStrength;
		float amount = max(dot(normal + depth, normalize(distance)), 0);

                float coneAttenuation = saturate(1.0f - length(lightDirection) / lightRadius);

		shading = distance * amount * coneAttenuation * lightColor;

	Output.Color = float4(shading.r, shading.g, shading.b, 1.0f);
	return Output;

technique DeferredPointLight
    pass Pass1
	VertexShader = compile vs_2_0 VertexToPixelShader();
        PixelShader = compile ps_2_0 PointLightShader();

The result you get should be somewhat similar to the following image:

[pictureframe image="" align="left" lightbox="true" title="" link="" width="300" height="224"]

Our next step involves in combining the Lightning map you just created with the Color Map from our first step. This process will be done through our second shader. This shader will only be a Pixel Shader because i had some problems rendering in inside a full screen quad. The whole image would become blurry and now with only the Pixel Shader in effect results in a clean outcome.

The follow shader is just a simple shader that combines the two textures with each other.


float ambient;
float4 ambientColor;
float lightAmbient;

Texture ColorMap;
sampler ColorMapSampler = sampler_state {
	texture = <ColorMap>;
	magfilter = LINEAR;
	minfilter = LINEAR;
	mipfilter = LINEAR;
	AddressU = mirror;
	AddressV = mirror;

Texture ShadingMap;
sampler ShadingMapSampler = sampler_state {
	texture = <ShadingMap>;
	magfilter = LINEAR;
	minfilter = LINEAR;
	mipfilter = LINEAR;
	AddressU = mirror;
	AddressV = mirror;

float4 CombinedPixelShader(float4 color : COLOR0, float2 texCoords : TEXCOORD0) : COLOR0
	float4 color2 = tex2D(ColorMapSampler, texCoords);
	float4 shading = tex2D(ShadingMapSampler, texCoords);

	float4 finalColor = (color2 * ambientColor * ambient);

	finalColor += color2 * shading * lightAmbient;

	return finalColor;

technique DeferredCombined
    pass Pass1
        PixelShader = compile ps_2_0 CombinedPixelShader();

The actual drawing:

private void DrawCombinedMaps()
    _lightEffect2.CurrentTechnique = _lightEffect2.Techniques["DeferredCombined"];

    // This variable is used to boost to output of the light sources when they are combined
    // I found 4 a good value for my lights but you can also make this dynamic if you want

    spriteBatch.Begin(SpriteBlendMode.None, SpriteSortMode.Immediate, SaveStateMode.None);
    foreach (var pass in _lightEffect2.CurrentTechnique.Passes)



You see that i draw the effect onto the scene just by using a spritebatch and drawing the color map onto the screen. This way i can just use the Pixel shader to draw the effect onto the screen, as i said before the full screen quad blurred my image and made it look bad. I guess there is a fix for this but i didn’t encounter it yet.

Now you should have the desired effect drawn onto your screen like in the images i posted at the beginning of this blog post. Please note that this is just the beginning and i am very sure that i can have some improvements here and stere, but i just wanted to share what i got right now with you all. If you encounter any difficulties applying this effect, please let me know and maybe we can find a solution for it :).

I hope you found this post usefull, until the next time :D.


I just finished up my SpotLight implementation. It currently looks like this:

[pictureframe image="" align="left" lightbox="true" title="" link="" width="300" height="224"]

Game Object Component System

By | Blog, Featured, XNA Games | 10 Comments

Last time i updated with saying that i included a Game Object Component system. I have update this system, so that it uses interfaces instead of overriding virtual methods defined inside the GOComponent base class.

Here is a class diagram of my current state of the GO’s and GOC’s.

The Manager on the Top Left is optional, that is just a helper class to add new GO’s into the game and draw/update them when it is needed.

The following image show’s an object ingame, also don’t forget to visit here once you are done reading.

This object is made of several GOC’s that are attached to one GO. The following list is an overview of the type of GOC’s that are attached to this GO.

  • GOCOnHit – Makes my GO hittable
  • GOCPhysicsObject – Attaches a Physics Body/Geom to the GO
  • GOCTexture – Makes the GO visible for the player (Texture)
  • GOCHealth – Because its hittable, it will need a Health Pool :).

These four GOC’s make up most of my environment objects for now that can be destroyed by the player. All four derive from the GOComponent base class, but only some of them are implementing the Interfaces as you can see on the class diagram. Now when the object will be Hit by another Physics object, the Physics GOC’s will process the collision handler. If the collision is valid, a message will be broadcasted among all the GOC’s and they act according to that specific message. Here is another picture if i keep hammering it with my guns, it explodes when its health reaches zero:

All those green lines and dots around my GO’s come from the Farseer Physics debug viewer. Every Game Object that has a Physics Body attached to it can be debugged this way.

I can post some code if it is needed, but this code will mostly be focused on my needs inside the game. So if you do want to see some code, just post a reply and we will make it work :).

Happy new year and some updates

By | Blog, XNA Games | 4 Comments

First of all i would like to wish you all a verry happy New Year 2010!

I know some of you might think, where are the updates regarding Maladras?? Well i am sorry to say that i lost all of my coding work… :( This due to the fact that i was not having a CVS up at that time. This has teached me a verry good lesson and i now have a CVS up at all time and that is being backuped up a few times a week! The only version i still have is a rather old version that is missing loads of stuff in comparison to the version that is on the marketplace. Maladras was my first ever completed game for the XBOX and it just breaks my hearth that i lost most of the stuff.

I wished i updated here sooner with the news but things happened in real life that i do not wish to discuss here, but where in the way for me to update here. But everyhting is picked up again and i am happy coding again.

A new game?
I am currently working on a new game. The aspects of the game isn’t really decided yet and thus i cannot give anymore information, the only thing i do know is that it will be a top-down 2D shooter.

Work has begon on the editor a few weeks ago and i have a pretty solid foundation now. The stuff that is inside the editor right now are:
- Load/save functionality of the maps
- Render window
- Treeviews listning the Layers for Maps
- Add/delete new layers
- Add/delete point lights to the map (shader driven)
- Component based object manager and treeview functionality to add and delete objects and components
- some more small stuff

Here are two screenshots of the editor in action:

Thats it for now, i will keep you updated on the status of the editor and the game itself :).

Maladras on Xbox Marketplace

By | Blog, Featured, XNA Games | No Comments

Maladras has been submitted onto the Xbox360 Marketplace for about a month now! It can be found here. I also have found some positive feedback about my game.

Some quotes from other websites:

The Popcap visual style (Zuma, Peggle, etc.) is becoming about as overdone as the neon graphics popularized by Geometry Wars. On the other hand, having a solid graphical reference point in your low budget indie game ain’t such a bad idea. Maladras seems to run with this notion, skipping over artistic merit and focusing on polished and unique puzzle gameplay. It’s a card matching game with a twist, but before you groan, know that Maladras follows through brilliantly. The cards are laid out before you, face up – the trick is that you have to be able to draw a line from one card to the other, and that line can only change direction twice. It’s certainly a little odd, but once you see it in practice it makes sense. (200pts) (Link)

Maladras is a wonderful puzzle game where you must clear the board of matching tiles if an invisible line can be drawn between them. There are 40 levels, and they are split into 5 campaigns each adding a new wrinkle to the gameplay so it feels fresh and new the entire way through. (200pts) (Link)

OK, so now we finally have some decent puzzling in this week’s ocean of crap. It’s a pretty simple tile matching game with a few very well defined rules. Lines between tiles can’t make more than 2 turns and you can take lines outside of the play area. It’s simple to begin with but gets much more complex as environmental hazards, an increasingly unforgiving timer and walls that your line can’t go through are introduced. It’s the kind of simple that I’m more than willing to subscribe to for 200 points, puzzle fans should certainly check it out.

Try It  (Link)

Okay, I’m starting to get a little freaked out now. Maladras takes the basic foundation of a tile matching game, adds in the twist of a line that has to connect the two tiles but can only “bend” twice and… well, it’s good. In fact, it’s astonishingly polished for a game this cheap and one Vincentvsoolen has side-stepped the temptation to price it in line with other titles this polished. It’s a gamble I hope works, as the game really is solid, and should provide a decent distraction for a few hours. Not bad for just 200 Points.


Reading all these review makes me a happy man, because everybody thinks positive about Maladras and thats really good to hear! I just want to thank all these sites for making time to review my game.
I will post some screenshots from the game later on, for now you can view these on the marketplace.

Level Editor Makeover

By | Blog, XNA Games | No Comments

The first level editor i created (previous post) didn’t live up to my needs. So i decided to recreate a new level editor that lets me add new things easily if i needed to. These are the new features so far:

  • Render content will be scaled to the size of the box
  • Different modus to select or place tiles
  • Able to edit the properties of the selected tile
  • Preview of the selected tile to be placed
  • Copy and paste level contents
  • Game play tile generator. This will generate tiles that can be removed on the board layout.

The new level editor looks like this now:

New Level Editor's UI

New Level Editor's UI

Level Editor

By | Blog, XNA Games | No Comments

I recently created a new, yet simpel level editor for “Maladras”. This gives me the ability to create, delete, update levels quickly.

This editor will create an XML file, that once generated can be used inside the actual game.

This editor looks like this:

Editor Screenshot

Editor Screenshot