joshgerdes

Sorry, no Windows version at the moment. I do plan to get it out for Windows 8 (desktop and mobile) but just haven't followed through yet.

My first HTML5 game made with Phaser. I used cocoonJs for the native wrapper and it is currently available for iOS and Android. Thanks to everyone on this forum for helping me work through my first game. Available Now for iOS or Android: Enjoy this tribute to an Atari 2600 classic River Raid. Relive your childhood adventures on the river of no return. Description: Your mission is to score as many points possible by destroying enemy tankers, helicopters, fuel depots, jets and bridges before your jet crashes or runs out of fuel. Features: - Fully unlocked game (no in-app purchases needed) - Ad free - Endless levels with many level maps from the original game - Responsive touch controls - Universal: iPhone, iPad and iPod Touch - Game Center / Google Play Games To learn to fly successful missions, you'll need the sensitivity, touch and sharpshooting skills of a precision jet pilot. But that takes time and practice. Good Luck! More info and feedback over at the Game showcase thread: http://www.html5gamedevs.com/topic/12881-completedphaserretro-river-raid-classic/

My first HTML5 game made with Phaser. I used cocoonJs for the native wrapper and it is currently available for iOS and Android. Thanks to everyone on this forum for helping me work through my first game. Available Now for iOS or Android: Enjoy this tribute to an Atari 2600 classic River Raid. Relive your childhood adventures on the river of no return. Description: Your mission is to score as many points possible by destroying enemy tankers, helicopters, fuel depots, jets and bridges before your jet crashes or runs out of fuel. Features: - Fully unlocked game (no in-app purchases needed) - Ad free - Endless levels with many level maps from the original game - Responsive touch controls - Universal: iPhone, iPad and iPod Touch - Game Center / Google Play Games To learn to fly successful missions, you'll need the sensitivity, touch and sharpshooting skills of a precision jet pilot. But that takes time and practice. Good Luck!

Update: I finally figured out what my issue was. I had a hidden div element layered over the canvas which was blocking touch. I was using the div to display orientation instructions when users played the game in a mobile web browser. The div element was set to display none and worked fine in webview and webview+ but still caused issues in canvas+. So in short, the button example I have in my original post works perfectly using phaser v2.2.2 with the cocoonJS launcher (using cocoonJS v2.1.1.1). Thanks!

I checked and window.devicePixelRatio is 2 for me as well. I unfortunately have bigger problems. I am unable to click the location you described or trigger any touch events at all for that matter. I tested for the following events firing: button.events.onInputDownbutton.events.onInputUpgame.input.onTapgame.input.onDownBut I'm getting no events firing when trying to run the game in Canvas+ mode from the cocoonJS launcher on iOS. The events trigger in the browser fine. Perhaps I'm missing some general configuration setting but I have not found anything specific on what those would be. Here's the only input related settings in the current game code: this.game.input.maxPointers = 2;this.game.input.multiInputOverride = Phaser.Input.TOUCH_OVERRIDES_MOUSE;Is there anything else that needs to be setup to allow touch to work in Canvas+?

I am having issues getting the click events to fire for a basic Phaser.Button when running in canvas+ with cocoonJS. I am testing the app (using phaser v2.2.2) with the cocoonJS launcher (using cocoonJS v2.1.1.1) on iOS 8.1.2 on an iPhone 6. Here is what I have on a basic menu game state: var button = this.game.add.button(this.game.world.centerX - 100, 215, 'assets', null, this, 'button_play_02.png', 'button_play_01.png', 'button_play_02.png', 'button_play_01.png');button.inputEnabled = true;button.fixedToCamera = true;button.smoothed = false;button.events.onInputOut.add(function() { console.log('button event onInputOut');}, this);button.events.onInputDown.add(function() { console.log('button event onInputDown');}, this);The button image displays in canvas+ but does not fire anything when clicked/touched. In webview+ and webview it works fine. The 'assets' is a texture atlas with the images being displayed for the buttons based on transparent pngs. I have seen similar issue on other topics (see below) but found no solution that worked. Any help would be greatly appreciated. Related topics: http://www.html5gamedevs.com/topic/3980-common-phaser-cocoonjs-issues/page-13 http://www.html5gamedevs.com/topic/7167-conoonjsphaser-buttons-dont-work-even-with-canvas/

