I have always been mesmerized by video games and have wanted to make games since I started programming. The kind of games that I wanted to make were the kinds that were being produced by big studios with multi-million dollar budgets. So every time I tried to venture into it, I let myself get overwhelmed and discouraged. But the iPhone has made indie game development possible again, and it has once again sparked my interest in game coding.
It’s been a long time since I programmed a game. The last game I created was a Tetris clone that I named after myself called Mintris. It was back in the days when DOS was limited to 64KB of memory, and all the graphics routines were hand written in C and inline assembly. I remember writing directly to the VGA memory to put pixels on the screen. I was really proud of Mintris. It even had music and sound effects. I don’t know if anyone will remember, but there was a computer music format called MODs, and I used that as the background music. Good times! Not too long after that, 3D engines started popping up and it seemed like all the games were first person shooter DOOM clones.
Video games have come such a long way. It has exceeded my wildest imagination. But my fondest memories are of the 8-bit Nintendo days, when, as a young lad, I spent my days arguing with friends about how 16-bit game consoles will change the gaming world. And imagine what a 32-bit gaming console would do! Those 2D NES games were a blast though! And it makes me very happy to see a thriving 2D game market on the iPhone. So I have once again decided to try programming a game. But first, I need to learn the tools. And it seems that Cocos2D is the 2D game engine of choice.
When learning something new, I usually like to start off very simple. All programming books start off with the “Hello World!” program. This is my version of the “Hello World!” program of Cocos2D and sprite animation. All I wanted to achieve was a character moving across the screen. But it wasn’t enough to simply move an image across the screen. I wanted the character to “run” across the screen. That would mean that the character needs a “run” animation and also must be translated across the screen simultaneously.
I searched the interwebs for a public domain sprite and came across these images that kind of resemble Mega Man.
I titled them mega1.png, mega2.png, mega3.png, mega4.png and mega5.png and added them into my project. I am aware of the sprite sheet or the sprite atlas, but I purposely avoided using it for this sample. I will convert this project to use one in the future and write a future post about it.
For this project, all I was interested in was creating the simplest running animation possible, which means no code design. I simply created a new Cocos2D application template and used the template code as it is. When you create a new Cocos2D application project from the template, it will create a HelloWorldScene.m file. Inside that file you will see an init method. This is where I placed all my code.
Setting up the CCSpriteFrames
I am using version 0.99.5 of Cocos2D. The first thing that must be done is to create a series of CCSpriteFrame objects that will be played back as an animation. It turns out that it’s not as straight forward as simply adding a sprite. You will have to create a CCTexture2D object because it is needed to create the CCSpriteFrame object. I do this 4 more times, one for each remaining sprites (mega2.png, mega3.png, mega4.png and mega5.png), and add each CCSpriteFrame into an array. The code below is for the first one (mega1.png).
NSMutableArray *animationFrames = [NSMutableArray arrayWithCapacity:5];
// Repeat block of code below
animationFrames = [NSMutableArray arrayWithCapacity:5];
texture = [[CCTextureCache sharedTextureCache] addImage:@"mega1.png"];
textureSize = [texture contentSize];
textureRect = CGRectMake(0, 0, textureSize.width, textureSize.height);
spriteFrame = [CCSpriteFrame frameWithTexture:texture rect:textureRect];
// Repeat block of code above for mega2,png, mega3.png, mega4.png, mega5.png
Then I add the initial sprite and display it on the screen, at position (10, 50). In Cocos2D, (0, 0) is the lower-left corner of the screen.
CCSprite *mega = [CCSprite spriteWithFile:@"mega1.png"];
mega.position = ccp(10.0f, 50.0f);
[self addChild: mega];
Setting up the CCAnimations and CCActions
The next step is to define the animation and the actions. The running animation is set to repeat forever with CCRepeatForever action (CCRepeatForever is a subclass of CCAction). The second action simply moves Mega Man from (10, 50) to (500, 50) in 2 seconds. Mega Man actually runs past the right edge of the screen, because the iPhone’s resolution is 320×480 (for a non-retina display). By the way, this is in landscape orientation if you are wondering why I used such a huge number like 500.
CCAnimation *animation = [CCAnimation animationWithFrames:animationFrames delay:0.05f];
CCAnimate *animate = [CCAnimate actionWithAnimation:animation];
CCRepeatForever *repeat = [CCRepeatForever actionWithAction:animate];
CCAction *moveAction = [CCMoveBy actionWithDuration:2.0f position:CGPointMake(500.0f,0.0f)];
Running the Animation
Finally, the two actions are run together to create the running across the screen animation.
I still have a long way to go before I can create a full fledged game 🙂 I’ll be posting what I learn for my own reference here so please feel free to check back regularly.
Source Code and Video
Here is the sample code. And here is a ghetto video of the animation:
Mega Man running from Min K on Vimeo.