How would you go about designing levels from set colours from a .png file ?

General Discussions
#1

Hello, I don’t know wheather my title was clear enough but i was wondering. How would i go about setting certain colours such as “0xff00ff” to lets say a grass block. and when ever there is that colour “0xff00ff” on a .png file it places it in the world. Is this complicated to. PS i am making a 2D game so its not a 3d game. Also another example would be this would be from Notch’s Metagun game from the ludum dare competition:
http://s18.postimage.org/8a5igacl5/levels.png

I hope you can help thanks.

  • GlennBrann
#2

Well, a pixel is generally made up of 4 bytes. The bytes are usually ordered like this: ARGB. Which stands for Alpha, Red, Green, Blue.

1 byte is reserved for each of these values. Together they make up 1 of over 16 million possible combinations/colours (disregarding the Alpha value)

values like “0xff00ff” are Hex values. This is identified by the “0x” that is used by convention to identify Hex values.

Data can be represented in many ways (decimal, hexa, binary, octal etc etc).

This means that the data “0000 0000 0000 0000 0000 0000 0000 0001” (represented here in binary) can be looked upon from Hexal, Decimal or Octal eyeglasses.

In Hex this data/value would be “0x00000001” (1 Hex character is made up of 4 bits (1 byte is made up of 8 bits, 1 bit is either a 1 or a 0 (binary)))

Sooo, basically each pixel in the PNG is made up of 4 bytes (an int is made up of 4 bytes).

So you read these pixels from the image, and then interpret them in some way and convert them into objects in your game.

#3

That’s a good explanation, jonjava, but Java makes our lives so easy, why complicate it ?

You can use BufferedImage.getRGB() to get the int value for each color at its coordinate.



 BufferedImage img = null;
 try {
  img = ImageIO.read(new File("path of your image"));
      } catch (IOException e) {
    e.printStackTrace();
    }
 
 int w = img.getWidth();
 int h = img.getHeight();  

 for (int i=0;i<w;i++)
      for (int k=0;k<h;k++)
	 {
	   int color = img.getRGB(i, k);
          //store color in an array for future use
          //...
          //...
 
	 }
#4

According to THIS stackoverflow question, the getRGB() function is slower than other methods.

#5

that’s why I said “store color in an array for future use”, so you only have to read it once from the image.

#6

I know. I would like to read data as fast as possible, that’s why I pointed it out.

#7

For faster access, you have a couple options. One is to grab the raw int[] array backed by the BufferedImage, which is the fastest:

int[] pixels = ((DataBufferInt)img.getRaster().getDataBuffer()).getData();

The problem is, sometimes ImageIO will load an image using a type other than TYPE_INT_ARGB. So it might be backed by a byte[] array, or an int[] array of TYPE_INT_RGB. A simple solution is to create a new image of the necessary type. The benefit of this method is that you can modify the pixel array to change how the image is rendered.

In your case, since you don’t need to render the buffered image, you might rather use this (which will do the type conversion for you):

int[] pixels = img.getRGB(0, 0, imgWidth, imgHeight, null, 0, imgWidth);

As for how to implement something like this… there are many ways. I like using enums for small projects. You could also use EnumMap or HashMap to query the colors. Here is one possible implementation:
http://www.java-gaming.org/?action=pastebin&id=432

#8

And I think it’s suitable for large world map. If you only have relative normal sized map, pick alternative solution that make your life easier.

#9

You will feel limited when you want to add objects. Especially if you want to have parameterized objects in your map.