[Java] Move dinamically images using threads in Java Applet

This sample show how to move dinamically images in some applet scene, using doble buffer technique and using threas to move one image in a specific direction.

package mx.gcross.samples;

import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Image;

/**
 *
 * @author René Cruz - G-Cross Studio 2011
 */

public class MoveImage extends Applet {

  private Image dobleBuffer;
  private Graphics myGraphics;
  private Image background;
  private Image nave;
  int cordX;
  int cordY;

  @Override
  public void init() {
    background = getImage(getDocumentBase(), "background.jpg");
    nave = getImage(getDocumentBase(), "nave.png");
    
    // Init first coordinates
    cordX = (int) (Math.random() * getWidth());
    cordY = getHeight();
    
    // Init doble buffer
    dobleBuffer = createImage(getWidth(), getHeight());
    myGraphics = dobleBuffer.getGraphics();

    //Draw images, only the first time
    drawImages();
    animateShip();
  }

  @Override
  public void update(Graphics g) {
    //Draw images in the new positions
    drawImages();
    //Draw the buffer in the screen
    g.drawImage(dobleBuffer, 0, 0, this);
  }

  public void animateShip() {
    
    Thread hilo = new Thread() {
      @Override
      public void run() {
        try {
          super.run();
          while (true) {
            // change position of Y, and validate if need calculate new coordinates of ship...
            cordY--;
            if (cordY < -30) {
              cordX = (int) (Math.random() * getWidth());
              cordY = getHeight();
            }
            repaint();
            // make a pause for 10 milliseconds
            sleep(10);            
          }
          
        } catch (InterruptedException ex) {
          // do something...
        }
      }
    };
    hilo.start();
  }

  public void drawImages() {
    myGraphics.drawImage(background, 0, 0, getWidth(), getHeight(), this);
    myGraphics.drawImage(nave, cordX, cordY, this);
  }
}

Test the code and comment, thanks!.

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

[Java] Draw & moving images inside an Applet using Doble Buffer Technique

Hi, this is the example of how implements the double buffer technique in an Applet, because the procedure it's very different compared with JFrame method.

In this case, I used an instance of Image class to draw in memory all scene, after we will paint it in a single step, this avoid the flicker in the screen when the image is moving.

NOTE: Remind to create a HTML document to use this Applet.

The code of Applet is here:

package mx.gcross.samples;

import java.applet.Applet;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;

/**
 *
 * @author René Cruz - G-Cross Studio 2011
 */
public class DobleBufferApplet extends Applet implements KeyListener {
    //Empty image for doblebuffer
    private Image dobleBuffer;
    private Graphics myGraphics;

    private Image background;
    private Image bird;
    int cordX = 20;
    int cordY = 30;

    public void init() {
        background = getImage(getDocumentBase(), "background.jpg");
        bird = getImage(getDocumentBase(), "bird.png");

        addKeyListener(this);

        // Init doble buffer
        dobleBuffer = createImage(getWidth(), getHeight());
        myGraphics = dobleBuffer.getGraphics();

        //Draw images, only the first time
        drawImages();
    }

    @Override
    public void update(Graphics g) {
        //Draw images in the new positions
        drawImages();
        //Draw the buffer in the screen
        g.drawImage(dobleBuffer, 0, 0, this);        
    }

    public void drawImages() {
        myGraphics.drawImage(background, 0, 0, getWidth(), getHeight(), this);
        myGraphics.drawImage(bird, cordX, cordY, this);
    }

     //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;

        }
        //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, resources and the HTML document in a Netbeans project, Download It Here!

[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!