Design of the Game


The course is part of this learning path

Start course

In this course, we're going to create a game for iOS in which you chase a character, and each time you tap him, your score increases. This will challenge you to think about how you would build your own game using your existing knowledge of iOS and then, of course, we're going to code along together to create the game.

Intended Audience

This course is designed for anyone who wants to:

  • Learn about iOS development and coding
  • Move into a career as an iOS developer
  • Master Swift skills


To get the most out of this course, you should have some basic knowledge of iOS.


Hi, within this lecture, we're going to start building our Catch the Kenny game. I hope you managed to build it yourself or I hope you tried at least. So, I'm going to show you my way of doing this. So, I'm going to go for a Single View App. I'm going to name this CatchTheKennyGame. So, this is going to be our game, and I'm going to create this. So, before you start I should tell you that this is not the only way of doing this game. So, I'm going to show you the easiest way. This is not the most efficient way or this is not the optimum way of doing this, but this is the easiest way. So, maybe you came up with a completely different idea that worked and that is perfectly okay. 

So, I'm going to go for my Main.storyboard because we're going to start with the design of this app. So basically, we're going to need a Kenny image and I'm not going to use one image in this app. I'm going to use nine of them. And in order to animate the Kenny, I'm just going to hide them all, make them invisible. And then I'm just going to select one and make that visible. And these invisible and visible images will change in time and we're going to do that randomly. So, you haven't learned how to work with random numbers. But it's fairly easy, it's just one line of code. and I'm going to show you how to do that later on. Don't worry. So, we're going to go for Kenny, and we're going to find an image online, okay. 

So, any image will do, but I'm trying to find something that is not too big so that we're going to use nine of them in our app so that it won't take so much space. So, that will do. I'm going to name this Kenny. And I'm going to go to Assets and then I'm going to drag this into my Assets and put that over there. So, I can reach this if I have an Image View in my Main.storyboard. So, let me create an Image View. Let me go to library over here, and just search for Image View and drag and drop one or here. So, we had to make this a little bit smaller. Because we're going to use nine of them as I said, to let me go to attributes and try to choose Kenny. So, that's good. We can make sure that this will fit three in a row. 

So, let me copy and paste and see if that fits. So, let me copy one more and that's okay. So, we can have a role like this. And then later on I can select three of them, and copy and paste one more time. So, this looks good. This is in line and let me do that one more time. So, we have nine Kennys. So, this is perfect. So, what do we need else? Let me make this a little bit central over here. So, we need our score label. We need our time label. And in here, I'm going to select one of them to show to the user and I'm going to hide the other Kennys so that in real time it will look like the Kenny is animating. So, let me bring this label in, and let me make this a little bit bigger, so that I can display the time, and I can display the score. So, first will be our time. So, it can start with 30. For example, I'm not going to go for 30. I'm just going to go for 10 in our app, because I don't want to wait 30 seconds just to try just to test this app. 

So, let me copy and paste, and make this one a little bit smaller. This time rather than time, I'm going to display our score. So, this is okay. I believe time and score will be sufficient at this point. So, maybe we can just show the number of the time. So, rather than saying time, I believe this way, this will be more catchy. So, this will get the focus of the user when he or she plays the game. So, here I'm going to copy and paste because we need another label. And in this label I'm going to display the high score. So, we're going to have a high score as well. And this will start the highest score that has ever been made by the users that are playing this game. So, let me select this View,  and then give the constraints. So, we set to suggested constraints. And in this kind of game where you have a lot of Views like this, maybe you may want to go with width and height constraints as well, so that it will look the same in different kinds, different sizes. In order to do that, you can come over here, and just select the width and height as well. But right now, I'm not going to deal with the layout so much, because I want to focus on coding side of this game. So, let me play this on iPhone XR. 

If it looks good on iPhone XR, that will be sufficient for me at least at this moment. So, run this on your simulator and see how it looks like on your phone. So, it seems like it's going to take awhile. So, meanwhile, let me open the Assistant Editor on the right hand side. So, we can define this views into our coding section. So, let me choose ViewController for the right hand side, and let me go to Main.storyboard. So, we're going to have to define all of these images and labels. So, simulator didn't even start yet. So, let me start by dragging in this time label. So, this is where we display the time. So, I'm going to call this timeLabel. And again, we cannot see the game yet. I believe it's taking its time to open the simulator. Now we see it. And as you can see it looks fine to me. We can see the total game, we can see the Kennys and everything. So, I'm going to focus on coding side as I said before. So, let me define my scoreLabel over here. And for the last label, I'm going to go for high score. So, this is going to be highScoreLabel. And then later on, I'm going to bring in the images. 

So, there are nine of them and we have to do this one by one. So, I'm just going to name them kenny1, kenny2, kenny3, because we want to make things simple. We're going to work with all of these images. So, I believe we can just call them kenny1, kenny2, kenny3. And again, there are some other ways to make this app with only one Kenny by using animation by using other techniques. But this is the easiest way to go. So, I'm just going to focus on that one for right now. After you complete this whole course, you will be able to do whatever you want with Swift and IOS development. Maybe then you can come back, and have a complete different way to do this on your own. So, kenny8 and then kenny9. So, the last one. So, here we go. We are ready, I believe. So, let me close this. We have already given the constraints so I can go back to my ViewController. So, let me delete all of these spaces in here so we can have a decent look. We're going to have a lot of code, have a lot of variables in this. So, we have to make things in a tidier way. So, let's stop here, and continue within the next lecture.


About the Author
Learning Paths

Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.

Covered Topics