Search the Community

Hey guys, I know I have been posting a lot recently but you guys have been helping me out so I appreciate it so much! So I have a map and on it are several sprites. I implemented a zoom features so that whenever you scroll up/down (mouse) it will zoom in/out. The problem I am having is that when I am fully zoomed out (based on a threshold I set), a black bar at the bottom appears. The way I am zooming in/out is simply done by altering the game.world.scale on scroll up/down. I also implemented a mouse pointer based scroll to move around when parts of the map aren't shown. Zoom in code which is in create() this.game.input.mouse.mouseWheelCallback = mouseWheel; var t = this.game.add.tween(this.game.world.scale,200); function mouseWheel(event) { if (event.wheelDelta > 0 && worldX<=1) { worldX += 0.1; worldY += 0.1; myGame.world.scale.x = worldX; myGame.world.scale.y = worldY; myPlayer.body.setSize(50*worldX,50*worldX,20*worldX,80*worldX); myHouse.body.setSize(150*worldX,50*worldX,20*worldX,240*worldX); myCharacter.body.setSize(110*worldX, 20*worldX, 0, 120*worldX); myGame.world.setBounds(0, 0, 5263*worldX, 2636*worldX); } else if (event.wheelDelta < 0 && worldX>=0.40) { worldX -= 0.1; worldY -= 0.1; } else { t.stop(); } myGame.world.scale.x = worldX; myGame.world.scale.y = worldY; myPlayer.body.setSize(50*worldX,50*worldX,20*worldX,80*worldX); myHouse.body.setSize(150*worldX,50*worldX,20*worldX,240*worldX); myCharacter.body.setSize(110*worldX, 20*worldX, 0, 120*worldX); myGame.world.setBounds(0, 0, 5263*worldX, 2636*worldY); }and here's the mouse pointer scroll that changes the camera which is in update() if(this.game.input.activePointer.isDown && this.game.input.activePointer.x>this.current X){ this.game.camera.x -= 8; this.currentX = this.game.input.activePointer.x; } if(this.game.input.activePointer.isDown && this.game.input.activePointer.x<this.current X){ this.game.camera.x += 8; this.currentX = this.game.input.activePointer.x; } if(this.game.input.activePointer.isDown && this.game.input.activePointer.y>this.current Y){ this.game.camera.y -= 8; this.currentY = this.game.input.activePointer.y; } if(this.game.input.activePointer.isDown && this.game.input.activePointer.y<this.current Y){ this.game.camera.y += 8; this.currentY = this.game.input.activePointer.y; }Note: I am setting the world bouds based on the map's width and height like this this.game.world.setBounds(0, 0, this.map.width, this.map.width);and here's a screenshot of what it looks like when fully zoomed out What do you think the problem is?