以前の記事「Cocos2d-xでいい感じのDesignResolutionSizeを指定する」が縦画面の時にいい感じにならなかったので、調整しました。

環境

Cocos2d-x3.3rc0
CocosStudio 1.6.0.0（windows）
Xcode6.1

ソースコード

使い方

上記のソースを丸コピーもしくはダウンロードしてプロジェクトに追加し、AppDelegate.cppで呼び出します。

AppDelegate.cpp

#include "AppDelegate.h"

#include "GLViewUtil.h"

USING_NS_CC;

// 〜省略〜

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

    // 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);

    // ★横640は維持して640x960比率でフィットした画面にする（縦横の黒棒をなくす）
    auto fitSize = GLViewUtil::calcFitDesignResolutionSize(640, 960, GLViewUtil::FitType::WIDTH);
    glview->setDesignResolutionSize(fitSize.width, fitSize.height, ResolutionPolicy::SHOW_ALL);

    // create a scene. it's an autorelease object
    auto scene = HelloWorld::createScene();

    // run
    director->runWithScene(scene);

    return true;
}

// 〜省略〜

CocosStudio側の配置

拡大時もいい感じの位置に配置するためには、以下を行います。

RootNodeのPanelでAdaptive ResolutionのチェックボックスをONにする
CocosStudio上で全部％でposition指定する

Adaptive ResolutionをONにする

Adaptive ResolutionのチェックボックスをONにするとWidget作成時にLayoutReader.cppの183行目辺りのLayoutReader::setPropsFromJsonDictionaryで、ContentSizeにCCDirector::getInstance()->getWinSize()を設定してくれます。

f:id:kyokomi:20141028071750p:plain

CocosStudio上で全部％でposition指定する

f:id:kyokomi:20141028071803p:plain

結果

横 iPhone6+

f:id:kyokomi:20141028065142p:plain

縦 iPhone4s

f:id:kyokomi:20141028065348p:plain

縦 iPhone6

f:id:kyokomi:20141028065413p:plain

※2014/10/31 追記

上記の式を使うと（例： 640x960）で極稀にiPadAirなどが横幅（640px）を維持すると縦幅（960px）を維持できなくなるケースがあります。

その場合を考慮して、以下を用意しました。基本はFitType::WIDTHでwidth640を維持する形でいい感じのSizeに設定し、極稀なケースでheightが維持できなくなったら（960以下になる場合）FitType::HEGIHTにしてのheight960維持する形に切り替わります。

auto fitSize = GLViewUtil::getFitDesignResolutionSize(640, 960, GLViewUtil::FitType::WIDTH);
glview->setDesignResolutionSize(fitSize.width, fitSize.height, ResolutionPolicy::SHOW_ALL);

中でいい感じに計算した結果がもともとのhegith960以下になったらFitTypeをFitType::HEGIHTに変更して再計算します。こうするとwidthがおそらく640以上になるので、もともと画面の中央にSceneを配置するような工夫とかが必要です。

（よくある、vislbleSize.width /2 - layout->getContentSize().width /2 的なやつです）

かなり暫定的な処置なので、Androidの一部の端末だとダメなパターンとかあるかも・・・

こんな感じになります。