My game is called Polymer. Let me explain why.

According to Wikipedia, “A polymer is a large molecule composed of repeating structural units.” Here is a picture of real polymers:

In the game, the goal is to form strands of connected units. This isn’t a match-3 game though. The units can only be connected in particular ways according to their rotations. Each unit’s rotation is chosen randomly, so you never know exactly what you’re going to be able to make. A molecular polymer’s sub-units “are typically connected by covalent chemical bonds.” In my game, each unit has a dark half-circle on all sides that need to be connected to something else to form a true bond. When a bond is found, the half-circle disappears.

To put it simply, finding matches in my game is a lot like the gameplay in the board game Carcassonne. In Carcassonne, there are many ways to match tiles together, but they only connect in certain locations. By the end of the game, you have a pretty cool looking city with procedurally generated castles, fields, roads, and rivers. I wanted to emulate this gameplay style because I’ve never really seen it done before in a matching game and I’m insanely bored of regular match-3 games.

As I said above, at the end of a game of Carcassonne, you have created a pretty cool looking city. Similarly, Polymer saves your best creation during a game so that you can revel in your molecule-forming abilities, or show off to friends. Plus, you’ll be able to Tweet your creations from within the app. Here are some Polymers I’ve made so far, from fairly simple to crazy complex (obviously, the bigger the Polymer, the more points it’s worth):

Thanks for reading (and special thanks to my wife Dana for coming up with the name)! Expect more soon.

The title screen. The UI button thingies slide to the right to open different scenes and start games. The game type names are all temporary. I’m going to try to think of better ones. The three rows of shapes slide left or right for visual effect.

The endless/survival game mode. Create matches for as long as you want, but you better match the bomb pieces before their time runs out or you’ll lose.

The onslaught game mode. Create matches for points, but don’t be too slow because the board keeps filling up. Sort of like a version of Tetris where the pieces appear in random places instead of always from the top.

Keep in mind that “Myto” is just a temporary name because I thought it sounded kinda cool. It probably won’t be what it’s actually called. It’s basically a bastardized, shortened version of “Mitosis.” I’m still brain storming about names, so let me know if you have other ideas!

The gameplay is like a mix of Bejewled and Trism. You slide rows and columns to try to make matches. But instead of matching colors, you match sides to each other. The goal is to complete a shape without any unmatched sides. The little black half-circles indicate sides that are currently unmatched. By doing this, you end up making crazy shapes and chains.

I’ve been working really hard on making the visual, audio, and gameplay experience as smooth as possible. Even though I’ve never really done much actual design work, I’m trying to make it look really streamlined. I’m constantly opening up Photoshop and making small adjustments to things until they look pretty good.

I didn’t really set out to make a finished app at first, but the more I worked on the game, the more I enjoyed playing it. I’ve been doing a TON of iterative design. It is completely different than it was when I first started. It’s been a really fun experience, and I have also learned a more about programming than I have in a long while. It’s amazing the problems you have to figure out when trying to push through to create a finished product. In the past, when my code got to spaghetti-ish and I couldn’t figure out what I was doing, I would just abandon the project and start again. Every time, my code got better. This time, I’ve really had to be careful so that I can maintain all the separate classes without them getting too confusing or anything, because it just keeps growing and growing.

I still have a lot to do. Some things I still need to add are pop-up score labels for matches, a way to save/load gamestate, GameCenter integration, some sort of animation when you make a match rather then just fading out, actual options (right now there’s nothing really in the Options menu), some more audio/music, In-App Purchase for different types of shapes and game modes to play with, and more. I’m super excited about this and can’t wait to share more!

So there’s an open audition-type thing for the game Gunpoint and I did a tune for it. More info about this audition/contest thingy here.

Please listen on headphones or good speakers. It sounds way better! Also, the sub bass drone can be a bit overpowering on speakers with a good low end, but I boosted it a bit so that people listening on crappy speakers could at least hear it somewhat.

I really just went with my feeling on this. I kept adding a bunch of things that just felt like they should be there. It’s sort of a mix between electronica and spy movie soundtracks. Plus maybe a bit of Pink Floyd’s David Gilmour. This was amazingly fun to do!

Not only does it have all the original music from the game, but it also has unreleased tracks, as well as covers by Satstuma Audio, Disasterpeace, Joe Cavers, Charlie McCarron, Cain German and some1namedjeff. Go get it at www.CardinalQuestMusic.com!

