עקרונות תכנות מונחה עצמים תרגול 7: אנימציה

בשבוע שעבר paint Graphics repaint

בשבוע שעבר

בשבוע שעבר

Outline Animation The flickering problem Assignment 3

Animation kinds There are three basic kinds of animation: 1. Moving object 2. Changing pictures 3. Combination of 1 and 2.

Timer In order to get animation effect we need to update an image several times per second. We use javax.swing.Timer. Constructor syntax: Timer t = new Timer (delay , actionListener) A Timer periodically creates events of type ActionPerformed. For each event, the image can be changed or moved.

Example 1 - Ball public class Ball extends JFrame implements ActionListener{ private Timer timer; private int x, y; private final int delay = 200; public Ball(){ x = 0; y = 0; timer = new Timer(delay,this); timer.start(); } public void paint(Graphics g){ super.paint(g); g.fillOval(x,y, 10, 10); public void actionPerformed(ActionEvent e){ if (e.getSource() == timer){ x = x + 5; y = y + 5; repaint();

Example 2 – Moving Car

Changing Pictures 1. Create an array of pictures. im = new ImageIcon[3]; im[0] = new ImageIcon("car1.gif"); im[1] = new ImageIcon("car2.gif"); im[2] = new ImageIcon("car3.gif"); 2. Define a field that represents the current image number. private int frame = 0; 3. The paint method draws the appropriate image. im[frame].paintIcon(this, g, x, y); 4. ActionPerformed, which is invoked by a timer, changes the current image. frame = (frame + 1) % 3;

public class Car extends JPanel implements ActionListener{ private int frame; private ImageIcon[] im; private Timer timer; private int x, y, dx, dy; public Car(){ frame = 0; x = 30; y = 30; dx = 15; dy = 15; im = new ImageIcon[3]; // . . . (create three images and assign to the array) timer = new Timer(200,this); timer.start(); } public void actionPerformed(ActionEvent e){ if (e.getSource() == timer){ frame = (frame + 1) % 3; x = (x + dx) % getSize().width; y = (y + dy) % getSize().height; repaint(); public void paint(Graphics g){ super.paint(g); im[frame].paintIcon(this, g, x, y); }

Responding to key press When a key is pressed a KeyEvent is initiated. Listening to KeyEvents is performed with KeyListener. public class Frame extends JFrame implements KeyListener{ . . . public void keyPressed(KeyEvent e) { int code; code = e.getKeyCode()); } public static void main(String args []){ Frame frame = new Frame(); frame.addKeyListener(frame);

Changing the Car example to respond to key press public class Car extends JPanel implements ActionListener, KeyListener{ . . . public void keyPressed(KeyEvent e) { if (e.getKeyCode() == KeyEvent.VK_LEFT){ dx = -30; dy = 0; } if (e.getKeyCode() == KeyEvent.VK_RIGHT){ dx = 30; dy = 0; if (e.getKeyCode() == KeyEvent.VK_UP){ dx = 0; dy = -30; if (e.getKeyCode() == KeyEvent.VK_DOWN){ dy = 30; dx = 0;

Double Buffering Technique

The double buffering technique allows to overcome the flickering problem. Flickering appears because a drawing is deleted before it is repainted, and repaint takes time. Solution: Maintain an additional panel. Draw a new image on the additional panel. Replace the old image only once the new one is ready.

Fixing the flickering problem in the Drawing-Canvas example Reminder: The original paint method of DrawingCanvas public void paint(Graphics g){ super.paint(g); for (int i = 0; i < matrix.size(); i++) for (int j =0; j < matrix.get(i).size(); j++) if (matrix.get(i).get(j).intValue() == 1) g.fillOval(i,j,5,5); g.fillOval(x,y,20,20); }

Fixing the flickering problem in the Drawing-Canvas example The corrected paint method public void paint(Graphics g){ //super.paint(g); Image offIm = createImage(getSize().width, getSize().height); Graphics offGr = offIm.getGraphics(); for (int i = 0; i < matrix.size(); i++) for (int j =0; j < matrix.get(i).size(); j++) if (matrix.get(i).get(j).intValue() == 1) offGr.fillOval(i, j, 5, 5 ); offGr.fillOval(x,y, 20, 20); g.drawImage(offIm, 0,0, this); }

סיכום אנימציה javax.swing.Timer paint and repaint KeyListener Double buffering