2011/12/25

coco2d Advent Calendar 2011 24日目: オーバートップレイヤーのすすめ

あいかわらず後からの投稿になっちゃいますが、めげずにcocos2d Advent Calendar投稿します。
 今回は、以前さいたまiPhone勉強会で発表した内容からのピックアップで、オーバートップレイヤーというものを実装してみたという例のご紹介です。

<中級編>オーバートップレイヤーのすすめ

●まえがき
 ゲームでは、よく画面を覆う枠があったり、画面上部に体力やスコア表示などが分けて表示されていたりするような画面配置がありますよね。たとえば、以下のような感じです。
 Ysなどの往年の国産PCゲームでは、画面を覆う枠があり枠内がスクロールするゲーム画面。枠の下には体力などのパラメータ表示となっていました。たとえばこんな感じで検索するとヒットしますよ。
 また、ファミコンのゲームではよく画面を上下に区切って画面上部にアイテムやパラメータ表示をして、画面下部はスクロールするゲーム画面として使用するようなものもメジャーでした。たとえばグーニーズとか。ほら検索すると画面がヒットしますよ。

 こんな感じの表示を行う場合に、CCLayerを2つ用意して、1つは枠や画面上部のパラメータ表示用に使用し、もう1つはゲーム画面として使用するように作ると思います。しかし、ゲームの進行で別のマップへ移ったりする際にフェードアウト・フェードインして画面切り替えを行おうとするとcocos2dで普通に推奨されている方法で組むと、パラメータ表示用も含めてフェードがかかってしまい、あまりかっこ良く有りません。ちなみに、このcocos2dで推奨されている組み方はCCSceneにCCLayerを2つ子供にして別のCCSceneへ切り替えるというものです。
 そこで、今回ご紹介する方法が出てくるわけです。


●オーバートップレイヤーの仕組み

 仕組みはこんな感じとなります。通常cocos2dで用意されている画面遷移関数はCCSceneを入れ替えるものですが、この方法ではCCScene自体は基本的に入れ替わらず、ゲーム画面として使用しているCCLayerだけが入れ替わるという構造になります。もちろん、そんな便利なメソッドは用意されていないので、レイヤー入れ替え部分は自作しなければなりません。

 CCSceneの定義自体はこんな感じとなります。
+(MainScene*)sceneWithLayerTop:(CCLayer*)layerTop
           layerBelow:(CCLayer*)layerBelow
{
  MainScene *scene = [MainScene node];

  layerTop.tag = kLayerTop;
  layerBelow.tag = kLayerBelow;

  [scene addChild:layerBelow z:0];
  [scene addChild:layerTop z:2];

  return scene;
}


 で、画面遷移用にとりあえずこの2つのメソッドを用意してみました。メソッドの中のコードはサンプルコードを参照してください。transitionFadeWithLayerは黒フェードを用いてレイヤーの入れ替えを行うものです。transitionFlowerWithLayerはオマケ的なものですが、花で画面が埋め尽くされて花が画面上から去るとレイヤーが入れ替わっているというものです。
- (BOOL)transitionFadeWithLayer:(CCLayer*)layer
           duration:(ccTime)d;

- (BOOL)transitionFlowerWithLayer:(CCLayer*)layer
           duration:(ccTime)d;



●実装の注意点
 実装にあたって、以下の部分に注意しました。
・関係するレイヤーのタッチイベントの無効化だけでは余り効果を発揮しなかったので、画面遷移の重複が起きないように注意した。
・トランジション中フラグを用意して、トランジションメソッドが複数動作しないように制御した。
 と、こんな感じですが、荒削りなので実際に使用するにはもう少し改善の余地はありそうです。でも、夢が広がると思います。


●夢がひろがりんぐ
 もともとオーバートップレイヤーが欲しいなと思ったのは、GameCenterでのアチーブメント解除表示を行う際に画面上部などにアチーブメント情報を表示し始めたとしても、その後すぐに画面遷移が行われてしまった場合にアチーブメント表示が消えてしまうのをなんとかしたいと思ったところから発想しました。もちろん、ネットをググれば同様の問題の対処としてcocos2dのCCSpriteオブジェクトなどをcocos2d外のものに適用して表示させる方法があったりしましたが、なんだかスマートじゃないなと思っていたのです。どうせなら表示はすべてcocos2dの中で完結させたいと。
 オーバートップレイヤーがうまく動いてしまえば、往年のゲーム的な画面表示が簡単に行えるので、これはいいんじゃないでしょうか。おすすめですよ。

 ではでは、今回はこのへんで。

