Phaser Dice Roller

While exploring Phaser online, I came across a very nice example which can be used for dice roll in a Phaser game. I probably downloaded it from github, but cannot find the original source. If someone happens to know the source, please send the URL to update in this article. Meanwhile I can not resist posting the code since it looks pretty good for use in Dice Games if someone wants to write one. The code below extends Sprite and uses Blur filters from Phaser examples.

Dice = function (x, y) {
    Phaser.Sprite.call(this, mygame, x, y, 'dice');
    
    this.tween;
    this.anim;
    this.blurX = mygame.add.filter("BlurX");  // Blur filters taken from
    this.blurY = mygame.add.filter("BlurY");  // Filters -> blur example

    this.anchor.setTo(0.5, 0.5);

    var i;
    var frames = [];
    for (i=0; i < 15; i++) {
        frames[i] = mygame.rnd.pick([0,1,2,3,4,5]);
    }

    // the animation displays the frames from the spritesheet in a random order
    this.anim = this.animations.add("roll", frames);
    this.anim.onComplete.add(this.rollComplete, this); 

    this.frame = 1;

    mygame.add.existing(this);
};

Dice.prototype = Object.create(Phaser.Sprite.prototype);
Dice.prototype.constructor = Dice;

Dice.prototype.roll = function() {
    this.filters = [this.blurX, this.blurY];
    this.animations.play("roll", 20);
};

Dice.prototype.rollComplete = function() {
    this.filters = null;
    this.frame = mygame.rnd.pick([0,1,2,3,4,5]);
};

Dice.prototype.update = function() {
    if (this.anim.isPlaying) {
        this.angle = mygame.rnd.angle();
    }
};

Dice.prototype.isAnimationRunning = function () {
    return this.anim.isPlaying;
};


Dice.prototype.value = function() {
    switch(this.frame) {
    case 0:
        return 1;
    case 1:
        return 2;
    case 2:
        return 3;
    case 3:
        return 4;
    case 4:
        return 5;
    case 5:
        return 6;
    default:
        return null;
    }
};

Below is the example of how “Dice” can be used in the game.

var TheGame = {
};

TheGame.Params = {
	baseWidth: 800,
	baseHeight: 200
};

TheGame.Boot = function (game) { };

TheGame.Boot.prototype =  {
    init: function () {
        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    },
    preload: function () {
        this.load.image("loading", "loadingback.png");
    },
    create: function () {
        this.state.start("Loading");
    }	
};

TheGame.Loading = function (game) {
};

TheGame.Loading.prototype = {
    init: function () {
    },
    preload: function () {
        this.stage.backgroundColor = 0x222222;
        var loadingBar = this.add.sprite(this.world.centerX, this.world.centerY, "loading");
        loadingBar.anchor.setTo(0.5);
        this.load.setPreloadSprite(loadingBar);

		this.load.script("BlurX", "BlurX.js");
		this.load.script("BlurY", "BlurY.js");
        this.load.spritesheet("dice", "dice.png", 100, 100);
	
    },
    create: function () {
       this.state.start("TheGame");
    }
};


TheGame.MyGame = function (game) {
};

TheGame.MyGame.prototype = {
    preload: function () {
    },
    create: function () {
        this.stage.backgroundColor = 0x222222;
	    this.diceGroup = this.game.add.group();
		this.dice = [];
		this.text = this.game.add.text(this.world.centerX,10, "Total: ");
		this.text.fill = "#d3d3d3";

		for (var i=0; i < 5; i++) {
			var d = new Dice(i*150+100, 100);
			this.diceGroup.add(d);
		}

		// roll the dice when a mouse button is clicked
		this.game.input.onDown.add(this.rollDice, this);
    },
	rollDice: function () {
		this.text.setText("Total: ");
        this.diceGroup.callAll("roll", null);
		var timer = this.game.time.events.add(100, this.rollDiceComplete, this);
	},
	rollDiceComplete: function () {
		var rollComplete = true;
		this.diceGroup.forEach(function(item) {
			if(item.isAnimationRunning())
				rollComplete = false;
		}, this);
		if(rollComplete) {
			var total = 0;
			this.diceGroup.forEach(function(item) { total += item.value(); });
			this.text.setText("Total: "+total);
		} else {
			var timer = this.game.time.events.add(100, this.rollDiceComplete, this);
		}
	}
};

var mygame;
window.onload = function () {
	mygame = new Phaser.Game(TheGame.Params.baseWidth, TheGame.Params.baseHeight, Phaser.AUTO);	
	mygame.state.add("Boot", TheGame.Boot);
	mygame.state.add("Loading", TheGame.Loading);
	mygame.state.add("TheGame", TheGame.MyGame);
	mygame.state.start("Boot");
}

Click anywhere on the screen below for results.