Showing pictures on JPanel

[Kenan_89]

Hello,
I am programming a small java game. For this I use a Frame within a JPanel.
The JPanel overrides the methos paintComponent() to draw the objects.
I am new in Java2D and I need help. When I let java draw 2 pictures I only can see
the one on my panel, who painted at last.

Here is my code:

public class GamePanel extends JPanel{

public static void main(String[] args){
new GamePanel();
}

JFrame frame = new JFrame("Game");
int frameHeight = 500;
int frameWidth = 500;

int width, height = 0;

BufferedImage img;

public void getImg(String path){
try{
this.img = ImageIO.read(new File(path));
width = this.img.getWidth();
height = this.img.getHeight();
repaint();
}
catch(IOException e){
e.printStackTrace();
}
}

@Override
public void paintComponent(Graphics g){
Graphics2D g2d = (Graphics2D) g;
g2d.drawImage(img, 0, 0, this);
}

public GamePanel(){

getImg("graphics/bg/grass.png");
getImg("graphics/chars/char1.png");

setPreferredSize(new Dimension(width, height));

frame.add(this);
frame.setSize(frameWidth, frameHeight);
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOS E);
frame.setVisible(true);
}
}

Sorry for my bad english and thanks for help.

[KevinWorkman]

I'm not really sure what you expected this to do- you set img equal to one image, and then you immediately set it equal to a different image. Only the last image you set it equal to will be painted. If you want to paint both images, you have to keep track of both images.

[Kenan_89]

Oh ok I can see the problem. Now I added:

BufferedImage chara;
BufferedImage bg;

under BufferedImage img;

And in in GamePanel() I added:

getImg("graphics/bg/grass.png");
bg = img;

getImg("graphics/chars/char1.png");
chara = img;

Anyhow I have the problem that I only can see the picture last added...

[KevinWorkman]

If you want help, I recommend you throw together an SSCCE that demonstrates exactly what you're doing with the updated code.

[Kenan_89]

Damn I had a logic error.
How can I paint in one Panel more pictures than one?
Forget my last post.


The problem is that I call paintComponent twice and naturally
the last painted pictures will be shown on the panel. Hmm, how can
I draw with one paintComponent more Pictures on my panel? Is this possible?

[KevinWorkman]

Sure. Just iterate through the pictures and paint them all. Drawing two images is exactly the same as drawing a single image, except you have to do it twice.

[Kenan_89]

How do you mean it to iterate through all the pictures and paint them?

An example would be helpful.

[KevinWorkman]

For your case, you would probably just keep track of both variables. For more images, you'd have a List or something. Here's the example:

public void paintCompoenent(Graphics g){
   g.drawImage(firstImage);
   g.drawImage(secondimage);
}

[Kenan_89]

