Month: March 2017

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