「Animate」乱数でグラフィックをランダムに変更したい
 |
Animateでは、アニメーションだけでなく、「ActionScript3」の「乱数」を使って、グラフィックをランダムに変更することができます。
今回は少し難易度のある「乱数」を使って、グラフィックを変更するやり方を紹介したいと思います。
試作しているカードゲームを元に説明していてますが、少し内容を省いている箇所もあるのでご了承ください。
さて、ActionScript3で乱数を使う前に、グラフィックを用意する必要があります。
後でも先でも必要です。
ムービークリップを用意する
今回はグラフィックをAnimate上で作成し、ムービークリップシンボルに変換します。
下の画像は、試作のカードゲームで使用するキャラクターカードとして使用するシンボルとなります。
「CH01」とはキャラクター０１と言う意味で付けているだけです。試作段階とはいえ、変化が分かるようにしています。
 |
ムービークリップシンボルのタイムラインで、今回は9つのグラフィックのパターンを用意します。試作段階ですので、CH01、CH02・・・と文字で異なるグラフィックだということを明示させます。
9つのパターンが用意できたら、タイムラインにラベルを付けて、振り分けます。
最初のタイムラインでは、見た目何もない状態にしています。
 |
忘れてはいけない事の一つとして、ムービークリップシンボルに名前を付けます。
作成したムービークリップを選択したまま「プロパティ」ウィンドウ内にある「インスタンス名」に名前を付けます。
 |
この名前は、ActionScript3で乱数を用いる時に、ムービークリップシンボルに名前があることで、制御することができるようになります。
たとえば、名前を付けたシンボルのタイムラインのフレーム１０に移動するという制御を与えることができるようになります。
今の時点で、インスタンス名の役割はわかりにくいと思いますが、以降の説明でさらに説明していきます。
乱数を生成を使用する
Animateには、予め「乱数」のActionScript3が用意されています。
ツールバーにある「ウィンドウ」から「アクション」をクリックすると、ActionScript3を入力できるウィンドウが開きます。
 |
上の画像にもある「<>」は、コードスニペットと言われるもので、クリックすると「コードスニペット」ウィンドウが開きます。
このウィンドウでは、予めActionScript3の定型文が用意されており、「AcitonScript」にある「アクション」から「乱数の生成」をダブルクリックすることで、ActionScript3を記述してくれます。
 |
用意されている「乱数の生成」では、以下のようなスクリプトになっており、「0～100」の数字をランダムに「出力」ウィンドウ内に表示します。
function fl_GenerateRandomNumber(limit:Number):Number
{
var randomNumber:Number = Math.floor(Math.random()*(limit+1));
return randomNumber;
}
trace(fl_GenerateRandomNumber(100));
画面上に表示されるものではないので、初めて使う場合は「出力」ウィンドウを確認してみてください。
ちなみに、スクリプトは、コードスニペットを選択して右クリックし、クリップボードにコピーをクリックすることで、テキストとして利用することもできます。
乱数のスクリプトを変更してみた
しかしながら、上記のスクリプトでは、少し使い難いので、今回はランダムに表示する数値を9つに減らし、乱数で出力された数値を「0～8」の「変数」として使用し、さらに「if文」を使って、9つのパターンを用意してみました。
var ch_r;
ch_r = Math.floor(Math.random() * 8);
if (ch_r == 0) {
pl01_r = 1;
} else if (ch_r == 1) {
pl01_r = 2;
}・・・繰り返し（else if）・・・
上のスクリプトを説明します。
「ch_r」は、乱数によって、出力される「０～８」値の「変数名」です。
「ch_r」が「０」であった場合、新たに生成する「変数名（pl01_r）」に「１」を付与する。と言うものになっています。
さらに、「if else文」で、「ch_r」が「１」であった場合、生成する「変数名（pl01_r）」に「２」にする。というような感じで、９つ用意していきます。
長くなってしまうので、一部だけを表示しています。
今回は、ボタンをクリックしたら、乱数を生成するようにしているので、ボタンアクションにスクリプトを組み込んでいます。
 |
上の画像では、ボタンアクション内に、先ほどの乱数のスクリプトを追記しています。
クリックすることで、フレームを移動しつつ、乱数も生成しているアクションスクリプトになります。
ちなみに、これは試作のゲームで「QUEST」ボタンを押すと、タイムラインのラベル「battle」に移動して、乱数を元に「battle」に表示されるグラフィックが変更されるものを作っています。
グラフィックを乱数で生成した変数を使って変更する
上で説明した「変数名（pl01_r）」の「変数」を元に、グラフィックを変更します。
「ボタンアクション」では、オブジェクトをクリックすることでスクリプトを実行するものですが、「フレームアクション」ではスクリプトのある場所をタイムライン上で通過すると実行されるものです。
グラフィックの変更は、下記のスクリプトを「フレームアクション」として、タイムラインに追加して、実行します。
if (pl01_r == 1) {
pl01.gotoAndPlay("ch001");
} else if (pl01_r == 2) {
pl01.gotoAndPlay("ch002");
}・・・繰り返し（else if）・・・
最初に、グラフィックの変更パターンを９つ用意していたので、「if文」も９つ分岐させます。長くなるので、上のスクリプトでは省略しています。
さて、上のスクリプトで「pl01」とありますが、最初にムービークリップを作成した際に付けた「インスタンス名」です。「pl01」のタイムラインにあるラベル名「ch001、またはch002・・・」に移動すると言うものになります。
「インスタンス名」を付けないと、アクションスクリプトがどのシンボルのことを言ってるのよ？となってしまうので、上手く動作しないと思ったら、インスタンス名があるか確認しましょう。意外と付け忘れてたりします。
デバッグを実行し、動作を確認してみましたが、今のところ順調に動作しています。
この記事を投稿している段階では、試作のカードゲームは、さらに次のステップに進んでおり、キャラクターカードがランダムに決定され、さらに使用できるスキルカードもランダムで決定されるようにしています。
「乱数を生成」では、乱数の範囲が多くなると、その分正しく実行されているか確認する負担が増えます。ある程度生成する範囲を狭めておくことも大事です。
組み合わせによるパターンをランダムで生成する際には、膨大な数になります。ある程度は「if文」などで制御しておくのも良いでしょう。
