Category: Phaser

Compile Phaser Game to WIndows 10 Store App

NG HTML5, Phaser, Windows Store App

In previous articles we started building an Android mobile app using Phaser. Check out the articles – Introduction, Calculation, Game Screen, FPS Problem Now since windows has native support for javascript and HTML5, it makes sense to distribute our Phaser games to windows app store to reach new audience. The steps required to compile Phaser game to Windows 10 App is pretty straight forward with no need  for any change in the code. You would need windows 10 to develop and debug the application. If you do not have windows 10 yet, go and download evaluation version of windows and install it in a VM. Microsoft is also providing evaluation version of readymade VMs supporting various technologies such as VMWare, HyperV, Parallels etc which comes pre-loaded with development tools such as Visual Studio 2017 Community edition which you can try for evaluation. https://developer.microsoft.com/en-us/windows/downloads/virtual-machines If you already have windows 10 then download and install[…]

View More

Making of a Responsive Mobile Game App using Phaser: FPS Problem

NG Android, HTML5, Mobile, Phaser

In the previous articles (Intoduction, Calculation, Game Screen) we went through the basic steps required for mobile game creation and looked at calculating and adding responsive behaviour to our game. The same concept applies to the game screen as well. Here is the main game screen The game is a classic dominoes game where players are required to throw their dominoes on their personal train or a special public train, or any other player’s personal train when it becomes public during the play. A lot of tweeing effects are used in the game which is turning out to be the main area to focus. The first step to optimize the game was to reduce the resolution for mobile which I chose to be 960×640 for devices with low processing power and 1350×900 for devices with high processing power. In order to do some benchmarking I integrated some code to measure FPS in[…]

View More

Making of a Responsive Mobile Game App using Phaser: Game Screen

NG Android, HTML5, Mobile, Phaser

In previous article I fixed the resolutions I wanted to use for my game, the next step was to set up the game screen and placing the controls on the screen. This is very similar to how it was done for RESIZE mode but for the continuation of this article I will demonstrate the first screen of the game which will give good idea about other screens as well. Then I will focus on the optimization which I am going to try to improve the overall performance of the game on mobile devices. First thing I do is to fix the area for individual controls so that we can calculate its size and give maximum space available on mobile device. The layout I chose for first screen of my game is something like below Look at the percentage values. The selected orientation for my game is going to be Landscape. Top 30% area heightwise is[…]

View More

Making of a Responsive Mobile Game App using Phaser: Calculation for Game Size

NG Android, HTML5, Mobile, Phaser

In my introductory article on this series I talked about using SHOW_ALL scale mode for my game which fits perfectly for need to be responsive. It will resize the game to fit into available space using the original aspect ratio which was used to develop the game. The only issue I saw was the “letter-boxing” effect so if device’s aspect ratio was different than the game’s aspect ratio, there will be blank space around either horizontal edges or vertical edges. We can account for that extra available space when loading new game and positioning of all ui controls can then be done relative to available space which is similar to how we handled RESIZE scale mode. The only difference here is that it can only be done once in SHOW_ALL scale mode when the game is initialized. In mobile app this is not going to be a problem and we can[…]

View More

Making of a Responsive Mobile Game App using Phaser: Introduction

NG Android, HTML5, Mobile, Phaser

In my previous posts on responsive Phaser game (part1, part2, part3) I used RESIZE scale mode for making game reponsive. RESIZE mode needed quite some handling whenever screen was resized. For example position of individual controls were required to be recalculated. Moving tweens were also something which required special handling on resize. It serves better for desktop games in which you can support different aspect ratios. I planned to compile and publish my next game to Android play store which made me also look into SHOW_ALL scale mode. SHOW_ALL handles resizing automatically and does not have a resize method for moving controls around on resize. The only limitation is that it fixes the aspect ratio of the game canvas and when game screen is resized, it resizes game canvas in the same aspect ratio. It might be a problem for desktop games where browser window can be resized to any proportion but mobile[…]

View More

Black Squares in place of sprite images on Mobile in a Phaser Game

NG HTML5, Mobile, Phaser

I am working on a new game which worked fine on desktop but the moment I opened it on Mobile, I was surprised to see black squares in place of sprite images in the game. After some troubleshooting it turned out that the tile sprite I was using in the game was quite long (around 4000 px) which mobile was not able to handle so the fix was to distribute the tile icons to multiple rows (I kept the width around 1200 px this time) which fixed the issue. Now everything looks just fine on mobile as well. Go Phaser..

View More

Repeating or Tiled Background in Phaser

NG How to, Phaser

Creating tiled or repeating background is pretty straight forward in Phaser by using tileSprite. Let say we have an image or a texture such as  which we want to use to create a background by repeating it in entire game area. Check out the highlighted line in the example below which is all that is required to create a nice tiled background in Phaser. var TheGame = { }; TheGame.Params = { baseWidth: 200, baseHeight: 200 }; TheGame.Boot = function (game) { }; TheGame.Boot.prototype = { init: function () { this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.game.scale.pageAlignHorizontally = true; this.game.scale.pageAlignVertically = true; }, preload: function () { this.load.image(“background”, “repeatxy.png”); this.load.image(“loading”, “loadingback.png”); }, create: function () { this.state.start(“Loading”); } }; TheGame.Loading = function (game) { }; TheGame.Loading.prototype = { init: function () { }, preload: function () { var loadingBar = this.add.sprite(this.world.centerX, this.world.centerY, “loading”); loadingBar.anchor.setTo(0.5); this.load.setPreloadSprite(loadingBar); }, create: function () { this.state.start(“TheGame”); } }; TheGame.MyGame =[…]

View More

Compile Phaser Games (or any other HTML5 Game) as Android Store App using Intel XDK

NG Android, HTML5, Intel XDK, Phaser

Intel XDK has long supported development and compilation of HTML5 games for Android, iOS and Windows store. It even provided a cloud based build system which took care of preparation of final packages which could be directly published to respective Android, iOS and Windows stores but starting from July 2017, Intel XDK build system has been shut down and new versions of Intel XDK do not have Game templates anymore. Still the tool is very useful for compiling your HTML5 games for Android, iOS and Windows stores. We are going to look at steps to compile HTML5 game for Android in this tutorial. Step 1 – Download and install Intel XDK. Step 2 – Create a new project using Blank HTML5 + Cordova template. Select “HTML5 + Cordova” and Click “Continue” which open a dialog box for specifying Project Name and Directory. We are going to use Dice Roller example code[…]

View More

Optimize/Minify HTML5 Game Assets

NG Framework, HTML5, Phaser

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

View More

Handling of Moving Tweens in a Responsive Game in Phaser

NG Framework, HTML5, 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[…]

View More