Omegapixel's Controls

The ship in Omegapixel is controlled via a virtual joystick. The touch screen is not well suited to joystick like input and it is hard to get right. Omegapixel was built using cocos2d so we had the option to use SneakyInput, but we opted to roll our own code. 

We've received a number of questions about the input code that we used, so I've decided to publish psuedocode of the implementation:

If you get a chance, give Omegapixel a try and let us know what you think: Omegapixel on the App Store.

Loading SWFs into CCSpriteFrameCache

If I were a betting man, I would bet that Flash is one of the most common asset creation tools for 2d sprite based games. In the past this meant that some poor schmuck would have to export all these nice vector based images out to PNGs. Compared to a SWF file the resulting PNGs take up a huge amount of space. This places restrictions on the quality and quantity of art in iOS games if you want to limbo under that magical bar.

I've been dreaming of loading SVGs or SWFs directly into cocos2d, but I never bit the bullet and built something to do it. Well yesterday dreams came true. I came across a post on the cocos2d forums pointing to a great post by Luke at zinc roe. Using the MonkSWF project by Micah Pearlman, Luke put together a nice cocos2d wrapper called SWFNode which let's you create an animated cocos2d node from a SWF. Each frame in the SWF becomes a frame in the animation. Go read his blog post, download and setup the Xcode 4 workspace he provides, and start playing!

It is important to note that MonkSWF and MonkVG do not support everything that Flash supports, so some files will not load properly.

Not Supported by MonkSWF:

  • Bitmap fills and strokes
  • Gradient fills and strokes
  • Font rendering
  • Morph targets

I also experienced a number of crashes when loading extremely large and complex SWFs. I have not tracked down the source yet.

SWF to CCSprite

Some projects may need to do a bit more than create a looping SWF node. I can think of a number of helpful cocos2d extensions that go beyond SWFNode that have yet to be built. So let's get started!

If you already have a project underway and you want to take advantage of the space savings that SWF provides, then you may need to use SWF frames as sprites. One way to do that is to write the SWF frames to a CCRenderTexture and then save them to CCSpriteFrameCache. Last night I wrote a category to extend CCSpriteFrameCache to do just that:

You simply pass the filename of the SWF resource to this method and it will add each frame to the sprite frame cache. If the filename is 'taco.swf' and it has 50 frames, then 50 CCSpriteFrames will be added to the cache named: "taco_1.png", "taco_2.png", …, "taco_50.png".

Here is the full method:

Improvements

This is just a quick example of what can be done quite easily using cocos2d and MonkSWF. There are likely to a number of performance improvements, bug fixes, etc that can be made on this code. When I begin to integrate it into a real project I will post any improvements I make back here. Please feel free to contribute to, expand, or take the sample above for your own use.

One of the issues with the sample above is that the quality of the sprite generated by writing to CCRenderTexture is lower than if I write directly to the screen. It appears as if partial transparency is not being taken into account when writing to the texture. I will continue to look into it, but if anyone with more experience with CCRenderTexture has any thoughts please let me know.

Example:

Update:

The rendering issue was resolved by utilizing multisampling. In cocos2d multisampling is enabled by default, but it is not applied to CCRenderTexture. I will do a follow up post detailing the changes. For now here are some lovely puppies:

Hey Cocos2d Noob - A Letter To Past Me: Part 2

If you missed it, catch Part 1 here.

Another week has slipped into the past and I've yet to find a Delorean, an FTL spacecraft, a TARDIS, a wrinkle in spacetime, or any other means of time travel. I guess I am back to leaving notes in the now for alternate me's.

While working on a project, I tend to use an old fashion notebook in which I keep ideas, todo lists, discovered gotchas, and other scribbled bits of madness. There is something about crossing an item off a list or working through an idea on paper that I enjoy. Call me old school.

Fortunately for everyone else, this notebook is littered with evidence of my past mistakes and misunderstandings. I took some time to review this catalogue of errors to pull out some of the more helpful pointers for anyone who finds this.

Yet Another Point

CGRect

I covered CGPoints and all the hidden gems in CGPointExtension last time, so I thought it was high time to move on to the second dimension. Really, this is more of an Objective-C slash Apple Library thing than a cocos2d thing, but often both are learned at the same time. Here are a few key helpers, I also suggest you read the docs.

