Tutorial 1-1 : The Beat Box

Tutorial 1 : The Beat Box

A multipart tutorial teaching sprites, views, sounds, clicking and more!

Part One, Part Two, Part Three, More to come.

Today, we're going to create one of those little apps where the player taps a few boxes, and then the app plays a tune/rhythm based upon the locations of the highlighted boxes.
If you've played with TonePad on the iPhings, you'll know what we're aiming for.

So, first off, let's draw a set of boxes.
We're going to be neatly cutting our sprites up, in this, so we can go ahead and draw 4 boxes into a single sprites sheet.
We want a grid of 4 (2x2) 16x16 pixel boxes. The first should be off, the second on, and the third and fourth should be "On and playing" at two steps.

OK, here's what we're about to do..

0. Create project.

1. Load spritesheet.

2. Cut spritesheet into array of sprites.

3. Draw sprites onto large Grid image.

4. Draw large Grid image onto screen.

Ready?

0. Create Project

Open XCode

Create new App

View-Based App

Give it a name "Beatbox"

Done.

1. Load Spritesheet

Drag and drop Dots.png into the Resources folder of your app, and in the little dialogue box that pops up, be sure to select "Copy items to destination folder", and click add.

Code time. For reasons that I'm still not 100% sure about, we need to declare each image/view's variable three times. This seems like overkill, but I'm sure there's a perfectly rational explanation for it all.

The first two declarations go into the app's ViewController.h file (In our case, BeatBoxViewController.h)

The .h file contains a few little sections.

First there's the big horrible default remarked gubbins, which contains all the copyright stuff that you'd never have bothered to put there yourself.

Next, an import that imports UIKit.

After that comes a small bracketted :UIViewController { .. } section.

We'll call this part the in-bracket area.

After that there's a blank line before the end.

We'll call this "pre-end" part the under-bracket area.

In-bracket, we need to declare the variable, and what sort of variable it is.

UIImage* img_DotsFull;

That makes sense. img_DotsFull will be the name we'll use. img_ (an image) Dots (name of image) and Full (this is the full spritesheet, not the cut up version)

UIImage is the variable type, it's an image, and it's part of the UI (or .. UI'ish!)

Under-Bracket, we need to give the variable, a few rules.

@property (nonatomic, retain) UIImage* img_DotsFull;

Bit more complex, that one!

We're telling UIImage img_DotsFull, that it's properties are NonAtomic, and Retain.

Retain suggests that it should be held in memory until we release it. Garbage Collection is insanely complex on the iPhings, and tends to randomly start clearing anything up, if we haven't used it within the past half-a-second! So, even though we're told the system to try and retain it, a slight memory issue might start throwing things away anyway!

No matter, for the meantime we'll assume that Retain does actually bother to retain things.. For the most part, it will.

nonatomic is all about Threads. We won't really be dealing with threads, and I've not had any thread based issues, yet, but if things start to go weird, you might want to take some time looking into what this actually does.

I'm ignoring it. Seems ok.. (!)

So, that's your first two declarations done.

#import

@interface BeatBoxViewController : UIViewController {

UIImage* img_DotsFull;

}

@property (nonatomic, retain) UIImage* img_DotsFull;

@end

.h is ready.

Now, hop on over to .m, (BeatBoxViewController.m) and we'll add another declaration!

First, let's define our layout for this script.

Top = Silly remark stuff

Next is your declarations, including an import for the .h file we just tweaked.

We'll need to "Synthesize" anything we setup in the .h file (even though we just imported it!!) before we can use those variables.

We can also use this small area to declare any additional variables we'll be using along the way. Things like Player position, timer ints, random strings, and whatever else we'll be needing.

After the declaration section is a whole pile of commented out functions, that would deal with anything important, if we'd uncomment them.

We'll sort out function stuff in a bit.

First, let's add our third declaration.

Up top, in the declaration area, throw in the line..

@synthesize img_DotsFull;

This takes everything we've already told the system about img_DotsFull, and replicates it's functionality for us, right here, where we'll actually be using it.

Next, head right to the bottom, and you'll see a dealloc function.

This gets called whenever the App is quit, and should be used to free up anything we've used.

Place a simple line in there, to remove our img_DotsFull.

[img_DotsFull dealloc];

That'll clear this one variable, but you'll have to remember to clear out everything else as we go, too. Yikes!

So, now that we've added the variable, let's load something into it.

First off uncomment the "viewDidLoad" function. This is the function that gets called right off the bat, and we'll use this to initialise any variables, load in our graphics and everything else that needs doing before our program's first frame has appeared.

Uncomment the function, and place the following line into it.

img_DotsFull=[UIImage imageNamed:@"Dots.png"];

Nice and easy! The image gets loaded, and placed into the variable.

Next, we need to cut our spritesheet into 4 smaller sprites...