2011/12/22

coco2d Advent Calendar 2011 22日目: Tiledの使い方講座

cocos2d Advent Calendar 22日目としてさくっと書きました。
 cocos2dとはちょっとズレた話かもしれませんが、CCTMXTiledMapを活かそうと思ったら使うことになるTiledというマップ作成ツールの使い方について解説します。

<初級編>Tiledの使い方講座

●基本機能
 Tiledは正方形(トップビュー、サイドビュー)、平行四辺形(クォータービュー)、六角形(ヘックス)のスクロール可能なマップを作成するのに非常に便利なツールです。もともとはPythonのゲーム用に作られたこのツールですが、cocos2dのCCTMXTiledMapクラスでサポートされた形式tmx形式を出力可能なツールとなっています。というか、cocos2dの方がtmxに対応させたということになりますか。

 以下のスクリーンショットを見てもらえれば、どんなマップが作れるのかよく分かると思います。





 一番上のマップはHungryMasterで使用したもので、トップビューとなっています。真ん中はTiledのサンプルに用意されているもので、トップビューなのですが、左上に向かって上層がつながって表示されているややパースペクティブなもの。一番下の例はクォータービューとなっております。クォータービューのタイルチップはこちらのものを使用させてもらいました。
 マップはレイヤー構造を持てますので、それを利用することで、地面、建物、2階部分などをレイヤー分けして載せていくことができます。クォータービューのものを例に取りますと、地面レイヤーだけでは以下のようになります。



 これに建物レイヤーを重ねることで、次のようになります。




 さらに、オブジェクトレイヤーという範囲指定が行えるレイヤーを設定し、範囲指定を行うと以下のように設定が行えます。この範囲を何に使うかはゲーム部分で自由に利用すれば良いのですが、得られるの矩形の4点となります。




●実践してみましょう

 まず「ファイル>新規ファイル」コマンドにて、どんな形状のマップを作成するか設定します。ここでは、平行四辺形の並んだクォータービューマップにしてみましょう。これって結構たいへんなんですよね。ここで指定する数値は平行四辺形の地面部分が収まるサイズのドットを指定します。使用するマップチップの画像はこれを使用してみましょう。



 こんな感じに空のマップが用意されます。さらに、使用するマップチップを登録して配置可能にしましょう。
 「マップ>新しいタイルセット」コマンドを実行し、タイルセットとして登録します。



 この時に、指定するタイルの高さは透明部分も含めたサイズになりますので、地面部分の高さしないように注意しましょう。
 正しく登録できると、こんなふうにタイルを配置可能です。



 次は、壁を配置しましょう。新しいレイヤーが必要になります。「レイヤー>タイル・レイヤーの追加」を実行すると、タイルレイヤーが1つ増えます。そのレイヤーをアクティブにしてタイルを配置すれば上のレイヤーに物が置けます。



 どんどん上層レイヤーを増やしていけば、2階、3階などどんどん増築できます。



 再度に範囲指定用のオブジェクトレイヤーを追加してみましょうか。
 「レイヤー>オブジェクト・レイヤーの追加」を実行すると範囲指定用のレイヤーが生成されます。これをアクティブにして、「オブジェクトを追加」アイコンをアクティブにすると、範囲指定ができます。



 以上です。
 駆け足ですが、ざっと使い方についてのみ解説してみました。

2011/12/10

coco2d Advent Calendar 2011 10日目: cocos2dキャラクタークラス設計の考察

cocos2d Advent Calendar 10日目、2回目の投稿なのですけどすみません。まだまだ空きはあるので我こそはという方はどしどし参加してみてください。前回、12/9日目の記事は@mybさんのこの記事でした。「CCMenuでラベル付きボタン、長押しボタン

 さて、今回はcocos2dでゲームを作る上で考え方の参考になるような記事を書ければと思ってこれを書いています。


<初級編>cocos2dキャラクタークラス設計の考察

●ゲームにおけるキャラクターに必要な要素
 ゲームには多くの場合キャラクターが登場します。プレイヤーキャラクター、エネミーキャラクター、アイテムなんかもキャラクターに含まれるかもしれません。落ち物パズルなどでも落ちてくるブロックのパーツはキャラクターのようなものと考えられます。ゲームキャラクターにはどんな要素が必要なのか、まずは考えてみましょう。

