I am developing a simple platform game using Java using BlueJ as the IDE. Right now I have player/enemy sprites, platforms and other items in the game drawn using polygons and simple shapes. Eventually I hope to replace them with actual images.
For now I would like to know what is the simplest solution to setting an image (either URL or from local source) as the 'background' of my game window/canvas?
I would appreciate it if it isn't something long or complex as my programming skills aren't very good and I want to keep my program as simple as possible. Kindly provide example codes with comments to elaborate on their function, and also if it's in its own class, how to call on relevant methods used by it on other classes.
Thank you very much.
The answer will vary slightly depending on whether the application or applet is using AWT or Swing.
(Basically, classes that start with J
such as JApplet
and JFrame
are Swing, and Applet
and Frame
are AWT.)
In either case, the basic steps would be:
- Draw or load an image into a
Image
object.
- Draw the background image in the painting event of the
Component
you want to draw the background in.
Step 1. Loading the image can be either by using the Toolkit
class or by the ImageIO
class.
The Toolkit.createImage
method can be used to load an Image
from a location specified in a String
:
Image img = Toolkit.getDefaultToolkit().createImage("background.jpg");
Similarly, ImageIO
can be used:
Image img = ImageIO.read(new File("background.jpg");
Step 2. The painting method for the Component
that should get the background will need to be overridden and paint the Image
onto the component.
For AWT, the method to override is the paint
method, and use the drawImage
method of the Graphics
object that is handed into the paint
method:
public void paint(Graphics g)
{
// Draw the previously loaded image to Component.
g.drawImage(img, 0, 0, null);
// Draw sprites, and other things.
// ....
}
For Swing, the method to override is the paintComponent
method of the JComponent
, and draw the Image
as with what was done in AWT.
public void paintComponent(Graphics g)
{
// Draw the previously loaded image to Component.
g.drawImage(img, 0, 0, null);
// Draw sprites, and other things.
// ....
}
Simple Component Example
Here's a Panel
which loads an image file when instantiated, and draws that image on itself:
class BackgroundPanel extends Panel
{
// The Image to store the background image in.
Image img;
public BackgroundPanel()
{
// Loads the background image and stores in img object.
img = Toolkit.getDefaultToolkit().createImage("background.jpg");
}
public void paint(Graphics g)
{
// Draws the img to the BackgroundPanel.
g.drawImage(img, 0, 0, null);
}
}
For more information on painting:
- Painting in AWT and Swing
- Lesson: Performing Custom Painting from The Java Tutorials may be of help.
Firstly create a new class that extends the WorldView
class. I called my new class Background
. So in this new class import all the Java packages you will need in order to override the paintBackground
method. This should be:
import city.soi.platform.*;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.image.ImageObserver;
import javax.swing.ImageIcon;
import java.awt.geom.AffineTransform;
Next after the class name make sure that it says extends WorldView
. Something like this:
public class Background extends WorldView
Then declare the variables game of type Game
and an image variable of type Image
something like this:
private Game game;
private Image image;
Then in the constructor of this class make sure the game of type Game
is in the signature of the constructor and that in the call to super
you will have to initialise the WorldView
, initialise the game and initialise the image variables, something like this:
super(game.getCurrentLevel().getWorld(), game.getWidth(), game.getHeight());
this.game = game;
bg = (new ImageIcon("lol.png")).getImage();
Then you just override the paintBackground
method in exactly the same way as you did when overriding the paint
method in the Player
class. Just like this:
public void paintBackground(Graphics2D g)
{
float x = getX();
float y = getY();
AffineTransform transform = AffineTransform.getTranslateInstance(x,y);
g.drawImage(bg, transform, game.getView());
}
Now finally you have to declare a class level reference to the new class you just made in the Game
class and initialise this in the Game
constructor, something like this:
private Background image;
And in the Game constructor:
image = new Background(this);
Lastly all you have to do is add the background to the frame! That's the thing I'm sure we were all missing. To do that you have to do something like this after the variable frame
has been declared:
frame.add(image);
Make sure you add this code just before frame.pack();
.
Also make sure you use a background image that isn't too big!
Now that's it! Ive noticed that the game engines can handle JPEG and PNG image formats but could also support others. Even though this helps include a background image in your game, it is not perfect! Because once you go to the next level all your platforms and sprites are invisible and all you can see is your background image and any JLabels/Jbuttons you have included in the game.
Or try this ;)
try {
this.setContentPane(
new JLabel(new ImageIcon(ImageIO.read(new File("your_file.jpeg")))));
} catch (IOException e) {};
The Path is the only thing you really have to worry about if you are really new to Java.
You need to drag your image into the main project file, and it will show up at the very bottom of the list.
Then the file path is pretty straight forward. This code goes into the constructor for the class.
img = Toolkit.getDefaultToolkit().createImage("/home/ben/workspace/CS2/Background.jpg");
CS2 is the name of my project, and everything before that is leading to the workspace.