Name Change

Dana’s last name is Tesser and mine is obviously Blackall. Some possibilities we considered:

• Dana changes her last name to Blackall
• I change my last name to Tesser
• We change both of our last names to Tesser-Blackall or Blackall-Tesser
• We make up an entirely new last named based on the letters of both

We ended up going with the last one. That way, we’ll have a name we both love. We won’t have to worry about what name our kid takes (if/when we have one). And it won’t be all clunky like a hyphenated name. We wanted to do this because, well . . . why not? Why does the woman always have to be the one to change? And why not make a sweet new name?

We took four letters from each last name. From TESSER, we took T, E, E, and R. And from BLACKALL, we took B, A, L, and L.

We then rearranged them and combined them into TREBELLA.

Nothing is set in stone yet. We have to actually go through the process of changing it officially, then changing passports, driver’s licenses, etc. That’ll be extremely annoying. But it’ll be worth it. We will now be Whitaker and Dana Trebella!

I have changed my Twitter name to @wtrebella. And I just registered www.TrebellaMusic.com. So keep an eye out, because I’ll eventually be moving over to that domain.

Thanks for reading!

The soundtrack to the upcoming indie game Cobalt is out and I have a remix on it! The music is by Anosou, who’s incredible. The album also features remixes by Chris Geehan, Jimmy Hinson (bigGIANTcircles), Magnus Pålsson (SoulEye), Daniel Rosenfeld (C418), and Steven Velema (surasshu). I’m proud and humbled to be in such good company.

My remix is called Chunkopia. Listen to it below (as well as all the other amazing music on the album). It’s my first actual remix. Usually I do covers but I actually used some of the original audio in this one, which I think makes it a remix. It’s a weird mix of genres. Hope you like it!

The first game I made was Snake.

Snake

Making this game really helped me understand the basics of Actionscript 3 and Flixel. It was surprisingly easy to make! My code got pretty sloppy after awhile though, so I wanted to try making another game, this time keeping clean, documented code.

Play Snake here.

The next game I made was another really common one. All you need to do is avoid the walls. There are three levels of difficulty (either click or press the number on your keyboard to start the game). Sorry, but if you start playing in one difficulty, you have to refresh the page to change the level, because out of laziness, I never built in a “Go Back to Menu” button. Also, sorry, but I made one piece of music that I used for both games, so hopefully you won’t get sick of it.

Racer

Play Racer here.

One of the main reasons I wanted to keep the code clean is because I wanted to open source the game. I tried to document every major thing in the code so it would be easily understandable. I’m sure there are still many things I could have done better, as I am definitely still learning, but anyone is free to download it and muck around with it. Download the full source folder here.

Whenever I listen to other people’s music, I always wonder how the hell they made it. Of course, I can try to break a track down by ear, but I’d love to get an inside look. So that’s what I’m giving you! I have isolated an eight measure section of the Velocispider theme that I am going to take you through track by track. Before we start, listen to the eight bar section as a whole:

The Bass Synths

I have two bass synths in this song. They were both made from scratch using Logic’s ES2 synth (as you’ll soon see, I use it all the time). I have a setting for the ES2 I made called “Basic” that cuts everything away and lets me start with a basic saw wave. From there, I start adding modulations, adjusting the ADSR envelope, setting the cutoff frequency and a bunch of other stuff. Here’s the first bass synth I came up with:

I liked it but thought it could use some extra, grittier high end. While I could probably add some of this to the first synth, sometimes I like to make two separate ones so I can adjust them individually and give it a fuller sound. Here’s the second bass, playing the exact same part:

When I put the bass parts together, I really liked the way they sounded:

The Chords

On top of the bass part, I wanted to add some harmonic and rhythmic direction. To do this, I added a very simple chord part using another ES2 synth I created. The part is playing the exact same chord the whole time so it gives the song harmonic support while bringing some more energy to the plate:

Side Chained Synth Pad

One of the things that gives this song its character is the pulsating, washy synth pad in the background. The synth pad is actually a preset ES2 setting that comes with Logic called Design Pad (with a few slight tweaks). Here’s the sound of the synth pad playing the chord throughout the section:

