Today’s cocos2d code sample is a class i wrote to ease the layout of the visual elements in the 51 Japanese Characters app i helped create.
The problem i needed to solve was that i got a 320×480 PNG image from the artist which showed the final layout of one of the japanese characters. But my images were of course 51 seperate head, body and leg images and i needed to position each of the 3 body parts to correctly overlap with the sample character in the layout image. After trying a few times getting the correct coordinates by doing a simple build, check, change coordinates cycle with the layout image as temporary background image i knew i needed something better and more efficient. I was going to have to do this for the buttons as well, so that would have taken a loooong time to figure out each sprite’s and button’s correct image positions.
But before i go on describing the code, here’s one important step that may also be very helpful for your application if you need pixel-perfect placement of anything. Open up cocos2d’s ccConfig.h file and find these lines so they look like this:
/** If enabled, the CocosNode objects (Sprite,Label,etc) will be able
to render in subpixels. If disabled, integer pixels will be used. */
#define CC_COCOSNODE_RENDER_SUBPIXEL 0
/** If enabled, the Sprites rendered with the SpriteSheet will be able
to render in subpixels. If disabled, integer pixels will be used. */
#define CC_SPRITESHEET_RENDER_SUBPIXEL 0
This will turn off subpixel rendering of sprites and is important because otherwise you will not get a perfect match with the visual element in the background image (which for me was my layout guide). Without these changes what happened was that no matter which coordinates i used, either plus or minus one more towards left/right or up/down the images simply did not seem to align perfectly. This was caused by subpixel rendering and after i turned it off, the images aligned perfectly. If you don’t need pixel perfect alignment, you don’t need to turn it off. Actually, only turn it off if you know you’ll need it, at least that’s what’s been recommended.
Anyhow, way too much text already. So in short the LayoutHelper class simply takes a sprite and (usually) the CCLayer the sprite resides in as “parent” and that allows you to simply touch that sprite and drag it around. Conveniently, it will display the coordinates for that sprite as you move it around, plus it’ll be transparent while dragging so that you can see if it matches with the background. If you don’t drag it, and this is optional, it’ll start blinking to both indicate that it is a draggable sprite in “layout mode” and to help you see if it really aligns perfectly with the background. All you need to make the Sprite draggable is to add this line with “sprite” being the sprite you want to layout by touch & drag and “self” being the CCNode you want the “sprite” to be added to for layouting:
[LayoutHelper helperWithSprite:sprite parent:self];
Go ahead and try it, it’s free: LayoutHelper class for cocos2d
Gaming Horror - stay a while, stayyy forever!
Great. I was thinking about coding this myself. Now I saved some time
Thanks.
Glad i could help! Let me know if you made any changes you would like to share.
Hello. This is a wonderful little tool, thanks for sharing. Gonna save me hours of tweaking ccp’s
I get paid tonight, I’ll be buying your book.
Now this is odd, I’m getting 3 errors and a ton of warnings all of a sudden, just moved from 99.3 to 99.5 – kEventHandle undeclared errors and conflicting type -(BOOL) warnings.
conflicting type can happen if you use bool instead of BOOL, happened to me a while ago when the touch handler interfaces were changed, maybe it’s related
Hello. The errors are in your class though, my bit is fine
I’m trying to up my project, but my connection has gone nuts.
Here it is: http://cid-c482d51efbc894ec.office.live.com/embedicon.aspx/.Public/LayoutHelper.zip
The version in the collection of source code i’m sharing via codaset may be more up to date: http://www.learn-cocos2d.com/knowledge-base/free-source-code/
I think LayoutHelper is in there too. But I haven’t used it with cocos2d v0.99.5 yet.
OK, thanks. It now kind of works (you have to import a load of stuff
), the coordinates show but it doesn’t drag the sprite.
Ahh, no (I wish you could edit posts on here
) it does work, but the sprite copied if offset by + 320, 480.
See, an edit is really needed
It offsets by the position you dump it down to in the first place, so if you create a CCSprite at ccp(200, 200), when you drag around your new helper sprite, it’ll be offset by 200,200.
That might be. Although I’m sure my sprites weren’t at 0,0. Do you use a non-standard anchorPoint? (it should be 0.5, 0.5)
Hey. No, anchorpoint is default. I’ve tried setting it at all sorts of odd positions but no joy. It’s ok though, for now I’m positioning the sprites then offsetting the numbers given buy the width/2 and height /2. It works
When I get it totally working I’m going to release an XCode project, obviously sourcing you and your blog 
Ahh, setting the anchorpoint to 0.25, 0.25 works. I’ll try it on a variety of sprites now.