Flash Tutorials
Flash Yahtzee Game Tutorial 3 Back
Start Over
Next
The Dice Class. Create a new Actionscript class file and call it Dice.as. Copy the function moveTo from the class ScoreCell into this one. Then add the following function that is very similar to some functions seen in the previous tutorials. You'll have to import the modules flash.display.BitmapData, flash.display.Sprite, and flash.geom.Matrix.
public function makeSprite(bmpName, bmpSize, spriteSize) {
var sprite = new Sprite();
var factor=1.0*spriteSize;
factor /= bmpSize;
var sclMatrix = new Matrix();
sclMatrix.identity();
sclMatrix.scale(factor, factor);
sprite.graphics.beginBitmapFill(bmpName, sclMatrix);
sprite.graphics.drawRect(0, 0, spriteSize, spriteSize);
sprite.graphics.endFill();
return sprite;
}
Declare the class attributes parent and gameRef just like in the class ScoreCell. Then add the corresponding parameters to the constructor and initialize them the same way. Then in the constructor for the class Dice, add two more parameters for the position x and y. Declare the class attributes posX, posY and initialize them with the values of these parameters.
In the constructor we need to initialize all the sprites used by the Dice object. Unlike the score cells that display a single combination name through the game, the content of each die is dynamic, and changes randomly every time the die is rolled. Thus, each Dice object will need to store a sprite for each of the seven images. The easiest way to handle this is to store them in an array. To begin with, declare the class attributes sprites and spriteNr, then add the following code to the constructor:
spriteNr = 7;
var bmp = new Array(spriteNr);
sprites = new Array(spriteNr);
bmp = new GreyBmp(84, 84);
sprites[0] = makeSprite(bmp, 84, 80);
parent.addChild(sprites[0]);
moveTo(sprites[0], posX, posY);
This code is similar to the other tutorials: we need to create an object of the class that we imported the image as, then create the sprite based on it, add it to the stage to make it visible, and move it to the right position. Replace the number 84 by the size of the dice image you are using and the number 80 with the size that you want to display the dice on the screen with.
Before adding all the other sprites, let's test this one and create the 5 dice that will be part of the game. For this, go to the Game class and import the Dice class at the top. Then in the constructor add the following code:
var d = new Dice(parent, this, 352, 150);
Adjust the numbers 352 and 150 such that the die appears in a convenient position on the stage.
Once this part is working, let's add the 5 dice to the Game class. Declare a class attribute called diceArray and initialize it in the constructor as an array of 5 elements. Use a for loop (starting form 0 this time) after that to assign to each of these elements a new object of type Dice. Use the initialization of the ScoreCell array as a model for the parameters in each of these function calls. Also use a class attribute called diceNr to store the number of dice (5), so as not to use the constant 5 everywhere.
Once this is working, go back to the constructor for the class Dice and add all the images as sprites. First, you'll have to add the bitmaps one by one because the classes defining them cannot be stored in an array. Then turn the rest of the sprite-defining code into a for loop. Add the following line to hide these sprites:
sprites[i].visible = false;
Then after the loop, make sprites[0] visible again.
We will need an attribute to keep track of the number displayed on the die, and at the same time, the active visible sprite. Declare this attribute as number and initialize it in the constructor.
Set Sprite. Let's write a function in the Dice class that assigns a new number to the die object and sets the appropriate sprite as visible. This function will take a new number as parameter. What we have to do is make the currently active sprite invisible, set the new one as visible, and store its number in the class attribute. Here is this function:
public function setSprite(option) {
sprites[number].visible = false;
sprites[option].visible = true;
number = option;
}
Roll the Dice. Now would be a good time to write a function that rolls the die. What we need in this function is a random number between 1 and 6, and then call the previous function to set the sprite. First import the module Math. This module contains a function called random that generates a random number between 0 and 1, not including 1. To make it an integer between 1 and 6, we need to multiply it by 6, convert to an integer, and then add 1 to the result. Add the following function to the class Dice:
public function roll() {
var r = 1 + int(Math.random() * (spriteNr-1));
setSprite(r);
}
Now we can add a similar function to the class Game that rolls all the dice:
public function roll() {
for (var i=0; i
}
}
To test this function, in the yahtzee.fla file, add a call to it from the gameRef object after the objects are created. Once it works, turn it into a function called rollDice in frame 1, and then attach it as a callback for a mouse event on the button rollBtn. Now the roll button should show a new combination of dice every time it is clicked.
To take us one step closer to the game functionality, in the function roll in the class Dice, add a test for the number attribute being 0 before the operations are done. After this, the roll button should function only once.
Another easy steps is to make the function newGame also reset the dice. For this, add a line to this function calling the function setSprite(0) from each dice. You'll need a for loop for it. Then the newGame button will reset all the dice to grey, and the roll button will generate new random numbers for them.
Dice Events. After all the dice are rolled, there are two rounds where the player can click on them to select them for rolling again. Thus, we need to attach a mouse events to all the number sprites such that when we click on them, they become grey. If we want to implement the game correctly, we have to allow the player to unselect a die for re-roll and go back to the number it displayed before it was selected. For this, a class attribute will have to store this number. Declare the attribute lastNr in the class Dice and initialize it as 0 in the constructor.
We need to plan for one more thing before setting up these events. After the second time that the player has rolled the dice again, they should select a scoring combination. The game should not allow them at that point to select dice to roll again. For this, we can add an attribute to the class Dice to store a flag that can be turned on when the last roll has happened and prevent the dice form reacting to the mouse. Let's declare an attribute called lastRoll in this class and initialize it as false in the constructor. Then go back to the function roll and add the following parameter:
roll(isLastRoll = false)
This will give it a default value of false in case its value is absent form the function call. Then before the end of the function, assign the value of this parameter to the variable lastRoll.
Add the following function to the class Dice. Baically if the lastRoll flag is not up, then if the current number on the die is 0, we revert the die to the previously displayed number. Otherwise we set the value of the lastNr to the current one, then set the Die to grey, which is the sprite 0.
public function selectDie(event:MouseEvent) {
if (!lastRoll) {
if (number == 0 && lastNr != 0) {
setSprite(lastNr);
}
else {
lastNr = number;
setSprite(0);
}
}
}
To attach this function as an event to the sprite, go back to the constructor, and add the following line inside the for loop where the sprite were created, after the line adding the sprite as a child to the parent.
sprites[i].addEventListener(MouseEvent.CLICK, selectDie);
Test the app to see if this functionality works. After rolling the dice, you should be able to click on each of them to turn them grey (or select them for re-roll), and then click on them again to restore the number they were showing before.
One last thing that we can do in the class Dice is to turn the number attribute into a public one. We must do this because the number will have to be accessed from the By default, attributes are private, meaning that we can only acces them inside the class. So remove the declaration of this attribute form where it is right now, and add another line for it:
public var number;
In the last part of this tutorial we'll implement the functionality of the game.