Kobold2D tutorial

Kobold2D is a extended and improved version of the popular Cocos2D game engine. It can be downloaded here.

This tutorial will make a simple parallax scroller. Nothing to fancy, only simple stuff. If you are new to programming you should get familiar with XCode and Objective C before trying to make a game. You can download this tutorial from here.
In this tutorial we will add speed when touching the screen witch will make the objects on screen to move, all clouds are independent from the user speed and are only affected by the wind speed. Factors that will have an impact on the objects speed is the friction of the ground, depth of the object from the user and the accumulated speed. Releasing the screen will stop adding speed and depending on friction and the retardation value the objects will decrease in speed until stopped.

Download and install Kobold2D and then run the Kobold2D Project Starter, choose the Empty-Project template.
For creating sprite sheets I will use Zwoptex.

In MainMenu there is only a sprite (start) and a background object. The sprite has dimming effect for added effects. Touching the start will change the MainMenu scene with the Scroller scene. One good thing to do when changing scenes is to clear textures and/or sprites that is not necessary in order to save memory. In this tutorial I use

[[CCSpriteFrameCache sharedSpriteFrameCache] removeSpriteFrames];
[[CCTextureCache sharedTextureCache] removeAllTextures];

since I only have small spritesheets and I don’t need the previous textures/sprites.

All objects in this tutorial inherits from the EmbeddedObject class, witch has the update method that gets called from the Scroller.m. The update method moves the object from right to left with the speed that the object has. If it is a cloud then the speed is set to the windspeed. Otherwise the depth of the object is multiplied to the speed in order to create the illusion of depth in the parallax scrolling.

- (void) update:(ccTime)dt
{
GLfloat speed = _scrollSpeed;
if (_isAffectedByWind)
speed = _windSpeed;
sprite.position = ccp(sprite.position.x - speed * dt * 1/depthLevel, sprite.position.y);
if (sprite.position.x + sprite.contentSize.width < 0)
{
[self removeAllChildrenWithCleanup:YES];
[self removeFromParentAndCleanup:YES];
}
}

In the Scroller class we run the scroller only when the screen is touched. One thing to remember is that no calculations should be done in the touch (or accelerometer) methods, all calculations should be done in the update method and all rendering should be done in the draw method. For this tutorial I have only made 4 layers of scrolling objects and a static background. Two foregrounds and a background and clouds. For added complexity there can be more layers of clouds and more layers of background objects.

- (void) update:(ccTime)dt
{
if (runScroller)
currentSpeed = currentSpeed + friction * acceleration * dt < maximumSpeed ? currentSpeed + friction * acceleration * dt : maximumSpeed;
else
currentSpeed = currentSpeed - friction * retardation * dt < 0 ? 0 : currentSpeed - friction * retardation * dt;

for(NSUInteger i = 0; i < self.children.count; i++)
{
if ([[self.children objectAtIndex:i] tag] == 1)
{
[[self.children objectAtIndex:i] setScrollSpeed:currentSpeed];
[[self.children objectAtIndex:i] setWindSpeed:windSpeed];
[[self.children objectAtIndex:i] update:dt];
}
}

[self addClouds:dt];
[self addBackground:dt];
[self addForeground:dt];
}

- (void) addClouds:(ccTime)dt
{
generateCloudDistance += windSpeed * dt;
if (generateCloudDistance > 200)
{
generateCloudDistance = 0;
Cloud *cloud = [Cloud node];
cloud.tag = 1;
[self addChild:cloud z:1000];
}
}

- (void) addBackground:(ccTime)dt
{
generateBackgroundDistance += currentSpeed * dt;
if (generateBackgroundDistance > 50)
{
generateBackgroundDistance = 0;
Grass *grass = [Grass node];
[grass setDepth:2];
grass.tag = 1;
[self addChild:grass z:10];
}
}

- (void) addForeground:(ccTime)dt
{
generateForegroundDistance += currentSpeed * dt;
if (generateForegroundDistance > 50)
{
generateForegroundDistance = 0;

if (arc4random() % 2 == 0)
{
Tree *tree = [Tree node];
[tree setDepth:0.25];
tree.tag = 1;
[self addChild:tree z:200];
}
else
{
Stone *stone = [Stone node];
[stone setDepth:0.5];
stone.tag = 1;
[self addChild:stone z:100];
}
}
}

- (void) ccTouchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
runScroller = YES;
}

- (void) ccTouchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
runScroller = NO;
}

In Scroller.m init method the values that affect the scroller are set, change these in order to get a better feel of the code.

With this done, we now have a menu with only a start button and a scroller that scrolls when touching the screen.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: