Graphical bugs when scaling

Hi,

My game uses a lot of scaling. Like zooming in/out when a player presses a key to open a menu... but whenever I scale the layout, I get some graphic glitches.

Here's an example- when the player presses "space", a menu appears above the girls head, and when he releases it, the menu disappears. You can notice the glitchy lines on the screen then.

<img src="http://i.imgur.com/YEhlh.png" border="0" />

I think this is mostly caused because I place the tiles using the "snap to grid" option... but then, I might be wrong.

Is there anything I can do?

Thanks!

This happened to me as well, but only with tiled backgrounds. Sprites seemed to be OK. I eventually used an outside program like tiled to make my levels and imported them as big sprites and the effect disappeared.

I think you need to have pixel rounding checked to avoid getting seams when you scale, as when you scale back to normal size there might be a few decimal difference.

Usually setting point sampling and pixel rounding fixes this type of thing - otherwise check your graphics drivers are up to date.

Hey Ashley

My graphic drivers are up to date, and I'm already using point sampling and pixel rounding, but the lines are still there. In Chrome everything is just fine until I try to zoom in, and on other browsers I get these lines everytime..

<img src="http://i.imgur.com/kmVZg.png" border="0" />

I use the "snap to grid" option and 32x32 tiles, and this has been driving me crazy.

I also tried exporting to node-webkit and the lines still appear.

How are you cropping your tiles/backdrops? If you're leaving a 1px space then get rid of it and see if that helps, or do the opposite if there isn't one. Otherwise you probably shouldn't use scaling with low res aliased graphics. Also your second image has some filtering as if your browser's zoom rate is different than 100%..that will also cause seams.

It's not possible (AFAIK) to display adjacent images seamlessly to each other when at floating point zoom levels. To have a totally seamless display you can only use integer zoom levels (a bit like 'letterbox integer scale'). This isn't a C2 bug, it's just how computer graphics work.

One possibility is to extend the edges of the tiles by 1 pixel, therefore overlapping each other by 1 pixel. That should fix it, though I know it's not convenient. Also that wouldn't work perfectly if you have antialiased edges, but your game doesn't look like it uses them.

Ashley

DOH, that was the problem then. I'm using lerp to zoom in and out and I wasn't converting it into an integer. It doesn't look as smooth as it is without the lerp, but it'll have to do. Thanks!

Another workaround is doing what Arima said, instead of having 32x32 tiles I made them 32x33 and it also worked.

Thanks everyone!

edit: one last question, is there a function where I can make a big number like 1.239482 into just 1.2 instead of rounding it completely?

Note Construct 2 multiplies zoom levels by 100, so 77 isn't an integer zoom level, it will really be 0.77. So your only seamless zoom levels are likely to be 100 (1x), 200 (2x), 300 (3x) etc.