Java Swing Dice Rolling Animation

Question

I'm coding up a GUI game of craps. There is a JButton called "roll" which when clicked rolls the dice for the game. The GUI then displays what you rolled using jpeg's of die faces.

Everything works great, except I'm supposed to now add an animation to the GUI. My idea was to somehow rapidly display different face values for a short period of time (simulating a "roll") using the same method of displaying the jpeg's. However, as I'm sure you all know, that doesn't work.

I'm familiar with the idea of EDT and the Timer class, but I'm not sure exactly how to use them. Basically I want this animation to happen when I hit the "roll" button, and when the animation is finished, I want it to display what was actually rolled like it did before.

Any help would be greatly appreciated. Here's the code I have thus far:

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;


/* This is the GUI declaration */
public class NCrapsGUI extends JFrame {
     //code...   
/* Action when "roll" is clicked */
    private void rollActionPerformed(java.awt.event.ActionEvent evt){                                         
        game.rollDice();
            //Rolls both die
            sumOfDice.setText(Integer.toString(game.getSum()));
            //Displays the sum of the die
            numRolls.setText(Integer.toString(game.getNumRolls()));
            //Displays the number of rolls in each game
            // <editor-fold defaultstate="collapsed" desc="Die JPEG's">
            // If statements display the die face based on the number rolled
            if (game.getDie1Value() == 1) {
                 die1Disp.setIcon(new javax.swing.ImageIcon(getClass().getResource("/face1.jpg")));
            }
            if (game.getDie1Value() == 2) {
                die1Disp.setIcon(new javax.swing.ImageIcon(getClass().getResource("/face2.jpg")));
            }
            if (game.getDie1Value() == 3) {
                die1Disp.setIcon(new javax.swing.ImageIcon(getClass().getResource("/face3.jpg")));
            }
            if (game.getDie1Value() == 4) {
                die1Disp.setIcon(new javax.swing.ImageIcon(getClass().getResource("/face4.jpg")));
            }
            if (game.getDie1Value() == 5) {
                die1Disp.setIcon(new javax.swing.ImageIcon(getClass().getResource("/face5.jpg")));
            }
            if (game.getDie1Value() == 6) {
                die1Disp.setIcon(new javax.swing.ImageIcon(getClass().getResource("/face6.jpg")));
            }
            if (game.getDie2Value() == 1) {
                die2Disp.setIcon(new javax.swing.ImageIcon(getClass().getResource("/face1.jpg")));
            }
            if (game.getDie2Value() == 2) {
                die2Disp.setIcon(new javax.swing.ImageIcon(getClass().getResource("/face2.jpg")));
            }
            if (game.getDie2Value() == 3) {
                die2Disp.setIcon(new javax.swing.ImageIcon(getClass().getResource("/face3.jpg")));
            }
            if (game.getDie2Value() == 4) {
                die2Disp.setIcon(new javax.swing.ImageIcon(getClass().getResource("/face4.jpg")));
            }
            if (game.getDie2Value() == 5) {
                die2Disp.setIcon(new javax.swing.ImageIcon(getClass().getResource("/face5.jpg")));
            }
            if (game.getDie2Value() == 6) {
                die2Disp.setIcon(new javax.swing.ImageIcon(getClass().getResource("/face6.jpg")));
            }
            //</editor-fold>
            /* 
             * If the game is beyond the first roll, it checks to see if the sum of the
             * values rolled equal 7 or the point value for a loss or win respectively.
             * If it is a win, it adds a win. Likewise for a loss.
             */
            if (game.getGameStatus() == 2) {
                if (game.getSum() == game.getPoint()) {
                    game.addWin();
                    numWins.setText(Integer.toString(game.getWins()));
                    game.setGameStatus(1);
                    game.setPoint(0);
                    game.resetRolls();
                    return;
                }
                if (game.getSum() == 7) {
                    game.addLoss();
                    numLosses.setText(Integer.toString(game.getLosses()));
                    game.setGameStatus(1);
                    game.setPoint(0);
                    game.resetRolls();
                    return;
                }
            }

            /*
             * This checks to see if the game is on the first roll. If it is, it checks 
             * if the sum of the die is 7 or 11 for a win, or 2, 3, or 12 for a loss. If
             * not, it passes it on to the next roll and sets the point value to the sum
             */
            if (game.getGameStatus() == 1) {
                game.setPoint(game.getSum());
                dieSum.setText(Integer.toString(game.getPoint()));

                if (((game.getSum() == 7) || ((game.getSum() == 11)))) {
                    game.addWin();
                    numWins.setText(Integer.toString(game.getWins()));
                    game.setPoint(0);
                    dieSum.setText(Integer.toString(game.getPoint()));
                    game.resetRolls();
                    return;
                }

                if (((game.getSum() == 2) || ((game.getSum()) == 3)) || (game.getSum()) == 12) {
                    game.addLoss();
                    numLosses.setText(Integer.toString(game.getLosses()));
                    game.setPoint(0);
                    dieSum.setText(Integer.toString(game.getPoint()));
                    game.resetRolls();
                    return;
                } else {
                    game.setGameStatus(2);
                }
            }
       }                                    

EDIT WITH UPDATED CODE!!!

Here's where the Timer and array are declared:

public class NCrapsGUI extends JFrame
{
private Timer timer; 
private int numPlayers;
private int totalIcons = 6;

private ImageIcon imageArray[];`

/* CODE */

And here is where the array is populated inside the NCrapsGUI constructor:

imageArray = new ImageIcon[totalIcons];
   for (int i = 0; i < 6 ;i++)
    {
        int temp = i + 1;
        imageArray[i] = new ImageIcon("face" + temp + ".jpg");
    }

    initComponents();`

This is the entire rollActionPerformed method. I'm guessing the Timer gets started right at the beginning, but whenever I try to start it I get loads of error. However, when I I made a new JPanel seperately, and made it implement action listener, I got no errors. I tried adding implements ActionListner to this declaration, but NetBeans literally would not let me type anything in.

private void rollActionPerformed(java.awt.event.ActionEvent evt) {                                     



game.rollDice();
//Rolls both die

sumOfDice.setText(Integer.toString(game.getSum()));
//Displays the sum of the die

numRolls.setText(Integer.toString(game.getNumRolls()));
//Displays the number of rolls in each game

// <editor-fold defaultstate="collapsed" desc="Die JPEG's">
// If statements display the die face based on the number rolled
if (game.getDie1Value() == 1) 
{
    die1Disp.setIcon(imageArray[0]);
}

if (game.getDie1Value() == 2) 
{
    die1Disp.setIcon(imageArray[1]);
}

if (game.getDie1Value() == 3)
{
    die1Disp.setIcon(imageArray[2]);
}

if (game.getDie1Value() == 4) {
    die1Disp.setIcon(imageArray[3]);
}

if (game.getDie1Value() == 5) {
    die1Disp.setIcon(imageArray[4]);
}

if (game.getDie1Value() == 6) 
{
    die1Disp.setIcon(imageArray[5]);
}

if (game.getDie2Value() == 1) 
{
    die2Disp.setIcon(imageArray[0]);
}

if (game.getDie2Value() == 2) 
{
    die2Disp.setIcon(imageArray[1]);
}


if (game.getDie2Value() == 3) 
{
    die2Disp.setIcon(imageArray[2]);
}

if (game.getDie2Value() == 4)
{
    die2Disp.setIcon(imageArray[3]);
}

if (game.getDie2Value() == 5) 
{
    die2Disp.setIcon(imageArray[4]);
}

if (game.getDie2Value() == 6) 
{
    die2Disp.setIcon(imageArray[5]);
}

//</editor-fold>

/* 
 * If the game is beyond the first roll, it checks to see if the sum of the
 * values rolled equal 7 or the point value for a loss or win respectively.
 * If it is a win, it adds a win. Likewise for a loss.
 */

if (game.getGameStatus() == 2) {
    if (game.getSum() == game.getPoint()) {
        game.addWin();
        numWins.setText(Integer.toString(game.getWins()));
        game.setGameStatus(1);
        game.setPoint(0);
        game.resetRolls();
        return;
    }

    if (game.getSum() == 7) {
        game.addLoss();
        numLosses.setText(Integer.toString(game.getLosses()));
        game.setGameStatus(1);
        game.setPoint(0);
        game.resetRolls();
        return;
    }
}

`

Answer 1

Your basic idea behind the animation is a good one I think, but whether it works or not is all in the implementation details of course. I suggest

• That you read in your images and make ImageIcons once, probably at the start of the program.
• That you put the icons into an ImageIcon array with a length of 7 -- but you'll put an icon into the 1-6 slots, leaving the 0th item null.
• That you use a Swing Timer to swap these icons randomly with some appropriate delay, say 200 or 300 msec.
• That you use a a Random object to get a random number between 1 and 6, and then with this number as your array index, get the Icon out of the array.
• That you display the ImageIcons in a JLabel (or two JLabels if you're displaying 2 die) and swap Icons by simply calling the JLabel's setIcon(...) method.

Edit
You state in your comment that you tried:

timer = new Timer(100,this);

And that's your problem -- your use of this. You shouldn't try to use the same ActionListner for everything. Instead create an ActionListener right there, where you need it. Something like,

  timer = new Timer(100, new ActionListener() {
     public void actionPerformed(ActionEvent actionEvt) {
        // ... put your ActionListener's code here 
     }
  });