CGRectMake - Construct a rectangle given the x and y of the origin, the width, and the height.

CGRectIntersectsRect - Check if two rectangles intersect.

CGRectContainsPoint - Check if a rectangle contains a point.

Rectangles are great for collision and hitbox checks that are not part of a physics system. Once you start dialing up the complexity or simulating physics you should use something like chipmunk or box2d.

Back to My Point - A few forgotten helpers

In building a game that had a HUD layer and a world layer ("Level") that panned and zoomed, I found myself having to convert coordinates between the two distinct spaces. CCNode provides a few helpers that will save you a ton of conversion math.

My explanations assumes that the HUD and the Level are both children of the game layer (if you are using the cocos2d Hello World example this would be your HelloWorld layer). It also assume that the HUD has a fixed position and is in the same coordinate space as your HelloWorld layer (or HelloWorld layer equivalent).

convertToWorldSpace - Converts a point to world space. This means you can take a point in your panned and zoomed Level and figure out the corresponding point on your HUD.

convertToNodeSpace - Converts a point to node space. You can take a point on the HUD and figure out the corresponding point in the game world. ie [level convertToNodeSpace:targetPosition]

convertTouchToNodeSpace - Converts a touch to node space. This is extremely useful in figuring out where a touch point corresponds to in the Level.

Multitouch

There comes a point in every little games life (well, "every" is hyperbole) where it wants to be touched in two places at once. This usually results in a burst of outrage or a post to the cocos2d forums. Some cocos2d samples start with the single touch delegate enabled, as if rubbing your belly and patting your head at the same time wasn't hard enough. There is actually a good reason for this, it is much easier to handle one touch than a set of them. Anywho… on to the magic:

Inside your scene's registerWithTouchDispatcher you need to add the standard delegate instead of the targeted one. Edit: The cocos2d templates should all have the standard delegate enabled by default rather than the targeted delegate. In that case skip to the other steps.

Replace:

 

