Sunday, September 27, 2015

SKScrollView: SKSpriteKit ScrollView for Games Levels

Hey guys how are you doing? Hope you are doing great.

I have a sample project to share. Well, as usual, I wanted to do something and then search around and most of available solution is way too complicated or not to my liking. So I MAKE ONE MYSELF. YAYYYYYYY xD Great way to spend my Sunday evening with a cuppa coffee.

So what I wanted to do is this:

If you haven't already noticed, this is a screenshot from the famous game Cut The Rope. Aww come on you should know this everybody loves OM NOM! Look at him:


Anyway, I wanted to have a scrollview of many worlds and each view has its own number of levels. Most solutions I found basically loads everything (all worlds all levels) into ONE SKScene. Wtf people. Good dev should avoid cramping everything and loading shitload of bytes into one scene. 

So best way to do this is to make a General Scene and loads stuffs based on the world we're currently selecting.

Check out the GIF below (this is what I created and sharing to you all for free :DDDDD)
(Be patient the GIF is 1.1MB.)

There is only one level selector scene file. And the scene calls itself based on which world currently is selected. Total Worlds is defined in the ViewController:

        NSUserDefaults *def = [NSUserDefaults standardUserDefaults];
        [def setInteger:1 forKey:@"World"];
        [def setInteger:3 forKey:@"TotalWorld"];
        [def synchronize];

If you want to have 5 Worlds to the project, please change the "3" to "5". You get the idea right.
The "World" key is the "Current selected world" variable.

Each world details are crafted inside PLISTs files inside the project - World1.plist for first world, World2.plist for second world, and so on. Each world plist has the following format:

You can add other keys and values as you want as long as you don't change the original existing keys and values.

Each World has a background image associated with it (you can also cut a big background into smaller pieces for each world and make a panorama landscape effect) - named World1.jpg, World2.jpg, etc.

Credits to for the background images in this sample project.

Customizable variable:

long levelsPerRow = 3; // CHANGE THIS TO WHAT YOU NEED (eg 5 levels per row etc)

In GameScene.m, inside didMoveToView method, there is levelsPerRow variable that you can customize according to your liking. If you want to have 5 levels button per row, then change this to 5. Remember you need to make smaller level background images if you cramp more levels per row.

To detect button taps, we set the name of playButton to the level number and detect it in touchesBegan.

The rest is self explanatory I think. If you want to ask about anything, please comment. If you like this, share!

No comments:

Post a Comment