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.

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.

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.

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

If you haven’t played the game, the post has spoilers and will ruin it for you so play it here first.

The player has very little control over the character

This is a game design flaw that is hard to overlook. As a player your only role is to interact in subtle and infrequent ways with the boy. It puts you in an environment where you are forced to watch the events in a world play out – there is no skipping, and no catering for people with a short attention span. And the further and further on you get, the less and less control you have. By the very last scene you have to turn out lights to keep him moving. Paul over on IndieGames.com/blog said:

this was remarkably shoddy. It had a really nice visual style, but it was torture to play. “Why do I go on”. Who knows…

But here in is the point. When you realise that you are a predator, your lack of control over the boy is cast in a whole different light. You aren’t playing as the boy, you are simply trying to “force him onwards” (cliff scene). You’re manipulating him and as the game goes on his fear makes him less and less susceptible to this manipulation. Adam on my blog put it perfectly:

“The whole thing was about control, to me. I was constantly fighting the kid for control the whole game—he would stop every so often and I just wanted him to get on with it. And then suddenly at the end, I had all the control…until I didn’t, because I couldn’t let him go. And then I kind of regretted pushing him forward, and chasing him down, but it was too late… I had to keep going.”

You are forced into being “evil”

There is a trend in modern gaming to let you choose how “renegade” your character is – Pathos gives the finger to this trend and forces you, in surprisingly uncomfortable way, to be evil. This is initially indicative of criticism,

“There’s no weight to it, because there’s no choice, except play or don’t. You can’t decide to not follow the rules, as then nothing happens.”

But its not your choice that is important, it is your reaction to your lack of choice. As SpinalJack on Rock Paper Shotgun said:

“Your reaction to the game says something about you. Whether or not that’s something you didn’t already know is a different story.
Imagine the Stanley Milgram’s Obedience Experiment, would you hesitate to electrocute a man to death if told to do so with enough authority?
Whether you felt bad/enjoyed/apathetic about hurting the boy in the game or immediately tried to do the opposite of what you were instructed to do is all part of the game/social experiment.”

Adam says:

“Sometimes art makes you uncomfortable. But sometimes you have to get uncomfortable to see something in a way you haven’t seen before.”

By forcing the player into uncomfortable action, I was asking a question. Why do we take a back seat with video game characters so blindly? Do we play, not because we empathise, but instead in the hopes that we will eventually have “fun”? DustbinK on my blog hit the nail on the head:

“It seems people don’t get that this is a “meta game” – it’s about you forcing yourself onto characters in video games without questioning whether they want you to make them do these things or not.”

Of course, there is always another option. You can always quit before the end – but really, how many people are willing to do that? And why not? Why would anybody want to play as a boy who is suffering? Consumatopia on Rock Paper Shotgun raises an interesting point:

“This game is actually more interesting if you interpret this game as a criticism of the “only way to win is not to play” genre rather than an instance of it. In what sense can we say that “you” are the one pushing events forward when the only other option is to halt the program? Am I also responsible for every death in every movie I’ve watched because I could have stopped the movie from playing?”

And why did I even bother making this a game?

The lack of control, both over the boy and over the direction of the game has definitely been an issues for a lot of people:

“This would have been better off as an animation. The bad design choices just distract from the message he’s trying to make.”

But there is one fundamental reason why it has to be interactive to pull its weight:

“The difference being that YOU’RE the one who is forcing this boy to go on even if you don’t have the option to do something else. It’s the difference between watching a video and pulling the trigger.”

So what DID you learn?

Also, I almost LOL’ed reading the author’s description “you will learn something about yourself”.

Yes, I am pretentious, I admit. But what I meant is that Pathos might just make you think about one of these issues.

As a video game, it is flawed. And it’s certainly not everyones cup of tea. But whether you hated it or loved it, or both, Pathos isn’t about having fun or being “cool”, it’s about making you think, and starting a conversation. Something which it has certainly achieved.

I’d just like to close with a comment from MisterX on IndieGames.com, which I think sums up the experience nicely:

At first I was also a little afraid of what was to come, like the boy. But, then, it becomes apparent that you are in control of him, and that he is actually afraid of *you*, suddenly erasing all suspense and turning it  into empathy for the little guy.

Comments were found here:

• http://www.indiegames.com/blog/2011/02/browser_game_pick_pathos_bit_b.html
• http://www.rockpapershotgun.com/2011/02/20/an-impossible-boy-pathos/
• http://bitbattalion.com/games/pathos/
• http://www.flashgamelicense.com/view_game.php?from=dev&game_id=15621

Pathos is a slow, experimental game about a boy who gets lost in another world and is trying to find his way home. It’s a short experience (about 10 minutes) and by the end of it you’ll have discovered something about the boy, the world and maybe even about yourself. It’s worth playing the whole way through.

Have fun!

Paul Kopetko, who scored the entire game, has done such an awesome job remixing all of the tracks in-game into one epic piece of music. He’s included a whole bunch of new and awesome transitions that will most probably melt your brain. You’ve been warned.