Would anybody be kind enough to post a simple example of how to setup a button that works in the current version of phaser & cocoonJS (canvas+ mode)? Or point out what I'm doing wrong in the example below? Here's what I have for a button that does not work in canvas+ mode on the iOS testing app (using phaser v2.2.2 & cocoonJS v2.1.1.1): var button = this.game.add.button(this.game.world.centerX - 100, 215, 'assets', null, this, 'button_play_02.png', 'button_play_01.png', 'button_play_02.png', 'button_play_01.png');button.inputEnabled = true;button.fixedToCamera = true;button.smoothed = false;button.events.onInputOut.add(function() { console.log('button event onInputOut');}, this);button.events.onInputDown.add(function() { console.log('button event onInputDown');}, this);

I finally freed up some time to work on my game again. I have resolved my performance issues by taking the suggestions given to me earlier. I am doing a flappy bird approach where I have 2 'land' objects that I am vertically scrolling. Once one tile leaves the camera viewable area I reset its values and move it to the top. The object consists of a sprite which is home to an image and some polygon data for collisions. I sliced up the background so each 'land' image is 1024x1152 and I create the polygon json data with a slick little tool called PhysicsEditor. Now I am on to all the quirks that come with trying to run a game with cocoonjs in canvas+. Thanks everyone for the comments and help. Happy coding!

Thanks for taking the time to look at this @UgnisKarolis. I added the roundPx line and removed the background sprite all together and saw only a 5fps improvement. I'm testing on an iPhone 5. But if I remove line 62: mapCollisionPolygons.body.collides(enemyCG);then I get 60fps even with the large background image sprite loaded. Do you think the slowdown has to due with the size of the polygon objects used for the collision detection? What exactly did you do for the texture fix? I just want to see if I can reproduce what you are seeing. And no worries about being nitpicky, this test code is just a quick demo of the basics of what I have in my game. Also, I was planning to cleanup and refactor a lot of the code into the proper classes once I got the base logic working. Thanks again for your help.

Weird, I tested without the background image sprite (map) and only get a 2-3fps increase. Actually when I remove the collide related lines on 62 and 70 I get 60fps. That is why I originally thought it had to do with the actual collision code. Perhaps it is just because the collision polygons are too big? So the collision calculation takes too long to check? And I assume you meant that the dimension of the image and the bounds it too large. Just in case I optimized the png files and re-uploaded the zip file. The background is now 11kb. The game size (1024x640) was set based on to my first attempt of using tilemaps. The map is based on a 32x32 tile system and had dimensions of 1024x4608. I am unsure how to scale that down to fit a small game size but I have noticed if I reduce the game size the fps increases. Does anybody have an example of how to reduce the scale of the sprite objects in this test game to fit in a smaller game size? Or do I have to adjust all my all my images and position logic to fit a smaller game size? As for approaches, I am open to anything. I just have defined levels with specific layouts but how those are displayed does not really matter to me. I was planning on doing that flappy bird approach adding levels in front of the camera but maybe I need to be more fine grained at than that. This is my first game, and first use of Phaser, so it is definitely a learning experience for me. Thanks for the help.

To answer your qeustion @valueerror, I am working on a vertical scroller so when using the tilemap method the center portion of the map is blank (i.e. has no tiles defined) so the enemy bodies are not colliding with anything. I just use a background color for the stage to give the center color. If I understand correctly, if you add tiles to the center portion of the map and do not want them to be part of the collision bodies defined for the tilemap you would exclude them like this: var tilemap = game.add.sprite(0, 0, 'level01');tilemap.setCollisionByExclusion([1,2,3], true, 'land');where 1,2,3 are the index values of the tiles you do not want to collide with. Link to the related docs: http://docs.phaser.io/Phaser.Tilemap.html#setCollisionByExclusion Also, I have another question out there on specifically how to setup enemy body collisions for this scenario. I just added full test code so hopefully someone will be kind enough to help with a solution. Here's a link to the related post: http://www.html5gamedevs.com/topic/9709-performance-issues-with-p2-sprite-collisions/

