Coding responsive Level select GUI

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. }

 

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.