[SOLVED] Scaling issue ruined everything help understand scaling and NGUI coords

[vexe]

Hello, I'm working on a file manager where you have files and folders inside a background.
Every folder has contents which are stored in a List<FolderContents> - A content could be a File or Folder. Each content has an index, that way I can position the content like this:

1. public void PositionContent(FolderContent content, int atIndex)
2. {
3.         // since I'm placing the contents in a 1 dimensional list, I have to get the 2 dimensional index of the content to position it
4.         // nContentsToFit is how many contents fits inside the current folder in terms of rows / cols (ex 4x4) (related to the dimensions of the folder's background)
5.         // an example of the offset: the 6th content has an index of 5 (in 1d), now in a 4x4 folder its 2d index is (1,1) (2nd row, 2nd col)
6.         // Index2D is just a struct holding two integers, much like a V2 but for ints instead of floats
7.         var offset = new Index2D(atIndex / nContentsToFit.col, atIndex % nContentsToFit.j);
8.        
9.         // ContentWidth is the width of the folder/file's background -- which is the problem
10.         float x = offset.col * ContentWidth + offset.col * spaceBetweenContents;
11.         float y = offset.row * ContentHeight + offset.row * spaceBetweenContents;
12.         var trans = content.cachedTransform;
13.         trans.position = topLeft.position;  // an empty gameObject to start positioning the contents from
14.         var screenpos = guiCamera.WorldToScreenPoint(trans.position);
15.         screenpos.x += x;
16.         screenpos.y -= y;
17.         trans.position = guiCamera.ScreenToWorldPoint(screenpos);
18. }
19.  