[[CCTouchDispatcher sharedDispatcheraddTargetedDelegate:self priority: swallowsTouches:YES]

 

With:

[[CCTouchDispatcher sharedDispatcheraddStandardDelegate:self priority:0];;

If you are currently handling touch begin, moved, and ended events for single touch, then you will have to replace them with the multitouch versions:

ccTouchBegan:withEvent:event becomes ccTouchesBegan:withEvent:event

ccTouchMoved:withEvent:event becomes ccTouchesMoved:withEvent:event

ccTouchEnded:withEvent:event becomes ccTouchesEnded:withEvent:event

Note that the first argument passed to the multitouch version is a set of touches rather than a single touch.

After doing all this work you might get excited that you have your fancy new multitouch code working, only to be disappointed when you realize that it is still only handling a single touch! One last change to make: In your app delegate be sure to enable multitouch. Somewhere after you initialize and set your EAGLView, do this:

[glView setMultipleTouchEnabled:YES];

Caveat: If you are using gesture recognizers then they may be swallowing additional touches. If you have all this code in place, are using gesture recognizers, and your multitouch code isn't getting multiple touches, then the gestures are the likely culprit.

Edit: As Gaminghorror points out you need to clean up your delegates as well to prevent crashes and memory leaks with:

[[CCTouchDispatcher sharedDispatcher] removeDelegate:self];

And if you are looking for other material to learn cocos2d go check you his site: learn-cocos2d.com.

CCParticleSystem & Particle Designer

Rolling my own particle system is one of those bad habits that I have. There comes a point when working with a new framework and/or language that I decide to build a particle system. It is usually a good exercise in building something more complex than a Hello World application. Needless to say, I did this for cocos2d. Also needless to say, it was a lot of fun but did not move the ball forward on actually getting a game built.

Cocos2d comes with a decent particle system, CCParticleSystem. Go read the documentation: http://www.cocos2d-iphone.org/wiki/doku.php/prog_guide:particles Welcome back! In all seriousness, odds are that this will meet all of your needs, it will be updated and maintained by other people, and if you really need to do something magical it is open source.

I blabbered on about the glorious merits of Texture Packer last time so I figured I would pick a new tool this time. Particle Designer, which you read all about at that link up there is an excellent tool. True to my nature, I started rolling my own and then I bought Particle Designer when I realized I had games to build. It doesn't support everything that CCParticleSystem does and there are some minor differences, but they are pretty well documented. I recommend buying Particle Designer after reading the CCParticleSystem docs. The source code for CCParticleSystem is also highly informative.

Protip: Don't be like me, read the docs and learn about the tools available.

Protip 2: Reading other people's source code will learn you good.

Next Time

I am not going to bother pretending I have a plan. I have a near limitless bag of errors for my past self to avoid, I will attempt to dig out the most useful stuff and share it. Worst case scenario, I will try something new, make lots of mistakes, and share those.

Editor's Notes:

  1. I think there is a word I forgot to use in this part of the series.
  2. Next time will likely be a few weeks away. I plan on covering a few other hopefully useful things first.
  3. There has been an underuse of taco references lately, please correct. -ed

Hey Cocos2d Noob - A Letter To Past Me: Part 1

You know those moments where you suddenly realize The Right Way (TM) to do something and you slap yourself on the forehead for wasting untold hours. I've had a number of those while working with cocos2d and I wish I could go back in time and reveal all those little discoveries to past me. Unfortunately, I lack access to a DeLorean or other means of time travel so I will do the best I can and write down my notes here in case any other noobs stumble across it. This will be a multi-part semi-regular series in which, in no particular order, I will reveal the wondrous errors and oversights I made on my journey to cocos2d near-competence.

Points - Do I have one?

It is hard to make a game without dealing with points, coordinates, Euclidean distance, etc. The project I am currently working on is no exception. In the beginning I created CGPoints. I saw that the CGPoints were good, and I did lots of math with them. Unfortunately, I made the mistake of breaking out x and y, typing up some basic math and littering my code with things like the distance formula. After a few instances of this, I decided that I should write up some helper functions as it was likely I would be doing these basic operations a number of times. Not long after starting my own CGPointHelper file, I was reading through some sample code and saw ccpAdd. I quickly scrambled to find the source for it and discovered this: CGPointExtension.h. Mindsplosion!

CGPointExtension is an absolute gold mine that will prevent you from writing a bunch of code that you probably can't live without. I'll go over a few of the star players, but I suggest you read through the entire header file.

ccpAdd, ccpSub - Need to add (or subtract) two points from each other? Then these are your homies.

ccpLength, ccpDistance - Determine the distance between two points. ccpLength is a double whammy giving you either the distance from the origin or the magnitude of the vector.

ccpFuzzyEqual - Are we really close enough? Checks if points are equal within a specified variance.

ccpMidPoint - Let's meet halfway. Gives you the midpoint between two points.

ccpAngle, ccpRotateByAngle, etc - There is a ton of great stuff if you need to work with angles or translate coordinates. Isn't it fantastic that someone has done all this work for you? If you aren't familiar with the underlying math, check out the source for some learnin'!

ccpLengthSq - Great for fast distance or magnitude checks. This is effectively ccpLength without the costly square root operation. Keep this one in your bag to save your FPS.

Texture Packer

While prototyping I eventually needed to animate some sprites. I read the cocos2d docs and ended up using Zwoptex to create my spritesheets because they had an awesome free version. Free has a strong appeal. Zwoptex served me well, but I spent a lot of time maintaining both an sd and an hd version of every spritesheet. I stumbled across Ray Wenderlich's review of Texture Packer and discovered a tool that gave me everything I needed: command line interface, integration with xcode, auto-sd, saving in various pixel format modes. I bought Texture Packer and haven't looked back, the amount of time it has saved me has paid for itself a hundred times over. I'm not going to go over all the details because Ray has already done an excellent job. Read his review and then go buy it now!

Clean Up

Cleaning up after yourself is as important in Objective-C and cocos2d as it is in the rest of life. If you don't you will eventually be crushed under the weight of a wall for trash falling on top of you as you wander the trash filled maze you call a house. Or in our case, you end up leaking a ton of memory and your app crashes.

This isn't meant to be a introduction to memory management or an all inclusive guide. That would be an entire series of blog posts of its own. This is just a short list of things to keep in mind to help clean up after yourself.

  • Use debug logging to verify that you are dealloc-ing what you need to dealloc.
  • Release anything you retain. Children will be released on their own unless you retain them as well.
  • In your scene's onExit call clean up touch handlers. This includes setting isTouchEnabled to NO.
  • If you retain CCActions in a custom CCNode you must release them before the node's dealloc will be called.
  • If you are using chipmunk, clean up your bodies and shapes if you retain them.
  • Because it bears repeating: Release anything you retain.
  • Don't over release or you will cause a crash.
  • You can free up a lot of memory by freeing unused sprite frames and textures:

[[CCSpriteFrameCache sharedSpriteFrameCache] removeUnusedSpriteFrames];

[[CCTextureCache sharedTextureCache] removeUnusedTextures];

If you are using any scene transitions be careful cleaning up sprite frames and textures. You can run into timing issues where you remove sprite frames that were just loaded prior to using them in the new scene. This can cause a crash.

Next Time

In the next installment I will go over other advice to myself that I wrote out in my dev notebook for the project. I may also go into more detail on clean up and memory management.

Editor's notes:

  1. This series will likely bathe in extreme overuse of the word "unfortunately". This is because I unfortunately made a number of unfortunate oversights during the initial learning period and likely continue to do so.
  2. There is at least one super secret hint as to what Taco Graveyard's Top Secret Project is in this post. Unfortunately, no one will ever pickup on it.

Cocos2d Score Label / Ticker

In last week's review of Zombieville USA 2, I pointed out the upticking score label as a nice bit of polish. Today we are going to build one of our own.

My current project uses cocos2d so we are going to extend one of the existing label classes to build our score label. If you aren't familiar with cocos2d, then I suggest you head over to their website and run through some of the beginner tutorials or at least the documentation. Before we start coding let's define what we want.

  • Label that displays a score
  • Can roll from value to another
  • Can roll either up or down
  • Can roll more than once
  • Can target value can be updated mid-roll
  • The displayed string is formatable
  • Customizable alignment and size

We want to be able to setup and start rolling the label like this:

Now let's start by defining our class in the header:

We don't have anything too crazy going on here. We track the current score as a double rather than as an int so we can track fractional updates per interval. The score, format string, and update rate (pointsPerSecond) are all exposed as public properties so users of the class can set their own values. It is important to note that we are retaining formatString, so we will have to release it in our dealloc and if we assign a new value to the formatString property we should release the old value.

We are building off of CCLabelTTF which is one of the labels that cocos2d provides. CCLabelTTF is not nearly as performant as CCLabelAtlas. The cost of setString: in CCLabelTTF is much higher than in CCLabelAtlas. This label was built to be used on a post gameplay scoreboard so performance is not a huge issue. If you need a score label in an area of your game where you are fighting for every FPS, then you may want to build a similar label based on CCLabelAtlas.

Let's take a look at rollToScore: the method you would call to start the score rolling/ticking.

The first thing we do is update the target score to the new target. Next we check if we are currently rolling. If we are then we don't need to do anything because the update_: method will take care of the magic for us. If we aren't updating then we set the update flag and schedule an update. This will cause the update_: method to fire repeatedly after the number of seconds specified by interval_.

The actual updating of the label occurs in... you guessed it update_:.

The first thing we do here is determine which direction we should be rolling in. Remember that one of our requirements was that we could roll the score up or down. There are a number of ways you can accomplish this, but we stuck with the straight forward comparison.

Next we update the score. Note the use of the double for pointChange to match the type of curScore_. Depending on the value you are using for pointsPerSecond you might only update a fractional point per tick and you don't want your score stuck in the mud. We multiple by dt rather than by interval_ because dt will give us the actual time passed rather than the scheduled time.

Then we make sure that we haven't overshot our target score. Alternatively you could use min and max functions here.

Now we are ready to update our displayed string. Straight forward stringWithFormat call here. One of our assumptions is that the format string is looking for an int. We cast curScore_ to an int to match that assumption.

The last thing we need to do is check if we hit our target score and if so stop updating and unschedule future updates.

I hope that all makes sense and this is something that will be useful in your own projects. Click here for all the code at once. Hopefully the rest is fairly self explanatory, but if it isn't please ask questions in the comments. You can download the full sample from the gist.

*Disclaimer: The code presented in this post is far from perfect. Please improve on it.*