Jump to content

TilemapLayer's view not resizing on browser window resize.


Babsobar
 Share

Recommended Posts

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:

debug.PNGThis is a game instance created in a sized browser window, buttons.x and .y are given using coordinates relative the game x

and Y

 

 

 

 

 

 

 

 

 

 

 

 

 

debug2.PNG

 

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

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 :wacko:

You can test it at this address:

http://louisbab.net/biffin/

Link to comment
Share on other sites

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

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...