マルチ解像度に対応

Android端末は多すぎて、いろんな解像度があって、初心者の僕はまだ対応し切れないです。
iPhoneから考えていきます。
まずはiPhone 4sからの解像度を覚えておきます。DPIなどとりあえず省略で。

結論というと、比率で一番長いのがiPhone6で、一番短いのがiPhone4sです。
長い端末を基準で作ったら、短い端末では画面の一部が切れてしまいます。
短い端末を基準で開発し、ゲーム画面を長い端末で中心に配置するのが一般的です。
ですが、背景が短い端末で作ったら、両端が黒い帯が入れられて綺麗ではないので、
ゲームのジャンルに合わせて綺麗な模様の帯を入れたほうがいいです。

背景の置き方

長い端末の解像度を座標系にし、背景画像を短い端末の中心に配置します。
背景は画面中心に置くだけでよい。cocos2d-xの中心座標は画面サイズの半分です。
上下の模様を切ってiPhone5縦横比の長い画像をiPhone4sの中心の配置します。
コードはHelloWorldと同じです。

CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();
CCSprite* pSprite = CCSprite::create("6401136.jpg");
pSprite->setPosition(ccp(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

Photoshopの座標系に対応

Photoshopの座標系は左上を原点にしています。
デザイナーからいただいた画面のデザインはPhotoshopの座標そのまま配置したいなら、
座標を変換しなければなりません。
144×144のアイコンを640×1136座標系でiPhone4s解像度(640×960)で表示しました。
この座標系の(0,88)はiPhone4sではちょうど左上です。
計算方法はmk18さんから教えていただきました。

CCSprite* HelloWorld::createGSprite640_1136(int ix, int iy, const char* file_name){
    CCSprite* sprite = cocos2d::CCSprite::create(file_name);
    ix += sprite->getContentSize().width/2;
    iy += sprite->getContentSize().height/2;

    float x1,x2, y1,y2;

    x1 = ix-640.0f/2.0f;
    y1 = iy-1136.0f/2.0f;

    CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
    x2 = x1+visibleSize.width/2.0f;
    y2 = visibleSize.height/2.0 - y1;
    sprite->setPosition(ccp(x2, y2));

    return sprite;
}

このメソッドでスプライトを生成し、位置を配置します。

CCSprite* pSpritei = createGSprite640_1136(0, 88, "Icon-144.png");

中心原点座標系に対応

ゲーム画面の中心を原点として、スプライトを配置する方法です。
中心原点は画面サイズを半分にするだけです。
144ピクセルのアイコンを中心(0,0)と中心から(144,-144)に配置しました。

pSpritei->setPosition(ccp(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));
pSpriteCenter->setPosition(ccp(visibleSize.width/2 + origin.x + 144.0f, visibleSize.height/2 + origin.y - 144.0f));