きょこみのーと

元六本木でGo書いてました。今はVRでGo書いてます。

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

以前の記事「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の一部の端末だとダメなパターンとかあるかも・・・


こんな感じになります。

iPhone6

f:id:kyokomi:20141031165622p:plain

iPhone5s

f:id:kyokomi:20141031165634p:plain

iPhone4s

f:id:kyokomi:20141031170307p:plain

iPad Air

f:id:kyokomi:20141031170315p:plain

iPad2

f:id:kyokomi:20141031170324p:plain