Zooming out causes unwanted black bars!

[Batzi]

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?

[chongdashu]

The image is not visible, unfortunately.

 

However, based on this limited understanding, wouldn't zooming out too far eventually fill portions of your viewport with black bars? For e.g., if you map is 640x480, and you zoom out by a factor of 2 (meaning your scale is now 0.5), wouldn't you have 640-320 = 320px and 480-240=240 px of black space around the original map?) 

[Batzi]

The image is not visible, unfortunately.

 

However, based on this limited understanding, wouldn't zooming out too far eventually fill portions of your viewport with black bars? For e.g., if you map is 640x480, and you zoom out by a factor of 2 (meaning your scale is now 0.5), wouldn't you have 640-320 = 320px and 480-240=240 px of black space around the original map?) 

How come it is not showing? Can you see it if you click here http://s1.postimg.org/oze5u9zal/Zoom_Out.png

 

My map is 5263x2636. It stops scaling when it reaches 0.4 when zooming out. (it starts from 1)

[chongdashu]

No idea why it isn't showing when embedded.

 

Wow, what a pretty-looking game   

 

I'll take a closer look if I get a chance later.

 

Edit

 

So, what is your current game resolution (height and width) currently? I assume that if your map is 5263x2636, and you are doing a linear scaling, there is a very high likelihood of scaling too far out to the point that the canvas is bigger that your visible area of the map. 

 

One way to check is to do something like color the  stage to some other color: e.g., game.stage.backgroundColor = '#3498db'; do the black bars still appear or does it become blue?

[Batzi]

Canvas is 1280x960. I want the map to be bigger than the canvas obviously so that I can zoom in/out and scroll left/right/up/down.

[chongdashu]

This is an extremely long shot, but are you 100% sure you are stopping the scale at 0.4? Or are you stopping the last mouse event at 0.4?

 

The difference is

 - if you stop the scale at 0.4, then the the map dimensions would be (2105, 1054) = which bigger than your canvas 1280 x 960 - so all good.

 - if you stop the last mouse event at 0.4, it means that the final mouse event will do the worldY -= 0.1 one last time, resulting in final scale of 0.3, and map dimensions of (1578, 791).

 

The reason why this is suggested is - I took your image and checked it. The height of the map is currently 793 pixels high, with a 48 pixel high black bar at the bottom, for a total canvas height of 841 pixels. Thus, it is possible that you are actually at zoom scale 0.3 (793/2636 = 0.3), and thus much smaller than your canvas height-wise (resulting in a black border).

 

Could you do a console.log(this.game.world.scale) in update to make sure the scale is really stopped at 0.4, as you expect it to be, and not 0.3?

[Batzi]

This is an extremely long shot, but are you 100% sure you are stopping the scale at 0.4? Or are you stopping the last mouse event at 0.4?

 

The difference is

 - if you stop the scale at 0.4, then the the map dimensions would be (2105, 1054) = which bigger than your canvas 1280 x 960 - so all good.

 - if you stop the last mouse event at 0.4, it means that the final mouse event will do the worldY -= 0.1 one last time, resulting in final scale of 0.3, and map dimensions of (1578, 791).

 

The reason why this is suggested is - I took your image and checked it. The height of the map is currently 793 pixels high, with a 48 pixel high black bar at the bottom, for a total canvas height of 841 pixels. Thus, it is possible that you are actually at zoom scale 0.3 (793/2636 = 0.3), and thus much smaller than your canvas height-wise (resulting in a black border).

 

Could you do a console.log(this.game.world.scale) in update to make sure the scale is really stopped at 0.4, as you expect it to be, and not 0.3?

You're right! It is stopping at 0.3 instead of 0.4! How come? :S

 

EDIT: I changed the threshold to 0.5 and now it stops at 0.4 but it gets worse. Now whenever I scroll to see the rest of the map, I get a much bigger black bar! :S

[WombatTurkey]

You're right! It is stopping at 0.3 instead of 0.4! How come? :S

 

EDIT: I changed the threshold to 0.5 and now it stops at 0.4 but it gets worse. Now whenever I scroll to see the rest of the map, I get a much bigger black bar! :S

 

 

It's time for a jsfiddle

[chongdashu]

It's time for a jsfiddle 

 

Yes It would be easier to debug if you throw up a minimal working example on jsFiddle that can replicate your error. Otherwise, can you capture a screen shot and post it up again. Try to make sure it's actual size

[Get_Bentley]

Unfortunately I dont have any input on how to fix it, I just wanted to say that is an absolutely gorgeous looking game!

[Batzi]

Unfortunately I dont have any input on how to fix it, I just wanted to say that is an absolutely gorgeous looking game!

Thank you. I work at a studio and we have artists here who work on the animations and graphics overall. I am putting things together and writing the gameplay mechanics. All credits go to them for making it look beautiful. I just have to make things work!

[WombatTurkey]

Thank you. I work at a studio and we have artists here who work on the animations and graphics overall. I am putting things together and writing the gameplay mechanics. All credits go to them for making it look beautiful. I just have to make things work!

 

Don't want to get too off-topic, but are you using the isometric plugin as well? Are you doing click to hold to move the player around as well, or just point and click? Does each sprite have the 8 animations for the full isometric experience? Because if so, this will be the first 'official' isometric game I think for Phaser. I agree, the game does look amazing and the skill effects your art team can create will be amazing as well I can imagine. I am looking forward for it and please keep us updated ~

[Batzi]

Don't want to get too off-topic, but are you using the isometric plugin as well? Are you doing click to hold to move the player around as well, or just point and click? Does each sprite have the 8 animations for the full isometric experience? Because if so, this will be the first 'official' isometric game I think for Phaser. I agree, the game does look amazing and the skill effects your art team can create will be amazing as well I can imagine. I am looking forward for it and please keep us updated ~

The iso plugin is there but I am not using it and yes I am using all 8 animations! So far, I am controlling the player using arrows! But point and click shouldn't be a hard task. Everything seems ISO except there is no iso grid on the map. You can't really tell if it is ISO or not tbh.

[Batzi]

I think I fixed the problem:

 

JSFiddled: http://jsfiddle.net/Batzi/ttxo8eob/43/

 

Can someone confirm it is working properly?

 

EDIT: Something is wrong. The map is not all reachable when I start dragging and that varies based on the zoom in/out level you're in.