マルチ解像度に対応
Android端末は多すぎて、いろんな解像度があって、初心者の僕はまだ対応し切れないです。
iPhoneから考えていきます。
まずはiPhone 4sからの解像度を覚えておきます。DPIなどとりあえず省略で。
iPhone4s | iPhone5/5s | iPhone6 | iPhone6 Plus | |
解像度 | 640 x 960 | 640 x 1136 | 750 x 1334 | 1080 x 1920 |
---|---|---|---|---|
縦横比 | 1.5000 | 1.7750 | 1.7786… | 1.7777… |
結論というと、比率で一番長いのが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));