1. Scale9Grid for Cocos2D

    I’ve spent the latest 10 days working on a iOS/Cocos2D popups engine for my games. As Paul Legato wrote on his blog, ❝custom dialog boxes are a must for any game❞, displaying system popups in a game can interrupt the gameplay experience.

    I wanted a popup that can adapt its size to every kind of content. That’s where you need a Scale9Grid component. Scale9Grid was popularized by Flash and ActionScript 3. It’s a way to scale an image while preserving the corners proportions. Only the borders and the center of the sprite are scaled. Scale9Grid explanations and illustration on this page.

    Scale9Grid is also provided by Apple in UIKit UIImage method - (UIImage *) stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight.
    Example of Scale9Grid with UIImage:

    UIImageView *theImageView=[[UIImageView alloc] initWithImage:[[UIImage imageNamed:@"backpanel.png"] stretchableImageWithLeftCapWidth:32 topCapHeight:32]];
    theImageView.frame = CGRectMake(0,0,400,300);


    UPDATE [01/12/2012] Also provided natively by Android with 9-Patch (Nine-Patch), a simple guide to 9-Patch.

    I was surprised not to find a Scale9Grid implementation for Cocos2D, as the community is quite active. This is fixed now, here is a CCSpriteScale9 class for Cocos2D that implements Scale9Grid.

    How you use it?
    CCSpriteScale9 *bg=[CCSpriteScale9 spriteWithFile:@"backpanel.png" andLeftCapWidth:32 andTopCapHeight:32];
    [bg setColor:ccc3(255,0,0)];
    [bg adaptiveScale9:CGSizeMake(400,300)];
    [self addChild:bg];


    Scale9Grid can be used for many more than popups backgrounds.
    You can see here screenshots of CCSpriteScale9 in action in my games. It’s used for popups, buttons, progress bars, input fields
    Next, I’ll post a CCPorgressBar class using the CCSpriteScale9 component. Stay tuned and follow me on twitter (@jpsarda) to be notified first.

    Improvement idea. CCSpriteScale9 only preserves the corners proportions. That means the center of the sprite is usually made of a uniform color (or gradient). An alternative to scaling, would be to repeat the inside texture. That would constraint the size of the sprite to a multiple of the inside size, but that would allow every kind of pattern.

    Here is the code.It’s based on CCSprite code. It implements the CCRGBAProtocol and the CCTextureProtocol. But it can’t be added to a CCSpriteBatchNode.
    UPDATED [12/07/2012], Cocos2d v2 version on GitHub » CCSpriteScale9 by Sean Christmann.

    UPDATED [01/13/2012], NOW ON GITHUB » CCSpriteScale9.m and CCSpriteScale9.h.

    UPDATED [06/28/2012], Ported on cocos2d v2 by Varedis on the cocos2d forums » CCSpriteScale9 V2.zip.

    Read More

     


  2. 4050 hand made levels!

    Blockoban just got updated with 1800 new levels for a grand total of 4050 hand made levels! Which I believe allows me to call it “the game with the most hand made levels on the appstore”. Achievement unlocked.


    Let’s take a step back… How the hell is it possible to design 4050 unique levels?
    Let’s assume making a level takes 15 minutes on average. 4050 levels means 15x4050=60750 minutes of work. For a level designer working 8 hours a day and 5 days a week, this is about half a year of work!


    Did I spent half a year on designing levels for Blockoban? Actually no, most of the levels are not mine. They are designed by the extraordinary community of level designers at Bonuslevel.org. Before being an iOS game, Blockoban was (and is still) a Flash game, reaching 5M of plays within 3 years, and patiently building a loyal fan base. About 5000 levels were designed so far and the top rated levels (rated over 3/5) selected for the iOS game.

    Even better, the best solutions recorded from the people playing the Flash game, are exported and integrated in the iOS game as well, which means the 4050 levels are provided with a solution.

    The quality-and-quantity approach of Blockoban works very well on the long term and has contributed to build a trustful relationship with my customers. I would not recommend this approach for all kind of games, but this is very well suited for the Sokoban-like games.

    Check it out it’s free (100 free levels), Blockoban on the appstore.
    The Premium version (4050 levels with solutions) is on sale at 0.99$ (66% off)

    - Side note 1 : thanks to all the Blockoban level designers.
    - Side note 2 : if you are an ActionScript programmer, an API is available on BonusLevel to take advantage of all the tools we’ve built around the user generated levels (play, edit, moderate, export levels).

     


  3. Using Twitter as a Backend(!)

    Image from "For the birds", PixarDo you need a simple news feed for your application? You could probably rent a piece of server and code something in PHP, Ruby or Python, you could for example use google app engine as your backend.

    But did you think about using Twitter?

    3 limitations you have to know before choosing Twitter as your backend :

    •  Each article will be 144 characters max, but do you really think your customers want to read more? Simply add a link in your tweet for the ones who want to read more.
    • You can’t modify your tweet once it’s posted, think twice before posting.
    • Twitter is known to have many outages, but it improves a lot on this side.

    4 major benefits of using Twitter as your news backend :

    • It’s free.
    • Nothing to code server side, BIG time saver.
    • Thousands of clients for every kind of device are available. You can manage your backend from everywhere and everything.
    • Your application users can follow its news on twitter.

    I’ve been sucessfully using Twitter as my news backend for 1 year now. It’s implemented in all my iPhone / iPad games.

    Let’s take an example with Blockoban. First of all, as we are talking about iOS development, you’ll have to get a Cocoa Twitter client. I used the great MGTwitterEngine. Let’s see what happens when launching the game.

    • Application launch. Main menu is displayed.
    • Request in background the timeline of the Twitter account you have created for your news feed. In this example, the application is looking for @blockoban timeline.
    • Check the date of the latest tweet. If it’s new (unread), we highlight the “News” item in the menu.
    • The user decides to check the news, the application display a page that formats the twitter timeline in its own style. Links are changed into buttons for the readers who want to see more.

    So here it is, you can keep your players informed about the latest news without updating the application. I’ve been using this for 1 year now, and I’m very happy with it. It’s not the most sophisticated news system of the world, but it just does the job. Note that this can be used also to cross promote your games, as seen in the screenshot above.