I'm trying to make a huge tile-based map for my game. I've authored a large source image of the map and saved it, but now I'm unsure how to break this up into tiles and render it as a grid so I can have tile-based movement and mark certain tiles as collision, et cetera.

How should I go about this?

  • \$\begingroup\$ This is how [VASSAL][1] builds games; it is an Java open source game library that supports several hundred games. Once the grid is aligned on the map, it works quit well. As the code is open source, it is available for any non-commercial application I believe. [1]:vassalengine.org \$\endgroup\$ Commented Jun 19, 2013 at 5:44
  • \$\begingroup\$ Sorry if the question is unclear, but im going to try see how it goes by doing a single image and aligning a grid over the top of it.. Can anyone help provide a code or a tutorial i can follow in producing a grid, preferably 32x32 tile based that i can put ontop of the image 'map' \$\endgroup\$
    – kraze
    Commented Jun 19, 2013 at 7:23
  • 2
    \$\begingroup\$ Unsure what you want. Do you want a way to place units/tiles in a grid on top of your map, OR do you want a way to procedurally generate tiles from your predrawn map? \$\endgroup\$ Commented Sep 17, 2013 at 9:16
  • \$\begingroup\$ This isn't generally a site that's just going to give you links to tutorials, or specific code you can read or copy. You've asked a very general question and you are likely to get reasonably general answers that cover the basic theories you will need, with enough information that you could research the specific (or ask separate, follow-up questions on anything that you encounter that is a problem as you build the implementation). \$\endgroup\$
    – user1430
    Commented Jan 15, 2014 at 17:52
  • \$\begingroup\$ Does this image represent each tile as a single pixel? \$\endgroup\$
    – Lysol
    Commented Jan 15, 2014 at 19:28

1 Answer 1


To represent the logical set of tiles in your map (which includes information about the collision or passability of a tile), you can have a Tile class, for example:

class Tile {
  public bool IsWalkable { get; private set; }

You must define a tile size (constants TileSizeX and TileSizeY). Then when you load your map, you know how many tiles the map has via some simple division (widthInTiles = ImageWidth / TileSizeX for example). Once you have compute the tile counts in both directions, you can create an array to store all the tiles:

Tile[] tiles = new Tile[widthInTiles * heightInTiles];

You could then load collision information or other tile properties from another data file, such as a simple text file where each line represented a row of tiles and each character one of the tiles in the row. For example, if 0 represents a passable tile and 1 represents a wall, a collision.txt file for a simple small map might look like:


You can load that text file and read each character, using that data to initialize the individual tiles in the array you just created. You now have the basics of logical tile-based representation of the world, with collision data, using a large non-tiled map as the background.

Note that while you could just render the source background image as a large texture, you probably don't want to do that beyond a certain size. You want to actually split the source image up into smaller images of some defined size (they do not have to correspond 1:1 with your tile sizes) and load and render those. This allows you to drop non-visible chunks of the map from memory. You can eventually apply a similar logic to your tile map data if your maps get large enough. You can do this splitting at load time when you read in the original source image, or you can do it offline as a pre-processing step.

If you want to render grid lines, you can bake them into the texture (again, at load time or in a pre-processing tool you write) or render them dynamically overtop the texture chunks for the background.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .