How to solve resolution problem

Discussion in 'Scripting' started by bharatbarde, Feb 16, 2012.

  1. bharatbarde

    bharatbarde

    New Member

    Joined:
    Dec 29, 2011
    Messages:
    13
    I am moving GuiTexture using itween it loooks better at 640 x 480 (web build i am using) but getting problem once resolution changed
    I need to work it on 1024 x768 and 16:9 ratio screen resolution

    Gui texture name is "InfernoFont"
    pixel inset (0,0)
    YPosition 0.55
    starting XPosition -0.95
    Code (csharp):
    1.  
    2.   function Start()
    3.  
    4.  {
    5.  var infernoFont = GameObject.Find("InfernoFont");
    6.  iTween.MoveTo(infernoFont,{"x":0.23,"time":2,"transition":"linear"});
    7.  
    8.  }
    I download CreatePlane.cs from wiki but don't know how to use it in my script
  2. jonlab

    jonlab

    Member

    Joined:
    Apr 6, 2010
    Messages:
    144
    you have to :
    -work at the highest resolution (assets) and average ratio.
    -and play with the GUI.matrix to adapt the GUI rendering to different ratios (crop/letterboxing) and resolutions (scale factor)...
  3. jonlab

    jonlab

    Member

    Joined:
    Apr 6, 2010
    Messages:
    144
    for example :

    Your game is in 3:2 ratio, but you want it to work on iPhone3GS, iPhone4, and web at different resolutions (3:2 resolution).
    Your GUI master resolution is 1024x682 (assets).

    In your OnGUI() calls, just call this function :

    Code (csharp):
    1.  
    2. public static void SetupMatrixFullScreen()
    3. {
    4.     float scalex = (float)Screen.width/1024.0f;
    5.     float scaley = (float)Screen.height/682.0f;
    6.     GUI.matrix = Matrix4x4.Scale(new Vector3(scalex, scaley, 1));
    7. }
    8.  
    This function scales the GUI rendering (but you need to have the same ratio).

    If you need cropping, letterboxing, this is a little bit more complicated, but that works perfectly !
  4. bharatbarde

    bharatbarde

    New Member

    Joined:
    Dec 29, 2011
    Messages:
    13
    Thanks for helping
    I am new in programming but got one thing that i have to use screen dependent values
    Can u tell me have i should use your code in my script
    I made an empty object and attached this script (intro.js) to it
    It contained the code as i mentioned above have only start function

    i am not using OnGUI( ) function in code
    so i don't get how to use it
  5. jsipich

    jsipich

    New Member

    Joined:
    Feb 3, 2012
    Messages:
    87
    I'll add to this question - I don't need an exact answer - just if it can be done is all I need, really...

    I haven't messed around with GUI stuff much - BUT - can I place GUI elements on-screen for a hud using pixels from edge of screen? Like top, left, right and bottom?

    Say I have a health bar - can I make the top left anchor start at 15 pixels from top and 15 pixels from left?

    This way if the resolution changes - the HUD elements will always remain at a set distance from the edges of the screen.

    Again - I don't need to know exactly how to do it - just a "yes" or "no" if it is possible to do. Thanks!
  6. alverndbl

    alverndbl

    New Member

    Joined:
    Jul 11, 2010
    Messages:
    25
    As I understand GUI this happens by default with top-left corner. Since:

    Code (csharp):
    1. // This draws a box of the size of the screen.
    2. function OnGUI() {
    3.      GUI.Box(Rect(0,0,Screen.width,Screen.height),"This is a title");
    4. }
    5.  
    The first 2 components of the Rect being the X and Y of the position.

    For complex anchor maybe you want to use GUI Groups

    Since anything in the group will have the 0,0 position according to that group(the example in the docs shows it)
  7. jonlab

    jonlab

    Member

    Joined:
    Apr 6, 2010
    Messages:
    144
    Yes, absolutely ! (0,0) is top left and (Screen.width,Screen.height) is bottom right !

    @bharatbarde : to use OnGui() and to be able to draw GUI, just add OnGUI() function in your script. Look at the documentation, everything is explained.
  8. jonlab

    jonlab

    Member

    Joined:
    Apr 6, 2010
    Messages:
    144
    Code (csharp):
    1.  
    And my code is C#, so you can't mix it directly in you .js script. But you can :
    -Create a C# script, let's call it "Toolbox.cs".
    -Add my function in it (just as I wrote it above). This function is "static", that means that you don't need to instantiate this class to call this function.
    -Call the function from your .js script, in the beginning of your OnGUI() function body, by calling it like that :

    Code (csharp):
    1.  
    2. Toolbox.SetupMatrixFullScreen();
    3. //draw your GUI stuff ...
    4.  
    5.  
  9. jsipich

    jsipich

    New Member

    Joined:
    Feb 3, 2012
    Messages:
    87
    Isn't that just a percentage of the screen which is default for GUI placement? When going from, say, 1920/1080 to 1024/768 - the GUI elements are placed differently - since the calculation for height/width will be different.

    I'm asking about an exact pixel amount from an edge of the screen - so no matter the resolution - the placement from the edge will be exactly the same... or am I missing something? LOL
  10. jonlab

    jonlab

    Member

    Joined:
    Apr 6, 2010
    Messages:
    144
    If the GUI.matrix is not set or set to identity (by default), coordinates are in pixels.
    so x=25 means 25 pixels from left border.
    x=Screen.width-25 means 25 pixels from right border.
  11. jsipich

    jsipich

    New Member

    Joined:
    Feb 3, 2012
    Messages:
    87
    Bah! My brain has slown to a crawl the past few days, lol.

    I get it now ;)

    I'm just a bit soft with braining things today :p

    Thank you!
  12. bharatbarde

    bharatbarde

    New Member

    Joined:
    Dec 29, 2011
    Messages:
    13
    I make that ToolBox file and called function

    it aligned to the left
    is it due to pixel inset set to (0,0)

    This is my web build

    Attached Files: