TOP サイトマップ お小遣い タイピングゲームを作る講座 ゲーム DIABLO
チャット BBS リンク集 顔文字 逆アクセスランキング

Flashでタイピングゲームを作ろう講座3−1
〜タイピングソフトをタイピングゲームにする〜

完成例

3-1-1.ソフトをゲームにする為に

タイピング練習ソフトじゃ飽きて練習が続かないという人が結構いるみたいです。 わたしはアルファベットがでてくるだけの本当の練習ソフトと呼ばれるもので タイピング練習を楽しくしてましたが。
文字だけでてくるものだとゲームっぽくないので、やっぱりアニメーションをつけて、 少しでもゲームっぽく、飽きさせない為の処理を入れてみます。
といっても今回は完成例を見てもらえればわかるとおり、正解時と間違い時にオレンジ君 のグラフィックを変更しているだけです。
今回はグラフィックがついただけで、全然ゲームっぽくないですけど・・・。 ここはあなたのセンスにかかってきます。ゲームってやっぱり発想が大事ですからね。

余計な話が長くなりましたが・・、今回たいしてやってることはありませんので、 書く事もないんです・・(。-人-。) ゴメーン
とりあえず、希望の街J_TOWNのマスコットキャラクターオレンジ君で、 スタート時のグラフィック、正解時のグラフィック、間違い時のグラフィックと3つの パターンを作成しておきます。 それぞれラベルを『stop』、『true』、『false』で分けておきます。
正解した時に『true』ラベルに飛ばし、間違えた時に『false』ラベルに飛ばすように スクリプトを組みなおします。

3-1-2.スクリプトの修正

まず、タイピング成功時、間違え時に効果音を鳴らす為に正解時と間違い時をカウントしている インスタンスのスクリプトを修正します。

onClipEvent(load){
 this.seikai=0; //正解数を初期化
 this.machigai=0; //間違い数を初期化
 truesound=new Sound();
 falsesound=new Sound();
 truesound.attachSound("true");
 falsesound.attachSound("false");
 //正解数を1プラスする関数
 function seikaihenkou(){
  _root.orange.change("true");
  truesound.start();
  this.seikai=this.seikai+1;
 }
 //間違い数を1プラスする関数
 function machigaihenkou(){
  _root.orange.change("false");
  falsesound.start();
  this.machigai=this.machigai+1;
 }
 function end(){
  _root.seikai=this.seikai;
  _root.machigai=this.machigai;
 }
}

正解時と間違い時のサウンドを用意しそれぞれリンケージで『true』、『false』と 名前を付けておきます。
それぞれのサウンドのオブジェクトを作成しているのが、

truesound=new Sound();
falsesound=new Sound();

です。
スクリプト上から効果音や音楽を鳴らす場合必ずサウンドオブジェクトを作成しなくてはいけません。 オブジェクトの作成が終了したので、次に、そのオブジェクトに効果音を設定します。

truesound.attachSound("true");
falsesound.attachSound("false");

これでさきほどリンケージで設定した効果音『true』、『false』を正解時の効果音オブジェクト、 間違い時の効果音オブジェクトに設定することができました。
これを、正解時に実行される関数seikaihenkou()、間違い時に実行される関数machigaihenkou() 関数内で鳴らせばいいわけです。鳴らすスクリプトは

truesound.start();
falsesound.start();

で鳴らすことができます。これで効果音の設定は終わりです。

次はオレンジ君のグラフィックを変更するスクリプトですが、これも簡単です。
すでに正解時と間違い時に実行される関数を作っているので、その関数内でオレンジ君の グラフィックを変更させるスクリプトを入れればいいわけです。

_root.orange.change("true");

上のスクリプトは正解時のものをとりあげましたが、間違い時もほぼ同じです。
オレンジ君のインスタンスには『orange』という名前をつけたので、そのオレンジ君のインスタンス に設定されている関数change()の呼び出しと同時に、『true』というパラメータを渡しています。 これであとはオレンジ君のインスタンスに設定してあるchange()関数がオレンジ君のグラフィック を代える作業を行います。

それではオレンジ君のインスタンスに設定してあるスクリプトを見てみましょう。

onClipEvent(load){
 function change(temp){
  this.gotoAndStop(temp);
 }
}

すごく簡単ですね、さきほど取り上げたchange()関数、仮パラメータでは『true』、『false』という 文字を受け取りますので、それを

this.gotoAndStop(temp)

で受け取ったパラメータtempに飛ばします。例えば正解時にどうなるかというと、

this.gotoAndStop("true")

となり、this(オレンジ君)のラベル『true』に飛ばすという処理を行います。

3-1-3.完成

今回の講座終了です。
短いですが、手抜きをしているわけではありません・・・。
メインであるタイピングのスクリプト部分が終了しているから他のはデザインとか そういう部分になって、解説も難しくなるんですよね・・・
前回との変更点はあまりありませんけど、これで『グラフィック変換』と 『効果音を鳴らす』ということを学べたと思います。
さて次回は
3-2.クッキーを使用して個々のユーザーの成績を記録させる
です。クッキーをCGIで与える、参照するという部分をやってみようと思います。
クッキーはわたしも今勉強中で扱えてるとは言えませんが、でき次第、次回の講座が アップされることでしょう。お待ちください。

3-1-4.flaファイルのダウンロード

今回の講座では効果音を使ってます。
Flashファイルと同様、効果音も配布などしてはだめです。
わたしが購入したもので、著作権は販売元にありますので

講座1−1ダウンロード

lzhで圧縮してあります。

前に戻る 講座のTOPへ戻る 次に進む