・横スクロールのジャンプアクションの場合(スーパーマリオブラザーズなど)
 A・キャラクターの絵
 B・動作によって変化する絵のパターン、場合によっては動く
 C・画面上の障害物によって移動制限がある
 D・何らかのアイテム効果によって変化することがある
 E・やられると画面から消える
 F・武器を発射することがある
 G・別のキャラクターを発生させることがある

・トップビューのアクションRPGの場合(イースなど)
 A・キャラクターの絵
 B・動作によって変化する絵のパターン、場合によっては動く
 C・画面上の障害物によって移動制限がある
 C2・画面上の建造物などによって一時的に隠れて見えなくなることがある
 E・やられると画面から消える

・シューティングゲームの場合(ゼビウスなど)
 A・キャラクターの絵
 B・動作によって変化する絵のパターン、場合によっては動く
 E・やられると画面から消える
 F・武器を発射することがある
 G・別のキャラクターを発生させることがある

 ざっと思いつく限り書いてみましたが、よくあるゲームジャンルではこんなところが求められるでしょうか。パズルゲームは特殊なのでここでは省きますね。他のゲームよりも求められる要素は少ないはずです。あとで復習がてら考えてみてくださいね。
 では、代表的な要素であるA, B, Eを考えてみましょう。


●キャラクターの絵を扱う
 基本的なCCSpriteの扱いとそれほど変わりません。そのままCCSprite型をキャラクターとして扱って構わないことも多いでしょう。キャラクターの絵が変化する場合には少し要素が増えます。たとえば、絵が変わるたびに新たにCCSpriteを生成して割り当てるとすると以下のようになります。gmCharaという名前でクラス定義したとして仮に書いています。

@interface gmChara : CCNode(あるいはNSObject) {
  CCSprite *sprite; //キャラクター用スプライト
  CGPoint accel; //加速度
  int vital; //体力
  ...などなど
}


 あるいは、CCSpriteを継承して絵のフレーム自体を変更する場合は以下のようになるでしょう。

@interface gmChara : CCSprite {
  CGPoint accel; //加速度
  int vital; //体力
  ...などなど
}


 絵のフレームを変更するには、以下のようなコードで行うことができます。CCSpriteで使用しているテクスチャに必要な絵が全て入っていて、その一部を切り出して使用しているという状況が前提となりますが簡単に絵を変更できます。CCSpriteを再生成して割り当て直すよりも高速なはずです。CGRECT_FOR_NEWは新たに指定したい切り出し用のCGRectです。spriteはCCSprite型とします。

[sprite setTextureRect:CGRECT_FOR_NEW];


 さて、これらの例に移動用の加速度パラメータはあるのに、移動後の位置を格納するプロパティは用意されていません。そうです。CCSprite自体に位置を扱うプロパティが存在するので、そちらを使う方が無駄が少ないからですね。ゲームの要求として表示位置とは別に位置情報が必要になる場合は別途プロパティを用意するべきでしょう。サイズ用のプロパティが存在しないのも同様の理由ですが、サイズの場合は当たり判定の大きさが絵の大きさとは異なることも多いので、別途プロパティを用意したほうがいいかもしれません。

 実は、ElectroMasterやHungryMasterでは上記の方法でキャラクタークラスが構築されています。おそらく無駄が多いと思います。やっちまいましたね。


