PixelText by Tweener (6)【閃光的網站・弛緩複合体 -Review Division-】

PixelText by Tweener (6)

2007/09/18 22:56 - tweener

前回はドキュメントクラスの手順と、Pixelize クラスのメソッドの概略を示しました。

今回からは、前者をワンステップずつ辿りながら、後者について若干詳しく説明します。

ドキュメントクラスの手順

クラスメソッドとして次の3つの配列を用意
1. 表示する文字列を格納した配列 strs
2. 各文字列におけるセルの座標を格納する二次元配列 positions
3. セルを格納する配列 cells
strs.length だけ、Pixelize.createPositions() を実行し、positions[n] に配列を格納
positions[n].length のうちの最大値を求め、その数だけセルを生成
モーション実行
1. Pixelize.setCellPosition( cells , positions[n] ) でセルの配置決定
2. cells をシャッフル
3. モーション開始

1. については取り立てて説明することもないので 2. から説明します。

第2ステップ　文字列を構成するセルの座標を取得

このステップでは、文字列を表示した AqLetter オブジェクトを BitmapData に draw した矩形を走査しますが、走査時に取得するのはセルを配置する座標だけであり、この際にセルを生成することはしません。

何故か。

このPixelText という作品は、領域をクリックするごとに、循環的に複数の文字列を表示します。

ここで考慮すべきなのは、必要とするセルの数は、各文字列で違ってくるということですが、セル数が少なくて済むなら、以下のような手段をとってもそれほど問題になることもないでしょう。

領域クリックのタイミングで前の文字列を構築するセル群を殺して、新たな文字列用のセル群を生成する
全文字列分の全てのセル群をあらかじめ生成しておく
例えば1番目の文字列には10個のセルが必要、2番目の文字列には15個のセルが必要、3番目の文字列には8個のセルが必要だった場合、33個のセルをあらかじめ生成しておく

当ブログ上で A. の原理を使用した作品はまだ示していませんが、 B. の原理を使用した作品は既に示しています。INVISIBLE がそうです。

しかし、この作品では使用するセルの数がかなり多くなることが見込まれます。

となると、領域クリックの度に大量のセルを消去・生成したり、たとえあらかじめとは言え物凄い大量のセルを生成するといった手段はあまりよろしくありません。

それにセルは全て同一の形状をしているので、INBISIBLE のように文字列ごとに別個のセル（B. の例でいうと33個のセル）を作る必要はないわけです。

よって、セルは全ての文字列で使い回すことにします。上記 B. の場合でいうと、15個のセルを作ってそれを使い回す、という設計になります。

まず、文字列を走査するときは座標だけを配列に格納します。

座標を返すメソッドは Pixelize.createPosition です。

Pixelize.createPosition(
　dispStr : String , // 表示文字列
　sw      : uint ,   // ステージ幅
　sh      : uint ,   // ステージ高
　scl     : uint = 1 // セルの1辺の長さ（ピクセル単位）
):Array {
}

dispStr は説明不要ですね。

sw と sh はステージにセンタリングするために使用します。

scl はいったい何なのか？　それは PixelText のバリエーション作品を説明する際に明らかになります。てなわけで今はスルーしといてください。

この Pixelize.createPositionを文字列の数だけ繰り返し呼び出し、その返り値を positions[n] に格納します。その結果、座標を格納する配列 positions は以下のような二次元配列となります。

positions = [
　[ {posx:x11,posy:y11} , {posx:n12,posy:n12} , ... ] , // (1)
　[ {posx:x21,posy:y21} , {posx:n22,posy:n22} , ... ] , // (2)
　[ {posx:x31,posy:y11} , {posx:n32,posy:n12} , ... ] , // (3)
　...
　...
];

(1)が1番目の文字列を構成するセルの座標の集まり、(2)が2番目の～、(3)が3番目の～ということですね。

次回に続く。