動くグリッド by tweener (2)
2007/04/28 20:53 - tweener
前回アップした、グリッドを構成する各セルがトゥイーンしながら現れるサンプルは、以下の4つのクラスで構成されています。
- メインクラス Main.as
- グリッドクラス Grid.as
- セルクラス Cell.as
- モーションクラス MotionEngine.as
メインクラスはドキュメントクラスなので省略して、その他3つのクラスの説明をします。
グリッドクラス Grid.as
グリッドを規定し、グリッドを構成するセルを生成するクラスです。
このクラスは Tweener.as 同様 static なメソッドを持つクラスとして設計しました。
以下の3つのメソッドをから成り立っています。
- セルを生成する
引数に、グリッドの横方向のセル数、グリッドの縦方向のセル数、セルのコンテナをとります。
ここでセルクラスを呼び出し、全セルオブジェクトを生成、各セルオブジェクトに自分のあるべき座標などを記憶させます。
- セル位置を調整する
このメソッドでグリッドをステージ中央に配置しますが、それは、おのおののセルに記憶させた自分の座標を書き換えることで実行しています。
現在のメインクラスでは、 Sprite を継承した main.as に対して各セルを addChild するコーディングをしています。
main.as の下にグリッドスプライトを生成し、それに各セルを addChild し、グリッドスプライトを移動させることで、グリッドを中央に移動する方が良いのかどうなのか、ちょっと迷うところです。
- セルを規定位置へ配置する
これはただ単に、各セルに記憶させた自ら配置されるべき位置情報を Cell.x、Cell.y に名移入するだけです。
セルクラス Cell.as
セルを規定するクラスです。
デフォルトでは、縦横それぞれ 20px の正方形を生成します。そして、その正方形をセンタリングします。
モーションクラス MotionEngine.as
セルのトゥイーン挙動を規定するクラスです。
このクラスも static なメソッドを持つクラスとして設計しました。
以下の3つのメソッドをから成り立っています。
- セルオブジェクトをトゥイーン前の状態にする
- セルオブジェクトをトゥイーンさせる
- 上記のふたつのメソッドをとりまとめる
前のトゥイーンが実行途中の場合の対処として removeTweens を実行した後に、上記のふたつのメソッドを実行します。
メインから呼び出すのはこのメソッドです。
現在のサンプルでは、各セルが所定の座標から動かずに、scaleX 、scaleY を 0 から 1 へトゥイーンするだけです。
モーションの挙動に「位置のトゥイーン」を取り入れたとき、現在の各クラスの設計でどこまで対応できるのか。
いろいろ検証していきたいと思います。
シリーズ
- 動くグリッド by tweener (1)
- 動くグリッド by tweener (3)
- 動くグリッド by tweener (4)
- 動くグリッド by tweener (5)
- 動くグリッド by tweener (6)
