OS X games from the ground up: first steps

This is the first in a series of posts about designing and programming games for OS X.

You can see an index of all the posts in this series: go to index.

Part 1

Part 2

This series is called OS X games from the ground up because it assumes you are starting with a desire to create games but no prior knowledge of game design or programming. In this series I will introduce game programming concepts by converting a series of games from the book BASIC Computer Games by David Ahl. If you’d like to find out more about this book, and how to run the games in it – you can read this earlier post. Note though that compiling and running the simulator is an advanced topic and you don’t need it to be able to follow along with these posts. What you will need is a computer that is capable of running the latest versions of OS X (10.9.2 or later), such as a MacBook or iMac.

The first game we will convert is not really a game at all – it’s more of an amusement – but it does have the virtue of being simple. And simple is always a good place to start. The programme is called Buzzword. It generates amusingly pompous, but meaningless, jargon that you can introduce into the conversation around the board room table or dining table to show colleagues, friends and family how extraordinarily erudite you are (sorry – how much you know ;-)). If you want the original source code, you can get it here:BUZZWORD.BAS. Running the original BASIC programme generates something like this:

runBuzzword

Each time you run it, it randomly picks one word each from three lists of words – two lists of adjectives and one list of nouns and then shows the resulting phrase to the user. The user then gets the opportunity to decide whether to see another phrase or exit the programme. When approaching the design of any game, even one this simple, it always pays to map out the steps involved before you begin programming. A useful tool for doing this is a flowchart. In it’s simplest form this shows each step in a box connected with arrows to show the sequence. Decision points are shown with diamonds – you can see one in this simple flowchart for buzzword:

Buzzword flowchart

Having now planned what our programme needs to do, we’re ready to start the fun bit – programming. There are many ways to programme the Mac. For this exercise we are going to use a programming language called C. The C language has been around a lot longer than Macs – over forty years in fact. And while it’s not the easiest language to learn, it’s one of the most successful. And it’s still used today to create many games (and other applications), so getting a good understanding of C will stand you well in your games programming career.

Programmes in C are created initially as plain text files. So all you need to write one is a text editor of some sort. Apple’s TextEdit would do fine, but for this series we’ll use another Apple application that’s specifically for writing programmes. It’s called Xcode and you can download it for free from the App Store. When you’ve downloaded Xcode, start it up. You’ll see a splash screen that looks like this:

Xcode splash screen

Let’s get to work on our project straight away. Select Create a new Xcode project. If for some reason you don’t see the splash screen – or you’ve accidentally clicked past it- don’t panic. Just select the File menu then select New, then Project….

Xcode is designed for creating programmes for lots of different Apple devices – not just Macs and it has a selection of templates for different devices and project types. So first tell it you want to create a programme for the Mac by selecting Application under OS X on the left side of the window. Now you need to tell it what type of project you want to create, so select Command Line Tool from the right side of the window. Don’t worry about what this means for the moment – we’ll come back to this later. Your screen should now look like this:

Xcode select project template

Once it does, click Next. Now Xcode wants us to set some options for our new project. First we want to give it a Product Name. Enter Buzzword here. For Organization Name, use your name. The information in Company Identifier should uniquely identify you from every other developer. If you have your own domain name, put this in reverse, e.g. com.myuniquedomainname. If you don’t have a domain name, just use your full name again. This field is more important to get right if you are planning to distribute an app on the App Store, but for this exercise, anything will do.  The Bundle Identifier is created automatically based on your Company Identifier and Product Name. Again, this is important if you are planning to distribute your app commercially, but you don’t need to be concerned with it now. There are several languages you can use to programme the Mac. We’ve chosen c, but we need to let Xcode know that. Choose C from the Type drop down menu. Your screen should look similar to this, but with your own details in Organization Name and Company Name:

Xcode template options

Once you are happy with what’s on this screen, click Next. Finally Xcode will ask where you want to save the files it will create – choose a location – your documents folder for example. Make sure the Source Control checkbox is unchecked (we’ll explore this feature in a future post):

Xcode save project

When you have selected a location, click Create. Xcode will create a new folder at that location, using your Product Name as the folder name, and will then put some starter files in it. Your screen should now look like this:

Xcode initial project screen

