DooM fangame: Progress Report #9 - Some Mapping Goodness

During the holidays I've been able to squeeze out some progress on this project (I'm tempted to call it MY DOOM, given how hard it is turning out to be).

One thing I've implemented is the ability to load a map from a PNG image, so I don't have to edit maps by manually typing numbers into arrays, so I wen't ahead and converted this image:

Into this other image:

And loaded it into the game to result in this:

Zoomed out for effect

Not happy with this, I kind of took a look at the procedural generation, spotted what was causing it to fail (lots of unprotected data arrays, I might need to have a chat with the developer I got the base code from), and went ahead and fixed it.

The following are two different game launches, with the same parameters:

So... Yay!

I've also done some much needed re-factoring to get everything properly organized and excise some obsolete code.

In case anyone is curious, I'm forcing myself to adhere to the MVC paradigm for the time being, because all the code was getting mixed up horribly. My approach, at least for now, is this:

  • Model: All that has to store data, be it entities, maps, configurations, sprites, audio or whatever. 
  • View: Everything that the user interacts with, in other words, graphic rendering, audio playback and user input (yes, "view" is not a good name, but MVC was designed for web applications and I'd better not start messing with the nomenclature right now)
  • Controller: All the "under the hood" operations that use the Model to modify the View. Game logic, network code, physics code, system operations, and the like.


Anonymous said...


I am interested in this process of transformation from PNG image to tileMap (making a search of Google, i can find some results but nothing relevant). Can you send me your "source" of inspiration? ... thanks in advance! :)

Nk0 said...

It's very simple, I just read the image data as an array of integers with the color information (ARGB in this case) and convert that to tiles.

In the above example I'm doing a simple color matching conversion (Blue=Wall, White=Floor, etc...) but currently I'm using bit masking to use each color channel as an independent data value (Blue channel for tile type, Green channel for decorations, etc...).

In my case I use standard Java libraries:

import java.awt.image.BufferedImage;
import java.io.File;
import javax.imageio.ImageIO;

BufferedImage infoImage = ImageIO.read( new File(filePath) );

int width = infoImage.getWidth();
int height = infoImage.getHeight();

int[] pixels = new int[width * height];
pixels = infoImage.getRGB(0, 0, width, height, pixels, 0, width);

} catch (IOException caughtIOEx)
{ ... }

Nk0 said...

Oh, if the question was how to convert the original E1M1 image to the pixelated version I load into the game... I did that by hand using GiMP :P

Post a comment