Category: Phaser

The code example below shows how a simple card flip animation can be achieved in Phaser. In order to flip or rotate a card around x-axis we need to set the scale to zero, change the sprite frame and then set the scale back to one. TheGame.MyGame.prototype = { preload: function () { }, create: function () { this.card = this.add.sprite(this.world.centerX, this.world.centerY, “card”) this.card.frame = 0; this.card.anchor.setTo(0.5); // roll the dice when a mouse button is clicked this.game.input.onDown.add(this.flipCard, this); }, flipCard: function () { var tween1 = this.game.add.tween(this.card.scale); tween1.to({ x: 0 }, 300, Phaser.Easing.Linear.None, false, 0); tween1.onComplete.addOnce(function (sprite, tween) { if(this.card.frame == 0) this.card.frame = 1; else this.card.frame = 0; }, this); var tween2 = this.game.add.tween(this.card.scale); tween2.to({ x: 1 }, 300, Phaser.Easing.Linear.None, false, 0); tween1.chain(tween2); tween1.start(); } }; This example flips the card around x-axis. In order to flip it around y-axis, change as following flipCard: function () { var[…]

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 is next task I planned to implement in Number Spread game I discussed in the previous article series. In a game we have many scenarios when we want to display a hint and I considered many options as to how this can be implemented in Phaser. The options could be either using a tween or animation. For Number Spread it was a simple scenario when I just needed to display a hand which moved in certain direction to give a hint to player what is to be done. A tween for this purpose seemed fine. Look at the complete code for it below. var TheGame = { }; TheGame.Params = { baseWidth: 1920, baseHeight: 1080, minPadding: 50, iconSize: 364, fieldSize: { rows: 6, cols: 6 } }; TheGame.Boot = function (game) { }; TheGame.Boot.prototype = { init: function () { this.scale.scaleMode = Phaser.ScaleManager.RESIZE; }, preload: function () { this.load.image(“loading”, “loadingback.png”); }, create:[…]

In part one and part two of this article series, we designed “Main Menu” screen and did some code to manage scaling of it for various resolutions and aspect ratios. “Main Menu” screen followed the same layout for both portrait and landscape orientations. In part three we will be working on actual “Game” screen and implement different layouts for portrait and landscape orientations. The game is a number puzzle which contains a 6×6 number tiles grid, 2 additional tiles for displaying current and best scores and another 3 icons for various options. In the image below you will see the alignment of various elements in portrait and landscape orientations. The layouts are different here. In portrait orientation the grid is centered with other elements placed on top and bottom of it while in landscape orientation the grid is moved to the left which takes 2/3rd of the available width and rest of the[…]

In part one of this series we did a “Main Menu” screen design for our game which can be read here. Now its time to dive into the code. In order to reach to the “Main Menu” screen, we are going to use 3 states. The first state will be “Boot” state which is going to set the scale mode to RESIZE. Its also going to load an image which will be displayed while rest of the assets are loaded in the next state which will be called “Loading” state. Once all assets are loaded in the “Loading” state, we move to “Main Menu” state where all action happens. var TheGame = { }; TheGame.Params = { baseWidth: 1920, baseHeight: 1080, iconSize: 364 }; TheGame.Boot = function (game) { }; TheGame.Boot.prototype = { init: function () { this.scale.scaleMode = Phaser.ScaleManager.RESIZE; }, preload: function () { this.load.image(“loading”, “loading.png”); }, create: function () { this.state.start(“Loading”); } }; TheGame.Loading =[…]

I first started reading about Phaser around 5 months back and since then I have been planning to write games in Phaser. After studying some material online I finally decided to write a few games to get used to the framework. I wrote a few games which were more like practice games and then started digging further into it to make something more polished. Finally I decided to write a game and publish a series of articles as I encountered scenarios which I wanted to manage in the game but could not find enough tutorials for help. Scaling the game A very basic requirement for HTML5 games is to be able to scale to the resolution of the device on which the game is running. Since HTML5 games can run both on pc as well as mobile, there are thousands of resolutions and aspect ratios which the game needs to support. Now this is somewhat hardest part[…]