{"id":61,"date":"2017-03-29T09:03:23","date_gmt":"2017-03-29T09:03:23","guid":{"rendered":"http:\/\/www.netexl.com\/blog\/?p=61"},"modified":"2017-11-06T19:36:09","modified_gmt":"2017-11-06T19:36:09","slug":"making-of-a-responsive-game-in-phaser-part-2","status":"publish","type":"post","link":"https:\/\/www.netexl.com\/blog\/making-of-a-responsive-game-in-phaser-part-2\/","title":{"rendered":"Making of a responsive game in Phaser: Part 2"},"content":{"rendered":"

In part one<\/a>\u00a0of this series we did\u00a0a “Main Menu<\/em>”\u00a0screen design for our game which can be read\u00a0here<\/a>. Now its time to dive into the code.<\/p>\n

In order to reach to the “Main Menu<\/em>” screen, we are going to use 3 states. The first state will be “Boot<\/em>” state which is going to set the scale mode to RESIZE<\/em><\/strong>. Its also going to load an image which will be displayed while rest of the assets are loaded in the next state\u00a0which will be\u00a0called “Loading<\/em>” state. Once all assets are loaded in the “Loading<\/em>” state, we move to “Main Menu<\/em>” state where all action\u00a0happens.<\/p>\n

var TheGame = {\r\n};\r\n\r\nTheGame.Params = {\r\n\tbaseWidth: 1920,\r\n\tbaseHeight: 1080,\r\n\ticonSize: 364\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.RESIZE;\r\n    },\r\n    preload: function () {\r\n        this.load.image(\"loading\", \"loading.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        this.load.image(\"gametitle\", \"gametitle.png\");\r\n        this.load.spritesheet(\"settings\", \"settings.png\", 364, 364);\r\n\tthis.load.image(\"background\", \"background.png\");\r\n    },\r\n    create: function () {\r\n       this.state.start(\"GameTitle\");\r\n    }\r\n};\r\n\r\nTheGame.MainMenu = function (game) {\r\n};\r\n\r\nTheGame.MainMenu.prototype = {\r\n    create: function () {\r\n        this.background = this.add.image(0, 0, \"background\");\r\n        this.background.height = this.game.height;\r\n        this.background.width = this.game.width;\r\n\t\t\r\n        this.title = this.game.add.image(this.world.centerX, this.world.centerY - this.game.height \/ 3, \"gametitle\");\r\n        this.title.anchor.setTo(0.5);\r\n        this.scaleSprite(this.title, this.game.width, this.game.height \/ 3, 50, 1);\r\n\t\t\t\r\n        this.playButton = this.game.add.button(this.world.centerX, this.world.centerY, \"settings\", this.playTheGame, this);\r\n        this.playButton.anchor.setTo(0.5);\r\n        this.playButton.frame = 0;\r\n        this.playButton.clicked = false;\r\n        this.scaleSprite(this.playButton, this.game.width, this.game.height \/ 3, 50, 1);\r\n\r\n        this.infoButton = this.game.add.button(this.world.centerX - TheGame.Params.iconSize \/ 2 , this.world.centerY + this.game.height \/ 3, \"settings\", this.viewGameHelp, this);\r\n        this.infoButton.anchor.setTo(0.5);\r\n        this.infoButton.frame = 4;\r\n        this.infoButton.clicked = false;\r\n        this.scaleSprite(this.infoButton, this.game.width, this.game.height \/ 3, 50, 0.5);\r\n        this.infoButton.x = this.world.centerX - this.infoButton.width \/ 2;\r\n\t\t\r\n        this.audioButton = this.game.add.button(this.world.centerX + TheGame.Params.iconSize \/ 2 , this.world.centerY + this.game.height \/ 3, \"settings\", this.setAudio, this);\r\n        this.audioButton.anchor.setTo(0.5);\r\n        this.audioButton.frame = 2;\r\n        this.audioButton.clicked = false;\r\n        this.scaleSprite(this.audioButton, this.game.width, this.game.height \/ 3, 50, 0.5);\r\n        this.audioButton.x = this.world.centerX + this.infoButton.width \/ 2;\r\n       },\r\n\tscaleSprite: function (sprite, availableSpaceWidth, availableSpaceHeight, padding, scaleMultiplier) {\r\n\t\tvar scale = this.getSpriteScale(sprite._frame.width, sprite._frame.height, availableSpaceWidth, availableSpaceHeight, padding);\r\n\t\tsprite.scale.x = scale * scaleMultiplier;\r\n\t\tsprite.scale.y = scale * scaleMultiplier;\r\n\t},\r\n\tgetSpriteScale: function (spriteWidth, spriteHeight, availableSpaceWidth, availableSpaceHeight, minPadding) {\r\n\t\tvar ratio = 1;\r\n\t\tvar currentDevicePixelRatio = window.devicePixelRatio;\r\n\t\t\/\/ Sprite needs to fit in either width or height\r\n\t\tvar widthRatio = (spriteWidth * currentDevicePixelRatio + 2 * minPadding) \/ availableSpaceWidth;\r\n\t\tvar heightRatio = (spriteHeight * currentDevicePixelRatio + 2 * minPadding) \/ availableSpaceHeight;\r\n\t\tif(widthRatio > 1 || heightRatio > 1){\r\n\t\t\tratio = 1 \/ Math.max(widthRatio, heightRatio);\r\n\t\t} \r\n\t\treturn ratio * currentDevicePixelRatio;\t\r\n\t},\r\n\tresize: function (width, height) {\r\n\t\tthis.background.height = height;\r\n\t\tthis.background.width = width;\r\n\r\n\t\tthis.scaleSprite(this.title, width, height \/ 3, 50, 1);\r\n\t\tthis.title.x = this.world.centerX;\r\n\t\tthis.title.y = this.world.centerY - height \/ 3;\r\n\r\n\t\tthis.scaleSprite(this.playButton, width, height \/ 3, 50, 1);\r\n\t\tthis.playButton.x = this.world.centerX;\r\n\t\tthis.playButton.y = this.world.centerY ;\r\n\r\n\t\tthis.scaleSprite(this.infoButton, width, height \/ 3, 50, 0.5);\r\n\t\tthis.infoButton.x = this.world.centerX - this.infoButton.width \/ 2;\r\n\t\tthis.infoButton.y = this.world.centerY + height \/ 3;\r\n\r\n\t\tthis.scaleSprite(this.audioButton, width, height \/ 3, 50, 0.5);\r\n\t\tthis.audioButton.x = this.world.centerX + this.audioButton.width \/ 2;\r\n\t\tthis.audioButton.y = this.world.centerY + height \/ 3;\r\n\r\n\t},\r\n    playTheGame: function (button) {\r\n        if (!button.clicked) {\r\n            button.clicked = true;\r\n        }\r\n    },\r\n    viewGameHelp: function (button) {\r\n        if (!button.clicked) {\r\n            button.clicked = true;\r\n        }\r\n    },\r\n    setAudio: function (button) {\r\n        if (!button.clicked) {\r\n            button.clicked = true;\r\n        }\r\n    }\r\n};\r\n\r\nvar mygame;\r\nwindow.onload = function () {\r\n\tmygame = new Phaser.Game(TheGame.Params.baseWidth, TheGame.Params.height, Phaser.AUTO);\t\r\n\tmygame.state.add(\"Boot\", TheGame.Boot);\r\n\tmygame.state.add(\"Loading\", TheGame.Loading);\r\n\tmygame.state.add(\"GameTitle\", TheGame.MainMenu);\r\n\tmygame.state.start(\"Boot\");\r\n}\r\n<\/pre>\n
The\u00a0results from the code above for Portrait and Landscape orientations are shown below. You can\u00a0check demo on your device here<\/a>.<\/p>\n
\"Making<\/p>\n
\"Making<\/p>\n
Now let us analyze important pieces in the code.<\/p>\n
Background<\/h3>\n
First thing we do in the “Main Menu<\/em>” state is to set a background. It’s up to you to choose an optimized background. The important thing to note here is that after adding background at the\u00a0top left corner we set width and height of the background to the game’s width and height. This ensures that we do not have any blank space in the game if it is opened in a resolution higher than the base resolution we chose for the game. Equally important is to select a background which can easily blend with other elements on the screen without getting distorted. If we choose to use\u00a0a background which will get distorted when stretched or squeezed then we must have multiple background images and should load the one best fit according to the device resolution. Here we have simplified that work by simply choosing a background which will look fine even when stretched or squeezed.<\/p>\n
this.background = this.add.image(0, 0, \"background\");\r\nthis.background.height = this.game.height;\r\nthis.background.width = this.game.width;<\/pre>\n
Scaling of assets<\/h3>\n
Remember how we divided the total available space and allocated to individual elements.\u00a0We planned all assets’ sizes in proportion to the base game resolution. We don’t want to apply same scale to all assets since on mobile devices we want to keep the elements as big as it can fit into the allocated space so for different aspect ratios individual elements may take different space and look as big as they can to the user. We are going simply add elements\u00a0to the game and then scale it accordingly. Let us look at getSpriteScale<\/em> method which does pretty much everything we need to do. It takes original element sizes and available space to fit that element in and then calculates a scale. We look at both height and width of the element\u00a0to see which part is exceeding the available space, take that scale and apply to both width and height to scale entire element in proportion. If element can fit in the space available then there is no need to scale. Just use\u00a0the element in its original size and put it\u00a0in its space.<\/p>\n