{"id":150,"date":"2017-04-08T17:00:18","date_gmt":"2017-04-08T17:00:18","guid":{"rendered":"http:\/\/www.netexl.com\/blog\/?p=150"},"modified":"2017-07-21T06:27:36","modified_gmt":"2017-07-21T06:27:36","slug":"phase-dice-roller","status":"publish","type":"post","link":"https:\/\/www.netexl.com\/blog\/phase-dice-roller\/","title":{"rendered":"Phaser Dice Roller"},"content":{"rendered":"

While exploring\u00a0Phaser online, I came across a\u00a0very 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\u00a0update 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.<\/p>\n

Dice = function (x, y) {\r\n    Phaser.Sprite.call(this, mygame, x, y, 'dice');\r\n    \r\n    this.tween;\r\n    this.anim;\r\n    this.blurX = mygame.add.filter(\"BlurX\");  \/\/ Blur filters taken from\r\n    this.blurY = mygame.add.filter(\"BlurY\");  \/\/ Filters -> blur example\r\n\r\n    this.anchor.setTo(0.5, 0.5);\r\n\r\n    var i;\r\n    var frames = [];\r\n    for (i=0; i < 15; i++) {\r\n        frames[i] = mygame.rnd.pick([0,1,2,3,4,5]);\r\n    }\r\n\r\n    \/\/ the animation displays the frames from the spritesheet in a random order\r\n    this.anim = this.animations.add(\"roll\", frames);\r\n    this.anim.onComplete.add(this.rollComplete, this); \r\n\r\n    this.frame = 1;\r\n\r\n    mygame.add.existing(this);\r\n};\r\n\r\nDice.prototype = Object.create(Phaser.Sprite.prototype);\r\nDice.prototype.constructor = Dice;\r\n\r\nDice.prototype.roll = function() {\r\n    this.filters = [this.blurX, this.blurY];\r\n    this.animations.play(\"roll\", 20);\r\n};\r\n\r\nDice.prototype.rollComplete = function() {\r\n    this.filters = null;\r\n    this.frame = mygame.rnd.pick([0,1,2,3,4,5]);\r\n};\r\n\r\nDice.prototype.update = function() {\r\n    if (this.anim.isPlaying) {\r\n        this.angle = mygame.rnd.angle();\r\n    }\r\n};\r\n\r\nDice.prototype.isAnimationRunning = function () {\r\n    return this.anim.isPlaying;\r\n};\r\n\r\n\r\nDice.prototype.value = function() {\r\n    switch(this.frame) {\r\n    case 0:\r\n        return 1;\r\n    case 1:\r\n        return 2;\r\n    case 2:\r\n        return 3;\r\n    case 3:\r\n        return 4;\r\n    case 4:\r\n        return 5;\r\n    case 5:\r\n        return 6;\r\n    default:\r\n        return null;\r\n    }\r\n};\r\n<\/pre>\n
Below is the example of how “Dice” can be used in the game.<\/p>\n
var TheGame = {\r\n};\r\n\r\nTheGame.Params = {\r\n\tbaseWidth: 800,\r\n\tbaseHeight: 200\r\n};\r\n\r\nTheGame.Boot = function (game) { };\r\n\r\nTheGame.Boot.prototype =  {\r\n    init: function () {\r\n        this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;\r\n    },\r\n    preload: function () {\r\n        this.load.image(\"loading\", \"loadingback.png\");\r\n    },\r\n    create: function () {\r\n        this.state.start(\"Loading\");\r\n    }\t\r\n};\r\n\r\nTheGame.Loading = function (game) {\r\n};\r\n\r\nTheGame.Loading.prototype = {\r\n    init: function () {\r\n    },\r\n    preload: function () {\r\n        this.stage.backgroundColor = 0x222222;\r\n        var loadingBar = this.add.sprite(this.world.centerX, this.world.centerY, \"loading\");\r\n        loadingBar.anchor.setTo(0.5);\r\n        this.load.setPreloadSprite(loadingBar);\r\n\r\n\t\tthis.load.script(\"BlurX\", \"BlurX.js\");\r\n\t\tthis.load.script(\"BlurY\", \"BlurY.js\");\r\n        this.load.spritesheet(\"dice\", \"dice.png\", 100, 100);\r\n\t\r\n    },\r\n    create: function () {\r\n       this.state.start(\"TheGame\");\r\n    }\r\n};\r\n\r\n\r\nTheGame.MyGame = function (game) {\r\n};\r\n\r\nTheGame.MyGame.prototype = {\r\n    preload: function () {\r\n    },\r\n    create: function () {\r\n        this.stage.backgroundColor = 0x222222;\r\n\t    this.diceGroup = this.game.add.group();\r\n\t\tthis.dice = [];\r\n\t\tthis.text = this.game.add.text(this.world.centerX,10, \"Total: \");\r\n\t\tthis.text.fill = \"#d3d3d3\";\r\n\r\n\t\tfor (var i=0; i < 5; i++) {\r\n\t\t\tvar d = new Dice(i*150+100, 100);\r\n\t\t\tthis.diceGroup.add(d);\r\n\t\t}\r\n\r\n\t\t\/\/ roll the dice when a mouse button is clicked\r\n\t\tthis.game.input.onDown.add(this.rollDice, this);\r\n    },\r\n\trollDice: function () {\r\n\t\tthis.text.setText(\"Total: \");\r\n        this.diceGroup.callAll(\"roll\", null);\r\n\t\tvar timer = this.game.time.events.add(100, this.rollDiceComplete, this);\r\n\t},\r\n\trollDiceComplete: function () {\r\n\t\tvar rollComplete = true;\r\n\t\tthis.diceGroup.forEach(function(item) {\r\n\t\t\tif(item.isAnimationRunning())\r\n\t\t\t\trollComplete = false;\r\n\t\t}, this);\r\n\t\tif(rollComplete) {\r\n\t\t\tvar total = 0;\r\n\t\t\tthis.diceGroup.forEach(function(item) { total += item.value(); });\r\n\t\t\tthis.text.setText(\"Total: \"+total);\r\n\t\t} else {\r\n\t\t\tvar timer = this.game.time.events.add(100, this.rollDiceComplete, this);\r\n\t\t}\r\n\t}\r\n};\r\n\r\nvar mygame;\r\nwindow.onload = function () {\r\n\tmygame = new Phaser.Game(TheGame.Params.baseWidth, TheGame.Params.baseHeight, Phaser.AUTO);\t\r\n\tmygame.state.add(\"Boot\", TheGame.Boot);\r\n\tmygame.state.add(\"Loading\", TheGame.Loading);\r\n\tmygame.state.add(\"TheGame\", TheGame.MyGame);\r\n\tmygame.state.start(\"Boot\");\r\n}<\/pre>\n
Click anywhere on the screen below for results.<\/p>\n\n\n