日記

cocos2d-x v3.0 Windowsで日本語を表示する

先日、cocos2d-x v3.0rcが公開されましたね。
プロジェクトの作成方法が大幅に変わったようです。
Macですが、早速記事を書いている方がいたのでリンク貼っときます。
Cocos2d-x3.0rcで新規プロジェクト作成してandroid実機で動かす – きょこみのーと

今回はWindowsで日本語の表示をします。
cocos2d-xはLabelTTFとかLabelBMFontで文字の表示をできます。
日本語の表示もちゃんとできます。（Macでは）
Windowsだと文字化けしちゃいました。
どうやら、文字コードがShift-JISになっているのが問題で、UTF-8に変換しなくちゃいけないみたいです。
↓のサイトのコメント欄が参考になりました。
cocos2d-xでWindowsアプリ開発環境も作ってみた » はにらぼ☆てっく

Shift-JISをUTF-8に変換するコードをとりあえず書いてみました。

char*	MultiByteToUTF8(const char* src){
	unsigned int sizeWide = MultiByteToWideChar(CP_ACP, 0, src, -1, nullptr, 0);
	wchar_t* bufferWide = new wchar_t[sizeWide+1]();
	MultiByteToWideChar(CP_ACP, MB_PRECOMPOSED, src, -1, bufferWide, sizeWide);
	unsigned int sizeUtf8 = WideCharToMultiByte(CP_UTF8, 0, bufferWide, -1, nullptr, 0, nullptr, nullptr);
	char* bufferUtf8 = new char[sizeUtf8+1]();
	WideCharToMultiByte(CP_UTF8, 0, bufferWide, -1, bufferUtf8, sizeUtf8, nullptr, nullptr);
	delete bufferWide;
	return bufferUtf8;
}

Shift-JISをUTF-8に直接変換はできないので、一旦ワイド文字列に変換しないといけないらしいです。
上から順にざっと説明すると、
まずワイド文字列に変換するのに必要なサイズを取得し、（2行目）
ワイド文字列のバッファを作って、（3行目）
Shift-JISをワイド文字列に変換します。（4行目）
そして、UTF-8に変換するのに必要なサイズを取得し、（5行目）
UTF-8のバッファを作って、（6行目）
ワイド文字列をUTF-8に変換します。（7行目）

と、こんな感じの関数を用意しとくといいと思います。
MultiByteToWideCharとWideCharToMultiByteについては↓を参考にしました。
MultiByteToWideChar – Windows APIの部屋
WideCharToMultiByte – Windows APIの部屋

auto label = LabelTTF::create(Helper::MultiByteToUTF8("ほげ"), "Meiryo", 24);
label->setPosition(0, 0);
this->addChild(label);

使い方はこんな感じです。

auto label = LabelBMFont::create(Helper::MultiByteToUTF8("ふが"), "font.fnt");
label->setPosition(0, 0);
this->addChild(label);

ビットマップフォントの場合はこうなります。

ついでに、ビットマップフォントの作成について。
ShoeBoxという、大変素晴らしいフリーソフトがあったので、試しに使ってみたのですが、結果から言えば日本語で使うにはちょっと問題があります。
使い方をざっくり言うと、
まず作成するフォントの設定をして、使う文字をクリップボードにコピーする。
フォトショ等の画像編集ソフトで文字列をペーストし、レイヤー効果で装飾をして書き出す。
画像をShoeBox上にドロップすると、画像上の透過部分を元に自動で文字を切り分けて、ビットマップフォントを作成する。

文字の装飾をツール上で行わず、他のソフトに丸投げしてくれているおかげで、自由に装飾ができるのです。
しかし、文字の切り分けを自動で行うために、「い」が左右で分裂されてしまうというハプニングが……。
最初に分裂しそうな文字を加工して繋げておいて、ビットマップフォント生成後に修正とかすれば良さそうですが、ちょっとめんどくさいですね。
ShoeBoxには他にもスプライトシートを作る機能もあるので、そっちで使っています。

文字に装飾をする必要がないのであれば、Bitmap Font Generatorで十分だと思います。
装飾する場合は、あらかじめ余白ができるように生成して、出来た画像にフォトショのレイヤー効果でなんとかなりそうですね。（グラデーションは難しそうですが）

あと、cocos2d-xでビットマップフォントを使う場合の注意点として、一つのフォントに画像は１枚しか使えないようです。
使用する文字が多い場合は大きな画像にせざるを得ないですが、あんまり大きすぎるのは良くないので、文字を小さめにするとか使う漢字を最小限にするとか対処する必要がありそうですね。
ちなみにAndroidかiOSの場合は2048*2048が上限だったような気がします（うろ覚え）

2014/03/12


CAPTCHA