きょこみのーと

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

Cocos2d-xに美咲フォント(ttf)を導入する

はじめに

Cocos2d-xでttfカスタムフォントを入れようとしたら、思った以上に手間取ったのでまとめました。

環境について

 今回使う美咲フォント

[美咲フォント](http://www.geocities.jp/littlimi/misaki.htm#download

ドット風フォントで、8ドットなのでいい感じです。

フォントのpostScriptを調べる(Mac

ダウンロードしたttfをMac上で実行し、インストールする。

f:id:kyokomi:20140107113312p:plain

Font Bookを開く ー> 詳細情報表示のアイコンを押す ー> Regularを選択 ー> PostScrpt名を覚えておく f:id:kyokomi:20140107113315p:plain

今回の美咲ゴシックだと「MisakiGothic」になります。

AndroidiOSでの共通作業

プロジェクトのResources/fonts/下にttfファイルを配置。

f:id:kyokomi:20140107113309p:plain

iOSでの作業

Xcode上でadd Fileします。

f:id:kyokomi:20140107113331p:plain

iOS用のターゲットを選択して、Fonts provided by applicationにttfを追加します。

fontsに入れてあれば、フォントファイルパスではなく、フォントのファイル名で良いみたいです。

※2014/01/11追記

失礼しました。フォルダパスを指定しないとだめです。↑の画像はフォルダグループなのでResource直下と同じ意味で動いていました。

f:id:kyokomi:20140107113320p:plain

フォルダ階層を維持した形でaddした場合は、「fonts/misaki_gothic.ttf」となります。

f:id:kyokomi:20140111195729p:plain

Xcodeでprojectをcleanします。(これはfontを新しく入れたり、変更したりするたびに必要です)

Androidの作業

とくになし。なぜならフォントファイルを直接指定するので。

普通にビルドとかはしてください。

ソースコード

適当にヘッダーとか入れてください。

// 美咲フォント(MISAKI_FONT)
#if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID)
#define MISAKI_FONT "fonts/misaki_gothic.ttf"
#else
#define MISAKI_FONT "MisakiGothic"
#endif

フォントを呼び出すソース。

auto sampleText = LabelTTF::create(" 1F Lv1 HP 15/15 満腹度 100/100 0 G", MISAKI_FONT, 16); 

実際に表示してみる

参考までに。

  • 上のHPとか表示しているのがfontSize = 16
  • 下のログと持ち物ボタンがfontSize = 8

iOSf:id:kyokomi:20140107113324p:plain Android

f:id:kyokomi:20140107113334p:plain

ファミコンのドット風フォントはやっぱりいいですね!! (見慣れてるから?w)