きょこみのーと

技術に関係ないほうのブログ

Cocos2d-xでいい感じのDesignResolutionSizeを指定する

★2014/10/28追記:

上記で縦横対応したので、そちらをご覧ください。


画面の上と下もしくは右か左に黒い線でるのが、許せなかったのでなんかゴニョゴニョしてました。

f:id:kyokomi:20140622175611p:plain

↑これです。

バージョン

  • Cocos2d-x 3.1.1

AppDelegate.cppの内容

変数名とかが微妙なのはスルーしてください。

以下の例は、480x320基準です。もし使うなら各自お好みのサイズでどうぞ。 ちなみに自分の作っているローグライクゲームは提供頂いているフリー素材サイズの都合上baseScale=0.75f;としています。

AppDelegate.cpp

bool AppDelegate::applicationDidFinishLaunching() {
    // initialize director
    Director* director = Director::getInstance();
    auto glview = director->getOpenGLView();
    if(!glview) {
        glview = GLView::create("Cocos2dRogueLike Game");
        director->setOpenGLView(glview);
    }

    // ================ ここから ==================
    const float baseScale  = 1.00f;
    const float baseWidth  = 480.0f;
    const float baseHeight = 320.0f;
    const float baseScaleWidth  = baseWidth * baseScale;
    const float baseScaleHeight = baseHeight * baseScale;
    
    auto visibleSize = Director::getInstance()->getVisibleSize();
    const int widthDiff = (int)visibleSize.width % (int)baseWidth;
    const int heightDiff = (int)visibleSize.height % (int)baseHeight;
    
    if (widthDiff == 0 && heightDiff == 0) {
        // 縦横ともに480x320準拠ならそのまま
        glview->setDesignResolutionSize(baseScaleWidth, baseScaleHeight, ResolutionPolicy::SHOW_ALL);
    } else {
        // 縦横が480x320に準拠しない場合、いい感じにする
        float divX = visibleSize.width / baseWidth;
        float divY = visibleSize.height / baseHeight;
        glview->setDesignResolutionSize(baseScaleWidth + (widthDiff / divX),
                                        baseScaleHeight + (heightDiff / divY),
                                        ResolutionPolicy::SHOW_ALL);
    }
    // ================ ここまで ==================
    
    // turn on display FPS
    director->setDisplayStats(true);

    // set FPS. the default value is 1.0/60 if you don't call this
    director->setAnimationInterval(1.0 / 60);

    // create a scene. it's an autorelease object
    auto scene = MyPageBaseScene::scene<TopScene>();
    
    // run
    director->runWithScene(scene);

    return true;
}

iPhone Retina 3.5インチ

f:id:kyokomi:20140622175031p:plain

iPhone Retina 4.0インチ

f:id:kyokomi:20140622175044p:plain

iPad Retina

f:id:kyokomi:20140622175054p:plain

GalaxyNexus

f:id:kyokomi:20140622175108p:plain

Nexus5

f:id:kyokomi:20140622175120p:plain

もちろん画面サイズに応じたロジックを組む必要があったり背景画像が画面からはみ出る感じで予め配置しておく必要などあるので、ちょっと難しいです。(例えばヘッダー枠の横サイズを480で作ってるので表示するときにvisibleSize.widthSizeを変更するとか)

その辺含めてCocoStudioとかでやっておかないとかなり大変なので苦労すると思います。。。 はやくCocoStudio for Macの安定版でてくれー。。。 もしくはgithubにソース公開してくれー(T_T)