How to draw an image multiple times

Question

So here's my problem I'm doing a basic platformer with tiles drawn as ground. The tiles are basicly a texture with a hitbox drawn in a grid. But I cant draw the same image multiple times. so do I just makes thousends of image variables or is there a better way?

I've tried

public void paint(Grapihcs g){
    ground.draw(mapX * tilesize, mapY * tilesize);
    ground.draw(mapX * tilesize, mapY * tilesize);
}

I've tried an for loop...

public void paint(Grapihcs g){
    for(int i = 0; i < 10; i++){
        ground.draw(mapX * tilesize, mapY * tilesize);
    }
}

Nothing seems to work... It's like it only draws it the last time.

You don't change the x and y coordinates in any of your examples... This will result in the same image painted *on top of itself* multiple times. Or pretty much the same as only the last time is painted. Try modifying the x and y coordinates, and you'll see it works. — Harald K, Aug 18 '13 at 19:37
I've given you a possible solution in my answer below. As @haraldK says, you're not changing the position the image is rendered at, so all your tiles are being rendered at the same position 10 times. — William Morrison, Aug 18 '13 at 21:54

William Morrison · Answer 1 · 2013-08-18T21:53:01.853

0

You can draw the same image multiple times based on the value in your grid. You use values stored in your 2D array to reference another 1D array of images.

Say you've an array like:

[1, 1, 0, 1, 1]
[1, 1, 0, 1, 1]

And a 1D array of images containing a brown tile in index 0, and a green tile in index 1.

You'd iterate over the 2D array, and use values stored in each index to reference your 1D array of images, like so:

for(int x=0;x<array2D.length;x++){
    for(int y=0;y<array2D[0].length;y++){
        int pixelX = //calculate x position of this tile image;
        int pixelY = //calculate y position of this tile image.
        g.drawImage(images[array2D[x][y]],pixelX,pixelY,null);
    }
}

EDIT:

Based on your updated question, you are not modifying the X and Y coordinates passed to ground.draw. This means the image is being rendered over itself 10 times. You need to change the X position you render the tile at.

Try something like this instead:

int mapYPos = mapY*tileSize;
for(int i=0;i<10;i++){
    ground.draw(i*tileSize, mapYPos);
}

Here I'm passing it [0-10] * tilesize for X, and the same value, mapYPos, over and over for Y. This will give you a single horizontal strip of tiles, rendered from left to right.

edited Aug 18 '13 at 21:53

answered Aug 18 '13 at 19:25

William Morrison

10,953
2
31
48

1

Where possible, a `ImageObserver` should be provided to the `drawImage` method, this ensures that if the image is still begin loaded, it can trigger a repaint. Given that `java.awt.Component` implements `ImageObserver` and most all other components within AWT and Swing extend from `java.awt.Component` directly or indirectly, it wouldn't be a hard stretch to suggest - IMHO – MadProgrammer Aug 18 '13 at 21:31
I've never passed anything but null into draw image and have never had a problem. I haven't ever used `ImageObserver` though; you'd know better than I. I'm going to leave answer as is for now. The OP seems to be confused already. I appreciate the tip... might need to learn about `ImageObserver`. – William Morrison Aug 18 '13 at 21:49
1

`ImageObserver` goes way back to the old `Applet` and dial up days, when it might take an extended period of time to download the image. It's also useful if you have a large or complex image as the `ImageObserser` will trigger repaints automatically for you ;) – MadProgrammer Aug 19 '13 at 00:36

How to draw an image multiple times

1 Answers1