構築3 †
フロント・エンド・プログラムの製作の続きです。
前回は、Flex3のActionScriptを使って、ゲームボードを製作しました。 ゲーム開始前に、ゲームのルールや対戦相手を選択するメニューが必要です。 メニューは、Flex3のMXMLを使って記述します。MXMLを使うと、ActionScriptに比べて、 RadioButtonやComboBoxなど、WebのForm画面でよく使われているコンポーネントが組み込まれており、 プログラムが簡潔になります。
ただし、MXMLから、Spriteを使って書いたプログラムを呼び出す部分と、 ゲーム状態とメニュー状態を行ったり来たりする制御部分に注意が必要です。
Nimboard Classの修正と、MXML部分とのインターフェース †
上位のMXMLプログラムから制御できるように、ActionScriptプログラムの修正をします。 また、MXMLからSpriteで記述したプログラムを呼び出すために、インターフェース機能を担うクラスを追加しました。
-
NimUI.as
- NimboardクラスをMXMLのメイン部分に組み込むために、UIComponentでNimboardを包むクラス
-
Nimboard.as
- 上位のクラスから、イベントを制御するため、いくつかのMethodとAttributeをprivateからpublicに変更した
-
Stone.as
- 前回から、大きな変更はなし。石選択時の色を修正
前回は、package名を指定せずにいましたが、これらのActionScriptをnimパッケージとして、まとめておきます。
プログラム動作確認のため、山に配置する石をRandomに生成するようにしました。このMethodは、サーバーと 通信するようになれば不要になります。
MXMLのゲームメニュー †
-
main.mxml
- フロントエンド・プログラムのmain部分。ゲームルールのメニューや、ダイアログはこの中に記述
メニュー内の入力項目に漏れがあると、ダイアログを表示してゲーム画面に遷移しないようにしてあります。
メニューから、ActionScriptに適切に情報が受け渡されていることを確認するために、 ゲーム画面上のそれぞれの表示領域に情報を反映しています。 また、ゲームを繰り返しプレーした時の動作を確認するため、仮に1番目の山をクリアすると、 ゲームが終了したと判断しています。
メッセージ領域の表示も、動作を確認するための仮のものです。
main.mxmlを見てもらうと、内部はGame, Menuの状態を取るStateマシン構造を取っています。
このようなスタイルでFlexプログラムを作成することで、MXMLの得意な機能と、ゲームプログラミング上あつかいやすい、 Spriteや(今回は使用していませんが)DoubleBufferされた画面を統合することが可能になっています。
今回作成分のBuild †
上記ActionScriptのnimパッケージは、main.mxmlcと同じディレクトリ内にnimというディレクトリを作成して、 まとめて入れておきます。
./main.mxml ./nim/ ./nim/NimUI.as ./nim/Nimboard.as ./nim/Stone.as
前回同様、コンパイルはFlex3のコンパイルコマンドmxmlcを使ってコンパイルします。
mxmlc -debug=true -incremental=true main.mxmlc
Stand-aloneでも
flashplayer main.swf
で動作を確認できます。
今回作成したプログラムは、以下のように動きます。
Flash廃止につき、サービス終了...つづく (2009/5/26)