Sorry, I thought the extra basic game setup code would just get in the way of looking at the issue. I have created a basic example with all the code in the attached zip. And just to be clear, I am not using tiles at the moment. Just 2 sprites (one for the background image and other for the polygon-based collision layer). The collision layer uses 6 polygons and I have tested with WEBGL which runs at 15fps which much worse than the 32fps I'm getting with CANVAS. Here's the main code: var game = new Phaser.Game(1024, 640, Phaser.WEBGL, 'test-game', { preload: preload, create: create, update: update, render: render });var NUMBER_OF_ENEMIES = 13;var cursors = null;var player = null;var MAX_SPEED = 150;var DEFAULT_SPEED = this.MAX_SPEED / 2;var MIN_SPEED = this.DEFAULT_SPEED / 2;var enemies = null;function preload() { game.input.maxPointers = 2; game.input.multiInputOverride = Phaser.Input.TOUCH_OVERRIDES_MOUSE; game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; game.scale.pageAlignHorizontally = true; if (game.device.desktop) { game.scale.pageAlignVertically = true; } else { game.scale.forceLandscape = true; game.scale.startFullScreen(false); } game.scale.setScreenSize(true); game.scale.refresh(); game.load.image('level01', 'level01.png'); game.load.physics('level01_physics', 'level01.json'); game.load.image('player', 'player.png'); game.load.image('enemy', 'enemy.png');};function create() { game.time.advancedTiming = true; game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.setImpactEvents(true); game.physics.p2.restitution = 0.8; game.stage.backgroundColor = '#333333'; game.scale.setResizeCallback(resize, game); // Setup collision groups var landCG = game.physics.p2.createCollisionGroup(); var enemyCG = game.physics.p2.createCollisionGroup(); var playerCG = game.physics.p2.createCollisionGroup(); // Load map background image var map = game.add.sprite(0, 0, 'level01'); game.world.setBounds(0, 0, 1024, 4608); // Create sprite and load polygon physics data for the map boundaries var mapCollisionPolygons = game.add.sprite(15, 15); game.physics.p2.enableBody(mapCollisionPolygons, false); mapCollisionPolygons.fixedRotation = true; mapCollisionPolygons.body.motionState = Phaser.Physics.P2.Body.STATIC; mapCollisionPolygons.body.clearShapes(); mapCollisionPolygons.body.loadPolygon('level01_physics', 'left'); mapCollisionPolygons.body.loadPolygon('level01_physics', 'right'); mapCollisionPolygons.body.setCollisionGroup(landCG); mapCollisionPolygons.body.collides(enemyCG); enemies = game.add.group(); for(var i = 0; i <= NUMBER_OF_ENEMIES; i++) { // Create a new enemy and setup collision var enemy = new Enemy(game, map.width / 2, map.height - (680 + i * 200)); enemy.body.setCollisionGroup(enemyCG); enemy.body.collides(landCG, enemy.collided, enemy); enemy.body.collides(playerCG, diePlayer, this); enemies.add(enemy); } // Create a new player and setup collision player = new Player(game, map.width / 2, map.height - 380); player.body.setCollisionGroup(playerCG); player.body.collides(landCG, diePlayer, game); player.body.collides(enemyCG, diePlayer, game); game.physics.p2.updateBoundsCollisionGroup(); game.camera.follow(player); cursors = this.input.keyboard.createCursorKeys();};function update() { if (cursors.up.isDown) { player.body.moveUp(MAX_SPEED) } else if (cursors.down.isDown) { player.body.velocity.y = -MIN_SPEED; } else { player.body.moveUp(DEFAULT_SPEED); } if (cursors.left.isDown) { player.body.velocity.x = -MAX_SPEED; } else if (cursors.right.isDown) { player.body.moveRight(MAX_SPEED); } else { player.body.velocity.x = 0; } enemies.forEachAlive(function(item) { if (!item.started && Phaser.Point.distance(player.body, item.body, true) < item.range) { item.startMove(); } }, this);};function render() { game.debug.text(this.time.fps || '--', this.camera.width-50, 18, "#00ff00");};function diePlayer(body1, body2) { console.log('die!');};function resize() { game.scale.setScreenSize(); game.scale.refresh();};////////////var Enemy = function (game, x, y) { this.hasCollided = false; this.started = false; this.speed = 100; this.range = 200; Phaser.Sprite.call(this, game, x, y, 'enemy'); game.physics.p2.enable(this); this.body.fixedRotation = true; this.body.motionState = Phaser.Physics.P2.Body.DYNAMIC; this.body.onEndContact.add(this.endCollided, this); game.add.existing(this); return this;}; Enemy.prototype = Object.create(Phaser.Sprite.prototype);Enemy.prototype.constructor = Enemy;Enemy.prototype.update = function() {}; Enemy.prototype.collided = function(body1, body2) { if(!this.hasCollided) { this.scale.x *= -1; this.speed *= -1; this.body.velocity.x = this.speed; this.hasCollided = true; }}; Enemy.prototype.endCollided = function(bodyB, shapeA, shapeB) { this.hasCollided = false;};Enemy.prototype.startMove = function() { this.started = true; this.body.velocity.x = this.speed;};////////////var Player = function (game, x, y) { this.startX = x; this.startY = y; Phaser.Sprite.call(this, game, x, y, 'player'); game.physics.p2.enable(this); this.body.fixedRotation = true; this.body.motionState = Phaser.Physics.P2.Body.DYNAMIC; this.events.onKilled.add(this.killed, this); game.add.existing(this); return this;};Player.prototype = Object.create(Phaser.Sprite.prototype);Player.prototype.constructor = Player;Player.prototype.update = function() {};Player.prototype.killed = function(obj) { this.reset(this.startX, this.startY);};test-game.zip

I am having some performance issues with collision groups on mobile. I have 13 enemy sprites in game that collide with map polygon boundaries. Having the enemy sprites in game degrades the fps from 60fps down to 30fps. As I reduce the number of enemies in game the fps increases. 13 seems like a really small number of sprites to have in game so I feel like I must be setting up the collision detection incorrectly. I am trying to setup a base map with polygons to use for collision boundaries of the map. I want to have enemies go back and forth horizontally between the map boundaries. They will change direction (both a change in x velocity and flipping the scale so they visual point the opposite direction) when they make contact with the boundary. Is this the proper way to setup this type of collision detection? If so, any thoughts on why it is so slow on mobile devices (testing on iPhone 5)? Here is the code I currently have: // Init gamevar game = new Phaser.Game(1024, 640, Phaser.CANVAS, 'test-game'); // Load the assetsgame.load.image('level01', 'assets/level01.png'); // Image 1024x4608 game.load.physics('level01_physics', 'assets/level01_physics.json'); // Physics data format is Lime + Corona (JSON)// Setup collision groups var landCG = game.physics.p2.createCollisionGroup(); var enemyCG = game.physics.p2.createCollisionGroup();// Load map background imagevar map = this.add.sprite(0, 0, 'level01');// Create sprite and load polygon physics data for the map boundaries var mapCollisionPolygons = this.add.sprite(15, 15); this.physics.p2.enableBody(mapCollisionPolygons, false); mapCollisionPolygons.fixedRotation = true; mapCollisionPolygons.body.motionState = Phaser.Physics.P2.Body.STATIC; mapCollisionPolygons.body.clearShapes(); mapCollisionPolygons.body.loadPolygon('level01_physics', 'left'); mapCollisionPolygons.body.loadPolygon('level01_physics', 'right'); mapCollisionPolygons.body.setCollisionGroup(landCG); mapCollisionPolygons.body.collides(enemyCG); // Create a new enemy and setup collision var enemy = new Enemy(game, 100, 100, 100, 100, 100); enemy.body.setCollisionGroup(enemyCG); enemy.body.collides(landCG, enemy.collided, enemy); The extended Sprite class called 'Enemy': var Enemy = function (game, x, y) { this.hasCollided = false; this.speed = 100; Phaser.Sprite.call(this, game, x, y, 'boat'); game.physics.p2.enable(this); this.body.fixedRotation = true; this.body.motionState = Phaser.Physics.P2.Body.DYNAMIC; this.body.onEndContact.add(this.endCollided, this); game.add.existing(this); return this;};Enemy.prototype = Object.create(Phaser.Sprite.prototype);Enemy.prototype.constructor = Enemy;Enemy.prototype.update = function() {};Enemy.prototype.collided = function(body1, body2) { if(!this.hasCollided) { this.scale.x *= -1; this.speed *= -1; this.body.velocity.x = this.speed; this.hasCollided = true; }};Enemy.prototype.endCollided = function(bodyB, shapeA, shapeB) { this.hasCollided = false;};module.exports = Enemy;The 'assets/level01_physics.json' file: { "left": [ { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 0, 4608 , 224, 4016 , 384, 4056 , 384, 4608 ] } , { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 384, 264 , 224, 303 , 0, 0 , 384, 0 ] } , { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 224, 4016 , 0, 4608 , 0, 0 , 224, 303 ] } ] , "right": [ { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 640, 4056 , 800, 4016 , 1024, 4608 , 640, 4608 ] } , { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 1024, 0 , 800, 303 , 640, 264 , 640, 0 ] } , { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 800, 4016 , 800, 303 , 1024, 0 , 1024, 4608 ] } ] }Here is a link to a related post with some of my performance testing with different options for displaying the background map and boundaries in case it helps. http://www.html5gamedevs.com/topic/9677-vertical-scrolling-background-with-collisions-in-p2/

Yet another testing update. I tried another option of using a tilemap and polyline objects created in Tiled. I created 2 polylines to establish a left and right border with each polyline consisting of 5 segments. This seems like a pretty simple collision border but the result was around 20fps on a mobile device. So that seems like I have exhausted my options for implementing the map and the real issue is in the collision detection between the map objects and the enemy sprites. Does anybody have an example on collision detection between sprites and background maps (either tilemap or polygons)? Thanks in advance.

Just for an update, I did more testing around the sprite and polygons approach. I currently have 13 'enemies' on the level that are loaded at the start of the level. I have the 'land' added to a collision group and I have the 'enemies' in a collision group. I set the P2 body of the enemies to collide with the land collision group and the land sprite P2 body to collide with the enemies collision group. Here is the relevant code: item.body.collides(this.gameGroups.landCG, item.collided, item);Part of the extended Sprite object ('item' above is this extended Enemy sprite object): Enemy.prototype.collided = function(body1, body2) { if(!this.hasCollided) { this.scale.x *= -1; this.speed *= -1; this.body.velocity.x = this.speed; this.hasCollided = true; }};Enemy.prototype.endCollided = function(bodyB,shapeA,shapeB) { this.hasCollided = false;};This block of code allows the enemy to touch the edge of the 'land' and switch directions and go back and forth across the screen. I had to add the hasCollided boolean because for some reason the collided function gets called multiple times when a P2 body hits another. I have seen other games and examples with way more than 13 sprites on screen so I'm assuming there must be something inefficient with the collision code. Does anybody have any ideas on a better way for an enemy to travel back and forth between to other bodies? Or what is the proper way to set up a sprite to move like this with P2 physics?

I am new to Phaser and I am currently working on my first game. I'm am creating a vertical scroller and have come across some performance issues on mobile. I have a 1024x4608 background with some 'land' that needs collision detection with the 'player' and the 'enemies' in the game. I've been trying a couple approaches but can't seem to find the sweet spot with the performance. I was hoping someone would have some suggestions. Here's what I've tried so far: 1) Tilemap this.load.tilemap('level01_map', 'assets/level01_map.json', null, Phaser.Tilemap.TILED_JSON);this.load.image('tiles', 'assets/tiles.png');this.map = this.add.tilemap('level01_map');this.map.addTilesetImage('main', 'tiles');this.map.createLayer('land');this.world.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels);this.map.setCollisionByExclusion([], true, 'land');var bodyObjects = this.physics.p2.convertTilemap(this.map, 'land');for(var i = 0; i < bodyObjects.length; i++) { bodyObjects[i].setCollisionGroup(this.gameGroups.landCG); bodyObjects[i].collides(this.gameGroups.playerCG); bodyObjects[i].collides(this.gameGroups.enemyCG);} 2) Sprite with polygons this.load.image('level01', 'assets/level01.png');this.load.physics('level01_physics', 'assets/level01.json');this.world.setBounds(0, 0, 1024, 4608);this.map = this.add.sprite(0, 0, 'level01');this.map.widthInPixels = 1024;this.map.heightInPixels = 4608;var polygonCollisionSprite = this.add.sprite(15, 15);this.physics.p2.enableBody(polygonCollisionSprite, true);polygonCollisionSprite.fixedRotation = true;polygonCollisionSprite.body.motionState = Phaser.Physics.P2.Body.STATIC;polygonCollisionSprite.body.clearShapes();polygonCollisionSprite.body.loadPolygon('level01_physics', 'level01_left');polygonCollisionSprite.body.loadPolygon('level01_physics', 'level01_right');polygonCollisionSprite.body.setCollisionGroup(this.gameGroups.landCG);polygonCollisionSprite.body.collides(this.gameGroups.playerCG);polygonCollisionSprite.body.collides(this.gameGroups.enemyCG); And here are my results testing on an iPhone 5:Tilemap no collisions = 45fps Tilemap with collisions = 20fps Sprite/polygons no collisions = 45fps evens out to 60fps when less polygons in view Sprite/polygons with collisions = 8fps Sprite/polygons (simple) no collisions = 60fps Sprite/polygons (simple) with collisions = 30fps Note: simple means I reduced the vertices in the polygons. (Simple = 6 shapes, Normal = 44 shapes) The game is setup with 1024x640 in Phaser.CANVAS mode. Also, the all sprite assets, except the stuff for the background, are being load via one atlas texture. Any thoughts?

So does anybody have any idea how to update the game height on window.resize (preferably while keeping the aspect ratio / scale)?

Thanks for the reply Rich but the responsive template looks to be a bit bare. I tried setting the initial game height and width to 100% and setting the scaleMode to RESIZE but I had no luck. For the responsive template, does there need to be anything else in the game resize function? Like a call to scale.refresh() or similar? Also, right now I am using a tilemap as the base world background and one of its layers for a collision map. So with the settings from the responsive template it shows nothing on page but perhaps I need to set something else with my tilemap then the responsive template settings would work? Here's how I'm using the tilemap at the moment: this.physics.startSystem(Phaser.Physics.P2JS);this.physics.p2.setImpactEvents(true);this.physics.p2.restitution = 0.8;this.stage.backgroundColor = '#2d32b8';this.map = this.add.tilemap('level01');this.map.addTilesetImage('main', 'tiles');this.map.createLayer('land');this.map.createLayer('bridge');this.world.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels);var playerCG = this.physics.p2.createCollisionGroup();var landCG = this.physics.p2.createCollisionGroup();this.physics.p2.updateBoundsCollisionGroup();this.map.setCollisionByExclusion([], true, 'land');var bodyObjects = this.physics.p2.convertTilemap(this.map, 'land');for(var i = 0; i < bodyObjects.length; i++) { bodyObjects[i].setCollisionGroup(landCG); bodyObjects[i].collides(playerCG);}Or is there a better way to setup a map and collision boundaries that would work in the responsive template example?

I am new to Phaser development and I am currently having trouble figuring out the correct code needed to have a game resize to the full viewport of a browser on window resize without stretching any of the graphics. I am working on a vertical scroller with a tilemap (1024x4608) for the base background/map. On window resize (or orientation change) I would like to be able to adjust the game dimensions to fill up the entire viewport while keeping the same ratio to allow the tilemap not to be distorted. From my tests, it seems that I would want to keep the width the same and adjust the height then let the game scaling do its thing to allow the game to take up the full browser viewport without stretching the tilemap. I just have not been able to figure out the correct ScaleManager settings to make that happen. I tried the following which does scale the game but does not adjust the width/height to take up the whole viewport: Game instantiation: var gameHeight = window.innerHeight * 1024 / window.innerWidth;var game = new Phaser.Game(1024, gameHeight, Phaser.CANVAS, 'test-game');In the window resize function: game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;game.scale.pageAlignHorizontally = true;game.scale.pageAlignVertically = true;game.scale.setScreenSize();game.scale.refresh();And this attempt takes up the whole viewport but does not scale correctly so it stretches the tilemap: In the window resize function: game.scale.setMaximum();game.scale.refresh();Any help would be greatly appreciated.