Babsobar Posted March 20, 2018 Share Posted March 20, 2018 Hello, I've been fiddling with the new camera and tilemaps and I've encountered a problem. I have created a tile layer much like in this example for a level editor I'm working on. var controlConfig = { camera: this.cameras.main, left: cursors.left, right: cursors.right, up: cursors.up, down: cursors.down, speed: 0.5, disableCull: true, zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A), zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E), }; controls = new Phaser.Cameras.Controls.Fixed(controlConfig); The problem with this way to handle the zoom is that it produces this kind of effect, The camera zooms out of the whole scene, including things that are fixed to it but leaves the rest of the tiles unrendered and culled. As you can see here, zooming should show more of the green tiles; but zooming out only made the tilemap layer and the contents of the scene smaller, when I'd like it to render more of the tilemap's tiles. I've tried updating with .setBounds, .setSize and .setViewport with a key call after zooming out but I may have missed something obvious... Any help greatly appreciated. EDIT: To clarify further; the camera has no trouble moving around inside the tilemap layer using the arrow keys but it shows black bars around on zooming out. Link to comment Share on other sites More sharing options...
samme Posted March 20, 2018 Share Posted March 20, 2018 Could you try temporarily switching to the CANVAS renderer or to a dynamic tilemap? Link to comment Share on other sites More sharing options...
Babsobar Posted March 20, 2018 Author Share Posted March 20, 2018 I've switched to canvas by switching the config of my Phaser.game but the results are the same. As for the dynamic tilemap, it already is one. The water in the screenshot is created by the game by filling the whole layer with 0, and the land is created by the player on click. Here is my code should it interest you, there are some things commented out because this is just out of the oven so excuse the messiness. Thanks for your time! var controls; var marker; var map; var mapWidth; var mapHeight; var cameras; var BKey; var width var height var selectedTile = 1 class Editor extends Phaser.Scene{ constructor() { super({key:'Editor'}); } //PRELOAD <======================================================================================================================= preload(){ var spriteMap = "main" var textureURL = 'assets/main.png' var atlasURL = 'assets/main.json' var tileSetImage = 'terrain2' this.load.atlas(spriteMap, textureURL, atlasURL); this.load.atlas('buttons', 'assets/buttons.png', 'assets/buttons.json'); this.load.atlas('menuButtons', 'assets/menuButtons.png', 'assets/menuButtons.json'); //loads tileset reference file this.load.tilemapTiledJSON('terrain2','assets/terrain2.json', null) //Load tileset image this.load.image('terrain2', 'assets/terrain2.png'); } // CREATE<======================================================================================================================= create(){ //setting Map width and height in number of tiles mapWidth = 150 mapHeight = 150 //Layer creation map = this.make.tilemap({ width: mapWidth, height: mapHeight, tileWidth: 32, tileHeight: 32, }); //Adding Tileset var tiles = map.addTilesetImage('terrain2', null, 32, 64); //Creating blank tilemap layer var layer = map.createBlankDynamicLayer('layer1', tiles); //Randomly creates Water layer.randomize(0, 0, map.width, map.height, [0 /*add tile index here to add to rng distribution*/]); // Create Paintbrush marker marker = this.add.graphics(); //Black and 2 px wide marker.lineStyle(2, 0x000000, 1); marker.strokeRect(0,-32, 6 * map.tileWidth, 6 * map.tileHeight); //Set camera bounds to mapsize this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels); //Create cursors to be able to move camera around and their configuration var cursors = this.input.keyboard.createCursorKeys(); var controlConfig = { camera: this.cameras.main, left: cursors.left, right: cursors.right, up: cursors.up, down: cursors.down, speed: 0.5, disableCull: true, zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A), zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E), }; controls = new Phaser.Cameras.Controls.Fixed(controlConfig); //Some basic text to show we're awesome and show version var text = this.make.text({ x: width-width+80, y: height-height+20, text: 'Biffin Editor refactor 0.01', origin: 0.5, wordWrap: { width: 300 }, style: { font: 'bold 12px Arial', fill: 'white', } }) // Sets anchored to screen text.setScrollFactor(0); //Create Back to menu Button // createButtons(); //Create Key for testing BKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.B); }//End of Create //UPDATE <======================================================================================================================= update (time, delta){ width = window.innerWidth; height = window.innerHeigth; controls.update(delta); var worldPoint = this.input.activePointer.positionToCamera(this.cameras.main); // Rounds down to nearest tile var pointerTileX = map.worldToTileX(worldPoint.x); var pointerTileY = map.worldToTileY(worldPoint.y); // Snap to tile coordinates, but in world space marker.x = map.tileToWorldX(pointerTileX); marker.y = map.tileToWorldY(pointerTileY); if (this.input.manager.activePointer.isDown) { // Fill the tiles within an area with grass (tile id = 1) map.fill(selectedTile, marker.x/32, marker.y/32, 6, 6); } /* if (this.input.manager.KeyCodes) if (BKey.isDown){ this.cameras.main.width += 200 this.cameras.main.x -=100 console.log('resizing') }*/ } } Link to comment Share on other sites More sharing options...
samme Posted March 23, 2018 Share Posted March 23, 2018 I used this on tilemap tests/visual culling check (changed all layers to dynamic) and it seemed to work: this.cameras.main .setPosition(-500, -400) .setSize(2000, 1600) .setZoom(0.5); Link to comment Share on other sites More sharing options...
Babsobar Posted April 4, 2018 Author Share Posted April 4, 2018 I've been trying to figure this out for a while now and I feel like there's a problem with tilemap Layers and zooming. Could you try adding zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A), zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E), to your control config and check if that displays culled tiles? I've been pulling my hair out over this. Tilemap layers have a .setDisplayheight and .setDisplayWidth but I get a phaser error telling me no frame is specifed when I try to run them. I feel like I shouldnt have to resize the height and width of the camera every time I zoom because that would seem very clunky... I'm looking for the same behavior as in this example but with dynamic tilemaps, right now I'm always getting the tiles culled by some sort of camera frame. Thanks Link to comment Share on other sites More sharing options...
tongue_in_aspic Posted May 19, 2018 Share Posted May 19, 2018 Hi, I'm working on a simple platformer and have the same problem, when zooming out the camera (on hero movement in my case) the tiles on the edges of screen start to disappear, the problem is only with the tiles, the opponents are drawing ok, even if the camera is zoomed out. Link to comment Share on other sites More sharing options...
Babsobar Posted May 22, 2018 Author Share Posted May 22, 2018 I'm still looking for an answer to this problem as well... hasezoey 1 Link to comment Share on other sites More sharing options...
Babsobar Posted September 29, 2018 Author Share Posted September 29, 2018 Just wanted to update that this problem was fixed by a recent update of Phaser. Umz, MeMyMo, jamespierce and 1 other 4 Link to comment Share on other sites More sharing options...
Recommended Posts