【cocos2d】でドラクエ風の文字表示を実装する

本日は、以前からどうしてもやってみたかった「cocos2dでの文字の表示」についてブログに書いていきたいと思います。

どうしてこれが必要かというと、私が作ったアプリでは、「指定した文字列が一気に表示されてしまっていること」で、個人的に何かゲームっぽくない感じがずーっとしていたことがありました。

[参考画像]

そこで今回の機会に、この文章表現に関してもう少しゲームらしくなるように色々方法を考えました。

今回、やりたかったこと

文字が一文字づつ表示される
ある程度も文字列になると、文字が移動して、古いものから消える
カーソルを押すと次の文章が表示される

昨日と今日をかけて、ようやく他の人に見せられる出来に仕上がりました。

ドラクエ風文字表示

先日、ドラクエのようなフリーの文字フォントを利用したので、ドラゴンクエスト風の文字表示を実装しました。

動画

簡単なコードのお話

簡単ですが、今回実装したことを書きます。

文字を順番に表示する

まずは、文字を順番に表示する方法を簡単に説明したいと思います。

今回の例では、一つのNSString型の文章を利用して表示しています。まずは、この文字列を一文字づつに分解しています。

こちらのサイトを参考にしました。

チーズくんの備忘録 [iOS]文字列を一文字ずつ取り出して表示する。

上記の方法で取り出した文字を、CCDelayTimeクラスを利用して、CCLayerに表示するタイミングを調整します。 [c] id delaytime = [CCDelayTime actionWithDuration:0.2 * time];

id callblack = [CCCallBlock actionWithBlock:^{

        CCLabelTTF *label = [CCLabelTTF labelWithString:string fontName:@"Mosamosa" fontSize:18];
        label.position = ccp(stringWidht+20*widthtime ,stringHeight);
        [self addChild:label z:10 tag:tagString];


 }];

[self runAction:[CCSequence actions:delaytime,callblack, nil]];

[/c]

文字の移動と文字の削除

次の課題は、文字が長くなった場合にどうするかです。文章量に関係なく、文字を表示させたい考えました。

文字の移動

文字が「会話のウィンドウ」一杯になる前に、一文字の高さ上に移動させます。これに関してはCCMoveByクラスを利用しています。

文字の削除

文字が上に移動すれば、「会話のウィンドウ」からはみ出してしまいます。これを削除しなくてはいけません。これは結構悩みました。

そこで私がとった策が、「文字列を格納する配列を複数用意する」ことです。今回の例では、文字列を３つの配列に格納しています。

新たに①の文字列に格納する前に、以前に格納していた文章をremoveすると文字が上に移動しても「会話のウィンドウ」から文字がはみ出さなくなります。

カーソルが押すと次の文字が表示される

ここまでの方法ですと、文章量が長い場合、最初の文字列は削除されてしまうので、遊んでいる人が見逃してしまう可能性があります。これを防ぐ方法として、カーソルが出た時にボタンを押した時に（例では画面を押す）次の文字列が出てくるようにしました。

これは、ほぼ丸一日悩みました。考えた方法は、表示させたい文章を、一度に表示させたい文字列の分解する方法です。 [c]

//表示させたい文章 NSString *string = @"スライムのこうげき。\n8のダメージをうけた。\n こうかばつぐんだ。";

//一度に表示する文字列に分解する NSString string1 = @"スライムのこうげき。\n8のダメージをうけた。"; NSString string2 = @"こうかばつぐんだ。"; [/c]

これを配列に格納して、最初の文章をまず表示させます。ボタンを押せば、次の文章を表示させる様にすると、それなりに見れるようになりました。

その他

その他、文字の位置など細かい調整と、他のCCLayerやCCSpriteから呼び出された際に上手く起動するかゴチャゴチャ弄って考えました。

最後に

今回は、実際何かに利用するわけでは無いのですが、以前からやってみたいことをやりました。ひな形はできたので、フォントや文字の大きさ、表示できる文字数を調整すれば、どのゲームでも実装できるようになったと思います。