FlashLite1.1でアドベンチャーゲームをつくる　第2回　『タイプライター風に1文字ずつ文字を表示しよう　文字表示編』

やあ！　町田で一番好きなラーメン屋は「おやじ」の谷口です！
前回の投稿から、かなり期間が空きましたね。サボってましたスイマセン。自分でも前回の内容忘れちゃってました、ははは。

この記事は、前回の記事のファイルをそのまま引き継いで参考になさってください。今回は文字を実際に表示させます。

前回までの作業で、シーンの構成は完成しました。それでは、文字を表示するためのシンボルを作っていきましょう。
この「シンボル」とは、FLASHファイルに文字を表示するための「部品」のようなものだと思ってください。

では、ライブラリウィンドウで右クリックして、新規シンボルを作ります。

シンボルの名前はなんでもご自由にどうぞ。種類は「ムービークリップ」にしましょう。

作成したら自動的にシンボルを編集する画面になるので、中身を作っていきます。

最終的に目指すタイムラインはこんな感じです。

4つのフレームで構成されており、前回のroot階層と同じように、「それぞれのフレーム」でこのシンボルが動作する「それぞれのシーン」を管理します。

まずは、「msg」という名前のレイヤーに、オブジェクトを置いておきます。

テキストツールで、W:１９６、H:44のテキストボックスを設置してください。座標は0,0の原点に揃えてください。

そして、プロパティを画像の通りに編集しましょう。

気を付けるところとしては、形式は「ダイナミックテキスト」、フォントは「_等幅」、変数名は「msgField_txt」にするということです。

この通りにしないと、端末によってはFlashや文字が意図した通りに表示されない可能性があります。フィーチャーフォンのFlashは制限が多いので、こうして細かく設定せざるを得ないのです。

それでは次に、一番上の「la」と名前が付けられているレイヤー。これはラベルを設定するレイヤーです。

ラベルは、4フレーム中、1、2、4番目のフレームに付与していく必要があります。

ラベル名はプログラム中に使用するものなので、間違えないようにしてくださいね。

今回は、

1フレーム目：init

2フレーム目：run

４フレーム目：wait

と、それぞれのフレームにラベルを設定しました。

最後に、２番目の「as」と名前が付けられているレイヤーです。このレイヤーにActionScriptを入力していきます。

ActionScriptは４フレーム全てに入力していく必要があります。

順番に見ていきましょう。

【１フレーム目】

[cc lang="ActionScript"]

//最初はここで待機
if (/:msg_text eq “”) {
stop();
}
else {
//初期化
i_text = 0;
}

[/cc]

ハイ、ここさらっと書いていますが、そこそこ重要かも。

２行目のは、「/:msg_textっていう変数に何も入っていなければ」っていうif文ですが、このmsg_text変数、皆さん覚えてますか？

この変数は、前回の投稿の「○データのセット」という欄で出てきた変数です。

[cc lang="ActionScript"]

//ﾃｷｽﾄ格納
msg_text = script_now;

[/cc]

みたいな感じで。

で、問題は、この変数はroot階層で定義された変数で、いま編集しているムービークリップ内階層ではそのままで使用できないのです。

なので、「if (msg_text eq “”) {」と普通に書いたら変数を参照してくれません。

root階層の変数を参照するためには、変数名の前に「/:」という記号をつけなくてはいけません。

この知識は、ここに限らず他の場所でもガンガン出てくるので注意してください。

じゃあ、次。

【２フレーム目】

[cc lang="ActionScript"]

//ﾃｷｽﾄの文字を進める
i_text++;

//表示
msgField_txt = mbsubstring(/:msg_text, 1, i_text);

[/cc]

２フレーム目では文字のセットを行っています。

このフレームに入る度にi_textという変数が１ずつインクリメントされます。（初期化は1フレーム目で0にしています）

mbsubstring関数は、変数の一部を切り取る機能があります。

/:msg_textに格納された文字列を、i_textで指定した文字数分だけ切り取り、msgField_txtにセットしています。

msgField_txtは、ちょっと上の方に出てきましたね。msgレイヤーに設置したテキストボックスです。

このテキストボックスに、切り抜いた文字を表示させているわけです。

【3フレーム目】

[cc lang="ActionScript"]

if (i_text >= /:msg_len) {
//全ての文字を表示していたらﾙｰﾌﾟ抜ける
gotoAndStop(“wait”);
}
else {
//ﾙｰﾌﾟ
gotoAndPlay(“run”);
}
[/cc]

ここでは、文章を全て表示しおわったかどうかを判定しています。

文章が全て表示しおわっていれば４フレーム目へ、そうでなければ2フレーム目に戻る、というif文です。

ようは、文字をタイプライター風に表示する処理は、この２フレーム目と３フレーム目を行ったり来たりして実現しているのです。

【４フレーム目】

[cc lang="ActionScript"]

//全文表示
msgField_txt = mbsubstring(/:msg_text, 1, /:msg_len);
gotoAndStop(“/:wait”);
stop();
[/cc]

４フレーム目に来ている、ということは、全文表示しおわっているので、クリック待ちの状態にしなければなりません。なので、改めて文章を全部セットして、stop();しています。

そして２行目、gotoAndStopでフレーム移動していますね。そしてその移動先指定が、「/:wait」。そうです、上述した/:記号は、フレームラベルにも適応できるのです。root階層の、ラベル名waitのフレームに移動してstopするよ、という意味です。

さて、以上でシンボルの編集が終わりました。

最後に、そのシンボルをroot階層に貼りつけるだけです。

こんな風に……

新規レイヤーに貼りつけます。貼りつける座標は、適当でもいいんですが、せっかくなのでADVゲームを意識して、画面の下の方に設置しましょう。

ここらへんですかね。フィーチャーフォンでプレイすることを想定しているので、画面が240×240だとしたら、X：22、Y:190、W:196、H:44くらいがちょうどいいです。

そして、もう１つ忘れてはいけない作業があります。貼りつけた後、そのムービークリップのプロパティ欄のインスタンス名に「mc_msg」と入力してください。

よっしゃ！　それじゃあ再生してみましょう。

Ctrl+Enterでプレビューを確認してみてください。前回の投稿分からうまく行っていれば、「こんにちは」とタイプライター風に表示されるはずです。

script_data変数の「こんにちは」の部分を他の文章に入れ替えてみると、その文章が表示されるはずです。

これで、ADVゲームの最も基本となる機能は完成しました！

次回は、クリックごとに文章が次々入れ替わるようにしましょう。