Adjust game tile map image to screen size

[Amit Shef]

I'm making a game which requires Tile Map and I made an image that contains the tile map. In the image there will be colors drawn which then will represent where the block should be and what type of block (Grass, Stone, Sand).

For example:

--------------------------- Color DARK GRAY (#404040)

--------------------------- Color RED (#FF0000)

--------------------------- Color BLUE (#0026FF)

In my case the Color DARK GRAY with the hex of 404040 is representing my stone block.

Here's some code to begin with:

*Block size is 64x64.

BufferedImage map = null;


        try {
            map = loadImage("res/map/map.png");
        } catch (Exception e) {
            e.printStackTrace();
        }

        for (int x = 0; x < 100; x++) {
            for (int y = 0; y < 100; y++) {

                int col = map.getRGB(x, y);

                switch (col & 0xFFFFFF) {
                case 0x404040:
                    tiles.blocks.add(new Blocks(new Vector2f(x * BLOCK_SIZE, y * BLOCK_SIZE),
                            Blocks.STONE_1));
                    break;

                }

            }
        }

My question is how can I manage to adjust the tile map which in my case is 100x100 to any screen size so it'll fit. By "fit" I mean to fit where the tiles from the image should be on the screen.

For example -

In the tile image the tiles are here which is how it supposed to be on EVERY screen:

----------------
In my screen which is 1920x1080 the tiles are here:

---------------
In screens of 800x400 the tiles are here:

----------------
I thought something like this:

 BufferedImage map = null;

            try {
                map = loadImage("res/map/map.png");
                map = toBufferedImage(map.getScaledInstance(WIDTHOFSCREEN, HEIGHTOFSCREEN, BufferedImage.TYPE_INT_RGB));

            } catch (Exception e) {
                e.printStackTrace();
            }

            for (int x = 0; x < map.getWidth(); x++) {
                for (int y = 0; y < map.getHeight(); y++) {

                    int col = map.getRGB(x, y);

                    switch (col & 0xFFFFFF) {
                    case 0x404040:
                        tiles.blocks.add(new Blocks(new Vector2f(x * BLOCK_SIZE, y * BLOCK_SIZE),
                                Blocks.STONE_1));
                        break;

                    }

                }
            }

It didn't worked and the game loaded slowly.

If anybody have an idea how to manage to adjust it, it'll be great.

Thanks in advance.

[Stephan van Hulst]

So you always want to show the entire map on the screen, regardless of the resolution? It's probably easiest to let the view technology handle the mapping from 'world space' to 'screen space'.

You can use an OpenGL library to render your tiles. I strongly recommend LWJGL. Look up some tutorials on how to do 2D graphics using these libraries.

[Amit Shef]

Hey and thanks for the reply. Can you give me an example of handling view technology?

[Stephan van Hulst]

I wouldn't be able to give an example here, that would provide a better explanation that what you get when you Google for an LWJGL tutorial.

[Les Morgan]

When I do this, I decide how many tiles I wish to display on the screen for my game, then see the size of the display area--you can get this within Toolkit API. Once I have the size of the screen it is an easy thing to divide the physical screen dimensions by the number of blocks I want along each axis. I truncate the math, integer math, and center my board in the middle of the screen.

[Amit Shef]

Thank you Stephan, i will take a look on LWJGL tutorials.

Les Morgan wrote:When I do this, I decide how many tiles I wish to display on the screen for my game, then see the size of the display area--you can get this within Toolkit API. Once I have the size of the screen it is an easy thing to divide the physical screen dimensions by the number of blocks I want along each axis. I truncate the math, integer math, and center my board in the middle of the screen.

Hey Morgan thank you very much for replying. Can you give me a quick example? I got the screen size width and height and decided that I want 20 blocks in every axis.

int fx = WIDTHOFSCREEN / 20;
int fy = HEIGHTOFSCREEN / 20;

From there where do I go with my code?

for (int x = 0; x < map.getWidth(); x++) {
               for (int y = 0; y < map.getHeight(); y++) {
 
                   int col = map.getRGB(x, y);
 
                   switch (col & 0xFFFFFF) {
                   case 0x404040:
                       tiles.blocks.add(new Blocks(new Vector2f(x * BLOCK_SIZE, y * BLOCK_SIZE),
                               Blocks.STONE_1));
                       break;
 
                   }
 
               }

[Winston Gutkowski]

Amit Shef wrote:Thank you Stephan, i will take a look on LWJGL tutorials...

If there's a library around, then I'd definitely learn it and use it. Part of the art of programming is "not re-inventing the wheel".

If you really need to "roll your own" though, then I'd say that one of the first things you need to do is create a Tile class that understands
(a) The size of Panel it will be displayed in.
(b) The dimension of the "grid" it's part of (rows and columns)
Then it should be a simple matter to resize it if any of those values (particularly Panel size) change.

Alternatively, I wonder if BoxLayout might help. It can certainly split the display into "tile-like" portions, but whether you can then colour them individually, I have no idea. I'm pretty sure that they resize automatically though.

And that's the limits of my GUI knowledge.

Winston

[Les Morgan]

Amit Shef wrote:
Hey Morgan thank you very much for replying. Can you give me a quick example? I got the screen size width and height and decided that I want 20 blocks in every axis.

Here you go:

import java.awt.Color;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Toolkit;

import javax.swing.JPanel;
import javax.swing.JFrame;
import javax.swing.Timer;

public class JTileJunk{
  private final int X_NUM = 20;
  private final int Y_NUM = 20;
  private final int X_TILE;
  private final int Y_TILE;
  private final Color[] c = {Color.BLACK, Color.GRAY, Color.DARK_GRAY};
  private final Dimension d;
  private MyJPanel p;
  public JTileJunk(){
    Toolkit t = Toolkit.getDefaultToolkit();
    d = t.getScreenSize();
    X_TILE = d.width/X_NUM;  //calculate the tile width as an integer
    Y_TILE = d.height/Y_NUM; //calculate the tile hight as an integer
  }
  public void doIt(){
    p = new MyJPanel();
    p.setPreferredSize(new Dimension(X_TILE*X_NUM, Y_TILE*Y_NUM));
    JFrame f = new JFrame();
    f.setUndecorated(true);
    f.add(p);
    f.setLocation((d.width-X_TILE*X_NUM)/2, (d.height-Y_TILE*Y_NUM)/2);
    f.pack();
    f.setVisible(true);
  }
  public static void main(String[] args){
    JTileJunk j = new JTileJunk();
    j.doIt();
  }
  class MyJPanel extends JPanel implements ActionListener{
    MyJPanel(){
      Timer t = new Timer(5000, this);
      t.start();
    }
    @Override
    public void actionPerformed(ActionEvent e){
      System.exit(0);
    }
    @Override
    public void paintComponent(Graphics g){
      for(int i=0; i<X_NUM; i++){
        for(int j=0; j<Y_NUM; j++){
          g.setColor(c[(i+j) % c.length]);
          g.fillRect(i*X_TILE, j*Y_TILE, X_TILE, Y_TILE);
        }
      }
    }
  }
}