Varcade Dev Blog

Games

Generating Terrain with a Shadow Map

by on Mar.17, 2011, under Games, Graphics

A good bit of time was spent finding a technique to generate original levels / playfields.  I hope to be able to create a variety of different levels, some with a single enemy path, some with multiple paths, in a range of environments.  I ended up using Terrgen Classic to generate a terrain. The tricky part was figuring out how to ‘carve’ a custom paths into that terrain, but I think the results are pretty good.  By rendering a near overhead view, I was able to get the perspective to match that of my game units. Here is the results of the first test level.

 

Here is how the camera was setup in Terragen for an overhead shot:

The terrain itself is created using a gray scale height map. This can be generated in Terragen, or imported from a 3rd party app.  I started by first generating a random terrain in Terragen, exporting that to a paint program, and creating the paths ( roads ) by darkening  ( lowering ) them.

terragen landscape settings

Once you have a terrain created or imported, you will want to color it.  This is done with the surface map controls in the same dialog above.  The surface maps allow you to define color based on Altitude and Slope.

 

terragen surface layer controls

 

I was able to create a road by telling the surface below 280 meters and relatively flat to be gray.  A 2nd surface was created for the walls of my cannon roads, by coloring only terrain at a similar altitude, but with a much steeper slope .

 

Lastly, by rendering another version of the terrain without color, and high exposure, I was able to catch only the shadows and create a shadow map.

terragen shadowmap

This can be rendered using transparency in the XNA Sprite Batch after any ground units ( enemies ) so they appear to move into and out of shadows cast by the landscape.  Performance on the XBox doing a full screen overlay was fine.  It even worked well on a WP7 Phone.

 

terragen level, enemies, and shadowmap

Leave a Comment more...

XNA Drawing 2D Lines, Shapes, and Laser Beams

by on Feb.26, 2011, under Coding, Games, XNA

I’ve been using this great XNA lib for drawing 2D lines, circles, and shapes for awhile. I’m using an older version that I cleaned up to minimize garbage collection ( to none! ), but the code is still being updated by CentauriBoy on the AppHub forums, and recently got anti-aliasing and filled shapes added.

Home thread on XNA forums: http://forums.create.msdn.com/forums/t/7414.aspx

Download: BasicPrimitives.zip

Docs:  HOW_TO.txt

A simple example I use to draw a laser beam

beam = new BasicPrimitives(Game.GraphicsDevice);

beam.ClearVectors()
beam.AddVector( this.position ); // Vector2
beam.AddVector( target.position ); // Vector2
beam.Colour = new Color(255, 255, 255, 180);
beam.Thickness = 1;
beam.RenderPolygonPrimitive(spriteBatch);

Notice the color in this example is slightly transparent. For my laser beams, I’m stacking 3 to 5 of these lines with slight offsets to get a glow effect. Also note that using ‘new Color’ in a draw loop is bad practice. You never want to be creating anything in your loops because it will later need to be removed by the garbage collector. To eliminate garbage collection, you would define your colors once in a constructor, and re-use them.

1 Comment more...

Timing Problems and Solutions

by on Mar.07, 2010, under Games

I added a 2D Camera to the game. This allows zooming, panning, and rotation of everything in the game word.  I’m not actually using it for anything yet, but I imagine it will be nice to have when I have to start worrying about supporting widescreen vs standard def resolutions.  Also it can be used for special effects like camera shake on big explosions.

Now I noticed my Pickers movement was not as smooth as it should be, even though my frame rate was a easy solid 60 fps.  Others have noticed this as well and there has been a good bit of discussion on the subject.  The summary is, by default, the XNA framework runs in a fixed timing mode, fixed at 16.6 ms per update, or 60 fps.  But if you do some testing of this, people have found that the end results are actually more around 58 fps, somewhere frames ARE being dropped.  Depending on the kind of game and the kind of movements being done, ( or you ability to perceive such things ) it isn’t always noticeable.  It was definitely bothering me, so I changed the timing mode to variable time step, and things smoothed right out.

 this.IsFixedTimeStep = false;

There really is no downside to not using fixed timing, except it require you to do you own time management in the update loop. It’s simple to do, and I was already doing it anyway, a habit from previous physics related projects. Anything time related just needs to be applied against the Time Delta.  So instead of moving an object by X amount because you assumed a fixed step, you move it scaled by the actual time passed:

// calculate dt, the change in time since the last frame.
float dt = (float)gameTime.ElapsedGameTime.TotalSeconds;
gameObject.position += gameObject.velocity * dt;

