Zooming and lines

[Vincent]

Okay, so since I completed the minimap in my game, I figured it would be nice to work on a clean zooming of the game.  So I went back to the Display.cs class and I'm trying to understand where those strange ugly lines come from when I resize the game window.

I'm just thinking and fishing for ideas here, but here is what I am thinking now:

In our previous conversations, bluemonkmn said the lines could appear because each tile drawn on the display could be off by a pixel.  But I wonder, if it is the case, why won't the lines appear when the game is at it's normal size?  It should be off by a pixel too I think.  Since I don't know anything about OpenGL, I'm just toying with the DrawFrame function in Display.cs to see what effect each element has.  I figured that the function uses coordinates to pick up the right texture on the graphic sheet, draws a rectangle on display and binds the texture to the rectangle (not necessarily in that order).  Then the graphic appears.  The operations is repeated for each cell and each sprite to display if I understand correctly.

I played with the coordinates related to the texture (image on the graphic sheet to display) and it does not seem to be the problem.  In fact, when the lines appear, the graphics are still entirely there, but there is space between them.  So I put this aside.

I played with the coordinate of the rectangle drawn on the display and when I augment by one pixel one side of the rectangle, I can the tile overlap each other... and still the lines appear.  So it doesn't seem to be the problem either.

So now, I ponder about this.  I'm probably wrong, but still...  When the game starts, the native size of the game is set and the display is perfect.  At this time, the size of each "pixel" in the game is exactly the size of a pixel "on screen".  When the game window is zoomed, the size of the game pixels are zoomed in too.  It's easily visible since pixels calculations are still working inside the game, so the pixels are zoomed in proportion with the display area.  But the pixels "on screen" are not getting bigger.  The pixels in the game seem to be based on integers.  But suppose that when you zoom the game, you zoom it by a factor of 33%.  So each game-pixel is now worth 1.33 screen-pixel.  Maybe, when the display is drawn, a rounded value is taken (so 1.33 pixel goes back to 1 pixel) so it leaves a .33 pixel that is empty: thus a line is created.  That would explain why, when the game is at it's original size, there are no lines, but if you zoom the game, it leaves lines. 

I already see the failing in this theory, because the size of the lines remains the same no matter how big or how the small the game window is zoomed.  The lines are always exactly one pixel large.  If my theory was exact, it would mean the lines would be of a different size depending on the zoom ratio.

Anyway, I still gave it a try.  I tried making a different DrawFrame function to fill the theoretical .33 pixel , but I have been unable to do so.  Maybe because I don't do it properly (possible) or I am simply not on the right problem (most probable).

There is also an observation that I do when I zoom the game that troubles me.  I have a layer on top of each level map that is called "SpiritViewLayer".  It's a very simple layer containing one tile repeated to fill the display area.  The tile is an animated tile with one invisible frame and one semi-transparent green pixel.  Without getting into the details of the reasons why I have such a layer, let's just say that it is very easy to identify the green tiles.  The tiles switch from completely transparent to green when a power is activated, but it is almost always completely transparent.  Okay, now this is what troubles me: when I zoom the game window, I can see green lines, most probably coming from the "SpiritViewLayer", with it's very distinctive green, but at this moment the tiles are supposed to be invisible and they are since only the lines are green and not the tiles.  Could it be a sort of "buffer" problem, a cache that would paint over the display area when it shouldn't? 

Does someone knows if I'm actually looking at the right place to solve this problem? (the DrawFrameFunction)  Or could the problem originate before the call to this function?

Need a little help here please! 

Thanks guys!

[Jam0864]

I think it's simply because when zoomed the pixels might take up one and a half pixels of space on the monitor, and the monitor is not capable of displaying half pixels so rounds up or down. Try zooming exactly 2x or 0.5x and see what happens.

[bluemonkmn]

If we can't figure it out, maybe we should take the question to the OpenTK forums and post some of the display.cs code.  Hopefully I can look at it in detail later this week.

[Vincent]

@Jam0864:

What you point out is near enough what I was saying in my example about a 33% zoom.  So I tried exactly what you are saying too.  The game being 320x240, I zoomed it to exactly 640x480 (so exactly 2x) and unfortunately the lines still show up. 

It was a good idea though.  Thanks!

@bluemonkmn:
If I have more time, I will post on the OpenTK forum.  I'll keep you informed.  Thanks!

[bluemonkmn]

I found something that makes it look much better.  I don't know if it's perfect, but it's hard to see any of the lines from before if they are there.
Open Display.cs and replace both occurrences of ".Linear" with ".Nearest".
That's all there is to it!
This is also related to another problem you may have noticed.  If you scale or rotate a frame, it sometimes picks up pixels from the next graphic cell.  I think this change will solve that problem too.  I am still investigating if there is another option related to GL_TEXTURE_WRAP_S and GL_TEXTURE_WRAP_T options so that you can keep the smooth scaling instead of getting blocky scaling with the ".Nearest" option.  But I kind of like the clean edges provided by the non-anti-aliased ".Nearest" scaling.  I don't like blurry so much.

I just noticed that if I scale it up a lot, I do see a green line on the screen.  I will continue to investigate.

[bluemonkmn]

I found this article from someone else having the same problem, but I don't think there was anything else there that helps:
http://www.gamedev.net/community/forums/topic.asp?topic_id=288407&forum_id=25&gforum_id=0

The only solutions I can think of for you now (after the other fix) are:
1) Don't allow bad sizes... I think if you stick with multiples of the original size, you might be OK.
2) Don't put the green cell next to the clear cell in the graphic sheet for spirit view... or better yet, if possible, re-define the clear tile to be a tile without any frames in it.  (Map the tile to a specific frame, and delete all the frames in the mapping.)  Then it won't waste time drawing invisible pixels.  But I suspect it is an animated tile, so I don't think that would be possible.  Just add another cell to the spirit view graphic sheet and make sure not to use the empty cell next to the green cell.

[Vincent]

Wow, it's great!

The "Nearest" option does the job.  I also prevent the game from displaying bad sizes like you suggested and there are no lines at all!

Thanks a lot bluemonkmn!