Squramble Developer Blog: The Wonder That Is cocos2d

Today’s Squramble Blog post discusses “The Wonder That Is cocos2d.”

My first Squramble prototype on iPhone was built with the Interface Builder using standard iPhone controls…except for my UIButton “category” extension, that is.  And the UIButton’s were sort of pretty because I adopted a glowy button technique from the ‘net…but I definitely “wanted more.”  Squramble in concept is a fun-enough game, but it could be really great if it had cool graphics.

My initial brainstorming for the “really pretty” Squramble environment included some 3D landscapes through which the camera zoomed (beaches and palm trees!), rendered perhaps using Unity or some other commercial 3D engine.  I thought maybe the player would “play” Squramble on a 3D swinging wooden sign-board that hung from a 3D palm tree arm or somesuch.  But after some thought and research, this seemed a bit much for what is at heart a fairly simple “find the hidden word” game.  I decided that if I could get “some kind” of pretty animation, even 2D animations like fireworks or a moving timer, I would be happy.

The go-to 2D graphics environment for iPhone is Cocos2D.  Cocos2D happens to be free (even for use in commercial apps), approved for use in the App Store, and supported by an active community and tons of very useful online examples.  There is good reason Cocos2D is the go-to framework (because it rocks!), and I am fully satisfied with my choice of it as the graphical basis for my app.

My first experience with Cocos2D was the “simple game” application that Mr. Ray Wenderlich describes on his awesome web site.  This is an excellent “first Cocos app,” and in fact Squramble was called Cocos2DSimpleGame for a very long time, belying its starting point from the generous Mr. Wenderlich.

After changing the sprite that the “player” shoots at the “targets” (in the simple app) to be an actual, real-life, 2D colorful “firework,” I was ready to proceed with my own work.

I planned to start small by creating the “initial sign in” screen, but jazzing it up as much as I could manage with limited Objective C and Cocos2d experience.  During earlier Squramble prototype work, I had created a vector graphics “circular button” that I had intended to use as the backdrop for the puzzle letters.  So I hopped into Corel Paint Shop Pro and used that program’s drawing features to draw a nice, gigantic “PLAY!” button and a few other colorful circle buttons.  (I suggest using a vector graphics application and making every piece of your art gigantic, by the way…like 3000×3000!  This comes in handy for iPad, or iPhone 4 Retina, or whatever comes next.  You can always scale down from there for the real PNG files that you embed in your app.)

Right away, I found that the Cocos2D way of life was much, much easier than the Interface Builder NIB way of life.  You can easily add your own buttons and labels, and put the handlers for those buttons right where you want them.  The memory management aspects of Objective C are really minimized: just add an item such as a CCSprite to a layer, and make sure you [sprite release] in the dealloc routine.  (There’s a little more to it than that, in all honesty…but my point is that you can quickly establish a forward pace through your GUI elements and not necessarily leave a swath of steaming heap creep in your wake.)

Throwing GUI elements on the panel and making handlers for those elements is really, really easy…and it matches the paradigms of several other graphical applications I have made in the past.

With just three evenings work, I was able to make this nice “sign in” screen from scratch, complete with a lazy “blue ribbon firework” passing in the background, and unique “shrinky” buttons:

I was pretty stoked by this very fast progress.  My next step was to cart over my entire MFC prototype code and see if I could get XCode to swallow it.  (Keep in mind that my model and controller portions were entirely portable, and were hooked to a non-portable view via some nice, standardized calls.)  It was critical to ensure early on that I could use my model/controller/view code in iPhone – after all, if it didn’t port, there would be no Squramble game under the graphical hood.

With some elbow grease and luck, I was able to get XCode to eat a full meal of the Squramble model, controller, and view (with the MFC guts #ifdef’ed out).

At this point, the entire application was resident on iPhone…just waiting for the graphical elements to be added to expose them!  This was an awesome, motivating moment!  It was all there…you just couldn’t see it yet!

While I was in a firework frame of mind, I next worked on the “ribbon award panel” that shows up for each ribbon earned during a round.  Cocos2D offers many, many options here; check out the “Particle Test” to see an impressive roundup of what the base library offers.  (You can customize from there, too, with your own colors, bitmaps, speeds of rotation, speeds of particle decay, etc.)

I lucked out with this panel choice as my “second” panel.  Specifically, I had the “comet” streaking in from the upper right of the panel, to land in the upper-left area where I was going to place my blue ribbon graphic.  At the same time, I also experimented with scaling the whole ribbon award window from nothing to its final size.  What was crazy was that, since the “comet” was an element on that up-scaling layer, and that element was added outside the layer, way at the upper right and streaking to its home, the comet itself grew with the layer and took a very, very odd up-and-over curve toward its destination.  It’s fully strange and has (what I think is) a unique and fun look.  Paired with a circular “explosion” and playing a loud audio clip when it hits, I was really amazed.

Admittedly, it’s not rocket science or Half Life…don’t get me wrong.  What I’m saying is that, with very little effort or know-how, I stumbled on something that looked pretty cool and had a fun graphical buzz to it.  From here, with success in my sign-in panel and the strange exploding ribbon award panel, there was no stopping the Squramble motivation train.

Some months later, when I worked on the frustrating “ribbon list panel” that shows your earned ribbons in a finger-scrollable list, I realized just how lucky I was to have started with the sign-in panel and the exploding ribbon award panel.  At the time, Cocos2D didn’t have a finger-scrollable list that I could get to work, so I built the “ribbon list panel” using a standard iPhone UITableViewController.  Integrating this iPhone UI element into my Cocos2D base was a painful, five-day slog (though I like to think the results are okay).

But if I had started with that awful “ribbon list panel”…I don’t know if the third-and-final Squramble prototype would have ever gotten off the ground!

One thought on “Squramble Developer Blog: The Wonder That Is cocos2d”

Leave a Reply

Your email address will not be published. Required fields are marked *