Creating a level select screen

Omg I wasn’t prepared for how difficult it would be to create a level select screen for my Escape the sector Unity game.

I wanted an Angry Birds type level select screen, and what I mean by that is it will unlock the next level only after you’ve completed the last, and it’ll show 1,2,3 or 0 stars you’ve collected on those levels (that was the hardest part!).

Unlocking levels

I achieved this by using an integer which is the “levelReached” which gets incremented after you unlock a new level, and saved this in Unity’s PlayerPrefs, which saves to memory so if someone closes this game and comes back, it’ll be saved. Nice and easy.

Showing stars collected in each level

So there’s 3 things a player can collect each level, they’re not really stars, they’re yellow cubes, but whatever. I wanted to show how many you’ve got on the level select screen, so that OCD-types can collect them all. In the future maybe I can make collecting all these a way of unlocking a new bonus level, or a new playable spaceship, but right now it’s just a novelty.

There’s different methods I could have used to save the progress. It’s different to the level progress, because this is 2-dimensional data. I’d have to save the level number and then the amount of items collected associated to that level.

As I’m used to doing thing for web, my first instinct is to save this in a relational database way, which isn’t useful to me here in Unity. Then I thought of saving it as a JSON object, which after some investigation, is possible in Unity, but seemed like a ballache. What seemed more of a common solution in Unity is to use XML, but that’s not something I’m too familiar which, and all the documentation I found looked like it’s written in C#, while I’m using JavaScript.

I asked on the Facebook Unity Developers group for advice about what methods others use, and joked that I could do it in this horrible way, creating a separate PlayerPref variable for each level.

And after getting some advice about serialising XML and investigating that, I decided my tiny brain couldn’t cope, so did it this horrible way above instead. This project was dragging on enough already!

So in the end I used this when the level was completed:

//--save the collectables - if it's greater than we had
var savedProgress : int = PlayerPrefs.GetInt("Level"+currentLevel+"StarsCollected");


if( collectablesCollected > savedProgress){
   PlayerPrefs.SetInt("Level"+currentLevel+"StarsCollected",collectablesCollected);
 }

And then on the menu screen, had a separate script attached to each menu button (because I couldn’t find a good way to loop through each one) that loaded the playerprefs, and activated the correct amount of icons. That looks like this:

levelProgress = PlayerPrefs.GetInt(“Level”+levelButtonNum+”StarsCollected”);

if(levelProgress){
   if(levelProgress == 3){
      Star1.SetActive(true);
      Star2.SetActive(true);
      Star3.SetActive(true);
   }else if (levelProgress == 2){
      Star1.SetActive(true);
      Star2.SetActive(true);
   } else if (levelProgress == 1){
      Star1.SetActive(true);
   }
 } 

I feel like this is a bit of a cheat though, and not a scaleable solution. I have to create a new playerprefs variable for each level, which isn’t good if there were 100 levels.