Latest Post

Quick Tip

How to choose a category when submitting app in Samsung seller office

If you are trying to upload an APK to Samsung seller office and you are seeing two categories as following Main Category Galaxy Specials If you leave it to Main Category, it won’t let you submit the APK for approval. If you select “Galaxy Specials” then you may get following error The registered binaries do not meet the category conditions for GALAXY Specials. The GALAXY Specials category can be selected only if at least one binary supports GALAXY Specials. You can go to ‘Binary>Advanced Mode>Binary Details’ to check the supported GALAXY Specials options. If you are trying to upload the saem APK which you uploaded to Google Play store, it will not work. Simply add following line to your manifest.xml and and build APK again.

Now you can simply select “Galaxy Specials” as the category and submit your app.

Quick Tip

Add Phaser 2 style buttons in Phaser 3

Phaser 2 had a very convenient way of adding buttons to a state. Phaser 3 has got rid of those buttons but if we want to keep the habit of adding buttons in Phaser 3 scenes like we used to in Phaser 2, following lines will help achieve it.

Above piece of code can now be used

clickButton event can be defined as following

 

Quick Tip

Remote debugging HTML5 games on Android using Chrome DevTools

Steps – Enable your Android device for debugging. For this go to settings on your mobile device -> Developer Options -> Enable USB debugging Now go to your PC/Mac and launch Chrome browser. Open DevTools by hitting F12. In DevTools open Remote Devices. Make sure you have “Discover USB devices” option checked here. Now connect your mobile device to Mac/PC using USB cable. You should now see you device listed under devices section Now go to your mobile device and open the app your are trying to debug. Once app is running in mobile, go back to chrome browser on your Mac/PC and click on the device name to see all running browser as well as webview instances on your mobile.   Simply click on “Inspect” button to luanch chrome tab for your app. You can continue to browser your app on mobile and check for errors/messages etc in the[…]

WebGL: INVALID_VALUE: vertexAttribPointer: index out of range

I tried to update a game which was using last official relase of Phaser CE 2.6.2 compiled with cordova to the latest version (2.12.0) and started seeing below error in some mobile devices WebGL: INVALID_VALUE: vertexAttribPointer: index out of range There were hundreds were such errors logged and webview declined to log any further errors. Reverting it back to 2.6.2 fixes the problem. Looked for fixes in Phaser forums but did not find anything of help so reverted it back to 2.6.2. Seems like its going to be like that until we get regressively tested newer CE versions available.

Quick Tip

Various ways to iterate an element in a group in Phaser 3

Option 1 –

Option 2 –

Option 3 –

 

Fullscreen in Phase 3

Phaser 3 also has the full support for fullscreen mode. Resizing a game to fullscreen is quite simple as shown in the code below. We are going to add a button to resize the game to fullscreen and then switch the button which will revert fullscreen mode to normal screen mode. We have updated icons sprite as following Changes from previous code is marked below

Check out the game in your browser window here. Try resizing it in your browser window to see scaling at work. You can play the game here

Exploring RESIZE Scale Mode in Phaser 3

We explored FIT scale mode in previous article. We already did most of the base work for calculating and scaling sprites and texts and respositioning them in the scene view area so let see how much of additional code do we need to add in order to change our game from FIT to RESIZE scale mode. First we need to change game config as following

Now we need to add a resize event in our create method as following

Create resize method as following

In resize method we retrieve width and height of the game from “gameSize”. We will reposition the controls by simply calling “positionControls”. This change is made for both scenes. See below for the complete code of both scenes (All changes in the code from FIT mode is marked)

We also need to change tweens since they are used for moving sprites. If tweens are running while game is resized,[…]

Phaser 3 Scale Manager is here. Exploring Phaser 3 with 3.16.1 version now

I just checked Phaser release log and have been pleasantly surprised to see the new Scale Manager available now with version 3.16.1 so we are now going to update our Peg Solitaire code to make it responsive and use the newly released scale manager. One thing I would like to do away with is to stop using absolute size values and calculate those values depending upon display area available for the game (just like we did it in Phaser 2). The first thing we need to change with 3.16.x version is to add scale property in game configuration as following

Another change I did was to remove css for canvas element which we had earlier added to center align our game. Our app.css file now looks like this

You can also see that we have declared ‘parent’ attribute as ‘mygame’ in our scale configuration so we are going to add a div in our html[…]

Exploring Phaser 3 with a Game: Adding Tweens

In previous articles (part 1 and part 2) we created a game with multiple scenes. Now we are going to add some tweens to it to make pegs jump over the holes.

Since the main board is just switching the sprite frames, we needed a temporary sprite which we will move between the holes. We added “removePeg” method which starts the tween on temporary sprite. clickPeg method is changed to call “removePeg” and we also removed code to update sprite frames in clickPeg. Those frames will now be changed in the tween onStart and onComplete events. Code to check for “gameover” is also moved to the tween onComplete event since we want to wait for the pegs to move before checking for “gameover” and switching to another scene. The updated game code now runs as following

Exploring Phaser 3 with a Game: Adding Multiple Scenes

In part one we had made peg solitaire game in Phaser 3 which was a single scene game. We will further explore Phaser 3 and use multiple scenes. Most of the times games would have a menu screen and a separate game screen. Many games would also keep a separate screen once the game is over so let us make changes in our game to add another scene which will be called once the game is over (either game is finished or there are no further moves). We are going to define our “game over” scene as following

Game over scene simply displays a “game over” message and total number of moves it took to finish. In case of “no win” we can also display no of pegs remaining. In “preload” method of this scene we are loading “restart” image which will be used for restart button and attached with the “pointerup” event.[…]