BEHOLD! My very first Dev Diary. As you can tell, things have been moving a little slower than I had hoped. I’m not too worried though, I’ve learned a lot and seeing the game at such an early stage will be great to look back on in a few months. I have two more little bits of news too.

A New Name: Tiny Turrets

As it turns out, a game called “Tiny Defense” just launched on the App Store. They sent me a kind email asking me to rename so I turned to trusty twitter to find “Tiny Turrets”. Terrific! (Seriously, try saying that fast – I now have a speech impediment)

A Coding Time Lapse

This Time Lapse documents me putting together the Gui System. It’s pretty short and not all that interesting, but it does give you a bit of an insight into my work flow. I should note – I actually hid my browser in this time lapse, I spent almost 50% of my time checking the cocos2D forums and stack overflow… not all that fun to watch.

You’ll also notice I’m working full screen in XCode and using “ALT TAB”. It makes a ton of difference to my productivity.

So as you know that I spent the weekend trying to get xcode, objective c and cocos2d to be my bitch.

Most of my time I was working on a solution to implementing scrollviews in cocos2d. Turns out this isn’t as straight forward as I thought, but I found a tutorial over at getsetgames.com which gave me a good place to start. I have to warn you, the code in that tutorial is pretty messy. I’ve cleaned it up a lot below.

The Problem

Cocos 2d has no equivalent to UIScrollView. You can’t even use the regular UIScrollview, since it doesn’t fit into the framework. This leaves you with two possible solutions:

1. Reverse engineer the UIScroll View
   This would take a long time to get right. Apple has put a lot of polish into making the touch interactions perfect. There are a ton of edge cases and the code is not available to copy. Ouch.
2. Implement an invisible UIScrollView
   And use its contentOffset property to position your CCNode. Much better!

The later solution is much cleaner and has a straight forward implementation. Basically it works like this. We subclass UIScrollView, make sure it is invisible, put it on top of Cocos2d so that the user is interacting with it, then take the scroll position and apply it to the stuff in cocos2D each frame. There are a few challenges that we will have a look at, but check out the code I wrote first:

Code: CCScrollView.h

#import "cocos2d.h"
 
@interface CCScrollView : UIScrollView
 
+ (CCScrollView *) makeScrollViewWithWidth:(int)width Height:(int)height;
 
- (void)setWidth:(int)width Height:(int)height;
- (int) getOffset;
- (CGPoint) getOffsetAsPoint;
 
@end

Code: CCScrollView.m

#import "CCScrollView.h"
 
@implementation CCScrollView
 
/*
* Returns a CCScrollView Object.
* You can treat this like a regular UIScrollView, but don't add subviews. Instead
* use the methods getOffset and getOffsetAsPoint to set the Y Position of the
* CCNode you want to scroll each frame
*/
+(CCScrollView *) makeScrollViewWithWidth:(int)width Height:(int)height
{
   CCScrollView * scrollView =
     [[CCScrollView alloc] initWithFrame:[UIScreen mainScreen].applicationFrame];
   scrollView.contentSize = CGSizeMake(width, height);
   scrollView.showsHorizontalScrollIndicator = NO;
   scrollView.showsVerticalScrollIndicator = NO;
   [scrollView setUserInteractionEnabled:TRUE];
   [scrollView setScrollEnabled:TRUE];
 
   [[[CCDirector sharedDirector] openGLView] addSubview:scrollView];
 
   return scrollView;
}
 
/*
* Change the size of the scrollable area
*/
- (void)setWidth:(int)width Height:(int)height
{
   self.contentSize = CGSizeMake(width, height);
}
 
/*
* Returns the offset of the scrollview as a point
*/
- (CGPoint) getOffsetAsPoint
{
   CGPoint offset = [self contentOffset];
   offset = [[CCDirector sharedDirector] convertToGL: offset];
   offset.y *= -1;
   offset.x *= -1;
 
   return offset;
}
 
/*
* Returns the Y co-ordinate of the offset of the ScrollView
*/
- (int) getOffset
{
   CGPoint offset = [self getOffsetAsPoint];
   return offset.y;
}
 
- (void) dealloc
{
   [self removeFromSuperview];
   [super dealloc];
}
 
