There are two classes of scrolling, "fake" and "real".
Altogether there are four ways to create a scrolling view in Cocos2D: with CCCamera, with CCFollow, manually moving a layer and "faking it".
I’ll discuss each approach and show their advantages and disadvantages as well as point out for which types of games they work best.
The example projects for this article can be downloaded from github.
Fake Scrolling - Creating the Illusion of Movement
Ideal for "endless scrolling" games. Typical genres include jumping or running games like Doodle Jump and Canabalt, as well as shoot’em ups.
These games mainly scroll along one axis, often scrolling only in one direction. The other axis has a limited range or is not scrolled at all. The fake scrolling approach prevents the coordinates of game objects to "explode" to similarly infinite coordinate points. This could introduce rounding errors in floating point values which may accumulate over time, causing inaccuracies at later stages of the game.
To create the illusion of scrolling, at least two background image sprites are needed. Four are needed if you also want to scroll a little along the minor scrolling axis. The background images must be repeating seamlessly, and each must be at least the size of the screen. The trick is to use the two or four images and move them in the opposite direction of where the player is supposedly heading. Continue reading »
I completed KoboldTouch v6.0 today. Time to let you know what changed and what will be coming for v6.1.
KoboldTouch v6.0 - Foundation
This version mostly included changes moving from Kobold2D to KoboldTouch. I had already removed superfluous libraries, so KT now only includes Cocos2D with CocosDenshion and the Cocos2D extensions project, the Kobold2D and KoboldTouch source code obviously and Box2D.
But there’s more of course:
Todays link is one that I came across recently and I believe you’ll find that very helpful. Simon Skinner (@vultuk) wrote a blog post and published the source code for his implementation of a UIScrollView-like page scrolling layer implemented with Cocos2D. It behaves similar to browsing photos in the Photo application, with snapping and bouncing and all that. See this video:
Read Simon’s article on the Debug, Design, Assemble, Play (DK101) blog and grab the source code here: Implementing Page Scrolling in Cocos2D
Add your link to the Cocos2D Linkvent Calendar
Do you have something to share with the Cocos2D community? I haven’t received enough submissions to fill all the days until Xmas, although I do have enough links to post one each day, I’d rather post a link to your website or blog post.
Chapter 11 - Isometric Tilemaps
After Chapter 10 introduced Tiled and working with orthogonal tilemaps it’s time to step things up a notch and delve into isometric tilemaps. It starts with basic principles of isometric tilemaps and editing before going into detail on what’s different code-wise compared to orthogonal tilemaps. Obviously this has to include how to determine which isometric tile was touched and how to move a character across an isometric tilemap.
Summary of working on Chapter 10 - Working with Tilemaps
This chapter introduces you to tilemaps, what they are and what benefits and tradeoffs they provide. Without a doubt the most popular editor for tilemaps for use with cocos2d is the Tiled Map Editor. I explain how to use it over several pages before going into code and actually loading your first tilemap using cocos2d’s CCTMXTiledMap class.
Loading a tilemap is just half the story. You’ll also learn how to manipulate the tilemap layers and individual tiles, as well as scrolling the tilemap and centering the touched tile on screen. The code takes care that the tilemap is never scrolled outside its boundaries.
While working with the Object Layer feature of Tiled (CCTMXObjectGroup in cocos2d) I noticed it’ll be handy to display the rectangles on the screen. So you’ll also learn a little custom drawing using OpenGL ES respectively cocos2d’s wrapper functions in CCDrawPrimitives.
Chapter 8 - Shoot ’em Up
This chapter will finish the shoot ’em up game. There will be enemies and powerups. It raises the issue of good code design when certain things like shooting and moving are common to all objects while other things such as what to shoot and where from and to depend on who is shooting. And then to determine who is hit by whose bullets.
Of course no shoot ’em up game is complete with a boss monster that takes a couple hits to kill. So it’ll need a healthbar. At the end of the chapter this shoot’ em up should be a fully playable game, with Chapter 9 complementing it with visual effects by using the cocos2d particle system. But I’m getting ahead of myself here.
Summary of working on Chapter 7 - Scrolling With Joy
Once again I renamed the chapter a bit since it’s divided into two parts: a parallax, infinitely scrolling background and input via SneakyInput, featuring a fire button and an analog thumbstick respectively at the end changed to a 8-way digital pad.
The parallax scrolling background consists of several bands or stripes which were created on different layers each in Seashore and then saved as individual 480×320 images. They were then added to the Texture Atlas by Zwoptex. The cool thing about this is that Zwoptex preserves the original image’s size while stripping away all transparent parts. So the images take up little space in the Texture Atlas but in game you don’t have to position them individually, you’ll simply place them at the center of the screen.
To achieve the endless scrolling effect two of each image where added side-by-side to each other, with one flipped on the X axis so the images align neatly. Whenever one image has scrolled outside the screen it is moved back to the right side of the screen. At the end I also fixed the vertical flicker lines which can appear due to round-off errors when moving the sprites. And of course they all are drawn with a CCSpriteBatchNode.
The SneakyInput fire button allows continuous shooting and faster shooting when you just tap it, while the thumb stick controls the ship’s movement in both analog and digital (8-way) variants. The Ship class’ setPosition method is overridden to keep the player’s ship within screen boundaries at all times. Finally an extension class gives SneakyInput the same autorelease initializers used by cocos2d, and adds another good example of just how useful Objective-C categories can be.
Chapter 7 - Side-Scrolling Shooter
The shooter game will be controlled with a virtual joystick using SneakyInput. The background parallax scrolling will be implemented not with the CCParallaxLayer, as it does not support endless scrolling (as far as I know, please correct me if I’m wrong). The rest will be gameplay code, mostly spawning enemies, moving them and collision tests.
The chapter will be submitted on Friday, August 13th. Yup, Friday the 13th. Scary.
Summary of working on Chapter 6 - Sprites In-Depth
I decided to rename this chapter to Sprites In-Depth as it deals mostly with Sprites, Sprite Batching (formerly known as Sprite Sheets), Texture Atlases and Zwoptex as well as general texture memory management. All the while laying the foundation for the game to be made in Chapter 7.
While working on this chapter I noticed that it’s awfully complex to create a CCAnimation class, especially if you’re not using a Texture Atlas. So I decided to illustrate how to add helper methods by adding them via a Objective-C Category to the CCAnimation class. Now you can create a CCAnimation with just one line of code, instead of around ten.
Once more I created some of my now famous doodle artworks. If anything this should show that even a programmer can do art. Or, well, at least something that vaguely resembles art.
I was a bit surprised by one thing though, and that is how little the use of the CCSpriteBatchNode contributed to the framerate in this particular case. I added all the bullets to a CCSpriteBatchNode and found only a 15% increase in performance, it went up from 45 fps to a little over 50 with all those bullets flying. I sort of expected a bigger impact from previous experiences.
Chapter 6 - Spritesheets and Zwoptex
In this chapter the focus will be on Spritesheets (Texture Atlas), what they are and when, where and why to use them. Of course a chapter about Spritesheets wouldn’t be complete without introducing the Zwoptex tool. The graphics added in this chapter will then be used for the game created in the following chapter.
The chapter will be submitted on Friday, August 6th.
Anything about Spritesheets you always wanted to know?
Just let me know. I’ll be researching what kind of issues people were and are having regarding Spritesheets. I want to make sure that they are all covered in the book.
Please leave a comment or write me an email.
Summary of working on Chapter 5 - Game Building Blocks
I finally found a better title for the chapter. A big part is about working with Scenes and Layers. A LoadingScene class is implemented to avoid the memory overlap when transitioning between two scenes. Layers are used to modify the game objects seperately from the static UI. I explain how to use targeted touch handlers to handle touch input for each individual layer, either swallowing touches or not.
The issue of whether to subclass CCSprite or not is discussed and an example is given how to create game objects using composition and without subclassing from CCNode and how that changes touch input and scheduling.
At the end the remaining specialized CCNode classes such as CCProgressTimer, CCParallaxNode and the CCRibbon class with the CCMotionStreak are given a treatment.
As you can see from the pictures, I’m also making good progress at becoming a great pixel artist. Only I have a looooooong way ahead of me still. But I admit, the little I know about art and how much less I’ve practiced it, I’m pretty happy about the results and having fun with it. The cool aspect of it is that this should be instructive art. It doesn’t have to be good. So I just go ahead and do it and tend to be positively surprised by the results. I’ll probably touch this subject in the next chapter about Spritesheets: doing your own art. It’s better than nothing, it’s still creative work even if it may be ugly to others, and it’s a lot more satisfying to do everything yourself, even if it takes a bit longer and doesn’t look as good. At least it’s all yours, you’re having fun, and learn something along the way. And you can always find an artist sometime later who will just draw over your existing images or who replaces your fart sound effects with something more appropriate.
Btw, if you’re looking for a decent and free image editing program for the Mac, I’ve been using Seashore for about a year now and I’m pretty happy with it.
This is worth pointing out: paulsondev (who unfortunately has no About page on his blog, hint hint ;)) posted a 90-minute (!) Tutorial about creating a scrolling Tilemap with TMX and cocos2d for iPhone! I haven’t watched it but anyone who is dedicated to make a 90 minute development video deserves attention. And as far as i can tell it’s pretty cool. Plus he uses the same desktop background as i do. 