●やられると画面から消えるために
 敵などをやっつけると、画面上から姿が消えるのがゲームのお約束であることはみなさんもお分かりのはず。
 消すだけなら簡単です。絵を取り扱うCCSpriteを表示しなければ良いのですから。しかし、表示を消しただけではキャラクターの存在自体はメモリ上に残り続けてしまいます。ですから絵を消す代わりにキャラクターのオブジェクトを解放しちゃってもいいかもです。いいかもしれません。ゲームに登場するキャラが有限である場合はこれで十分でしょう。
 では、ゲームに登場するキャラが無限に発生する場合は困ったことになります。敵が発生するたびにキャラオブジェクトを生成してゲームへ追加していくのも手です。一度倒してしまったキャラオブジェクトを再利用して追加のキャラとして復活させることもいいかもです。

 A・キャラが有限の場合
  ゲーム開始時にキャラオブジェクトを全て生成しておいて、倒すたびにクラス解放でいいでしょう。
  倒せば倒すほど処理も軽くなりますね。

 B・キャラが無限に発生する場合
  1. キャラが発生するたびにキャラオブジェクトを生成してゲームへ追加とする。普通にやるとオブジェクト生成時のオーバーヘッドが大きいかもです。次善の策としてはひな形オブジェクトを用意しておいて、そのコピーを追加する。(newChara = [[chara copy] autorelease];とすればコピーが生成できますね)

  2. キャラオブジェクトを再利用する場合。一度に画面に登場するキャラ数は事前に生成しておいたキャラオブジェクト数に制限されますが、キャラを初期値に最設定するメソッドを用意しておけば高速に復活させられそうです。また、一度に取り扱うキャラ数限界も管理しやすいので、メモリや処理能力的にも優しいかもです。手前味噌ですが、ElectroMaster, HungryMasterではこの方法を取っています。


●動作する絵のパターンを取り扱う(パターンアニメーション)
 キャラクターが移動すると、歩いたり走ったり、ジャンプボタンでジャンプしたり。敵に触ったら痛がったりというようなキャラクターの動きに関するものです。これが無いと物足りないですよね。多くはキャラクターの絵を複数用意しておいて、場合によって絵を切り替えて動いているかのように見せています。パターンアニメーションですね。
 cocos2dの入門書ではパターンアニメーションについて扱っていて、そういう動作を割りと簡単に与えることができるように説明されています。単一のパターンアニメーションを指定するだけなら難しくありません。よく悩んでる人が多いのは、右に移動すると右向きの絵で歩く、左に移動すれば左向きで、上なら上向き、下なら下向きといったように場合に応じて使用されるパターンアニメーションが変化するときにどうするのがよいかということでしょう。

 パターンアニメーションの定義は以下のようにできます。これは入門書にも書かれていますね。下記の例では、512x64のテクスチャを用意してあって、横方向に8枚の絵が並んでいる状態を元に、64x64の絵が0.3秒毎に変化していくというパターンアニメーションとなります。生成されたパターンアニメーションはCCRepeatForever型(CCAction系列として取り扱える)として最終的に定義されます。TEXTURE_FILE_NAMEはスプライトに使用するテクスチャのファイル名です。


CCTexture2D *texture =
  [[CCTextureCache sharedTextureCache]
    addImage:TEXTURE_FILE_NAME];
NSMutableArray *animFrames = [NSMutableArray array];

for (int x=0; x<8; x++) {
  CCSpriteFrame *frame =
    [CCSpriteFrame frameWithTexture:texture
      rectInPixels:CGRectMake(64*x, 0, 64, 64)
      rotated:FALSE
      offset:CGPointZero
      originalSize:CGSizeMake(64, 64)];
  [animFrames addObject:frame];
}

CCAnimation *animation =
  [CCAnimation animationWithFrames:animFrames
    delay:0.3f];
CCRepeatForever *action =
  [CCRepeatForever actionWithAction:
    [CCAnimate actionWithAnimation:animation
      restoreOriginalFrame:NO]];


 これをCCSpriteへ適用してパターンアニメーションを実行するには、通常以下のようにします。

[sprite stopAllActions];
[sprite runAction:action];


 こんな手順を適用するパターンアニメーションが変化するたびに行えば、パターンアニメーションを変更することが可能ですが、stopAllActionsを実行するとそれまで適用されていたアクションが解放されてしまうので、次に同じアクションを最適用する場合でも、新たに定義しなおしたアクションを与えなければなりません。となると定義に必要な処理が無駄になってしまいます。(stopAllActionsではなくstopActionを使用して名指しで停止するアクションを指定してあげても良いですが、同じことです)

 では、パターンアニメーションのアクション再定義に必要な処理を軽くするためにはどうすれば良いでしょうか。キャラクターの絵について説明した部分でも書きましたが、1つの方法としては事前に定義しておいたアクションオブジェクトをコピーして与えてあげれば良いです。あらたにオブジェクトを初期化するよりも処理は軽いはずです。もう1つ考えられるとすれば、stopActionなどを行なっても解放されないようにretainしておくのも良いです。retainしておくにはCCArrayやNSArrayなどに格納しておくのが呼び出すのも楽なのでいいでしょう。

 コピーして与える場合は、こんな感じでしょうか。事前にactionとして定義しておいて、使用する際に随時コピーします。コピーして与える場合は、キャラ毎にパターンアニメーションを保持するのではなく、キャラの種類毎に保持するような運用の場合に活きてきます。というのも単一のアクションオブジェクトを複数のスプライトに対して適用するとタイマーがそれぞれのスプライトから更新されて動作がおかしくなるため、各スプライトへ別々のオブジェクトを与えなければならないためです。個々のスプライトでアクションを保持していた場合はその点ではコピーする必要が無いと思われます。

