XNA Level Editor

I’m working on a level editor for creating XNA games.

At the moment, it only supports the 2D game engine I’m working on, but I’m planning to extend both the engine and editor to support 3D graphics (but keeping it to 2D logic for the time-being).

This is what the editor looks like when it loads:
Level Editor
The grid can be turned on or off, and the grid size will be editable in the application settings.

From here, you can load your images, and place them in the level: Level Editor Images Note: game sprites are from Lost Garden.

The engine supports the Farseer Physics engine for XNA, and the editor supports drawing polygon and rectangle collision objects (visible as magenta lines):
Level Editor Collisions

I wrote a custom processor to get the level into the game engine, so I only have to save the level in the editor and add it to the Content project in XNA Game Studio, along with the images that I’ve used:
Level Content Processor

Then I just need to add some code to the LoadContent method to load the images and create the collision objects in Farseer:

foreach (PolygonCollisionEntity poly in level.PolygonCollisionEntities)
{
    Body polyBody = BodyFactory.Instance.CreatePolygonBody(new Vertices(poly.Vertices), poly.Mass);
    polyBody.IsStatic = true;
    Geom polyGeom = GeomFactory.Instance.CreatePolygonGeom(physicsSimulator, polyBody, new Vertices(poly.Vertices), 1.0f);
} 

foreach (RectangleCollisionEntity rect in level.RectangleCollisionEntities)
{
    Body rectBody = BodyFactory.Instance.CreateRectangleBody(rect.Width, rect.Height, rect.Mass);
    rectBody.IsStatic = true;
    rectBody.Position = rect.Position;
    Geom polyGeom = GeomFactory.Instance.CreateRectangleGeom(physicsSimulator, rectBody, rect.Width, rect.Height);
} 

foreach (string textureName in level.TextureResources)
{
    Texture2D texture = Content.Load<Texture2D>(textureName);
    level.Textures.Add(textureName, texture);
}

Then I can run the level:

Level In Game

The collision objects are visible as dark green lines, and the green and white boxes form a chain, implemented in Farseer, interacting with the level.

Next up I plan on implementing the following features:

  • Modify level content processor to load textures automatically, so that they don’t need to be added manually
  • Implement a camera system to be able to create larger levels and move around them
  • Add functionality to the level editor to be able to edit objects once they have been placed
  • Implement the Properties tab using the .NET Property Grid control to be able to edit the properties of selected objects

Once that’s done, it’s on to the game itself!

Share and Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • DotNetKicks
  • Twitter
This entry was posted in C#, Game, Programming, WinForms, XNA and tagged , , . Bookmark the permalink.

10 Responses to XNA Level Editor

  1. Nick says:

    Wow that looks great, are you planning on releasing it? (The editor I mean) :)

  2. dylan says:

    Thanks :)
    I have no plans to release it the way it is (the code is pretty hacked-together at the moment), but I should tidy it up a bit and put it on CodePlex or something.
    Let me know if you’re interested!

  3. kelts says:

    hi dylan, I am doing a 2d game project which requires a level editor like yours. I’m very interested about your editor. It will be nice if you can share with me how you do it. =)

  4. john says:

    that’s a great editor you got there.i would love for you to share or help me how to do one too.i need to do one.

  5. Cedric says:

    Hi Dylan, is it possible to share with me your code, i would like to make an editor like this. It’s a very beautiful editor and it can help me to do make it for my 2d game, for my study.
    Thanks for your help, and good luck :)

  6. Fred says:

    how did you add the images in the tabpage like that

  7. dylan says:

    I wrote a couple of custom WinForms controls; one that inherits from PictureBox to represent the image thumbnails and draw a border around them, and another that inherits from FlowLayoutPanel to act as a container for the pictures, with some simple selection and deselection code.
    I’ll upload the source in another post so you can see it.

  8. Fred says:

    Ok Great Thanks

  9. Fred says:

    Sorry to mess with you again but I was wondering if you could upload the source code for your editor because I’m having a little trouble. if so that would be great thanks in advance

  10. Kason says:

    Great work! When you’re ready to go 3d let me know. I have been working on a modeling tool that has a level editor plugin I’m working on. See my blog for lots of info on the subject. Happy coding. Jason.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>