Thank you nice idea.
Unfortunately you can`t change the location of an image, can you?
One important thing, too is that I have to give the player-image a
keylistener to move him.

[KevinWorkman]

Not really sure what you mean when you say you can't change the location of an image. You certainly can, just update the x and y. Consult the API for more info: Graphics (Java Platform SE 6)

[Kenan_89]

Actually my code looks like:

public class GamePanel2 extends JPanel{

public static void main(String[] args){
new GamePanel2();
}

JFrame frame = new JFrame();
int frameWidth = 500;
int frameHeight = 500;

BufferedImage[] img = new BufferedImage[2];


public void paintComponent(Graphics g){
Graphics2D g2d = (Graphics2D) g;
for(int i=0; i<img.length; i++){
g2d.drawImage(img[i],0,0,this);
}

}

public GamePanel2(){
try{
img[0] = ImageIO.read(new File("graphics/bg/grass.png"));
img[1] = ImageIO.read(new File("graphics/chars/char1.png"));
repaint();
}
catch(IOException e){
e.printStackTrace();
}

frame.add(this);
frame.setSize(frameWidth, frameHeight);
frame.setLocationRelativeTo(null);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOS E);
frame.setVisible(true);
}
}

Now I can see both images on my panel.
Beeing able to playing the game you have to move the character :)
I looked in Eclipse but not found any method to change the position of
a picture x or move it.

[KevinWorkman]

You're going to have to keep track of where you want your picture to be drawn (the x and y value) and use that in your paintComponent() method. Update when appropriate and call repaint().

[Kenan_89]

I know what you mean but look at my code. With my actual code
for every press on a key all the objects would be drawn again on my jpanel
because there is a for loop through all the Objects saved in BufferedImage img.

[DarrylBurke]

... there is a for loop through all the Objects saved in BufferedImage img.

A BufferedImage isn't a container. There's no such thing as 'all the Objects saved in BufferedImage img'

db

[KevinWorkman]

I know what you mean but look at my code. With my actual code
for every press on a key all the objects would be drawn again on my jpanel
because there is a for loop through all the Objects saved in BufferedImage img.

I'm not sure what you're trying to say. None of that, and nothing in your code, means that you can't use the approach I outlined for you. At least make an attempt before you say it won't work.

[Kenan_89]

A BufferedImage isn't a container. There's no such thing as 'all the Objects saved in BufferedImage img'

db

yes but my bufferedimager is an array where all the pictures are saved in.

I will give you an example so you can understand what i am meaning.(my english
is bad because its school english, i live in germany).

1. I make a BufferedImage[] imgs = new BufferedImage[2] // the size of the array is 2 because actually I only want two objects in my jpanel to draw
2. In constructor I give the individual positions of my array pictures with ImageIOread(path)(first is the background, second is the character)
3. Than I call the repaint()-method
4. Okay, now If the plyer press the up-BUtton the paintComponent-method will be called again, but I have
to change the position of the character-picture
For this I could define a global int x and int y and write in paintComponent:

for(int =0 ; i<imgs.lengt; i++){
g2d. drawImage(imgs[i], x, y, this);
}

The problem is,if I make it like this, the position of the background image would change, too,
because in the for-loop, first the background image will be drawn on the panel. (remember point two(position 1=backgroundimage 2=character))

EDIT: I could imagine an 2d-array where the positions of all objects are saved in. column 1 is the x-pos, column two y-pos.

like this:

BufferedImage imgs = new BufferedImage[2];
int[][] positions = new int[2][2];

imgs[0] = ImageIO.read(path-background);
positions [0][0] = 0;
positions [0][1] = 0;
imgs[1] = ImageIO.read(path-background);
positions [1][0] = 50;
positions [1][1] = 70;

Player press up-Button:
KeyEvent is:

positions[1][0] = 50;
positions[1][1] = 75; //move 5px up

In the paint component:

for(int =0 ; i<imgs.lengt; i++){
g2d. drawImage(imgs[i], positions[i][0], positions[i][1], this);
}

[KevinWorkman]

A BufferedImage is not an array.

And don't use an array to store values like that. Create an Object that contains all relevant information- image, location (could use Point), size, etc. That way you don't have to keep track of indexes in separate data structures to match up your information.

[Kenan_89]

Thank you for the idea.
I tried it and it works fine but in paintComponent I have a problem.

g2d.drawImage(img, int, int, component), want at firt position an image, than int, than int again,
and than the component to draw in.

The code:

BufferedImage img;
Object[][] obj = new Object[2][6];

public void initialPictures(){
 img = ImageIO.read(new File("xy.png"));
 obj[0][0] = "xy.png";
 obj[0][1] = img;
 obj[0][2] = 20;  //posX
 obj[0][3] = 40;  //posY
 obj[0][4] = img.getWidth(); 
 obj[0][5] = img.getHeight(); 

 img = ImageIO.read(new File("xy2.png"));
 obj[1][0] = "xy2.png";
 obj[1][1] = img;
 obj[1][2] = 20;  //posX
 obj[1][3] = 40;  //posY
 obj[1][4] = img.getWidth(); //bildbreite
 obj[1][5] = img.getHeight(); //bildhöhe
 repaint();
}

public void paintComponent(Graphics g){
 Graphics2D g2d = (Graphics2D) g;
 for(int i=0; i<obj.length; i++){
  g2d.drawImage(obj[i][1], obj[i][2], obj[i][3], this)
; }
}

Like you can see I have the problem how to cast from object to Image,
than how to cast from object to int...

For casting to int I make it like this:

String posX = String.valueOf(obj[i][2]);
String posY = String.valueOf(obj[i][3]);
int posx = Integer.parseInt(posX);
int posy = Integer.parseInt(posY);
BufferedImage img = (BufferedImage)obj[i][1];

unfortunately i get null by carsing from obj to int

[Kenan_89]

To see it better the code:

img = ImageIO.read(new File("graphics/bg/grass.png"));
			objects[0][0] = "grass.png";										
			objects[0][1] = img;								
			objects[0][2] = 0;		 						
			objects[0][3] = 0; 													
			objects[0][4] = img.getWidth();									
			objects[0][5] = img.getHeight();							


	public void paintComponent(Graphics g){
		Graphics2D g2d = (Graphics2D) g;
		for(int i=0; i<obj.length; i++){
			img = (BufferedImage)obj[i][1];
			
			posX = String.valueOf(obj[i][2]);
			posY = String.valueOf(obj[i][3]);
			System.out.println(posX+" "+posY);
			posx = Integer.parseInt(posX);
			posy = Integer.parseInt(posY);
			
			g2d.drawImage(img, posx, posy, this);
		}
		
	}

EDIT: Problem fixed.. I forgot to call the method to initial objects[][]