DC4

今よく言われてる「草食系」にはなったらあかん! 野獣のような「肉食系」になるため、今は肉ばっかり食べてるよ。

cocos2d-xのマルチレゾリューション

はじめに

先日こちらの入門書よりcocos2d-xデビューしたのですが、
さっそくマルチレゾリューションに混乱したので、その際の整理した事をメモしようと思います。

バージョンは2.2.2を使用しています。

マルチレゾリューションって何?

様々なデバイスの解像度に対応する機能。

解像度の意味をおさらい。

解像度・・・1インチ (2.54 cm) 辺りに何個のピクセルで構成するかの値でiphone5だと326ppi(pixel per inch)。
解像度を用いて、総ドット数を横×縦で1136×640ドットと表記したり、300万画素などと合計で表記します。
例)iphone5
  画面サイズ:1,136 x 640 px
  解像度:326 ppi
  インチ換算すると、
    1,136 px ÷ 326 ppi =3.484 in
    640 px ÷ 326 ppi =1,963 in
  cm換算すると
    3.484 in x 2.54 = 8.849 cm
    1.963 in x 2.54 = 4.986 cm

初代のiPhoneからiPhone 3Gまでは163ppiだったのに対して、
Retinaディスプレイでは326ppiになっていて、
約4倍密度が向上したのでRetinaすげー!最高ー!ってなるわけですね。

cocos2d-xでのマルチレゾリューション対応

以下の要素を用いて実現していきます。

  • Design Resolution
  • ResolutionPolicy
  • ContentScaleFactor

Design Resolution

CCDirector* pDirector = CCDirector::sharedDirector();
CCEGLView*  pEGLView  = CCEGLView::sharedOpenGLView();
pDirector->setOpenGLView(pEGLView);
   
// デザイン解像度の設定
pEGLView->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, kResolutionShowAll);

setDesignResolutionSizeメソッドの第一、第二引数にしているサイズが該当します。
これはアプリケーション内で使用する解像度で、コード上で位置指定を行う場合は端末の解像度に関わらずこちらを使用します。

ResolutionPolicy

setDesignResolutionSizeメソッドの第三引数に指定している値です。
以下のような種類があります。

  • kResolutionShowAll:アスペクト比を保ったまま出来る限り全体を表示する。余白は黒色で埋められる。
  • kResolutionNoBorder:アスペクト比を保ったまま出来る限り大きく表示する。余白は出来ない。はみ出た部分については表示されない。
  • kResolutionExactFit:アスペクト比率を無視して全体を表示する。余白は出来ない。

ContentScaleFactor

名前の通り画像リソースをデザイン解像度へ合わせるための拡大率。

書籍サンプルのマルチレゾリューション実現方法

ResolutionPolicyは、kResolutionNoBorderを使用

以下のような3種類の画像リソースを容易し、

typedef struct tagResource{
    cocos2d::CCSize size;
    char directory[100];
} Resource;

static Resource smallResource = {
    cocos2d::CCSizeMake(512,384),
    "S"
};
static Resource mediumResource = {
    cocos2d::CCSizeMake(1024,768),
    "M"
};
static Resource largeResource = {
    cocos2d::CCSizeMake(2048,1536),
    "L"
};

designResolutioncocos2d::CCSizeMake(1024,768)とする。

アプリケーション起動時に端末フレームサイズを取得し、

CCSize frameSize = pEGLView->getFrameSize();

3種類の画像リソースのどこに当てはまるか比較する。

例えば
frameSizelargeResourcesmallResourceの中間の場合

ContentScaleFactorの値は、 MIN(mediumResource.size.height / designResolutionSize.height, mediumResource.size.width / designResolutionSize.width); で求める。

小並感

大変だね!