Pretty cool sounding synth, but where’s the rhythmic pulsing? I created that using a technique called side chaining. Wikipedia explains it better than I could: “When side-chaining, the compressor uses the volume level of an input signal to determine how strongly the compressor will reduce the gain on its output signal.” Basically, when the input signal occurs, the compressor turns on. In this case, I wanted the synth pad to be compressed (decrease in volume) every beat, so I first needed to create the input signal. While the input signal really could have been anything, I like to use a kick drum because it is clear, short, and not noisy. Besides, the kick drum is very often used as a side chain signal in a lot of music. Here is the synth pad, this time with compression side chained to the kick drum:

As you can see, the volume of the synth pad gets quieter every time the kick drum plays, giving it a pulsating, sucking sound. I didn’t want to turn the Velocispider theme into a dance track though, so I muted the kick drum, leaving just the pulsating synth:

The Drums

All we have left are the drums. I used three different preset Ultrabeat drum kits that come with Logic. The first kit I used is called “Hip Hop Heavy Kit.” I used this kit to establish the main drum beat and ground it rhythmically:

On top of that, I added the “Downtempo Kit 02″, primarily for its electronic snares:

The last drum kit I added was “IDM Elements 02.” Out of the three drum kits, I think this is the one that gives the theme the most character. It sounds pretty random alone, but when coupled with the rest of the drums, really stands out. Here it is alone:

And here is the full drum section, all three kits on top of each other:

The Slide

The last thing in this section is the pulsating, sliding synth that starts it off, then rises in pitch throughout it. I created this synth using the ES2 as well, using two oscillators (sound waves) that were a perfect fifth apart. I also gave the synth the ability to bend 36 steps up or down, which equates to a huge six octave range. This allowed me to bend the hell out of the synth, reaching a ton of pitches, all while using just one MIDI note. The synth starts with a quick downward bend to bring in the section, then rises for the rest of the time. The pulsating is just a simple frequency cutoff modulation that is synced to a 1/16th note rhythm. Here’s the sliding synth:

Conclusion

Those tracks are literally all there is in that section of the song. I’m not hiding anything from you. Here’s the full thing one more time, so you lazy people don’t have to scroll back up to the top:

GameConfig.h Defines

#define ROWS_NUM 8           // Number of rows of music pads in the interface
#define COLUMNS_NUM 6     // Number of columns of music pads in the interface
#define PADDING 10             // Amount of extra pixels on each side of every music pad
#define BEAT_TIME 0.125      // The length (in seconds) of each beat

MusicInterface’s Interface

#import <Foundation/Foundation.h>
#import "cocos2d.h"

@class MusicPad;

@interface MusicInterface : CCLayer {
    NSMutableArray *musicPadArray;
    MusicPad *currentPad;
    bool isPlaying;
    int musicPadSideLength;
    int boardWidth;
    int boardHeight;
    int beatNum;
    float timeSinceLastBeat;
}

@property int musicPadSideLength, boardWidth, boardHeight;

+ (id) musicInterface;
- (MusicPad *) getPadForTouch:(UITouch *)touch;
- (BOOL) checkIndexBounds:(CGPoint)index;
- (void) play;

@end

MusicInterface’s Instance Variables and Properties

musicPadArray is going to be a multidimensional array where we will keep all of the individual pads. currentPad is the music pad that the user has most recently touched (or is currently touching). isPlaying is so we know if the music loop is actually playing or not. musicPadSideLength is the length of each music pad’s side. I made this an instance variable instead of a define so that I could change the size of the image without breaking the code. boardWidth and boardHeight are the dimensions of the entire interface of music pads. beatNum is the current beat the song is on. Finally, timeSinceLastBeat is, quite obviously, the amount of time since the last beat occurred. I make musicPadSideLength, boardWidth, and boardHeight properties so we can use them later to position the interface within the full window.

MusicInterface’s Implementation (Code/Method File)

#import "MusicInterface.h"
#import "GameConfig.h"
#import "MusicPad.h"

@implementation MusicInterface

@synthesize musicPadSideLength, boardWidth, boardHeight;

Take care of the basics first.

MusicInterface Method: + (id) musicInterface

+ (id) musicInterface {
    return [[[MusicInterface alloc] init] autorelease];
}

This is another convenience method that returns an autoreleased musicInterface when you call [MusicInterface musicInterface].

MusicInterface Method: – (id) init

I’m going to split this method into chunks, because it’s pretty long (that’s what . . . she said . . .?).