/*
* Override touch functions
* This allows Cocos2d to process touches
*/
-(void) touchesBegan: (NSSet *) touches withEvent: (UIEvent *) event
{
   if (!self.dragging)
      [[[CCDirector sharedDirector] openGLView] touchesBegan:touches withEvent:event];
 
   [super touchesBegan: touches withEvent: event];
}
 
-(void) touchesEnded: (NSSet *) touches withEvent: (UIEvent *) event
{
   if (!self.dragging)
      [[[CCDirector sharedDirector] openGLView] touchesEnded:touches withEvent:event];
 
   [super touchesEnded: touches withEvent: event];
}
@end

Code: Implementation.m

//
//  Implementation.m
//  TinyDefense
//
//  Created by Sasha MacKinnon on 21/09/11.
//  Copyright 2011 Bit Battalion. All rights reserved.
//
 
#import "Implementation.h"
 
@implementation Implementation
 
+ (CCScene *) scene
{
    CCScene * s = [CCScene node];
    Implementation * l = [Implementation node];
    [s addChild:l];
 
    return s;
}
 
- (id)init
{
    if (self = [super init])
    {
        gameNode = [[CCNode alloc] init];
 
        //add the background to the game
        background = [CCSprite spriteWithFile:@"background.png"];
        background.position = ccp(160, 480);
        [gameNode addChild:background];
        [self addChild: gameNode];
 
        //set up scrolling
        scrollView = [CCScrollView makeScrollViewWithWidth:320 Height:960];
 
        [self schedule:@selector(enterFrame:)];
    }
 
    return self;
}
 
- (void) enterFrame: (ccTime) dt
{
    gameNode.position = ccp(0, [scrollView getOffset]);
}
@end

Setting up the UIScrollView

We want an easy way to create scroll views without having to go through the hassle of manually allocing and setting properties every time w need a new one. The makeScrollViewWithWidth method does just this. It:

• creates the scroll view,
• sets its content size to the arguments
• adds itself to the OpenGLView, so it appears on the screen

+(CCScrollView *) makeScrollViewWithWidth:(int)width Height:(int)height
{
    CCScrollView * scrollView =
       [[CCScrollView alloc] initWithFrame:[UIScreen mainScreen].applicationFrame];
    scrollView.contentSize = CGSizeMake(width, height);
    scrollView.showsHorizontalScrollIndicator = NO;
    scrollView.showsVerticalScrollIndicator = NO;
    [scrollView setUserInteractionEnabled:TRUE];
    [scrollView setScrollEnabled:TRUE];
 
    [[[CCDirector sharedDirector] openGLView] addSubview:scrollView];
 
    return scrollView;
}

The contentOffset Property

Next we need is to be able to access the position of our ScrollView after the user has scrolled. Since CCScrollView is a subclass of UIScrollView, we could access the “contentOffset” property directly, but we need to do a few transformations on that before hand to make it work the way we want. I made getter methods to make life easier:

- (CGPoint) getOffsetAsPoint
{
    CGPoint offset = [self contentOffset];
    offset = [[CCDirector sharedDirector] convertToGL: offset];
    offset.y *= -1;
    offset.x *= -1;
 
    return offset;
}
 
- (int) getOffset
{
    CGPoint offset = [self getOffsetAsPoint];
    return offset.y;
}

Making sure touches are registered by cocos2D

Right now we can have elements scrolling on the screen, but we can’t touch any of them. This is because CCScrollView is sitting on top of cocos2d, so the touches stop being processed before they hit cocos2D. To solve this we override touchBegan and touchEnd, and pass the touches down to cocos2D

-(void) touchesBegan: (NSSet *) touches withEvent: (UIEvent *) event
{
    if (!self.dragging)
        [[[CCDirector sharedDirector] openGLView] touchesBegan:touches withEvent:event];
    [super touchesBegan: touches withEvent: event];
}
 
-(void) touchesEnded: (NSSet *) touches withEvent: (UIEvent *) event
{
    if (!self.dragging)
        [[[CCDirector sharedDirector] openGLView] touchesEnded:touches withEvent:event];
    [super touchesEnded: touches withEvent: event];
}

Fixing the content offset bug

But it STILL won’t work. Cocos2D, for some weird reason, isn’t prepared to deal with the touches we get from UIScrollView. It offsets the touches by a small margin when you scroll down far enough. I found a great solution online, which requires a quick change to CCNode.m

