【cocos2d-x】導入〜解像度設定

この前、HTML5で作った Invader Block を cocos2d-x を使って PC に移植して、もうちょっと演出周りを凝らせてみて、Steamで販売してみようかと思い立つ。

VGSを使っても良いんですけど、PC用のVGSはサンドボックス用途での利用しか考えていなくて、WindowsはともかくOSXとLinuxもサポートしようとなると、現状の実装（SDL）では割と不満があります。（デフォルト状態で動かないのが一番の難点かと思います）

かといって、OSXとLinuxのネイティブ描画も凝らせようとするとそれだけで半年ぐらい浪費してしまう。という訳で、面倒なグラフィックス周りは既存ライブラリの力を借り、音声周りだけは vgs-bgm-decoder を使う方向で作るのがベターかなと。

そして、C/C++で書けて、Windows, Mac OSX, Linuxをサポートしているライブラリはcocos2d-xの一択ではないかと思います。（本当はランタイムはC++じゃなくてCの方が好みですが、CだとVGS以外に無さそうなので、この際、C++でも（C++13ぐらいまでのものなら）いいやと妥協）

という訳で、まずは導入。

https://github.com/cocos2d/cocos2d-x

git clone https://github.com/cocos2d/cocos2d-x.git

cd cocos2d-x
python download-deps.py

git submodule update --init

多分、全部で300MBぐらいあります。

デカイ...

気長にダウンロード。

そして setup & プロジェクト作成（iblockとかsuzukiplanといった部分は良しなに）

./setup.py
cocos new iblock -p com.suzukiplan.iblock -l cpp -d ~/cocos2d-x
cd ~/cocos2d-x/iblock

そして、OSX向けにコンパイル＆実行してみる。

cocos run -p mac

これがまた長い...

が、無事 Hello, World! が起動。

ここまでなら README.md に書いてある通りのことだから、ブログに書いても芸が無いので、PCゲーム向けということで 320 x 240 (QVGA) の解像度 で フルスクリーン にしてみます。

WindowsでDirectXを使ったことがある人なら分かると思いますが、それだけでも実は結構面倒くさかったりするのですが、2行変更しただけでイケました。

	#include "AppDelegate.h"
	#include "HelloWorldScene.h"
	USING_NS_CC;
	static cocos2d::Size designResolutionSize = cocos2d::Size(480, 320);
	static cocos2d::Size smallResolutionSize = cocos2d::Size(480, 320);
	static cocos2d::Size mediumResolutionSize = cocos2d::Size(1024, 768);
	static cocos2d::Size largeResolutionSize = cocos2d::Size(2048, 1536);
	AppDelegate::AppDelegate() {
	}
	AppDelegate::~AppDelegate()
	{
	}
	//if you want a different context,just modify the value of glContextAttrs
	//it will takes effect on all platforms
	void AppDelegate::initGLContextAttrs()
	{
	//set OpenGL context attributions,now can only set six attributions:
	//red,green,blue,alpha,depth,stencil
	GLContextAttrs glContextAttrs = {8, 8, 8, 8, 24, 8};
	GLView::setGLContextAttrs(glContextAttrs);
	}
	// If you want to use packages manager to install more packages,
	// don't modify or remove this function
	static int register_all_packages()
	{
	return 0; //flag for packages manager
	}
	bool AppDelegate::applicationDidFinishLaunching() {
	// initialize director
	auto director = Director::getInstance();
	auto glview = director->getOpenGLView();
	if(!glview) {
	#if (CC_TARGET_PLATFORM == CC_PLATFORM_WIN32) || (CC_TARGET_PLATFORM == CC_PLATFORM_MAC) || (CC_TARGET_PLATFORM == CC_PLATFORM_LINUX)
	// glview = GLViewImpl::createWithRect("iblock", Rect(0, 0, designResolutionSize.width, designResolutionSize.height));
	glview = GLViewImpl::createWithFullScreen("iblock");
	#else
	glview = GLViewImpl::create("iblock");
	#endif
	}
	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);
	// Set the design resolution
	//glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::NO_BORDER);
	glview->setDesignResolutionSize(320, 240, ResolutionPolicy::SHOW_ALL);
	Size frameSize = glview->getFrameSize();
	// if the frame's height is larger than the height of medium size.
	if (frameSize.height > mediumResolutionSize.height)
	{
	director->setContentScaleFactor(MIN(largeResolutionSize.height/designResolutionSize.height, largeResolutionSize.width/designResolutionSize.width));
	}
	// if the frame's height is larger than the height of small size.
	else if (frameSize.height > smallResolutionSize.height)
	{
	director->setContentScaleFactor(MIN(mediumResolutionSize.height/designResolutionSize.height, mediumResolutionSize.width/designResolutionSize.width));
	}
	// if the frame's height is smaller than the height of medium size.
	else
	{
	director->setContentScaleFactor(MIN(smallResolutionSize.height/designResolutionSize.height, smallResolutionSize.width/designResolutionSize.width));
	}
	register_all_packages();
	// create a scene. it's an autorelease object
	auto scene = HelloWorld::createScene();
	// run
	director->runWithScene(scene);
	return true;
	}
	// This function will be called when the app is inactive. When comes a phone call,it's be invoked too
	void AppDelegate::applicationDidEnterBackground() {
	Director::getInstance()->stopAnimation();
	// if you use SimpleAudioEngine, it must be pause
	// SimpleAudioEngine::getInstance()->pauseBackgroundMusic();
	}
	// this function will be called when the app is active again
	void AppDelegate::applicationWillEnterForeground() {
	Director::getInstance()->startAnimation();
	// if you use SimpleAudioEngine, it must resume here
	// SimpleAudioEngine::getInstance()->resumeBackgroundMusic();
	}

view raw AppDelegate.cpp hosted with ❤ by GitHub

変更箇所1: 44行目（createWithFullScreenを使う）
glview = GLViewImpl::createWithFullScreen("iblock");

変更箇所2: 59行目（setDesignResolutionSizeで解像度を設定）
glview->setDesignResolutionSize(320, 240, ResolutionPolicy::SHOW_ALL);

左右が少し黒く切れていますが、これは想定通り。
※Macの解像度は1280x800（Retinaなら2560x1600）なので、QVGAをアスペクト比を保った状態で画面いっぱいに引き伸ばすと、左右に余白が生まれる