• TOP
  • >
  • その他
  • >
  • マルチディスプレイに対応させる

マルチディスプレイに対応させる

今回は、デバイス毎に画像データを振り分ける処理をcocos2d-xで実装をしていきたいと思います。

スマートフォンは現在たくさんのデバイスがあります。
それぞれ、画面のサイズも違いますので、ゲームを作る際には、デバイスに合った画像を用意する必要があります。

デバイスの判別

まずは、デバイスを判別して画像サイズや座標を修正するコードを紹介します。

iOSとAndroidを区別する

cocos2d-xで作成ができるiOSとAndroidを判別するには以下のコードを利用します。

#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
  
   //デバイスがiOSの時

#else
   
   //デバイスがAndroidの時

#endif


変数のCC_TARGET_PLATFORMを使えば、簡単に判別ができます。
  • CC_PLATFORM_IOS:iOSの場合
  • CC_PLATFORM_ANDROID:Androidの場合


スクリーンサイズからデバイス判定

iOSの場合は、Retinaディスプレイに対応しているか?もし対応している場合はRetina(4-inch)かどうかを判別します。
方法は、画面のサイズから判別します。

下記のコードは画面が横向きの時です。
//画面のサイズを取得
CCEGLView* view = CCDirector::sharedDirector()->getOpenGLView();
CCSize frame = view->getFrameSize();


//Retinaに対応しているかどうか。
if (frame.width > 480) {

   pDirector->setContentScaleFactor(2.f);

   //Retina(4-inch)かどうか。
   if (frame.width==1136.0) {

   
   }else{


   }



}else{



}

<h3>画面にあったサイズの調整</h3>
画面が判別できたら、画面にあったサイズの調整をそれぞれ行います。
これは主に画面のサイズがバラバラなAndroid端末で上手く利用をしましょう。
1
//Retina(4-inch)の場合
CCEGLView::sharedOpenGLView()->setDesignResolutionSize(568, 320, kResolutionExactFit);

[setDesignResolutionSize]の引数2では、画像のサイズ調整を設定出来ます。
  • kResolutionExactFit:指定されたサイズに合わせて画像を調整
  • kResolutionNoBorder:縦横の比率に合わせてサイズを調整(余白なし)
  • kResolutionShowAll:縦横の比率に合わせてサイズを調整(余白あり)


デバイスに合った画像の振り分け

先ほど利用した[setDesignResolutionSize]を使って、一つの画像を調整する方法では、どうしても画像自体がおかしくなる時があります。その場合の対応策として、デバイスのサイズに合った画像を用意する方法があります。
もしフォルダに指定された画像がなければ、同じファイル名の画像データをフォルダの外から探します。


コード

コードでフォルダを振り分けられます。
std::vector<std::string> folderPaths;
std::vector<std::string> folderPaths2;

~~~~~~~~

    //フォルダを指定する記述
    folderPaths.push_back("iOS-folder");
    folderPaths2.push_back("Retina4");


~~~~~~~~

CCFileUtils::sharedFileUtils()->setSearchPaths(folderPaths);
CCFileUtils::sharedFileUtils()->setSearchResolutionsOrder(folderPaths2);

ファイル追加時の注意点

フォルダを使って画像を振り分ける際に注意をしてほしいことは、ファイルを追加する時に、フォルダを有効にしないといけないことです。
具体的には、ファイルを追加する時に、以下のようにして下さい。
422-cocos2d-study.png


プロジェクトナビでフォルダが青色っぽくなっていたら、フォルダ有効になっています。
422-cocos2d-study2.png


全体のコード

AppDelegate.cpp内にapplicationDidFinishLaunchingメソッドに以下のように記載しています。参考にして下さい。
 //ファイル・フォルダの指定
    std::vector<std::string> folderPaths;
    std::vector<std::string> folderPaths2;
    
    
    //デバイスがiOSの場合
#if (CC_TARGET_PLATFORM == CC_PLATFORM_IOS)
    
    folderPaths.push_back("iOS-folder");
    
    //画面のスクリーンサイズを取得
    CCEGLView* view = CCDirector::sharedDirector()->getOpenGLView();
    CCSize frame = view->getFrameSize();
    
    //サイズの大きさでRetina(4-inch)の判定をしている。
    
    if (frame.width > 480) {
        
        pDirector->setContentScaleFactor(2.f);

        
        if (frame.width==1136.0) {
            
            folderPaths2.push_back("Retina4");
            
            CCEGLView::sharedOpenGLView()->setDesignResolutionSize(568, 320, kResolutionExactFit);
            
        } else {
            
            folderPaths2.push_back("Retina3.5");
            
            CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 320, kResolutionExactFit);
        }

        
    }else{
        
        folderPaths2.push_back("normal");
        CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 320, kResolutionExactFit);
        
    }
    
    
    #else
    // iOS以外のデバイスの場合
    folderPaths.push_back("iOS-folder");
    folderPaths2.push_back("normal");

    CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 320, kResolutionExactFit);
#endif
    
    
    CCFileUtils::sharedFileUtils()->setSearchPaths(folderPaths);
    CCFileUtils::sharedFileUtils()->setSearchResolutionsOrder(folderPaths2);

            

経営育成ゲーム「わたしの動物園」をリリースしました!

cocos2dxを使って作成したアプリを作成しました。
無料で遊べますので、ぜひゲーム作りの参考にしてみて下さい!

【Sponsored Link】

更新履歴