Search code examples
javaswingjlabelbufferedimagejtextfield

How Do I Put JLabel and JTextField on top of Image?

I am trying to create a game where I have a background image and text on top of that in the form of JLabels. How would I go about doing that?

The main reason I'm doing this is so that I can have 2 different text areas with different font sizes. Using g.drawString() will only let you use 1 text size for the whole thing.

Here is my code so far:

package com.cgp.buildtown;

import java.awt.Font;
import java.awt.FontFormatException;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GraphicsEnvironment;
import java.awt.RenderingHints;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;
import javax.swing.JPanel;

public class Intro extends JPanel implements Runnable {
    private static final long serialVersionUID = 1L;
    private Thread thread;
    private BufferedImage bg;
    private Font font;

    public Intro() {
        super();
        loadImages();
        setFont(loadFont(50f));
    }

    private Font loadFont(Float f) {
        try {
            font = Font.createFont(Font.TRUETYPE_FONT, new File("res/komikatext.ttf"));
            GraphicsEnvironment ge = GraphicsEnvironment.getLocalGraphicsEnvironment();
            ge.registerFont(font);
        } catch (FontFormatException | IOException e) {
            e.printStackTrace();
        }
        return font.deriveFont(f);
    }

    private void loadImages() {
        try {
            bg = ImageIO.read(new File("res/introbg.png"));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public void addNotify() {
        super.addNotify();
        thread = new Thread(this);
        thread.start();
    }

    public void run() {
        while(true) {
            repaint();
        }
    }

    public void paint(Graphics g) {
        super.paint(g);

        Graphics2D g2 = (Graphics2D) g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

        g.drawImage(bg, 0, 0, null);
    }
}
Solution

  • Here is one way.

    Intro. screen

    But of course that is merely a version hacked out of your own code/ specs. For a much better implementation of the same idea, see this Background Panel.

    import java.awt.*;
import java.awt.image.BufferedImage;
import javax.swing.*;
import javax.swing.border.EmptyBorder;

import java.net.URL;
import javax.imageio.ImageIO;

public class Intro extends JPanel implements Runnable {
    private static final long serialVersionUID = 1L;
    private Thread thread;
    private BufferedImage bg;
    private String html =
        "<html><body style='color: yellow;'>" +
        "<h1>Game</h1>" +
        "<p>Welcome to the Game!";

    public Intro() {
        super();
        loadImages();
        setLayout(new BorderLayout());
        setBorder(new EmptyBorder(40,40,40,40));
        add(new JLabel(html), BorderLayout.NORTH);
        add(new JTextField("..enter name"), BorderLayout.SOUTH);
    }

    private void loadImages() {
        try {
            URL url = new URL("http://pscode.org/media/stromlo2.jpg");
            bg = ImageIO.read(url);
            setPreferredSize(new Dimension(bg.getWidth(), bg.getHeight()));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public void addNotify() {
        super.addNotify();
        thread = new Thread(this);
        thread.start();
    }

    public void run() {
        while(true) {
            repaint();
        }
    }

    public void paintComponent(Graphics g) {
        super.paintComponent(g);

        Graphics2D g2 = (Graphics2D) g;
        g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

        g.drawImage(bg, 0, 0, this);
    }

    public static void main(String[] args) {
        JOptionPane.showMessageDialog(null, new Intro());
    }
}