http://stackoverflow.com/questions/2457380/uiscrollview-and-cocos2d

Basically replace these functions in CCNode.m:

- (CGPoint)convertTouchToNodeSpace:(UITouch *)touch {
    // cocos2d 1.0 rc bug when using with additional overlayed views (such as UIScrollView).
    // CGPoint point = [touch locationInView: [touch view]];
    CGPoint point = [touch locationInView: [[CCDirector sharedDirector] openGLView]];
    point = [[CCDirector sharedDirector] convertToGL: point];
    return [self convertToNodeSpace:point];
}
 
- (CGPoint)convertTouchToNodeSpaceAR:(UITouch *)touch {
    // cocos2d 1.0 rc bug when using with additional overlayed views (such as UIScrollView).
    // CGPoint point = [touch locationInView: [touch view]];
    CGPoint point = [touch locationInView: [[CCDirector sharedDirector] openGLView]];
    point = [[CCDirector sharedDirector] convertToGL: point];
    return [self convertToNodeSpaceAR:point];
}

and CCMenu.m

-(CCMenuItem *) itemForTouch: (UITouch *) touch {
    // cocos2d 1.0 rc bug when using with additional overlayed views (such as UIScrollView).
    // CGPoint touchLocation = [touch locationInView: [touch view]];
    CGPoint touchLocation = [touch locationInView: [[CCDirector sharedDirector] openGLView]];
    touchLocation = [[CCDirector sharedDirector] convertToGL: touchLocation];
    ...

And now it’s ready to go!! The code is here in full, so feel free to copy paste these classes.

Fixing it for iOS 5

After all this, it might still not work with iOS 5. Instead of explaining why, I’ll point you to a stack overflow answer that has the solution:

Animation in OpenGL ES view freezes when UIScrollView is dragged on the iPhone

Whats Next

I’ve done a ton of work since I made this video which I’ll post in a few days. Tonight, I’m travelling back to Australia! I’m hoping to get a bit of code written on the plane before my battery dies. Wish me luck!

Lee Lee is still going full pace on the concept art for Tiny Defence. Most recently, did some more refined, more stylised tower sketches. I bullied her into capturing the entire process in a time lapse and man it looks cool!

As someone who has very little artistic talent and quite frankly has no idea how them artsy types do it, it’s exciting seeing the process. Here you can see her work at hyper speed from concept to… well, concept art:

The Science-y New Style

We’ve really hit a sweet spot with style. I’m really pushing to make the towers futuristic, but cartoony. Lots of bright colours, lights, shininess and in general, lost of Science. These are much more like edge world in style, but more Scientific. I’m pretty sure I wrote in capitol letters for half an hour after seeing these. Science.

What Next?

I feel like the style has really been nailed with these drawings. The next step is to see how well we can translate it into the game. Lee Lee’s mission is to get a few monsters and towers boiled down to really, really sexy in-game sprites. Feel free to throw flowers, money, and your underpants at her.

My first Tiny Defense update is ready. Excited?

Lee Lee has been hard at work. Right now her job is not to create sprites, but instead explore different styles, colours and concepts so we can nail down what the final game will look like.

This is an important process and might take a little while! Once we’re done, the next step will be to begin to turn these sprites into game ready sprites – smaller, more stylised and more polished. Before that happens though, feast your eyes upon these:

Monster Concept 1:

This was the first batch of monsters Lee Lee made. As you can tell there is a wide variety of styles and concepts. This is especially important, not just so that we have an idea of what we like, but also we will know what to avoid.

My personal favourites? 1, 8, 10 and 30. Lee Lee loves 31!

Monster Concept 2:

I really drilled Lee Lee with feedback. You should see my emails to this girl, each one is a freaking essay, I feel sorry for her. She really took the feedback to heart, and came back with a second iteration.

My personal favourites here? All of them. But especially 6, 9 and 11.

Towers Concept 1:

This was our first dabble with towers. There is still a way to go before we settle on a style, but we sure are making progress.

My personal favourites are 31 and 32!

Reference Images.

The other important process at this stage is finding references. Games which are similar stylistically, and just down right sexy.

I’ve been digging around the internet a lot to try find great styles that we can emulate. So far I’ve found one game which nails the color and style pretty well – it’s just a bit TOO cartoony. Monster Mayhem for the iOS is definitely worth checking out:

I also love the monsters and style in maple story:

I also loved the stylistic treatment of the towers in Edge World:

Onwards!

So this weekend I’ve started getting lost in Xcode and Cocos2D. I was planning on banging out the core engine, but right now it looks unlikely. I’ve been running into some frightening challenges – I’ll go into detail about my pain points in another blog post soon!

In the mean time, let me know what your favorite monsters are! I’m also always happy to look at new reference games.

So a lot has been happening in my life recently: I launched Mr Runner 2, I moved from Australia to San Francisco, I scored a job working for Zynga and now I’m being kicked out of the country while my visa is being sorted out. Things have been pretty exciting.

But somehow, amidst all this chaos, I have two months of complete freedom. I’m going to use this two months to start work on a new game. But this time, I’m going to do things a little differently.
Here is what will be new:

A New Game: Tiny Defense

Announcing Tiny Defense! Tiny Defense is a tower defense game for the iPhone that happens in real time. You’ll be fighting off monsters for days at a time, wherever you go. As you check back each day you’ll level up and unlock new towers to fight more and more bad ass monsters. You’ll even face off against epic boss monsters!

A New Artist

I’m bring Lee Lee on the team to help me churn this baby out. She’s a cool girl – she’s been working on a web comic for the escapist, Name Game. Now she’s making bad ass games with me.

A New Platform

For the first time I’m developing on the iOS. I’m using the library cocos2d. It has a shitty logo, but its a great product! The API is actually very similar to flash’s display structure. I’ve also got a great friend Joey (he made Cave Dweller) helping me out learning XCode and Objective-C.

A New Development Style

I’m going to be doing Video Dev Logs every few days to show off what I’ve done. I’ll be using Screen Flow, which is a great (but expensive) piece of screen recording software.

I’m also going to be doing a Time Lapse of some of my coding sessions, so you can see the development of the game in action – from start to finish. I’ve found a great piece of software for time lapses – check out Screen Ninja.

Lets do this!

To kick things off, I’m doing a Game jam this weekend with Joey, Sam and Jeremy. Jeremy’s rocking HTML 5, Joey’s working on some IOS stuff, Sam’s drunk right now and playing mine craft. Scratch that, he’s now using an exercise  ball amusingly  incorrectly.

I hope it has some useful perspectives you can take away if you’re looking to get started making money off flash games. If you have any questions just leave a comment!

This is what I’ve done so far, it got me thinking about all the things I haven’t done yet

What is a guy who hasn’t done any of these things doing presenting to people aspiring to do these things?
I’ve got a long way to go.

But I am doing what I love. It’s my job to make games – I don’t have a job on the side, I don’t work for someone else.
And so far, its payed for my university education on the same subject.

Everyone and their mom’s has the greatest game idea
Hard Lesson: Having the best ideas doesn’t make you a talented game designer
Skill: Turning that idea into an experience – it has to be learned.
You won’t get it right the first time. Or the second.
Best way to learn is to practice, the same way an artist or musician has to.

Minimalism if perfect for indies, especially when your starting out – cuts down time, makes up for lack of artistic talent.
Make a kick assed half, not a half assed whole

As an indie it is almost impossible to predict what will make money.

Your best bet is to make something that you’re passionate about. Something that you want to play. That passion will seep into every aspect of your game and chances are it will excite people as much as it has excited you.

As an indie, you’re the only one who will ever see your code. Programatic Perfection is masturbation as long as it works it doesn’t need to look good. Don’t ever rewrite. Ever.

You’re a game designer, not a programmer, concentrate on where your skills are needed the most. The places that people will actually experience.

Never program anything that has been done before. And almost everything has been done before and done better.

There is no reason that your next spare hour shouldn’t be spent making an game. After those 5 slides, you have everything it takes to be churning out your own games. Go!

Use FlashGameLicense.com to sell your flash games with ease!

Since this time I’ve also made:
Mr Runner 2: $19000
Mr Runner 1: $2500

Great set of resources: http://www.pixelprospector.com/indie-resources/

Recognition and respect: the successes of your previous works are presumed in your latest games. People come to respect your brand and the games that you make. It’s almost guaranteed that Mojang’s new game, Scrolls, will take off purely because of the respect generated for the studio by minecraft.

Often you’ll find that your games cross promote themselves. When Chaos Invaders was featured on Rock Paper Shotgun they mentioned Mr Runner 2, and I had a surge of beta testers. Often sites will refer to BitBattalion as “creators of Chaos Invaders and Gnop”. This type of validation works wonders for generating interest and also getting published at all. My latest game “Pathos” wasn’t well received by indiegames.com, but published simply because of BitBattalion’s previous relationship with them.

Your online presence will do work for you. If a sponsor comes across one of your games through your site or an article, they’ll often inquire about secondary sponsorships. All you have to do is negotiate the right price. Almost a quarter of my total income has happened through this alone.

Last but not least, I’ve received multiple of contract offers through my online presence, 2 of which I’m currently working on – there are a great deal of enthusiastic startups and companies that are actively looking for great game developers to work with. Your online presence is your key to their hearts and their wallets.

Contract work pays really well. And once you have built up a successful brand, you’ll have more contract offers than you have time for.

But just because you’re doing contract work doesn’t mean you have to do the worst contract work imaginable. There is a wide variety of contract work available, and if you’ve built up an awesome brand you’ll have the liberty of choosing.

Thanks Guys! Hope you could take something useful away from that!

What are you waiting for? Go play it here! And then, if you would be so kind, rate it five stars on Kongregate

To everyone that has been waiting with baited breath for the last few months – I’m sorry! Hopefully the extra few months that I put into the polish of the game will be worth while. Make sure when you play it you submit to leader boards, and race against all the people on the leaderboards, including me. If you can’t keep up to them, you can also watch their replays to see how they beat the level.

When you finish the game, send me an email! I’d love to hear what you thought. If anyone can get all platinum medals and all the treasure, I will knight them – this game is not easy.

So my adventure developing mr runner 2 has finally come to an end! Thanks to everyone that supported me and beta tested. It’s made a huge difference to me, I really appreciate your help. And thanks so much Zack James who did all the art, and Paul Kopetko, who did the amazing music. I love you guys!

If you’ve been following the beta tests you’ll know that it’s almost upon us. I’ve just finished uploading the game to Flash Game License to find a sponsor, so he’ll be ready to run within a few weeks.

In the mean time – enjoy the trailer above with a juicy remix of the music by Paul Kopetko.

1. Work out the feel of your game

Sounds simple, but its not. Mr Runner isn’t just a platfomer, it’s about conserving speed and momentum. Super Meat Boy is about very precise death-evasion. Knytt stories is about exploring. These are all platformers that have very different feels.
It’s important that you get a feel for your own game. When you work it out, this feel will be the root of all your levels. You’ll keep asking your self, does this level feel the way I want it to? For example, every level in mr runner you can do quickly by conserving momentum.

2. Only design levels that fit that feel

When I opened up Mr Runner 1 to the public, I let them design their own levels. Of these, only a handful were fun. This is because Mr Runner requires a very specific style of controls.

In Mr Runner, the controls are designed to be fun when you jump large distances, conserve momentum, time jumps perfectly, make big wall jumps. They aren’t designed to deal with very precise movements in small areas, stopping and starting, or waiting. The level design had to reflect this. It was never cramped, never required anything to finicky, and instead included large flowing movements that let you keep up your speed.

Put more simply, the game was never difficult because the controls were difficult. At all times, the player should feel as though it’s their fault they died, and this is almost entirely up to level design.

3. Every level has a unique theme

Its no secret that I’m a huge fan of Super Meat Boy, I have A+ the entire game and died more that 22000 times. Part of the reason that I love it so much is that every level is different while maintaining the same feel. Every level has something specific that the player has to do or learn, and no two levels look the same. Each level has a “theme”.

Now take a game like League of Evil, which claims to be the “Super Meat Boy” of the iPhone. I thought it was fun, don’t get me wrong. That being said there are 60 levels and it’s almost impossible to tell them apart. They use the same mechanics in the same way, with slightly different level lay outs – now you have to go Left, not right!

4. Keep it interesting

The player should always feel like they are progressing through the game. One of the biggest mistakes you can make when trying to achieve this, is to throw in a whole lot of levels without introducing any new mechanics.

In Mr Runner 2, I introduce three new mechanics over the 15 levels of each world and in the first world I introduce even more. Players will never have to sit through more than a few levels before they are faced with something that challenges them in a new and interesting way. Typically once a player feels like they’ve experienced all a game has to offer, there is very little incentive to keep playing. If the first level has all they’ll ever see – their patience will wear thin.

5. The WOW factor

There should be at least one bit in every level which makes the player feel awesome. A bit where they literally say outloud “that was cool”, even if no one is around to hear. The bit they want to tell their friends about. The bit they feel like a bad ass for surviving.

Let me give you some examples from Mr Runner: it’s when you first do a slide, when you fall really far and the screen begins to shake with speed, when you’re tossed and miss some spikes by a hairs breadth, when you boost for the first time. If you can’t fit a “wow” moment into every level, at least reward the player every few levels – thats why they’re sticking in there.

6. You are not your players

Don’t assume just because you find / don’t find a level fun, everyone will feel the same way. By the time you finish designing levels, you’ll be so good at the game that you’ll be missing out on an entire section of the learning curve. People’s experience when they first start playing will be very different to your own, so make sure you test it on fresh meat – people who haven’t played it for hours on end. Chances are you’ll need to make your game a shit load easier.

7. Start with a vertical slice

When you sit down to design a level for the first time, you want that level to reflect how the entire game will feel.

Starting at the beginning will force you to design it to be easy, and you’ll have to drop bits which will make it fun later on. Instead, try starting half way through. This will let you design a level which is in total harmony with the feel of your game, and you’ll quickly pick up on what is involved in making this harmony happen. Basically, aim to create a level which summarises why your game is fantastic.

8. Build yourself a comprehensive level editor

Building a level editor can be a chore, but not building one makes designing levels a chore. By making the best level editor you can, you’ll be saving yourself time and pain in the long run. Also, don’t feel afraid to come back and fix it up whenever you need to. After designing my level editor, I decided it needed an undo feature – so I put it in. I also wanted to have it auto save to clip board when i pressed s – so I put it in. These ended up saving me loads of time in the long run.

The latest thing that I’ve been working hard on is Mr Runner himself. I feel like he deserves extra treatment since the game is named after him. The first game didn’t really give him much context or character development. He was just a cute black square thing running through world. It was cute. He’s still a cute black thing running through a world but now, well,

Now he’s even cuter

And has a pet, Sir Scruffs

Here is what he used to look like

Suffices to say Mr Runner won’t be so alone in the second game. You’ll find out why you’re running through a world that is coming to an end.

Animation lessons I Learned

Animating Mr Runner wasn’t just my own doing. I’ve got a great friend who is also conviently a super talented professional animator. There were a few really interesting things that I learned from him when we sat down to animate. Here are the things I learned:

Exaggerate your animation

Firstly, there is almost always room to exaggerate your animation, and it looks great. Here is the same image 5x slower – it looks strange, particularly when he is squashed right into the ground. When its animating fast though, you can hardly see it. In fact, you can see it even less in his in game sprite (which is much smaller). Despite that, the one frame adds ALOT to the quality his animation.

Draw up the key poses first

Make sure he looks good in his key poses, before you worry about how he looks inbetween them. Draw out exactly what your character will look like during the key points in the animation. We drew out, for example, what he would look like with his left hand forward, his left hand back, and while he was squashed towards the ground. From there, putting in the motion is just a matter of fiddling with tweens.

Don’t use eases

Don’t use the flash eases, create “fake” eases by keyframing. This was something that I had trouble wrapping my head around. Once you have put in an ease ease between two keyframes, its almost impossible to add any more keyframe inbetween. Doing so will often make it look the the characters velocity jumps. ugly. Instead, try putting a keyframe in the middle of your two frames, and then move it around. This will create the illusion of easing and still leave you in total control.

Flash is a bitch

So you might have guessed, but working with flash is a bitch. I’m still using classic animation, which might be part of it. Whenever you’re animating something its easy for one change in one frame to end up causing a chain reaction and changing the look of your animation entirely without you knowing. My advice? Save incrementally. Whenever you want to change anything, make a new save.

Over and out