At this point you are probably thinking “woah – that looks a lot more complicated than TextEdit!” Well yes, sorry – the learning curve is a little bit steeper – but I promise you that this investment will be rewarded. And don’t worry – we are going to tackle Xcode one bit at a time.

I mentioned that,when we created our project, Xcode very kindly created some starter files for us. So where are they? You should be able to see the main editor area in the centre of the screen. At present this probably has a lot of scary looking information on it – don’t worry about any of this for the moment. You might also see a narrower area to the left of the main area. This is the Navigator:

Xcode Navigator Pane

If you don’t see this area – don’t worry. It can be made to appear and disappear. Look at the toolbar on the top right and look for this icon:

Navigator icon

If it’s grey, not blue, click it and the Navigator will appear. If the Navigator appears but shows different information to what’s shown in the screenshot above, then find this set of icons towards the top of that pane and select the first one that looks like a folder:

Xcode Navigator icons

Each of those icons is a different type of Navigator. They allow you to navigate through different aspects of the project. The one you use will depend on what task you are working on at any time. At the moment you are looking at the Project Navigator. This shows the files in the project and this is where you’ll spend most of your time while you are writing code. You should be able to see a couple of files here that Xcode has created for you. As you create new files, they will also appear here.

Files here can be arranged into Groups. Groups have a folder icon. This doesn’t necessarily mean those files are in a folder of that name on your hard drive, it’s just a convenient way of grouping them in Xcode. You can show or hide the files within a group by clicking the disclosure triangle next to the group name. Try this now by clicking the disclosure triangle next to the Buzzword group a couple of times. Leave it open when you’re done. In time I will explain what all these files do, but for now the one you are interested in is called main.c. Click this once and it should be displayed in the large central pane, which should like like this, but with your details shown in the copyright notice:

Xcode initial c app

So what is all this stuff that Xcode has already given you? This is actually a fully functional c programme. It’s something of a tradition when learning programming, that your first ever programme displays the message “Hello, World!”.  This tradition was started by Brian Kernighan, who was one of the authors of the first book to describe the C language you’re about to learn.

So I’m sure, having done all that hard work to get to this point, you’d like to see this programme running. Although the programme is written in plain text, and makes a lot of sense to humans (at least it will do, once you have learned a bit more), it’s not so useful for machines in this format. Although there are many different languages that can be used to programme your Mac, it really only understands one. This is called machine code, and it’s a series of numbers that represent the instructions the Mac’s CPU is able to carry out. Programming directly in machine code, which is known as a low-level language, can be done, but it is a very difficult and time consuming process. Instead we use a high-level language, like C, which is easier for us to understand, and then convert this to the equivalent machine code that the Mac can run. With C, we do this using a process called compilation. This process involves another programme, called a compiler, reading all the files and then translating them into the equivalent machine code.

One of the reasons we opted to use Xcode is that, not only does it act as an editor that you can create your programme files, it also runs the compiler for you, along with a host of other useful things you’ll find out about later. Xcode is actually an example of a type of application called an Integrated Development Environment (or IDE). The integrated bit is because they combine all the activities you are likely to want to complete as a developer within one package. Shakespeare might have had Julius Caesar being told to beware the ides of March, but there’s absolutely no need to beware the IDE of Apple – in fact it will make your life a whole lot easier, once you’ve grown comfortable with it. Let’s see an example of that now. To compile and run our programme, simply click the dark grey play button near the top left of the window:

Xcode run button

 

All being well, a new pane should appear at the bottom of the main window showing the message “Hello, World”:

Xcode debug pane

In the next part of this series we’ll start modifying this template to create the Buzzword programme. In the meantime, here’s a couple of exercises for you.

1. Try and change the programme so it displays something other than “Hello, World!”, e.g. your name. Once you have made your change, click the build and run button again (the one that looks like a play button) to see the result. If you see a message that says “Build Failed” instead, this means you have done something to break the programme. Don’t worry – just put everything back as it was (refer back to the screen shot of the original code if you need to) and then try again.

2. Can you work out what the characters \n do at the end of the message? Here’s a hint – try moving them to the beginning of the message (just after the opening quotation mark) or to the middle of the message (e.g. just after the comma) and then build and run and see what happens.

I’ll show you solutions in the next post.

This entry was posted in Games, Programming Tutorials and tagged , , , , , . Bookmark the permalink.

One Response to "OS X games from the ground up: first steps"

Leave a reply