[sprite runAction:[[action copy] autorelease]];


 でも、actionをまとめて管理しておくにはやはりNSArrayやCCArrayに入れておくと思いますので、以下のようにしますよね。そうすると、CCArrayなどに格納した時点でretainされますので、アクション終了後に解放されなくなります。というわけで、メモリの占有率が変化しないこっちのほうがおすすめです。

@interface gmChara : CCSprite {
  CCArray *actions; //パターンアニメーション保持用
  ...などなど
}


 実際の適用はこちら。0番目に登録されているパターンアニメーションを適用させています。spriteはCCSprite型とします。

[sprite runAction:[actions objectAtIndex:0]];


 以上のような取り扱いでうまく制御ができると思います。

 ところで、ElectroMaster, HungryMasterでは、かなり無駄な組み方をしていたことに、この記事を書きながら気づいてしまいました。上記のようなCCArrayなどに予めパターンアニメーションを格納して管理していたところまでは一緒なのですが、CCRepeatForeverを噛まさずに入れておいてアニメーション適用時にいちいちCCRepeatForeverを生成して適用しておりました。なので、その部分がオーバーヘッドになってました。これには理由があって、毎回新たにCCRepeatForeverを生成しないと再生開始フレームが最初からにならないかもしれないって思っていたからです。しかし、実際にはそんなことはなく過去に再生済みのアクションであっても最適用すれば最初から再生されますので、要らぬ心配でした。それから、アクションをコピーしてから適用しておりました。これも無駄で、CCArrayなどに格納した時点でretainされいるためにアクション終了時に解放されないわけです。なので、解放を恐れてコピーすることも無かったということになります。以下はそのダメコードの例です。

id action = [[[actions objectAtIndex:0] copy] autorelease];
[sprite runAction:[CCRepeatForever actionWithAction:action]];



 今回の記事はここまでにしておきます。今回解説しなかった障害物判定については機会がありましたらまた説明できればと思っています。次は@Seasonsさんの予定と聞いております。楽しみー。ではー。

 追記:11日目の記事はこちら:@Seasonsさん「cocos2dパフォーマンスチューニングTips

2011/12/02

coco2d Advent Calendar 2011 2日目: cocos2dでオリジナルフォントクラスを作ろうぜ!

@yoichinejiさんから連絡があって、なんでもcocos2dのAdvent Calendarをやるとのこと!なんだか楽しそうなので、1も2も無く参加してみましたー。というわけで、以前さいたまiPhone勉強会で発表した内容と同内容になりますが、詳しい解説を入れて再録させてもらいました。ネタはフォントクラスについて。一応中級編とさせてもらいます。内容的にはcocos2dを踏まえていますが、基本的なビットマップフォントの考え方みたいな感じになりますでしょうか。僕が勝手にこうだと思い込んでいるものなので、いろいろ間違ってたり、効率悪い点などご指摘いただけると幸いです。
 cocos2d advent calendarのatnd:http://atnd.org/events/22814
 以下本文ですー。


<中級編>cocos2dでオリジナルフォントクラスを作ろうぜ!