- (id) init {
    if ((self = [super init])) {
        musicPadArray = [[NSMutableArray arrayWithCapacity:ROWS_NUM] retain];
        musicPadSideLength = 0;
        timeSinceLastBeat = BEAT_TIME;
        beatNum = 0;
        isPlaying = FALSE;
        currentPad = nil;

I initialize musicPadArray with the capacity of ROWS_NUM because I want it to be an array that contains a certain number of rows, which in turn contain a certain number of music pads (COLUMNS_NUM). The only other important piece of this part is when I set timeSinceLastBeat equal to BEAT_TIME. I do this because I don’t want there to be a delay between pressing the play button and starting the music. This way, it will start immediately (more on this later).

        // init method continued
        for (int i = 0; i < ROWS_NUM; i++) {
            NSMutableArray *musicPadRow = [NSMutableArray arrayWithCapacity:COLUMNS_NUM];
            for (int j = 0; j < COLUMNS_NUM; j++) {
                MusicPad *newMusicPad = [MusicPad musicPadWithIndexX:j andIndexY:i]
                if (musicPadSideLength == 0) {
                    musicPadSideLength = newMusicPad.contentSize.width;
                }
                newMusicPad.position = ccp(PADDING + (musicPadSideLength + PADDING) * j + musicPadSideLength / 2, PADDING + (musicPadSideLength + PADDING) * i + musicPadSideLength / 2);
                [newMusicPad setAudioFile:j];
                [musicPadRow insertObject:newMusicPad atIndex:j];
                [self addChild:newMusicPad];
            }
            [musicPadArray insertObject:musicPadRow atIndex:i];
        }

This section is where I create the actual rows that contain the individual music pads. I take the following steps for as many rows as ROWS_NUM specifies. I create musicPadRow, which is the NSMutableArray that will contain the music pads. Then, for as many columns as COLUMNS_NUM specifies, I create a new music pad. For each music pad, I first set its indices equal to where it is located within the multidimensional array, for easy access later. Then I set the musicPadSideLength equal to the width of the music pad image (I just use the width because they are exact squares). I have included “if (musicPadSideLength == 0)” because I only need to set the side length the first time (because I’m using the same image for every music pad).

Setting the position of each music pad is the trickiest part of this method. I want them to be spaced evenly throughout the layer with an easily adjustable distance between each (PADDING). To clarify, “PADDING” is the space between each music pad. I’ll break this down: “ccp” is just a Cocos2d convenience macro for CGPointMake. I set the x position equal to “PADDING + (musicPadSideLength + PADDING) * j + musicPadSideLength / 2″. There is padding at the beginning so there is a blank space between the first pad and the edge of the screen. “(musicPadSideLength + PADDING) * j” is going to change for each pad, because “j” is equal to whichever pad number we’re on in the row. “musicPadSideLength / 2″ is added at the end because CCSprites have an anchor point by default in their center. We need to shift them to the right by half their width so they are positioned correctly. The y position is set to “PADDING + (musicPadSideLength + PADDING) * i + musicPadSideLength / 2)”, which is almost exactly the same as the x position (except “i” is used instead of “j” for row number).

Still with me? Good. Once the position is set, we set the audio file for the pad depending on which column it’s in (“j”). We then add the finished music pad to musicPadRow for later access. Then, we add the music pad to the layer as a child (so we can see it and interact with it). Finally, after each row is done, we add its musicPadRow to the overall musicPadArray at its row index (“i”).

    // init method continued
        boardWidth = (musicPadSideLength + PADDING) * COLUMNS_NUM + PADDING;
        boardHeight = (musicPadSideLength + PADDING) * ROWS_NUM + PADDING;

        self.isTouchEnabled = YES;
        [[CCTouchDispatcher sharedDispatcher] addTargetedDelegate:self priority:0 swallowsTouches:YES];
    }
    return self;
}

The last thing we do in the init method (we’re still on the init method? Wow) is store the board’s width and height, enable the layer for touches, and add the layer to the touch dispatcher as a targeted delegate (if you don’t know what this is, research. I’m definitely not the best person to explain it to you.)

MusicInterface Method: – (BOOL) checkIndexBounds:(CGPoint)index

- (BOOL) checkIndexBounds:(CGPoint)index {
    if (index.x < 0 || index.x >= COLUMNS_NUM || index.y < 0 || index.y >= ROWS_NUM) {
        return NO;
    }
    else {
        return YES;
    }
}

This method does a quick check to see if a music pad exists at a certain index point. If either the x or y are too low or high, the function returns NO. If the x and y are in the bounds of our interface, the function returns YES (which means a pad exists at that index point).

