Optimize/Minify HTML5 Game Assets

After I wrote Block Dominoes game I decided to look into optimization of the assets, compress whatever could be done and make the game as lightweight as it could be. I had designed and made the assets at a resolution of 1920×1080. The first logical step was to go search what other developers were doing and surprisingly 1920×1080 seemed quite a big resolution to choose for a game. There was an older discussion on  HTML5GameDevs.com which suggested using a lower resolution such as 320×480 which many devs have been using successfully.  I decided to go for half of what I initially designed so I reduced all game assets to half of the original size which was 960×540. The size of all graphical assets were reduced by 40% which was a very good saving. Interestingly there was no visible difference on look and feel of the game when I tested it on iPhone6, Nexus 5 and Lenovo[…]

Handling of Moving Tweens in a Responsive Game in Phaser

If you went through previous articles on making of a responsive game in Phaser, we handled scaling and placement of individual elements according to the available width and height for the game. I moved on to writing next responsive game in Phaser and came across another scenario which requires additional handling. In Number Spread game we did not use any tween to move elements between two points. In my next game I planned to create a domino game where effects like dealing domino tiles to the players were required to be handled. While aligning and scaling of the elements were done exactly how it was done in Number Spread game, additional scenario which I needed to handle was managing the tweens which were used to deal domino tiles to the players. Consider the scenario where I made a chained tweens set to deal domino tiles to the players. I resized my game halfway[…]

Card Flip Animation in 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[…]

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);[…]

Display a hint using tween in Phaser

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:[…]

Transition from one state to another state in Phaser

If you followed previous articles I wrote on making of a responsive game in Phaser, one task was to implement smooth transition from one state to another in the game. Phaser states work by loading new state in the view and removing old state from the view which happens instantly and does not give a transition effect as if we are changing the state (or screen). In a polished game you would want to implement something which gives an impression of a transition from one screen to another. For example a sliding effect where player sees one screen sliding out of the view and another screen sliding in giving impression that something is changing in the game. Cristian Bote wrote a nice Phaser plugin State Transition Plugin for Phaser which gives many options to achieve this and good thing about it is that you don’t have to do much and can get away with changing a couple[…]

Making of a responsive game in Phaser: Part 3

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[…]