「Animate」Animateで３目並べを作ってみる（パート１）
 |
実際に作りながら説明していきたいと思います。
マルバツゲームではありますが、○と✕にこだわる必要はありません。３つ並べたら勝ちということだけを考えます。
９つの目を作る
最初に正方形を作成し、ムービークリップ化します。
次にムービークリップ内にタイムラインを延長し、フレーム毎に色が違う正方形を２つ用意し、計３パターンのマス目を用意します。
 |
| マス目に置いてない状態を作成 |
最初のフレームでは、マス目に何も置いてない状態にし、２つ目はプレーヤーが置いたときに表示する色にします。今回は水色にしました。
 |
| プレイヤーがマス目に配置した状態を作成 |
さらにフレームを追加して、ピンク色のマス目を用意します。こちらは相手が配置した時に表示する色となります。
 |
| 相手がマス目に配置した状態を作成 |
下の画像のように、タイムラインにAS3「stop();」を追加し、ラベルも入れています。
「c_off」では何も変化がない状態で、「p_set」はプレイヤーのコマを置いた時、「e_set」は相手のコマが置かれた時に、表示するためのタイムライン上の目印にします。
AS3で「gotoAndPlay("ラベル名");」を使い、移動先を指定する際にラクだからです。
＊シェイプトゥイーンは演出で入れたものです。
 |
３目並べを表現していくので、シーンに戻り、ムービークリップ化したシンボルを横３縦３で並べていき、９個のマスを作成します。
 |
| 作成したシンボルを９つのマスに配置する |
今回、配置した９つのマス目は将来的にタクティスぽくしたいと考えていたため、このような配置にしています。傾斜をかける必要はまったくありません。
クリックしてマス目を変更する
９つのマス目を配置後、シンボルに名前を付けていきます。名前を付けて行かないと、AS3でクリックアクションを追加できないのもありますが、管理する際にも必要なので、名前を最初に決めておきます。
 |
| シンボルを選択して、プロパティのオブジェクトで名前を追加する |
今回は「s_001、s_002・・・」という感じで９マスに名前を追加していきました。
次に、名前を追加したシンボルを選択したまま、AS3を追加していきます。
次のAS3を、９つのマス目分作成します。
s_001.addEventListener(MouseEvent.CLICK, set_action_1);
function set_action_1(event: MouseEvent): void {
s_001.gotoAndPlay("p_set");
}
このAS3は、マス目（s_001）をクリックすると、シンボル内の「p_set」へ移動する。というものです。
９つのマス目分のAS3を作成し、デバッグで確認してみましょう。
マス目に配置した判定を追加する
マス目をクリックすると、マス目が変化し配置したようになりますが、「変数」を使い、「配置した」ことを示すようにします。
今回は、先ほどのAS3に「p_set1 = 1;」を追加します。
s_001.addEventListener(MouseEvent.CLICK, set_action_1);
function set_action_1(event: MouseEvent): void {
s_001.gotoAndPlay("p_set");
p_set1 = 1;
}
しかし、このままではエラーが出るので、「var p_set1 = 0;」というAS3をシーンの最初のタイムラインに追加します。
個人的に管理が面倒になるので、変数の宣言はタイムラインの最初に追加しています。
 |
| シーンの最初のタイムラインで変数の宣言を行う |
デバッグを行うと、エラーが出ずに変数が使用できますが、見た目では変数が機能しているか判断できません。
変数の値を表示させる
変数を使うにあたって、変数の値を見るためのインターフェイスを用意します。
これは作りこむにつれ、変数の管理が複雑になっていく場合や、デバッグの際に役に立つので、覚えておきましょう。
ではさっそく、最初に四角でも良いのでオブジェクトを作成します。作成したオブジェクトをムービークリップ化します。
ムービークリップ内にタイムラインを追加します。以下の画像のようなタイムラインにし、タイムラインの1フレーム目だけに、AS3を追加します。
 |
| 2フレームのタイムラインを作成する |
ムービークリップ内は常にループした構造になります。つまり繰り替えし処理を行うようになるわけです。
また、タイムライン上のオブジェクト（緑色の正方形）の有無によって、繰り返し処理が行われているか確認することもできます。
次は上の画像でいう「DEBUG_VAR」レイヤーの1フレーム目に、デバッグ用に次のAS3を追加します。
Object(root).p_set1_txt.text = Object(root).p_set1;
 |
| テキスト枠を選択しダイナミックテキストに変更する |