MusicInterface Method: – (MusicPad *) getPadForTouch:(UITouch *)touch

- (MusicPad *) getPadForTouch:(UITouch *)touch {
    CGPoint touchLocation = [self convertTouchToNodeSpace:touch];
    int touchIndexX = ((int)touchLocation.x - (int)touchLocation.x % (musicPadSideLength + PADDING)) / (musicPadSideLength + PADDING);
    int touchIndexY = ((int)touchLocation.y - (int)touchLocation.y % (musicPadSideLength + PADDING)) / (musicPadSideLength + PADDING);

    if ([self checkIndexBounds:ccp(touchIndexX, touchIndexY)]) {
        MusicPad *currentMusicPad = [[musicPadArray objectAtIndex:touchIndexY] objectAtIndex:touchIndexX];
        if (CGRectContainsPoint(currentMusicPad.boundingBox, touchLocation)) {
            return currentMusicPad;
        }
        else {
            return nil;
        }
    }
    else {
        return nil;
    }
}

This is a very important method. When the user taps a spot on the screen, this is the method that tells us which pad (if any) they touched. The first thing we do is convert the touch to the layer’s node space. This way, we can move the layer around in the overall window as much as we want and the touch will still be relative to this layer. We then need to convert the x and y points from pixels to indices. “(int)touchLocation.x – (int)touchLocation.x % (musicPadSideLength + PADDING)” subtracts any excess space the user touched inside the pad (for example, if they touched the pad at 47 pixels, this part will subtract the 7, leaving 40, which is exactly where the pad starts.) We then divide this by “(musicPadSideLength + PADDING)” to figure out which pad in the row the user touched. We then do the same thing with the y point.

Next, we check the bounds. If the index point ends up being (-2, 13), for example, because the user touched somewhere outside of the interface, the function returns nil. If the index points to an actual pad (e.g. (1, 4)), the function then tests if the touch was actually inside the pad itself and not the padding between pads (wow, the wording in this thing is just getting more and more confusing isn’t it).

MusicInterface Method: – (BOOL) ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event

- (BOOL) ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event {
    MusicPad *currentMusicPad = [self getPadForTouch:touch];
    currentPad = currentMusicPad;
    [currentPad changeState];
    return YES;
}

This is the method that the layer needs to properly become a targeted touch delegate. All it does is find the pad the user touched, set it to the current pad, and change its state (on or off).

MusicInterface Method: – (void) ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event

- (void) ccTouchMoved:(UITouch *)touch withEvent:(UIEvent *)event {
    MusicPad *currentMusicPad = [self getPadForTouch:touch];
    if (currentPad != currentMusicPad) {
        currentPad = currentMusicPad;
        [currentPad changeState];
    }
}

This method is almost exactly the same as ccTouchBegan, with one major difference: “if (currentPad != currentMusicPad)”. Without this, the pad will switch states every time the user’s fingers is sensed to be on the pad and moving. If you drag your finger across a pad, it will turn on and off very rapidly over and over. This addition just tells it not to switch the state of the pad unless it is a new one.

MusicInterface Method: – (void) ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event

- (void) ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event {
    currentPad = nil;
}

When the user lifts the touch, there is no longer a “currentPad” so we set it to nil.

MusicInterface Method: – (void) update:(ccTime)delta

- (void) update:(ccTime)delta {
    timeSinceLastBeat += delta;

    if (timeSinceLastBeat >= BEAT_TIME) {
        timeSinceLastBeat = 0;
        for (int i = 0; i < COLUMNS_NUM; i++) {
            MusicPad *currentMusicPad = [[musicPadArray objectAtIndex:beatNum] objectAtIndex:i];
            [currentMusicPad play];
        }
        beatNum--;
        if (beatNum < 0) {
            beatNum = 7;
        }
    }
}

The base class of every Cocos2d object (CCNode) has this update method. When [self scheduleUpdate] is called, this update method is then called as often as possible (multiple times per second). Every time the update is called, we add the delta time (the time difference between update calls) to the timeSinceLastBeat. If timeSinceLastBeat has elapsed the length of time a beat takes (in this case, one second), it finds the next row of music pads and plays each of their sounds. After playing, it subtracts one from the beat number. If beatNum goes below zero, it means it has reached the end of the interface and needs to start over. It seems a little bit strange that the beat starts at 7 and goes down to 0 instead of the other way around. I did this because of the way I placed the pads in the interface: 7 is the top row of pads, and 0 is the bottom.

