[SOLVED] Simple Tilemap from Image file noob question :D

Newbie & Debugging Questions
#1

Hello JGO, bringing forth a rather nooby question tonight but I’m in need of help ;D

Lets say I have a Image that’s 2x2 and each pixel is colored green.

I want to scan the picture and detect if the pixels green. (completed)
I’d than like to render a tile which corresponds with the data in the image.

The problem I’m having is actually rendering on my map based off of the read data.

At the moment this is how I’m loading the map:


	public void preInit(double currentPercentage) {
		if (!loaded) {
			/* ...... */
			/* Map Loading */
			int[] pixels;
			try {
				final BufferedImage img = ImageIO.read(new File("res/textures/terrain/map_1.png"));
				final int width = mapImgW = img.getWidth(null);
				final int height = mapImgH = img.getHeight(null);
				tiles = new int[width * height];
				pixels = ImageUtils.getPixelsFromBufferedImage(img); // Correctly obtains pixels[]
				final int green = -14503604; // Green ^_^
				for (int i = 0; i < pixels.length; i++) {
					if (pixels[i] == green) {
						tiles[i] = 1; // Assign the tile type, 1 = green(grass)
					}
					//System.out.println("Number at slot " + i + " is: " + pixels[i]);
				}
			} catch (IOException e) {
				e.printStackTrace();
			}
			loaded = true;
		}
	}

If anybody could advise me on how I’d go about rendering the tiles please let me know ^_^, I’ve never done this before and I’m kinda stuck ATM ;o

#2

The way I’m reading it, you’re loading an image and rendering all of the green pixels on to the screen… Do I understand your code right? Is that what’s happening now?

If yes, what did you want to do again, if not that? :slight_smile:

I’m not familiar with ImageUtils.getPixelsFromBufferedImage() btw… where did you get that?

#3

At the moment yea ^_^, I’ll add other colors after green (Grass Texture) is working.

I haven’t found a way to implement it lol, that’s the point of this thread =D

I’d like some pseudo code or advice on how to implement:
Reading a Images pixels, if one’s a certain color render a Texture on the map that corresponds to the pixels color.

It’s from a little ‘toolkit’ I made :slight_smile:


	/**
	 * Scans the BufferedImage provided to obtain the pixel[] data.
	 * @param imageToScan The BufferedImage to scan for pixels.
	 * @return The pixel[] array.
	 */
	public static int[] getPixelsFromBufferedImage(BufferedImage imageToScan) {
		final int width = imageToScan.getWidth(null), height = imageToScan.getHeight(null);
		final int[] rgbs = new int[width * height];
		imageToScan.getRGB(0, 0, width, height, rgbs, 0, width);
		return rgbs;
	}

Notes:
Tiles are 32x32.

#4

I got it >…<

I wasn’t scaling the texture * 32 >:(


		for (int x = 0; x < mapImgW; x++) {
			for (int y = 0; y < mapImgH; y++) {
				if (tiles[x][y] == 1) {
					g2d.drawImage(image_tiles[2].getImage(), x * 32 + mapX, y * 32 + mapY, tileW, tileH, null);
				}
			}
		}

Never mind, the above works but I’m still having issues with reading the map data properly and rendering it properly.

At the moment my map .PNG file looks like (A simple 4x2 .PNG):
[R][G][R][G]
[G][R][G][R]

And I cannot manage to:
Load the data properly, and store it in my tile array.
-or it’s-
Rendering the data incorrectly.

Here is what is rendering at the moment (incorrect):

#5

If somebody could direct me to a guide on how to load a tile map from a Image that would be great!!

#6

I’d really want to help, but I cannot figure out how that 4x2 red + green image was rendered into what looks like grass and stone ???

#7

Wrong picture was uploaded my bad :slight_smile:

Well thanks for the help guys, I was hoping to get a snippet / link reply (Thinking this is a common method like loading tiles from a text file)

I’m going to try loading tiles from a text file tonight :3