PixelText by Tweener (8)[了]
2007/09/20 22:12 - tweener
今回はドキュメントクラスの第4ステップについてです。
- クラスメソッドとして次の3つの配列を用意
- 表示する文字列を格納した配列 strs
- 各文字列におけるセルの座標を格納する二次元配列 positions
- セルを格納する配列 cells
- strs.length だけ、Pixelize.createPositions() を実行し、positions[n] に配列を格納
- positions[n].length のうちの最大値を求め、その数だけセルを生成
- モーション実行
- Pixelize.setCellPosition( cells , positions[n] ) でセルの配置決定
- cells をシャッフル
- モーション開始
第4ステップ 領域クリック時のモーション実行
a. 各セルの到達値を決定
領域をクリックするごとに UintCycle オブジェクトで循環数を取得します。
循環範囲は文字列の数である strs.length にします。これは positions.length と一致します。
つまり、循環数を n としたとき、 positions[n] は strs[n] の文字列を構成するセルの座標の集合になるわけです。
第4ステップ最初の処理は、この positions[n] と cells とを突き合わせ、cells の各要素である Cell オブジェクトの到達座標に、positions[n] の各要素である座標を代入することです。
こんな感じですね。
cells[0].posx = positions[n][0].posx; cells[0].posy = positions[n][0].posy; cells[1].posx = positions[n][1].posx; cells[1].posy = positions[n][1].posy; cells[2].posx = positions[n][2].posx; cells[2].posy = positions[n][2].posy; …… ……
この突き合わせをおこなうメソッドが、Pixelize.setCellPosition です。
Pixelize.setCellPosition( cells : Array , // セル格納配列 positions : Array // セル座標格納配列 ):void { }
ところで positions[n].length と cells.length はたいていの場合一致しないことは、今までの説明からお分かりかと思います。
positions[n].length は cells.length とイコールかもしくは小さくなり、cells に余りが出ることがあるわけです。
Pixelize.setCellPosition は、そのように余った Cell オブジェクトに対して「使用しない」というフラグを立てます。
b. セル格納配列のシャッフル
cells に格納された各 Cell オブジェクトに到達値を設定し終えたら、cells をシャッフルします。
シャッフルをおこなう理由は、セルが飛び回る範囲を広くするためです。
c. モーション開始
で、cells のシャッフルが終わったら、いよいよセルのトゥイーン実行です。
MotionEngine クラスの仕組みは、過去に説明した MotionTypo や Tiling を参照してください。
以上が最もベーシックな PixelText についての説明です。
また例によって、表示文字列をユーザー入力できるようにした PixelText を、本館ホームと Swf 展示コーナーにアップしました。
なお、そのうち稿を改めて、PixelText のバリエーションを提示したいと思います。
このコーナーはここまで。
シリーズ
- PixelText by Tweener (7)
- PixelText by Tweener (6)
- PixelText by Tweener (5)
- PixelText by Tweener (4)
- PixelText by Tweener (3)
- PixelText by Tweener (2)
- PixelText by Tweener (1)