MusicInterface Method: – (void) play

- (void) play {
    if (isPlaying) {
        isPlaying = NO;
        timeSinceLastBeat = 1.0;
        [self unscheduleUpdate];
    else {
        isPlaying = YES;
        beatNum = 7;
        [self scheduleUpdate];
    }
}

This is the method that the play button is going to call to start and stop the song. If the song is playing, this method stops it, resets the time and unschedules the update. If it is not playing, it starts it, resets the beat number and schedules the update (make sure never to schedule and update that is already scheduled – it will throw an exception).

MusicInterface Method: – (void) dealloc

- (void) dealloc {
    [musicPadArray release];

    [super dealloc];
}

@end

The only thing we need to release in this object is the musicPadArray. Everything else will be released automatically.

We are now done with the music interface! All we have to do now is center the interface in the overall window and give the user a button they can tap to start and stop the music. Next up is the MusicLayer class.

MusicLayer’s Interface

#import <Foundation/Foundation.h>
#import "cocos2d.h"

@class MusicInterface;

@interface MusicLayer : CCLayer {
    MusicInterface *musicInterface;
}

+ (id) scene;

@end

The MusicLayer class is what the AppDelegate is actually going to run. We are going to use it to place the interface in the overall window and give the user the button to press. The only method we need is the convenience method called scene. The only instance variable we need is the musicInterface.

MusicLayer’s Implementation (Code/Method File)

#import "MusicLayer.h"
#import "MusicInterface.h"
#import "SimpleAudioEngine.h"

@implementation MusicLayer

Some basic importing.

MusicLayer Method: + (id) scene

+ (id) scene {
    CCScene *scene = [CCScene node];
    MusicLayer *musicLayer = [MusicLayer node];
    [scene addChild:musicLayer];
    return scene;
}

This is the normal format of a Cocos2d scene method. This is the method that the AppDelegate uses to run the app.

MusicLayer Method: – (id) init

- (id) init {
    if ((self = [super init])) {
        CCLayerColor *background = [CCLayerColor layerWithColor:ccc4(30, 30, 30, 255)];
        [self addChild:background];

        for (int i = 0; i < 6; i++) {
            NSString *audioFileName = [NSString stringWithFormat:@"%i.mp3"];
            [[SimpleAudioEngine sharedEngine] preloadEffect:audioFileName];
        }
        CGSize winSize = [[CCDirector sharedDirector] winSize];
        musicInterface = [MusicInterface musicInterface];
        musicInterface.position = ccp((winSize.width - musicInterface.boardWidth) / 2, (winSize.height - musicInterface.boardHeight) / 2 + 25);
        [self addChild:musicInterface];

        CCMenuItemImage *buttonItem = [CCMenuItemImage itemFromNormalImage:@"button.png" selectedImage:nil target:musicInterface selector:@selector(play)];
        CCMenu *buttonMenu = [CCMenu menuWithItems:buttonItem, nil];
        buttonMenu.position = ccp(winSize.width / 2, 35);
        [self addChild:buttonMenu];
    }
    return self;
}

@end

The first thing I do in the init method is to add a layer of color in the background so it’s not just pure black. Next, I preload all of the sound effects so there is no delay when the song first plays. The next important line is where we set the musicInterface’s position. The interface layer is a subclass of CCLayer, whose anchor point is located in the bottom left. Since I want to center the layer in the middle of the window, this takes a bit of maneuvering. “(winSize.width – musicInterface.boardWidth) / 2″ sets its x position to the middle. “(winSize.height – musicInterface.boardHeight) / 2″ sets its y position to the middle. I wanted the interface to be a bit higher so I hard coded an extra “25″ into the y position. The last thing we do is create the play button. It’s pretty simple: I create the menu item with the musicInterface’s “play” method as its selector, then create a menu using this button, which I then place at the bottom center of the window.

The very last thing you have to do to run the app is to tell the AppDelegate to run the MusicLayer class. At the beginning of the AppDelegate class, add “#import “MusicLayer.h”. Then find the line: “[[CCDirector sharedDirector] runWithScene: [HelloWorldLayer scene]];” and replace “HelloWorldLayer” with “MusicLayer”.

THAT’S. IT. Here is the full source code, along with all the sound effects and images.

As a reward for you getting through the whole thing, here is a picture of me looking through an angry basket: