NG | Tech Diary

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

NG May 18, 2019May 20, 2019 Android, Mobile

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. <uses-permission android:name=”com.samsung.android.providers.context.permission.WRITE_USE_APP_FEATURE_SURVEY” /> Now you can simply select “Galaxy Specials” as the category and submit your app.

Add Phaser 2 style buttons in Phaser 3

NG April 16, 2019April 16, 2019 How to, JavaScript, Phaser, Quick Tip

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. Phaser.Scene.prototype.addButton = function (x, y, key, callback, callbackContext, overFrame, outFrame, downFrame) { // add a button let btn = this.add.sprite(x, y, key, outFrame).setInteractive(); btn.on(‘pointerover’, function (ptr, x, y) { this.setFrame(overFrame); }); btn.on(‘pointerout’, function (ptr) { this.setFrame(outFrame); }); btn.on(‘pointerdown’, function (ptr) { this.setFrame(downFrame); }); btn.on(‘pointerup’, callback.bind(callbackContext, btn)); return btn; }; Above piece of code can now be used var button = this.addButton(100, 100, ‘buttons’, this.clickButton, this, overFrame, outFrame, downFrame); clickButton event can be defined as following clickButton(button) { // use this to access scene // button is also available as the first param }

Remote debugging HTML5 games on Android using Chrome DevTools

NG April 14, 2019February 7, 2022 Android, How to, HTML5, Mobile

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. Alternatively, simply type chrome://inspect/#devices in the chrome browser 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[…]

WebGL: INVALID_VALUE: vertexAttribPointer: index out of range

NG April 14, 2019 Android, Cordova, HTML5, Issue, JavaScript, Mobile, Phaser

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.

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

NG April 9, 2019 HTML5, JavaScript, Phaser, Quick Tip

Option 1 – Phaser.Actions.Call(group.getChildren(), function(sprite) { this.children.bringToTop(sprite); }, this); Option 2 – group.children.each(function(sprite) { this.children.bringToTop(sprite); }, this); Option 3 – group.getChildren().forEach(function(sprite) { this.children.bringToTop(sprite); }, this);

Fullscreen in Phase 3

NG February 16, 2019February 16, 2019 HTML5, JavaScript, Phaser

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 let loadGame = function () { let config = { type: Phaser.AUTO, scale: { parent: ‘mygame’, mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: window.innerWidth, height: window.innerHeight }, backgroundColor: 0xFF0000, scene: TheGame } let game = new Phaser.Game(config); }; if (document.readyState === “complete” || (document.readyState !== “loading” && !document.documentElement.doScroll)) { loadGame(); } else { document.addEventListener(“DOMContentLoaded”, loadGame); } class TheGame extends Phaser.Scene { constructor() { super(“TheGame”); } preload() { this.load.spritesheet(“pegs”, “images/pegs.png”, { frameWidth: 60, frameHeight: 60 }); this.load.spritesheet(“icons”, “images/icons.png”, { frameWidth: 128, frameHeight: 128 }); } create() { this.boardDef = [ [-1,[…]

Exploring RESIZE Scale Mode in Phaser 3

NG February 9, 2019February 9, 2019 HTML5, JavaScript, Phaser

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 let config = { type: Phaser.AUTO, scale: { parent: ‘mygame’, mode: Phaser.Scale.RESIZE, width: ‘100%’, height: ‘100%’ }, backgroundColor: 0xFF0000, scene: TheGame } let game = new Phaser.Game(config); Now we need to add a resize event in our create method as following this.scale.on(‘resize’, this.resize, this); Create resize method as following resize(gameSize, baseSize, displaySize, resolution) { let width = gameSize.width; let height = gameSize.height; this.cameras.resize(width, height); this.positionControls(width, height); } In resize method we retrieve width and height of the game from “gameSize”. We will reposition the controls by simply[…]

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

NG February 9, 2019February 9, 2019 HTML5, JavaScript, Phaser

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 let config = { type: Phaser.AUTO, scale: { parent: ‘mygame’, mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH, width: 500, height: 500 }, backgroundColor: 0xFF0000, scene: TheGame } let game = new Phaser.Game(config); Another change I did was to remove css for canvas element which we had earlier added to center align our game. Our app.css[…]

Exploring Phaser 3 with a Game: Adding Tweens

NG February 8, 2019 HTML5, JavaScript, Phaser

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. let loadGame = function () { let config = { type: Phaser.AUTO, width: 500, height: 500, backgroundColor: 0xFF0000, scene: TheGame } let game = new Phaser.Game(config); }; if (document.readyState === “complete” || (document.readyState !== “loading” && !document.documentElement.doScroll)) { loadGame(); } else { document.addEventListener(“DOMContentLoaded”, loadGame); } class TheGame extends Phaser.Scene { constructor() { super(“TheGame”); } preload() { this.load.spritesheet(“pegs”, “images/pegs.png”, { frameWidth: 60, frameHeight: 60 }); } create() { this.boardDef = [ [-1, -1, 1, 1, 1, -1, -1], [-1, -1, 1, 1, 1, -1, -1], [1, 1, 1, 1, 1, 1, 1], [1, 1, 1, 0, 1, 1, 1], [1, 1, 1, 1, 1, 1, 1], [-1, -1, 1, 1, 1, -1, -1], [-1, -1, 1, 1, 1, -1,[…]

Exploring Phaser 3 with a Game: Adding Multiple Scenes

NG February 8, 2019February 8, 2019 HTML5, JavaScript, Phaser

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 class GameOver extends Phaser.Scene { constructor() { super(“GameOver”); } preload() { this.load.image(“restart”, “images/restart.png”); } create() { var gamedata = this.registry.get(‘gamedata’); this.add.text(140, 100, ‘Game Over’, { font: ’42px Courier’, fill: ‘#000000’ }); this.add.text(155, 160, ‘Moves: ‘ + gamedata.movesCount, { font: ’42px Courier’, fill: ‘#000000’ }); if (gamedata.remainingPegs > 1) { this.remainingPegs = this.add.text(30, 220, ‘Remaining Pegs: ‘[…]

A1

Author: NG