cocos2d-xで同じ画像をマルチ解像度対応

端末によって解像度もいろいろ。
スケールを変更し、同じ画像を多数を端末に適合することができます。
cocos2d-xのHelloAppテンプレートでテストしました。

背景画像を画面中心に貼る

テンプレートを修正して、画像を画面の中心に表示します。

CCSprite* pSprite = CCSprite::create("Default.png");
pSprite->setPosition(ccp(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

visibleSizeとoriginはそれぞれ

CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

ここまではテンプレートHelloWorldSceneのinitメソッドとあまり変わらないですね。

画像のサイズでスケールを計算

調整はAppDelegateクラスのapplicationDidFinishLaunchingメソッドで行います。
前略で直接ゲーム画面のサイズ設定から入ります。

CCSize resoSize = CCSizeMake(640, 960);
//640,960でゲーム画面の描画サイズを設定
pEGLView->setDesignResolutionSize(resoSize.width, resoSize.height, kResolutionFixedWidth);
//kResolutionFixedWidthは幅に合わせて描画サイズを調整する定数です。

iPhone5がiPhone4より高さが大きくなったので、
縦で同じサイズを描画するとき、iPhone5の上下に黒帯が付くことです。

次はスケール係数を計算します。

pDirector->setContentScaleFactor(320.0f/resoSize.width);
//320.0fは背景画像の幅

幅に合わせて調整することで、スケール係数も幅で計算しないといけません。
これで背景画像の幅320が画面の幅640に合わせて調整しました。
スクリーンショット 2014-10-18 19.25.01

スケール係数を変更してみる

同じ画像で、640.0fの幅で係数を計算すると画像が半分になります。

pDirector->setContentScaleFactor(640.0f/resoSize.width);

スクリーンショット 2014-10-18 19.35.28

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>