●フォントについてあれこれ

 ゲームではよく変わったフォントで文字が表示されることが多いですよね。特に昔のゲームなんかはゲームの世界観を表す上でかなり重要なポジションを担っていたと思います。iOSデバイスが出てからはそのスペックに適したゲームとしてレトロ風味のものも多数出ていますが、やはり時代性を表す上でドットで作られたフォントは美味しい要素です。
 以下の図は拙作のアプリからですが、上図が等幅フォント、下図はプロポーショナルフォントで日本語を取り扱っています。



 cocos2dにはTrueTypeフォントを直接展開してテクスチャ化し使用する文字スプライトクラス(CCLabelTTF)や、ツール(Hiero Bitmap Font ToolやBMFontなど)で事前にテクスチャ化して準備しておき、それを切り出して使用するためのフォントクラス(CCLabelAtlas, CCLabelBMFont)が元々用意されていますが、今のゲームのテイストの場合は良いですが、レトロ風味ということでいうと向いていません。
 なぜなら、公開されているツールを使用する場合だと、テクスチャにフォントがアンチエイリアス有りで展開されてしまったりするからですね。まあ、テクスチャの作り方にも依るので一概に向いていないとは言えませんが…。なお、上記の上画像の下の方に表示されている日本語の文章はCCLabelTTFを使用したもので、それ以外の文字はテクスチャからの切り出しです。
 あと、日本語のことを考えるともっと向いてない要素があります。基本的にキャラクターコードに従ってテクスチャへ展開するので、無駄な領域が多く必要になってしまうわけです。その点、自前でクラスから作る場合は、トリッキーなことも含めて自分の管理下にあるわけで、仕様から好きに決められて良いというところがあります。
 正攻法でいけば、cocos2dのフォントクラスに合うフォントファイルとテクスチャを用意すれば良いですが、それは別の機会にとっておきましょう。正直言うと調べて対応するより自分で作ってしまったほうが早いってのもあります。あと、どうせ作るならcocos2dのフォントプロトコル(CCLabelProtocol)に沿った作りにすればよかったのですが、それに気づいたのは作った後だったので、すみません。以下の例はかなり変則的です。

 と、そんな前提がありまして、自前でフォントクラスを用意してみてはどうですか?という例のご紹介です。
 サンプルコードはこちらからどうぞ:http://xionchannel.no-ip.org/advent_calendar_cocos2d_day2.zip


●等幅フォントクラスを作ってみよう!

 まずは、ドットを打って文字をデザインしていきます。要領はドット絵と同じですね。作りを簡単にするには等幅フォントがいいので、その場合は、格子状に文字を配置しながらデザインしていきます。

 フォント用のテクスチャができたら、それを切り出して使用するということになります。フォントクラスを簡単に設計するためには、文字コード順に文字が並んでいると良いです。途中必要ない部分があれば省いてしまっても良いです。省かれた部分のコードの取り扱いはフォントクラスの方で対処すれば良いです。
//指定のキャラクターのCGRectを返す
- (CGRect)getRectWithASCII:(char)ascii {
  char c;
  if (ascii>='0' && ascii<='9') {
    c = ascii-'0';
  }
  else if (ascii>='A' && ascii<='Z') {
    c = ascii-'A'+10;
  }
  else if (ascii=='!') {  //!
    c = ('Z'-'A'+10)+1;
  }
  <中略>
  else {
    c = ('Z'-'A'+10)+8;  //スペースに置き換える
  }
  return CGRectMake(8*(c%8), 8*(c/8), 8, 8);
}

 こんな風に文字コードを元に切り出しCGRectを生成して、CCSpriteを作成するようにします。あとはスプライトを並べていけば文字列の表示が達成できるというものです。等幅フォントの肝はこんな感じになります。簡単ですね。切り出しはもっとスマートにやる方法もありそうですね。汚いソースですみません。


●プロポーショナルフォントクラスを作ってみよう!

 レトロ風味から少し高級な印象になりますが、プロポーショナルフォントは見た目に美しいので、それをつくろうとする場合はどうしましょうか。はい。それぞれの文字の幅が異なる可能性があるので、その情報をどこかに持たなければなりません。

 まずはフォント用のテクスチャを用意してみましょう。横書き前提とすると、文字の高さは変化せず幅のみ変化することになります。たとえば以下のような感じでテクスチャを作ることになります。なお、縦書き用プロポーショナルフォントとする場合は、幅が変化せず、高さが変化するような作りが良いでしょう。もちろん高さも幅も変化するように作ることも可能ですが、それについては自分で効率良い配置を考えてみてはどうでしょうか。

 さて、テクスチャは用意できたとして、切り出しサイズをまとめる必要があります。どのような形式でも良いですが、iOSっぽくplistにいれてみた場合、以下のような感じにできます。データの置き方は自分でわかれば良いので、ほかの並びでも良いと思います。

 このデータを元にフォントクラス側でテクスチャを切り出して文字を並べていくことになります。文字コードとの対応は等幅の場合と同じようにしても良いです。以下の例の場合、カタカナも扱いたかったため文字コードを意識しない構造にしました。切り出し情報の中に対応する文字を情報として入れておき、ソース文字列に合致する文字があった場合に切り出して文字を配置するという流れです。処理は文字コードを使用したものよりも重いでしょう。

 以下は切り出しの例ですが、先ほどのplistをcharactersというNSDictionaryオブジェクトに読み込んでおきます。キーに対応する文字情報を入れてあるので、キャラクターが入ったNSStringを与えてやれば切り出しサイズが得られるという寸法です。
