tIDE: Tilemap Integrated Development Environment

This is a short tutorial explaining how to get started with the xTile tiling engine using Game Studio 3.1. By the end of this tutorial you should have a working XNA 3.1 game application for Windows featuring a parallax scrolling animated map.

You can access a copy of this tutorial in PDF format here.

Prerequisites

• Visual Studio 2008 (any edition)
• .NET Framework 3.5
• XNA Game Studio 3.1
• xTile Engine libraries (xTile125.zip for compatiblity with Game Studio 3.1)
• tIDE map content (TutorialContent120.zip)

Steps

1. Start Visual Studio 2008 and create a new XNA Windows Game (3.1) project and name it xTileGame1.

   

2. Using the Solution Explorer panel, create a new solution folder named xTile directly under the solution. Also create a corresponding xTile folder on disk within the xTileGame1 solution folder.

   

3. Copy the xTile.dll (PC version) and xTile.Pipeline.dll assemblies from the downloaded xTile Engine ZIP archive into the xTile solution folder created previously. Add the assemblies as existing items under the xTile folder in Solution Explorer.

   

4. Add an xTile.dll reference to the xTileGame1 project.

   

5. Add an xTile.Pipeline.dll reference to the Content project of the xTileGame1 project (not the game project itself).

   

6. Add a tIDE map file and its associated tile sheet images in the Content project. Create content folders as necessary to maintain relative path references from the map file to the tile sheet image sources. Ensure that the map file's Content Importer and Content Processor properties are set respectively to tIDE Map Importer and tIDE Map Processor. Also ensure that the Build Action property of the tile sheet image files referred by the map file is set to None to avoid conflicts with the map's content processor.

   

7. Compile the project and verify that the tIDE map file is being correctly processed by the content pipeline.

   

8. Access the code file Game1.cs and add the following using clauses for the xTile engine:

   

9. Add member variables for an xTile map, display device and viewport:

   

10. Within the Initialize() method, instantiate the map display device, load the map resources and set a display viewport:

    

11. Within the LoadContent() method, load the map from the content pipeline:

    

12. Within the Update(GameTime gameTime) method, update the map for tile animation and update the viewport for level scrolling:

    

13. Within the Draw(GameTime gameTime) method, render the map visually using the display device and viewport:

    

14. Compile and run the xTileGame1 project.

    

This is a short tutorial explaining how to get started with the xTile tiling engine using XNA Game Studio 4.0. By the end of this tutorial you should have a working XNA 4.0 game application for Windows featuring a parallax scrolling animated map.

Prerequisites

• Visual Studio 2010 (any edition)
• .NET Framework 4.0
• XNA Game Studio 4.0
• xTile Engine libraries (download xTile120.zip or later from http://tide.codeplex.com/releases)
• tIDE map content (download TutorialContent201.zip or later from http://tide.codeplex.com/releases)

Steps

1. Start Visual Studio 2010 and create a new XNA Windows Game (4.0) project and name it xTileGame1.

   

2. Using the Solution Explorer panel, create a new solution folder named xTile directly under the solution. Also create a corresponding xTile folder on disk within the xTileGame1 solution folder.

   

3. Copy the xTile.dll (PC version) and xTile.Pipeline.dll assemblies from the downloaded xTile Engine ZIP archive into the xTile solution folder created previously. Add the assemblies as existing items under the xTile folder in Solution Explorer.

   

4. Add an xTile.dll reference to the xTileGame1 project.

   

5. Add an xTile.Pipeline.dll reference to the xTileGame1Content content project of the xTileGame1 project (not the game project itself).

   

6. Add a tIDE map file and its associated tile sheet images in the xTileGame1Content content project. Create content folders as necessary to maintain relative path references from the map file to the tile sheet image sources. Ensure that the map file's Content Importer and Content Processor properties are set respectively to tIDE Map Importer and tIDE Map Processor. Also ensure that the Build Action property of the tile sheet image files referred by the map file is set to None to avoid conflicts with the map's content processor.

   

7. Compile the project and verify that the tIDE map file is being correctly processed by the content pipeline.

   

8. Access the code file Game1.cs and add the following using clauses for the xTile engine:

   

9. Add member variables for an xTile map, display device and viewport:

   

10. Within the Initialize() method, instantiate the map display device, load the map resources and set a display viewport:

    

11. Within the LoadContent() method, load the map from the content pipeline:

    

12. Within the Update(GameTime gameTime) method, update the map for tile animation and update the viewport for level scrolling:

    

13. Within the Draw(GameTime gameTime) method, render the map visually using the display device and viewport:

    

14. Compile and run the xTileGame1 project.