[Java] Move images inside JFrame using Doble Buffer Technique

Here is an example of how to draw and move images inside JFrame using the Doble Buffer technique and BufferStrategy model.

This technique is used to avoid the flicker in the screen when an image is moving. In case of Applets the doble buffer technique is different, see the next example.

The code here:

package mx.gcross.samples;

import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.image.BufferStrategy;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JFrame;

/**
 *
 * @author René Cruz - G-Cross Studio 2011
 */
public class DobleBufferJFrame extends JFrame implements KeyListener {
    
    //Objects for images
    private BufferedImage background;
    private BufferedImage bird;
    //First coordinates of bird image
    private int cordX = 50;
    private int cordY = 250;
    //Objects for doble buffer
    private BufferStrategy myBuffer;

    public DobleBufferJFrame() {
        setTitle("Doble Buffer Image Sample");
        //set window dimension 480x320px
        setSize(512, 512);
        //load images...
        loadImages();
        //make window visible
        setVisible(true);
        //Ignore OS paint calls
        setIgnoreRepaint(true);

        //create a doble buffer objects
        //NOTE: It's very important to create bufferStrategy after
        //JFrame is visible, in other case fail!
        this.createBufferStrategy(2);
        myBuffer = this.getBufferStrategy();
        //call explicit to paint first time
        repaint();
    }

    public void loadImages() {
        try {
            //path for image file
            String pathBackground = "images/background.jpg";
            background = ImageIO.read(new File(pathBackground));
            String pathBird = "images/bird.png";
            bird = ImageIO.read(new File(pathBird));

        } catch (IOException ex) {
            ex.printStackTrace();
        }
        //asociate the keyboard listener with this JFrame
        addKeyListener(this);
    }

    public void drawImages(Graphics2D g) {
        //draw brackground image (first image)
        g.drawImage(background, 0, 0, this);
        //draw bird image (second image, in this order)
        g.drawImage(bird, cordX, cordY, this);
    }

    public void paint(Graphics g) {
        Graphics2D g2 = null;
        if (myBuffer != null) {
            try {
                //get the graphics2d object of the buffer
                g2 = (Graphics2D) myBuffer.getDrawGraphics();
                //draw images in buffer
                drawImages(g2);
            } finally {
                g2.dispose();
            }
            //draw the content of buffer in the screen
            myBuffer.show();
        }
    }

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

    //While a key is pressed
    public void keyPressed(KeyEvent ke) {
        switch (ke.getKeyCode()) {
            //if the right arrow in keyboard is pressed...
            case KeyEvent.VK_RIGHT: {
                cordX ++;
            }
            break;

            //if the left arrow in keyboard is pressed...
            case KeyEvent.VK_LEFT: {
                cordX --;
            }
            break;

            //if the down arrow in keyboard is pressed...
            case KeyEvent.VK_DOWN: {
                cordY ++;
            }
            break;

            //if the up arrow in keyboard is pressed...
            case KeyEvent.VK_UP: {
                cordY --;
            }
            break;

        } 
        //call explicit to paint
        repaint();


    }

    //When a key is typed (once)
    public void keyTyped(KeyEvent ke) {
    }

    //When a key is released (typed or pressed)
    public void keyReleased(KeyEvent ke) {
    }
}

Test the code and comment, thanks!.

If you prefer the complete code source and resources in a Netbeans project, Download It Here!

[Java] Move an image inside JFrame or Applet using keyboard!

This example show how to load and move one image using keyboard arrows inside a JFrame or an Applet, it's the same procedure.

It's not a good way to draw and move the images with this method, because you will see flashing the window while the image is moving, but it's the most simple way to show you how know which key was pressed and how move the image. In the next example, I will show you how to draw images using a doble buffer technique in order to avoid the flashing in the screen!.

Well, the code for this example is here:

package mx.gcross.samples;

import java.awt.Graphics;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JFrame;

/**
 *
 * @author René Cruz - G-Cross Studio 2011
 */
public class MoveImage extends JFrame implements KeyListener {
    //Objects for images

    private BufferedImage background;
    private BufferedImage bird;
    //First coordinates of bird image
    private int cordX = 50;
    private int cordY = 250;

    public MoveImage() {
        setTitle("Move Image Sample");
        setSize(512, 512); //set window dimension 480x320px
        loadImages();
        setVisible(true); //make window visible
    }

    public void loadImages() {
        try {
            //path for image file
            String pathBackground = "images/background.jpg";
            background = ImageIO.read(new File(pathBackground));
            String pathBird = "images/bird.png";
            bird = ImageIO.read(new File(pathBird));

        } catch (IOException ex) {
            ex.printStackTrace();
        }
        //asociate the keyboard listener with this JFrame
        addKeyListener(this);
    }

    @Override
    public void paint(Graphics g) {
        super.paint(g);
        //draw brackground image (first image)
        g.drawImage(background, 0, 0, this);
        //draw bird image (second image, in this order)
        g.drawImage(bird, cordX, cordY, this);
    }

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


    //While a key is pressed
    public void keyPressed(KeyEvent ke) {
        switch (ke.getKeyCode()) {
            //if the right arrow in keyboard is pressed...
            case KeyEvent.VK_RIGHT: {
                cordX+=3;
            }
            break;
            //if the left arrow in keyboard is pressed...
            case KeyEvent.VK_LEFT: {
                cordX-=3;
            }
            break;
            //if the down arrow in keyboard is pressed...
            case KeyEvent.VK_DOWN: {
                cordY+=3;
            }
            break;
            //if the up arrow in keyboard is pressed...
            case KeyEvent.VK_UP: {
                cordY-=3;
            }
            break;
        }
        repaint();
    }

    //When a key is typed (once)
    public void keyTyped(KeyEvent ke) {}
    
    //When a key is released (typed or pressed)
    public void keyReleased(KeyEvent ke) {}
}

Test the code and comment, thanks!.

If you prefer the complete code source and resources in a Netbeans project, Download It Here!

[Java] First Steps: Load a PNG/JPG image in a JFrame

Hi, this is one simple code for load and show an image inside a JFrame, using a BufferedImage to load image data from a specific local path (could be a URL if you prefer).


Steps:
1.- Create a BufferedImage object.
2.- Read the image file for a specific path
3.- Draw the image in the screen using "paint()" method.

That's it!

package mx.gcross.samples;

import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JFrame;

/**
 *
 * @author Rene Cruz - G-Cross Studio 2011
 */
public class MyWindow extends JFrame {

    //Object for image
    private BufferedImage background;

    public MyWindow() {

        setSize(480, 320); //set window dimension 480x320px
        loadImages();
        setVisible(true); //make window visible
    }

    public void loadImages() {
        try {
            //path for image file
            String path = "images/background.png"; 
            background = ImageIO.read(new File(path));
        } catch (IOException ex) {
            ex.printStackTrace();
        }
    }

    @Override
    public void paint(Graphics g) {
        super.paint(g);
        //draw the bufferedImage object
        g.drawImage(background, 0, 0, this); 
    }

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

Test the code and comment, thanks!.

If you prefer the complete code source and resources in a Netbeans project, Download It Here!