Now with things running silky smooth, I noticed another timing issue. The enemies where changing speed as they followed their path to the destination. Typically slowing down as they approached the next waypoint. It turns out that I’m not crazy, but this is normal behavior using the CatmullRom interpolation in general. Basically, if you are moving between points A and B, and you are taking steps of 1% at a time, you would expect to be 75% of the way to point B after 75 steps. This is just not the case though, you may closer or further depending on how the algorythm defines the spline. The solution to this is to find what point on the spline represents the actualy distance we want. Easier said then done. It’s really not THAT hard, this page describes the idea of measuring the arc lengths of each splice segment, and using them in a lookup table. The only problem is the implementation is left to the reader ( no cut/paste!  ).  So I tackled it, it took quite a bit of time and debugging, but I am happy with the results. The Enemies now move at a constant velocity in world units, no matter the structure, complexity, or irregular placement of the path waypoints they are following.

Leave a Comment more...

Explosions and Waves

by on Mar.05, 2010, under Games

Looking around the XNA site and still learning a lot, I found I nice example of smoke and explosions in the Particles Example. This was fairly simple to get in the game, and shows how to use a DrawableGameComponent, and also my first look at how an inherited class can call a specific constructor of it’s base. This guide on C# constructors was helpful.

I’ve created  the concept of a Enemy Wave, a group of enemies to be deployed. I made a couple more placeholder enemies graphics an gave each type is own class inherited from gameObject. making them easy to create and manage.  I put a ‘startbox’ at the beginning of the path, and check if its empty of enemies ( meaning the last deployed enemy has got out of the way), and deploy more if it is.

The white circle is the cursor, but I’m calling it the Picker.  It moves with the left thumbstick, and you can accelerate its movement my using the left trigger. It’s working pretty well in place of a mouse.  I’ve created a color map to determine if the picker is over certain areas.

The code for that looks like:

currentLevel.backgroundMask.GetDat(0, selectRect, pixelData, 0, pixelData.Count());

     foreach (Color color in pixelData)
     {
         // test is everything in White
         if (color != Color.White)
         {

            isSelectable = false;
            break;
          }

      }
Leave a Comment more...

Smoke on the ground

by on Mar.04, 2010, under Games

I was able to expand the pathing a bit, now enemies can have a path offset when they are deployed, this lets multiple enemies travel in a sort of formation. It is still primitive but works. In the screenshot below, the white dots are the defined path, the colored ones are the ones the enemies are using.

It took a while to figure how to create an offset path, having done something similar in 3D in the past, I was pretty sure I would need the cross-product or some fancy math to find my new point,  the solution turned out to be incredibly simple:

public static Vector2 Perpendicular(Vector2 a)
{
return new Vector2(a.Y * -1, a.X);
}

Ya, I  havn’t really tried to understand how it works, it just does.

I also created a smokeObject class, to make dust clouds as gameObjects move across the ground.  This turned out pretty nice, after a good bit of trail-and-error, I got the smoke to get pushed along with the object like a wake on a boat, then fall off, and get pulled away with the wind.

Leave a Comment more...

3D to 2.5D with Sprite Sheets

by on Mar.02, 2010, under Games

Having gone thru the 2D Turorial, I learned how to load, draw, move, and rotate a sprite using the XNA framework.  Then I had a look at some sprite sheet tutorials, such as Sprite Sheets in Xna: The Basics

Now I wanted to get my own graphics in play, and simulate some 2.5D.  Specifically, a 3D rendered object that would show a different angle depending on the direction it is moving, roughly like so:

moving left: moving up: moving right: moving down: 

Now if we were doing a straight top down view, we could use a single overhead image in our sprite, and just rotate it in XNA.  But since we are showing a little bit of perspective ( note how you can see the near side of the tank slightly in the left and right views ), we will need some pre-rendered images of all ( or most ) of the possible angles the object can be seen at.

I grabbed a free model from TurboSquid.

I found several scripts for 3D Studio, that would help automate the process:

Sprite Render Script – did not try this one yet, but looks good
Sprite Render Tool – used this one, it’s old and had a bug I had to fix when doing more then the default 8 views

Other utilities used to finish the process:

Smart Cropper V2 – batch image cropper that finds the smallest size across multiple images
GlueIt 1.06 – joins multiple bitmaps into a single sprite sheet

Here is what my first attempt resulted in (rough version with bad shadows):

 

I was able to render these to PNG format so the transparency mask was built in, and worked perfectly to blend them to the background in XNA.  I created a new class for my game objects, that would automatically display the correct panel based on the object’s current direction of movement. And then I tweaked it one step further, that if the rotation in the image wasn’t an exact match to what was happening in game, it would compenstate by adding a a slight amount of rotation to the sprite as well.  After a bit of tweaking, this came out very nice.

3 Comments more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Blogroll

A few highly recommended websites...