Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Zooming out causes unwanted black bars!


Batzi
 Share

Recommended Posts

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

 

Zoom_Out.png

 

What do you think the problem is?

Link to comment
Share on other sites

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?) 

Link to comment
Share on other sites

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? :o 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)

Link to comment
Share on other sites

No idea why it isn't showing when embedded.

 

Wow, what a pretty-looking game :o  

 

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 ~

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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