Babsobar Posted November 23, 2016 Share Posted November 23, 2016 Hello everyone; I'm currently making a part of my game, the level Editor, using phaser. I'm using tilemaps and tileMapLayers to fill the gameworld, and filling one of the layers with a default water sprite to show that. I'm creating the Tilemap larger than my game window can render, and using the camera and keyboard keys to move around in it. I've got a function that is called upon resize of the window, to resize my game.width, and game.height so as to have it always be at 100%, filling the browser window. But when I resize the window, the game gets resized, but not the rendered tilemap; tileMapLayer Some images to explain: This is a game instance created in a sized browser window, buttons.x and .y are given using coordinates relative the game x and Y This is the game after the window has been resized; as you can see; the game does resize; and even shows elements that were created out of the original bounds; but the tileMap isn't updating. I don't want it to stretch or scale the original represented world; I just want it to show MORE world. Like it's doing with the rest. Here is a gist to show the code used in the editor state: gist And this is the code I use in the resize function. resize: function (width, height) { // If the game container is resized this function will be called automatically. // You can use it to align sprites that should be fixed in place and other responsive display things. var height = window.innerHeight; var width = window.innerWidth; menuX = width menuY = height this.game.width = window.innerWidth; this.game.height = window.innerHeight; this.scale.scaleMode = Phaser.ScaleManager.RESIZE; this.scale.setShowAll() this.scale.setGameSize(window.innerHeight,window.innerWidth) this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; console.log('resized.') this.camera.width = this.game.width; this.camera.height = this.game.height; }, I've tried altering tileMapLayer._mc.renderHeight because that's the only value that actually show the window height in terrainMapLayer but it doesnt change anything to the rendered view. I've looked into this thread, couldn't get it to work either. What's strange is that, the game.width is visibly altered on resize, but doesn't update the tilemap shown ... Those anyone know what setting I need to pass to get the tilemap/tilemapLayers to show more of themselves? Thanks Link to comment Share on other sites More sharing options...
Babsobar Posted November 23, 2016 Author Share Posted November 23, 2016 For reference, i'm looking for the same style of handling on window than this game has: Run Pixie Run by Goodboy Games They are rescaling the whole game when the windows is scaled vertically, but only show less of the game on horizontal resize; which is what I'd like for both my horizontal and vertical resize. Link to comment Share on other sites More sharing options...
Babsobar Posted November 23, 2016 Author Share Posted November 23, 2016 I've also noticed that If I call the create function again in resize; I get the wanted behavior; meaning the tilemap view resets just as I want it; but that not good for me, since it recreates a cache over the user's already done map. I would be very grateful for some help cause right now I've been going at this all day and I'm going crazy You can test it at this address: http://louisbab.net/biffin/ Link to comment Share on other sites More sharing options...
Babsobar Posted November 25, 2016 Author Share Posted November 25, 2016 Figured it out: add to your resize function tileMapLayer.resize(this.game.width,this.game.height) To recapitulate: Code snippet to use in case you want a game that is : Fully Responsive Doesn't scale on resize, but instead shows more, or less, of the world. (RTS style) uses a tilemap and tilemap layers. resize: function (width, height) { // If the game container is resized this function will be called automatically. // You can use it to align sprites that should be fixed in place and other responsive display things. console.log('Resizing...') this.scale.scaleMode = Phaser.ScaleManager.RESIZE; // this is the scale manager mode designed specifically for this. this.scale.pageAlignVertically = true; this.scale.pageAlignHorizontally = true; tileMapLayer.resize(this.game.width,this.game.height) tileMapLayer.resize(this.game.width,this.game.height) }, Link to comment Share on other sites More sharing options...
Recommended Posts