Search Unity

  1. All Pro and Enterprise subscribers: find helpful & inspiring creative, tech, and business know-how in the new Unity Success Hub. Sign in to stay up to date.
    Dismiss Notice
  2. Dismiss Notice

Coding responsive Level select GUI

Discussion in 'Immediate Mode GUI (IMGUI)' started by stardust, Jun 26, 2013.

  1. stardust

    stardust

    Joined:
    Jun 26, 2013
    Posts:
    2
    Hi everyone

    My Android game is in certification phase on the Samsung app store, and I got feedback, that my Level Selecting Screen isn't responsive to the different display resolutions. So I'm struggling how to make that.

    Atm my Screen consists of three arrays, which are overlaid: One that handles the number of columns and levels in a column, one for the level image (solved or unsolved level) and one with a button which displays, how good you were in the solved levels. I thought of following methods to solve the problem:

    • Actually it would be easy to replace the hardcoded numbers for the column placement and size, but the textures would get cropped or distorted afaik (I had a lot of trouble with this at first).
    • This in turn could be fixed by using drawTexture instead of Label, but if I'm not mistaken you have to set the position for drawTexture and this would mess with my placement in the columns/Areas. And I would still need Buttons but those could be made "empty" over two arrays of drawTextures.
    • Or I could place them manually in the editor, but if so, I think there would be problems with the overlay and the changing textures for the "How-good-you-were-images".


    So I couldn't come to a satisfying solution by myself. Do you have any tips for me, how I could/should solve this problem? This is my first real game and I never coded before, so please excuse me if I ask stuff that is some kind of obvious or if my code looks like a complete mess. Also my comments are in german because I had to make notes for myself to understand what i actually coded ^^"

    Code (csharp):
    1. #pragma strict
    2.  
    3.  
    4. // levels
    5. public var levelSceneIndexStart:int = 1; // Welches ist das erste Level im Index, dass ein Spiellevel ist?
    6. private var levelSceneIndexEnd:int; //  Welches ist das letzte Level im Index, dass ein Spiellevel ist?
    7.  
    8. public var levelSelectImgArray:Texture2D[]; // Array mit Texturen für aktive Levels
    9. public var levelSelectGrayImgArray:Texture2D[]; // Array mit Texturen für inaktive Levels
    10. public var highscoreImgArray: Texture2D[];
    11.  
    12. public var backButtonImg:Texture2D; // Textur für Back zum Hauptmenü Button
    13. public var deleteButtonImg: Texture2D;
    14.  
    15. private var numberColumns: int= 5;
    16. private var numberLevelsInColumn: int= 10;
    17.  
    18. var myGUISkin: GUISkin;
    19.  
    20. function Start () {
    21.     levelSceneIndexEnd = levelSceneIndexStart+levelSelectImgArray.Length-1;
    22. }
    23.  
    24. function Update () {
    25.  
    26. }
    27.  
    28. function loadLevel(index:int){
    29.     Application.LoadLevel(index); // Level wird nach mitgegebener Indexnummer geladen
    30. }
    31.  
    32. function showLevelButton(i:int){
    33.     if(getHighestSolvedLevelAsLevelNr()>=i  i<levelSelectImgArray.Length){ //falls die mitgegebene Indexnummer <= das grösste gelöste Level +1 (+1 weil das nächste Level auch gespielt werden darf) in PlayerSettings
    34.         GUILayout.Label(levelSelectImgArray[i]);
    35.     }else if(i<levelSelectImgArray.Length) {
    36.         GUILayout.Label(levelSelectGrayImgArray[i]); // falls die mitgegebene Indexnummer >= das grösste gelöste Level in PlayerSettings: Nur Bild kein Button
    37.     }
    38. }
    39.  
    40. function showScoreButton(i:int) {
    41.     if(getHighestSolvedLevelAsLevelNr()>=i  i<levelSelectImgArray.Length){
    42.         if (GUILayout.Button(highscoreImgArray[getLevelScoreFromPrefs(i+levelSceneIndexStart)])){ // ... wird ein Button erstellt mit Bild aus dem Array
    43.             audio.Play();
    44.             loadLevel(i+levelSceneIndexStart); // Level wird geladen: Indexnummer des ersten Spiellevels + Nummer des Buttons im Array
    45.         }
    46.     }
    47. }
    48.  
    49. function OnGUI(){
    50.  
    51.     GUI.skin= myGUISkin;
    52.  
    53. //  var guiHeight = levelSelectImgArray.Length*100/4+100; // Alle Buttons mit 40 Höhe + 10 Lücke durch zwei (also in der Mitte der Spalte)
    54.    
    55.    
    56.     //–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
    57.    
    58.     for(var i=0; i<numberColumns;i++) {
    59.    
    60.         GUILayout.BeginArea( Rect((40+i*130),120,120,Screen.height-120));
    61.            
    62.             for(var j=0;j<numberLevelsInColumn;j++) {
    63.                 var levelNummerLevel: int = (i*numberLevelsInColumn+j);
    64.  
    65.                 showLevelButton(levelNummerLevel);
    66.                
    67.             }
    68.            
    69.         GUILayout.EndArea();
    70.    
    71.     }
    72.    
    73.     for(var k=0; k<numberColumns;k++) {
    74.    
    75.         GUILayout.BeginArea( Rect((40+k*130),120,120,Screen.height-120));
    76.        
    77.             for(var l=0;l<numberLevelsInColumn;l++) {
    78.                 var levelNummerScore: int = (k*anumberLevelsInColumn+l);
    79.  
    80.                 showScoreButton(levelNummerScore);
    81.             }
    82.        
    83.         GUILayout.EndArea();
    84.    
    85.     }
    86.    
    87.     //–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
    88.    
    89.     // highest level
    90. //  GUI.Label(Rect(10, 10, 200, 40), "highest level in prefs:"+getHighestSolvedLevelAsLevelNr()); // Welches ist das höchste gelöste Level (debug)
    91.  
    92.    
    93.     if (GUI.Button(Rect(10, 10, 100, 100), backButtonImg)){ // Button für zurück ins Hauptmenü, 10 nach Levelbuttons
    94.             audio.Play();
    95.             Application.LoadLevel("startScreen"); // Hauptmenü laden
    96.             //gamelogicScript.SetStatus("game","", j);
    97.         }
    98.        
    99.     if (GUI.Button(Rect(10, Screen.height-110, 100, 100), deleteButtonImg)) {
    100.         audio.Play();
    101.         PlayerPrefs.DeleteAll();
    102.     }
    103.    
    104.     if (GUI.Button(Rect(Screen.width-110, Screen.height-110, 100, 100), " ")) {
    105.         audio.Play();
    106.         PlayerPrefs.SetInt("HighestSolvedLevel", levelSceneIndexEnd);
    107.     }
    108.    
    109. }
    110.  
    111. function getHighestSolvedLevelAsLevelNr():int{
    112.     return PlayerPrefs.GetInt("HighestSolvedLevel"); // Returnt den Index des höchsten gelösten Levels und subtrahiert den Index des ersten Levels
    113. }
    114.  
    115. function getLevelScoreFromPrefs(index:int):int{
    116.     return PlayerPrefs.GetInt("Score"+index); // Returnt die Highscore für die jeweilige Indexnummer
    117. }
     
  2. XGundam05

    XGundam05

    Joined:
    Mar 29, 2012
    Posts:
    473
    You could always pick a resolution to work at for your GUI and then use GUI.Matrix to scale the UI to fit the current resolution. C# Example:

    Code (csharp):
    1.  
    2. float targetWidth = 800;
    3. float targetHeight = 600;
    4.  
    5. Vector3 scaleVector = Vector3.one;
    6. scaleVector.x = Screen.width / targetWidth;
    7. scaleVector.y = Screen.height / targetHeight;
    8.  
    9. GUI.Matrix = Matrix4x4.Scale(scaleVector);
    10.  
     
unityunity