What are tiles and how are they created in BufferedImage

Question

I posted a question on the sun java forums once, and it's hard for me to understand the first answer I received from the respondent, although it seems to have given me the right approach to my problem. Link to the question:

http://forums.sun.com/thread.jspa?threadID=5436562&tstart=0

Someone replied that I should use BufferedImage and make tiles. I don’t quite understand what tile means in connection with BufferedImage .

I would like someone to explain to me what tiles are and how they are created in BufferedImage .

I searched the Internet for a while, but could not find a link that could help me understand the basics of tiles and create tiles. It is also recommended to evaluate any pointer to the site.

I need help understanding tiles in relation to BufferedImage , as well as how they are created.

Answer 1

“Tile” in a 2D game simply means “the image is the smallest screen that you can reuse several times to create the background.”

Here is a working example in which four tiles are created (adding some random noise to each pixel). Each tile has a size of 50x50 pixels.

Then a “map” (which you call a “grid” in your case) will appear, representing which fragments you want to place where.

A larger BufferedImage is created from this map (note that this is just an example; in a real program, you will want to use a copy of BufferedImage rather than a pixel copy).

The map is 9x7, each tile is 50x50 pixels, so the resulting image is 9 * 50 x 7 * 50 (i.e. 450 by 350).

Note that the following is actually just a simple example, as short as possible, showing how to create a larger BufferedImage using a few fragments: the goal is not to give a tutorial on the best use of Swing, nor how to compress each bit performances from BufferedImages etc.

 import javax.swing.*; import java.awt.*; import java.awt.image.BufferedImage; import java.util.Random; public class ToyTiled extends JFrame { private static final int IMAGE_TYPE = BufferedImage.TYPE_INT_ARGB; private BufferedImage img; public static void main( String[] args ) { new ToyTiled(); } public ToyTiled() { super(); this.add(new JPanel() { @Override protected void paintComponent(Graphics g) { g.drawImage(img, 0, 0, null); } }); img = new BufferedImage( 450, 350, IMAGE_TYPE ); // here you should create a compatible BufferedImage this.setSize(img.getWidth(), img.getHeight()); this.setDefaultCloseOperation(DISPOSE_ON_CLOSE); final int NB_TILES = 4; BufferedImage[] tiles = new BufferedImage[NB_TILES]; tiles[0] = createOneTile( new Color( 255, 255, 255 ) ); tiles[1] = createOneTile( new Color( 255, 0, 255 ) ); tiles[2] = createOneTile( new Color( 0, 0, 255 ) ); tiles[3] = createOneTile( new Color( 0, 255, 255 ) ); final int[][] map = new int[][] { { 1, 0, 2, 3, 0, 1, 2, 2, 2 }, { 0, 2, 3, 0, 1, 2, 2, 2, 3 }, { 1, 0, 2, 3, 0, 1, 2, 2, 2 }, { 2, 1, 0, 1, 2, 3, 2, 0, 0 }, { 1, 0, 2, 3, 0, 1, 2, 2, 3 }, { 1, 0, 2, 2, 1, 1, 2, 2, 3 }, { 1, 0, 2, 3, 0, 1, 2, 2, 3 }, }; for (int i = 0; i < map[0].length; i++) { for (int j = 0; j < map.length; j++) { final BufferedImage tile = tiles[map[j][i]]; for (int x = 0; x < tile.getWidth(); x++) { for (int y = 0; y < tile.getHeight(); y++) { img.setRGB( x + i * 50, y + j * 50, tile.getRGB(x,y) ); } } } } this.setVisible( true ); } private BufferedImage createOneTile( final Color c ) { final Random r = new Random(); final BufferedImage res = new BufferedImage( 50, 50, IMAGE_TYPE ); for (int x = 0; x < res.getWidth(); x++) { for (int y = 0; y < res.getHeight(); y++) { res.setRGB( x, y, c.getRGB() - r.nextInt(150) ); } } return res; } } 

Answer 2

If you want to rotate the BufferedImage part, you may find these classes / methods useful:

• AffineTransform.getRotateInstance or AffineTransform.getQuadrantRotateInstance
• AffineTransformOp
• BufferedImage.getSubImage()
• BufferedImage.setData

Example:

 import java.awt.Component; import java.awt.event.ActionEvent; import java.awt.geom.AffineTransform; import java.awt.image.AffineTransformOp; import java.awt.image.BufferedImage; import java.awt.image.BufferedImageOp; import java.io.IOException; import java.net.URL; import javax.imageio.ImageIO; import javax.swing.AbstractAction; import javax.swing.BoxLayout; import javax.swing.ImageIcon; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.WindowConstants; public class TileTest extends JFrame { public static void main(String[] args) throws IOException { URL logo = new URL("http://sstatic.net/so/img/logo.png"); TileTest tileTest = new TileTest(ImageIO.read(logo)); tileTest.setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE); tileTest.setVisible(true); } private TileTest(BufferedImage image) throws IOException { this.image = image; setLayout(new BoxLayout(getContentPane(), BoxLayout.Y_AXIS)); JLabel label = new JLabel(new ImageIcon(image)); add(label); BufferedImage tile = image.getSubimage(0, 0, 61, 61); add(new JButton(new RotateAction(tile, label))); pack(); } private BufferedImage image; } class RotateAction extends AbstractAction { public void actionPerformed(ActionEvent e) { BufferedImage tmpImage = op.filter(image, null); image.setData(tmpImage.getRaster()); component.repaint(); } RotateAction(BufferedImage image, Component component) { super("Rotate"); this.component = component; this.image = image; double x = 0.5 * image.getWidth(); double y = 0.5 * image.getHeight(); AffineTransform xfrm = AffineTransform.getQuadrantRotateInstance(1, x, y); op = new AffineTransformOp( xfrm, AffineTransformOp.TYPE_NEAREST_NEIGHBOR); } private final Component component; private final BufferedImage image; private final BufferedImageOp op; }