How do I convert an image into a tile map?

Question

I am working on a game in Pygame/Python, and I'd like to turn an image into a map.

The idea is simple: Pixels in the image are colored by tile type. When the program loads the image, I want the color (e.g. #ff13ae) to be matched to a certain grass tile, and the color (e.g. #ff13bd) to a different tile.

I know that I may have to convert from hexcodes to RGB, but that is trivial. I just want to know the way I to go about loading an image file, mainly because all my other games don't do anything of this sort.

Answer 1

I did this once by drawing maps in GIMP and saving them out to portable pixmap format (PPM), because PPMs are really easy to parse.

A PPM-parsing library (or a parser for a more complex image format, actually) might exist for Python already, but to keep this maximally useful for everyone, I'll explain the concepts.

Just to get an idea of what we want, here's one of my levels, converted to PNG format:

There's a tiny little yellow pixel in a room to the left indicating the player's start position. Green are lit-up "sky" tiles, white is "ground", blue is "water" and red is a "finish line". (The level ends when you jump off the floating island at the top there.)

PPM files are plain text. They look like this:
^{(stuff after | are my commentary, not part of the format)}

P3         | "magic number", always the same
200 120    | image width and height, in pixels
255        | maximum value of a colour channel
128        | red value   of first pixel
128        | green value of first pixel
128        | blue value  of first pixel
0          | red value   of second pixel
0          | green value of second pixel
0          | blue value  of second pixel
           | ... and so on for every pixel, and that's it

The pixels' values are recorded left-to-right and top-to-bottom. Here, the very top-left pixel has an RGB value of 128, 128, 128 (grey). The pixel one to the right of that is 0, 0, 0 (black).

Pay attention to the specified maximum value though. It's 255 in this example, so the first pixel's values are 128/255 = 0.5, which results in grey. If the maximum had been 128, the values would be 128/128 = 1, giving white! (GIMP seems to always set the maximum value to 255. It's pretty sensible.)

To parse such a file, you'll want to

1. check that the first line is P3 (just in case),
2. record the image's width and height from the second line, and
3. keep reading three lines at a time, recording pixel values

At the end you can check just in case that you got width * height many pixels.

As you read the pixels, convert them to your chosen tile meanings, and store them however you like. (For example, your colour #ff13ae corresponds to a pixel of RGB-values 255, 19, 174.)