Creating a level/map from an image using RGB and do collision detection

Newbie & Debugging Questions
#1

hey guys :slight_smile: i know java very well now but i have never actually made a proper game, so i wanted to start making a game :stuck_out_tongue: and yea it did not take to long until i got stuck a few times xD well i have seen some people use images and convert them into maps/levels using RGB data and i would like to know more about how this works and especially how u collsion detects the “blocks”/tiles after rendering the map in-game

basicly:
gimme as much information as possible on this subject! xD

#2

Hi

I do it in TUER/JFPSM:
Input:

Output:

My source code is under GPL, feel free to use it if you agree with the licensing terms.

#3

yea im more into 2D atm as i said its my first game :stuck_out_tongue: and could u explain a litlle how it works ?

#4

Sorry, maybe my program is a bit too difficult to understand for a newbie, I have worked on it since October 2006. Each color matches with a pattern. I read the image, I convert it into patterns with positions, I convert them into several meshes. The first image contains 256 * 256 pixels. The blue pixels are replaced by full walls (places in which you can’t go) and green pixels are replaced by a piece of floor + a piece of ceiling + lateral walls (some useless lateral walls are optionally removed). You can see the level in Blender in the second picture, it is exported as an OBJ file in the alpha version and as an Ardor3D file in the pre-beta version.

Some people here spoke about a nice 2D tile editor some weeks ago, I have forgotten its name :frowning:

#5

yes i see :stuck_out_tongue: and yes it is to advanced lol i jsut want the barebones atm :wink: back to topic:

uhmm yea i am really struggling with finding any resources on this :stuck_out_tongue: could anyone maybe explain me the proccess of converting each pixel into RGB values and so on ? :stuck_out_tongue: i really just want to know how to do this lol

EDIT: i started just messing around with pixels and shit for maybe an hour or so and made a method to read the getRGB of every pixel in an image and store it in a array as an integer :slight_smile: the problem now is that this is a sample output:

328965

and i thought RGB was like “eee9e9” or “220-220-220” so idk how to use that when its not a “RGB” to me xD i hope someone can explain this :stuck_out_tongue:

#6

I assume you get this value from BufferedImage.getRGB(). By default, it is in the ARGB format, it means that the first byte contains the alpha (for transparency), the second one contains the red component and so on…

You can do that:

int red = (rgb >> 16) & 0x000000FF;
int green = (rgb >>8 ) & 0x000000FF;
int blue = (rgb) & 0x000000FF;
#7

#8

this is how I do it, in my level class:

levelImg is 48x48 image with each pixel representing one tile, also I created Tile classes ( FloorTile, WallTile etc ).

getColor method :

	private int getColor(int x, int y) {
		int col = levelImg.getRGB(x, y);

		int r = (col & 0xff0000) >> 16;
		int g = (col & 0x00ff00) >> 8;
		int b = (col & 0x0000ff);

		return r << 16 | g << 8 | b;
	}

Then create tile based on color :

private void fromFile(String string) {
		try {
			levelImg = ImageIO.read(BlackGlass.class.getResource(string));

			for (int y = 0; y < h; y++) {
				for (int x = 0; x < w; x++) {
					int col = getColor(x, y);

					Tile tile = new FloorTile();
					if (col == 0xff0000) tile = new WallTile();

					tiles[x + y * w] = tile;
					tile.init(this, x, y);
				}
			}
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

Basicaly, you just put 0x and then the hexadecimal color value, you can find out this in paint.net or photoshop or by loads of other software…