//指定のキャラクターのCGRectを返す
- (CGRect)getRectWithString:(NSString*)s {
  NSArray *rect = [characters objectForKey:s];
  if (rect) {
    float x = [[rect objectAtIndex:0] intValue];
    float y = [[rect objectAtIndex:1] intValue];
    float width = [[rect objectAtIndex:2] intValue];
    float height = [[rect objectAtIndex:3] intValue];
    return CGRectMake(x, y, width, height);
  }
  else {
    return CGRectZero;
  }
}

 以上のようにしてオリジナルフォントクラスの基本的な部分が出来ました。切り出し用plistを用意するのは面倒ですけど、その分、切り出し自体は簡単ですね。あとは、サイズに応じて並べるときにずらすドット数もあわせてやれば、プロポーショナルな文字を並べることができますね。

 なお、一番最初の例では、カタカナのみ日本語対応していますが、濁点や半濁点を別の文字としてまとめることでキャラクター数を減らしています。なので、表示する際に、濁点や半濁点がある場合は、内部で分割して2文字分として処理して表示するように調整を入れています。昔のファミコンゲームでよく使用している手法ですね。そのために、濁点・半濁点の対応表を作っておいて照らしあわせて処理するようにしています。
//文字スプライトの初期化(private)
- (CCSprite*) __makeCharacterSpriteFrame:(CCSpriteFrame*)f
                string:(NSString*)c
                position:(CGPoint*)pos
                isShadow:(BOOL)isShadow
{
  CCSprite *s = [CCSprite spriteWithSpriteFrame:f];
  [s.texture setAliasTexParameters];
  s.anchorPoint = ccp(0,0);
  s.scale = 2.0f;
  if (![c compare:@"゛"] || ![c compare:@"゜"]) { //濁点・半濁点
    s.position = ccp(pos->x -4*2, pos->y +8*2);
  }
  else {
    s.position = *pos;
    if (!isShadow) pos->x += s.contentSize.width*2;
  }
  return s;
}

//カタカナの濁点等を分解する(private)
- (NSString*) __correctString:(NSString*)string {
  NSMutableString *ret = [NSMutableString string];
  for (int i=0; i < string.length; i++) {
    NSString *c = [string substringWithRange:
            NSMakeRange(i, 1)];
    NSString *replace;
    if ((replace = [self.dakuten objectForKey:c])) {
      //濁点の差し替えがあれば差し替える
      [ret appendString:replace];
    }
    else {
      [ret appendString:c];
    }
  }
  return ret;
}


●フォントクラス応用編

 さあ、ここからがおいしいところですよ。おまけですけど。ゲームに於いて文字で表示されたメニューをタップしたり、文字の内容を変更したり、文字の色が変わったり、一文を与えただけで途中改行されたりというようなよく使う機能があると思います。そのあたりをメソッドやマクロとして組み込んでおくとゲームに使う場合にかなり便利になります。下記はそんな例です。

 ここから先は僕も作ってはいませんが、こんなネタもあったらいいんではというものをご紹介。文字がバラバラになって飛んでいくとか、文字が一文字づつカードがめくれるように回転するとか、ピカっと光るとか、シャクトリムシのように伸び縮みするとか、どれもcocos2dの基本機能を使ってアニメーション登録すればいけますが、一文字一文字バラバラに制御する必要があるので、フォントクラスの外側から制御するよりも、フォントクラス内でアニメーションを与えるような作りの方がやりやすいと思います。みなさんもそんな効果をつけてみてはいかがですか?ひと味違った文字表現になって楽しいですよ!

 そんなこんなで、フォントについてはここまで!お付き合いありがとうございましたー。

 3日目は、@ZuQ9Nnさんです。「cocos2d Advent Calendar 2011 -3日目 波紋のアニメーションやてみた。オッパイぷるるんもあるんだよ!