Tuesday, 28 September 2010

Phone 7 XNA Tile Engine Base Solution

A lot of the game ideas I have require a tile engine as a base. I've had a few ideas for Phone 7 games but thus far I've given up at the first hurdle - a tile engine.

I've now resolved that issue by creating a base solution with a ready-to-go tile engine that is suitable for side scrollers, top down and RPG-style maps. I've decided to release it so that anyone else in my position should be able to pick up this base solution and get cracking on tile-based games.

The solution imports maps created with Tiled.

Here's a video of the engine in motion:



And a handy list of all the features of the solution:
  • Suitable for side-on and top-down games
  • Good for platformers, RPGs, shooters, racers, adventures - anything that needs tiles!
  • Works in landscape or portrait with one line change.
  • Built on the Windows Phone 7 XNA Gamestate Management engine sample.
  • Uses Nick Gravelyn's content pipeline extension for the "Tiled" editor.
  • Simple but flexible camera class that clamps to the map boundaries.
  • Draw the whole map at once, or one layer at a time for flexibility.
  • Parallax scrolling simply by adding a couple of properties to a layer in Tiled.
  • An overload to draw a layer as "shadows" by drawing offset+black+semi-transparent.
  • Per-pixel colour-based collision detection on specified layers/tilesets.
I've added a whole bunch of comments to hopefully help some beginners along the way. Please note that this is just a base engine for a game, and won't help you magically write your actual game mechanics!

This is the first time I've released some code with the intention of helping other developers, so please leave comments below. I'll address any questions in future posts. If anyone with a real device reads this, please consider giving it a run on a real phone - I'd love to know how it performs (if it runs at all!). Take some video as well!

A few screenshots next, download link is at the bottom of the post!



Tiles used in the solution are released freely at Lost Garden.

Please note that the solution is built on XNA 4.0 and will not compile using older versions of the XNA SDK.


8 comments:

Esente said...

In your modified "Map.cs" in TiledLib namespace, you have this line in the Draw function:

DrawLayer(spriteBatch, layer, gameCamera, Vector2.Zero, 1.0f, Color.White * l.Opacity);

The compiler gives me error:

Operator '*' cannot be applied to operands of type 'Microsoft.Xna.Framework.Graphics.Color' and 'float'

I'm trying to re-use your engine for my Windows-based project.

Gareth said...

The solution is for XNA version 4, the latest release. The ability to multiply a base Color to apply alpha is a new XNA 4 feature, so is it possible you're trying to compile using an older version of XNA?

Either way, you'll probably want to see my latest post here: http://fatsweb.blogspot.com/2010/10/xna-tile-engine-base-solution-updates.html for a Windows and Xbox 360 version of the solution.

Esente said...

Yes, I'm using XNA3.1 since I don't work on Phone 7. I checked your latest post, but it uses XNA 4.0 also. Is there anyway to modify it to be compatible to 3.1?

Gareth said...

I wasn't planning on a 3.1 version, but it wouldn't be too hard to convert. You would have to be aware of the changes that were made from 3.1 -> 4.0, in particular to BlendStates and the Color constructor.

- Start a new 3.1 Windows game
- Download the 3.1 Gamestate Management sample, copy all the classes across to your project and rename namespaces. Compile.
- Download my 4.0 HiDef solution, copy and add the Tiled content pipeline library and TiledLib projects to your solution. Also copy across my Player class if you want to use it as a base.
- Compile and fix errors, such as replacing Color*alpha to new Color(color, alpha)
- Pick out relevant bits from either of my GameplayScreens and add them to your GameplayScreen.

If I find myself with some spare time, I'll create a 3.1 build, but you should probably consider moving to 4.0 anyway, especially as you're just starting the project :)

Esente said...

Thank you Sir!

I actually have been working on my project for a while. I, however, have been using rectangle-based collision detection, so I found your pixel-based quite convenient. That's why I am trying to adopt it.

I guess I'm having trouble because I use the latest version of Nick's TiledLib, while you went ahead and forked a different variation.

Ruairí said...

This is so useful. I've been making the same 2D RTS game for Android and Windows Phone 7 as a college project. I was halfway through making the thing before I found this. I can code but it is my first attempt at a game. Your engine is saving me a great deal of work and helping me understand many concepts I was having trouble with. Thank you so much for this.

Yogi said...

Hi,

Thanks for this wonderful sample (and the updated version).
I really appreciate to see the use of TiledLib, screen management and all other stuff (inputs, ...).

Your sample seems so good and self explanatory to me, i just have to thank and congratualte you about this :)

I also noticed and appreciate the link to LostGarden tiles.

Then, I just have a question about the wizard. I didn't find it at lost garden (I'm sorry if I just missed it, but really spent time to try to find it :s).

* Could you please let me know where it is coming from and, if it is coming from you, the license terms concerning it ?


Thank you for considering this question, and anyway, thanks again for this really good sample. It did just kick my ass to get back on duty, and make my own game little further again :)

Nexus1216 said...

Hey I'm having trouble figuring how to add more tile sets. Ive tried to set the tile and layers like you suggested but nothing i get no collisions (i also tried to check what the properties were on the wall layer and TileSet1 and it appears they do not have any properties configured)

what would be the proper way to enter a house or dungeon (would you use an object (placed on top of the tile that represent the door) that loads another screen?

sorry for all the questions (i'm a noob)

Either way great source code thanks for putting it out there