Zooming

[sluresylta]

I'm making a board game, and have just started on the zooming implementation. Ie. when the player double clicks, the board zooms out. Another double click zooms back in.

So far, I'm doing this simply by toggling the camera size between 1 and 2. My sprites are 44*44 px, and this is how they're displayed - and look good - at the zoomed-in state. Once I zoom out, though, they become visibly degraded (diagonals get jagged edges, straight edges get anti-aliased effects etc). Far more artifacts than I get when doing a resize in Photoshop, for example.

I realize the sprites would be hard put to look perfect at any zoom level/camera size, but I've deliberately chosen to have one zoom level be exactly double the other and have sprites with an even number of pixels to get as few artifacts as possible.

So, I'm guessing I'm missing something. Is it enough to change the camera size for a zooming effect? Or is there something NGUI-specific I should be doing in addition to this?

[ArenMook]

If you want it to look crisp, you will need to create and use an atlas that has sprites with double the original's size, similar to how replacement atlas feature works for SD/HD atlases.

[sluresylta]

Ok. I guess expecting runtime, Photoshop quality resizing was a bit much :-D

Anyway, as I understand it, I could theoretically have any number of atlases, each tailored for its own zoom level. Ie. I'm not limited to only two, as in the SD/HD situation on iOS. Correct?

And I can easily switch between these as the user zooms in and out, without any visible delay, assuming the game as a total is easy on computing resources?

[ArenMook]

Yup.

[Nicki]

They call it mipmapping in them there fancy places. 

[sluresylta]

I have this working, with a slight snag. When I start the game, I'm zoomed in and everything works fine. I can drag the board (UIDraggablePanel) around, and there never appears any blank area around it. However, once I zoom out and switch atlas to make things crisp, I'm suddenly able to drag the board too far down and/or up. Ie. when I drag down, the top edge of the board/panel doesn't stick to the top edge of the viewport.

Any idea about what could cause this?

[ArenMook]

Try calling UpdateScrollbars(true) or if that doesn't work -- ResetPosition(). If not, double check the bounds -- clicking on the panel should show the pink outline. Is it where you expect it to be?

[sluresylta]

Those two didn't work, so I checked the bounds, like you said. The rectangle that looks the most like pink to me seems to indicate the clip range/view port. Ie. any part of the panel outside this rectangle is not visible. This rectangle looks more magenta than pink to me, though. But maybe we're talking about the same rectangle?

The only other rectangle I see when selecting the panel is a big orange one that encompasses the whole panel.

[sluresylta]

Maybe I should also add that the panel I'm testing with has a width that is narrower than the viewport and a height that is taller than the viewport. I don't know if that matters, though.

[ArenMook]

Can you post pics of what you mean? "too far down" can mean a lot of things.

[sluresylta]

Yes, sorry for being a bit vague. Here's a link to a quick screen capture clip I did of me zooming in and out, dragging the panel around (sorry about the lame text on top, but you can see what's going on):

http://www.surfacetension.no/20121012-Record.mov

The blue, rectangular background is there because I added an extra camera to show how big my viewport/output game size is supposed to be (the resolution I've set in Player Settings for the web player). The actual board panel is rendered by an NGUI-created camera.

As you can see, I first drag the panel around in a zoomed-in state, and it sticks nicely to the viewport edges. Then I zoom out, and I can drag the panel's top and bottom edges far into the viewport. I also can't drag the panel much horizontally within the viewport.

The clip range rectangle moves around like expected on the panel in the scene view while I'm doing this. So maybe this is something camera related?

[sluresylta]

Should I be adjusting the clip range when changing the camera size?

[ArenMook]

Ok so you drag the camera around, not the panel. I don't recommend changing the ortho size of the camera at all. I'm not sure how the drag logic will behave with a size other than 1. The entire camera-based approach is an example that shows how it can be done, but it's not the suggested way of doing clipping. Shader-based approach via UIDraggablePanel is a lot more powerful and is what's used everywhere except that one example. If you insist on using the camera-based approach, look in the UIDragCamera script and adjust it as you see fit.

[sluresylta]

Actually, no - there's no camera dragging involved here. I'm dragging the panel. I did look into camera dragging first, but noticed panel dragging was recommended, so I went for that instead. I may have set the panel dragging up wrong, of course, but there are no camera dragging scripts anywhere in my hierarchy. When I drag the panel, the panel moves and the camera stays still.

The panel I'm dragging has both the scripts UIDraggablePanel and UIDragPanelContents attached directly to it. Maybe that's related to this behavior? Should those two scripts be on different objects?

[ArenMook]

Why would you have both there? UIDraggablePanel should be on the panel, yes... but UIDragPanelContents should be on colliders. Panels shouldn't have colliders.