Now, at first, when everything was working OK, "ContentWidth" and "ContentHeight" were the same as the scale of the background, but then for some reason I had some trouble and moved my panel under another UI, which is when I noticed a very TERRIBLE positioning of files/folders. I knew the reason is the new UI, I tried finding the dif between them, they were the same ( - I think now the values of the scale are actual screen pixels.

(Please see attachment to see the dif between after and before)

FYI, I have more than one camera and 2 UI.
I'm not developing for any mobile, only PC.

PLEASE for the love of anything you love, just let me understand how NGUI coords work!
0- what happened with me, why did everything got so messed up?
1- what is NGUI virtual pixels?
2- what is the relation between NGUI virtual pixels and screen coord?
3- how does scaling work in NGUI?
4- what does pixel perfect mean?? (please don't tell me "Pixel-perfect means making the pixels perfect" or something similar, cuz I've heard that a lot and it doesn't help clear anything)
5- what is UIRoot.pixelSizeAdjustment?? ("A helper function that figures out the pixel size adjustment for the specified object" - similar explanation to Pixel-perfect, pixel-perfect means the pixels are perfect, aughhhh)
6- when is it that the scaling values are the same as in onscreen pixels?
7- what is the relation between the scale values of an object and its width/height?

Sorry I know it's a lot but please I want to understand how all those things are tied together.... PLZZZZZ ME NEEDZ EXZBLAIN! <Shrek cat look>

I Have looked and searched a lot in the forums, the more I do the more I get confused ( - a lot of what I got are half-missing the info I want.

Let this be a full reference to this subject for those who have the same 'suffering', because there are a lot...

Thank you SO MUCH in advance! "ANYTHING" - would be VERY MUCH appreciated!

And PLZZZZZZZZZZZ Aren, make us a better documentation *___*


EDIT: Problem solved using localPosition in the right place. I've also found out about UITable which does the organizing for me automatically, like UIGrid but for 2D context instead

[ENAY]

> And PLZZZZZZZZZZZ Aren, make us a better documentation *___*

Judging by the tone of your post, it sounds like you might need to learn a few basics before doing something which seems as complex (well at least as you make it out to be)

Even from your post I don't really understand what you are doing, or what the solution could be. But here are a few tips

First of all read this. Sudden strange graphics and movements often from this issue:-

http://www.tasharen.com/forum/index.php?topic=1858.0

If you are using UIPanel scale goes from 0 to 1. So just a value of 2 will double the size of your entire list of objects.

MakePixelPerfect is the scale of your sprite. If your sprite is 256x256 and you resized it to 230x512.
Clicking the MakePixelPerfect will reset it to back to 256x256.

Anyway, I am sure someone else will make a better reply to me. But I think you need to study and play around with the tutorials some more, take your time.

> <Shrek cat look>

<Eye Of The Tiger look>

[vexe]

Thanks for your answer! - I'm not that bad with NGUI, I mean sure I know the basics EXCEPT for how scaling works and all this Panel and UIRoot mumbo jumbo scaling thingies... :s - I can handle anything complex programming/coding-wise, I did some nasty stuff in my inventory when I migrated to NGUI, but when it comes to technical stuff with the tools I'm using, I get stuck without proper docs or reference. It's sad that NGUI is such a BRILLIANT total KICKASS plugin, it's the BEST investment we've ever made, but yet has such an ugly (sorry Aren) doc, doesn't explain anything, and if it does it does it in a bad way, no examples, just dumps code right at you. It's more a developer documentation more than a user's, it's even worse than python's!

And please, if you have more helpful threads/links/tutorials about this subject (NOT about 'epic' things like "HOW TO CREATE A BUTTON!!!!!!!") pass 'em over, thanks.

[ENAY]

There are lots of tutorials and examples with NGUI. But there isn't a solution for everything.

If you are looking for links and thread, check out all the stickies.

[vexe]

I'm NOT a noob. I've seen all the video tutorials and mastered their content, I just want stuff related to scaling and how it works. (the points I mentioned above)

[ENAY]

Well I explained to you about scaling in my previous post, did you read it?

Anyway, after looking at your attached screenshot, I don't see what the problem is exactly.

In

"After ("

I can't clearly see what is wrong, but in

"........ "

you have folders popping out of your window size, and also at different spacing. Is that the "scale" problem you are talking about?

[ArenMook]

Here's an obvious question... why are you positioning things yourself manually? Why don't you just let NGUI do it  (use a UI Grid)?

NGUI's coordinates only make sense if everything has a scale of (1, 1, 1). If you resize anything, they stop making sense. UIRoot is the only one that normally breaks this rule. If the UIRoot is pixel perfect, then local position = pixel coordinates (assuming it's under the center anchor). If the UIRoot is fixed size, then "virtual" pixels are used. For example manual height of 720 means you're always working as if you were on a 720p monitor (1280x720).

[vexe]

@ENAY: Sorry which post? in one of my questions? - I'll check out my questions, but I think this is the first time I ask about scaling.

In "After " - look closely, they're mixed up (colliding) with eachother, in "...." - I didn't touch anything code-wise, there shouldn't be any space between them, I know I'm using a space var in my code but it is set to 0. If I mess around and change the "Scaling style" in my UI root, the space between them changes (FixedSize spaces them even more).

[ArenMook]

That's because you are modifying "transform.position".

Modify "transform.localPosition" instead.

You should learn the subtle difference between the two. It's a fundamental concept of Unity and will save you a lot of trouble in the future.

[vexe]

Thanks Aren. Well, about the Grid, I thought it only positions things if they're in a single row/col? I guess I'm wrong right?

Lastly, could you give me info about what is UIRoot.pixelSizeAdjustment? when is it that the scaling values are the same as in onscreen pixels? and what is the relation between the scale values of an object and its actual width/height?

I will see to your idea about localPosition. But I just wonder wonder, why did everything work exactly how I wanted it before moving it to a new UI (it had its own UI)

Notice that I'm still using transform.position now, with a FixedSize for my UIRoot, and calculating the width/height of the file/folder via CalculateAbsWidgetBounds, and now everything is fine!! (but looks a bit BIGGER) but when I use PixelPerfect, I get screwed ><

[ArenMook]

Why it worked in your own UI system? Likely because you don't have a "UIRoot" that scales itself by 2 / Screen.height.

When you set 'position' you are working in weird coordinate space -- the absolute coordinates, where something like "0.3" may mean like 427 pixels, and changes every time screen resolution changes.

When you set the 'localPosition', you are working in screen coordinates, or "virtual" coordinates, where 427 means 427 pixels.

UIRoot.pixelSizeAdjustment is something you should not concern yourself with in your case. It won't help you, it will only confuse you further. It's used to scale widgets based on the current "virtual" size.

Do what I suggested -- use localPosition. Then when that makes sense, use a UIGrid instead. You're severely overthinking what you're trying to do.

[vexe]

I've used a Grid before, but only in a 1D context, like a scroll view, will it also work here and position the files/folders in a 2D like context? just like what I'm trying to do?? )

[ArenMook]

Use it and find out.

[vexe]

Eye of the tiger? naaah pfff EYE OF THE AREN!!! lol

You're right about localPosition. I just went back to PixelPerfect scale style in my UIRoot, and made a little tweak to my positioning code:

1.         public void PositionContent(FolderContent content, int atIndex)
2.         {
3.                 var offset = new Index2D(atIndex / FileManager.nContentsToFit.j, atIndex % FileManager.nContentsToFit.j);
4.                 float x = offset.col * FileManager.ContentWidth + offset.col * FileManager.spaceBetweenContents;
5.                 float y = offset.row * FileManager.ContentHeight + offset.row * FileManager.spaceBetweenContents;
6.                 var trans = content.cachedTransform;
7.                 trans.position = FileManager.topLeft.position;
8. //              var screenpos = FileManager.guiCamera.WorldToScreenPoint(trans.position);
9.                 var newLocalPos = trans.localPosition;
10.                 newLocalPos.x += x;
11.                 newLocalPos.y -= y;
12.                 trans.localPosition = newLocalPos;
13. //              trans.position = FileManager.guiCamera.ScreenToWorldPoint(screenpos);
14.         }
15.  

It's working fine, and I understand it, but what I don't understand and probably won't, is why did it work at first and then it didn't.
Also, there's a small amount of space between the files/folders, there shouldn't be. Anyway, it's good now. I will see UIGrid now.

Thanks man, you rescued me from a nerve breakdown, and saved me some hair, even though I'm currently bald XD

[vexe]

Look what I found < UITable.cs > - UIGrid seemed to only organize things either vertically or horizontally and not both. I thought there must be something that does both, I looked in the scripts folder and fount UITable. Why didn't you tell me about it? - In fact, I haven't seen it mentioned anywhere, not even in the examples!