Flashで筆順再生

最近、ネットユーザーとして「おっ、こりゃ楽しいや」と思ったサイト、
「LineRider」
「noughts::」
「PICTAPS」（見つけた順）
この３サイトに共通するのは、ユーザーが自由に線を描けるということ、特に後ろ２つのサイトは、描いた順に再生されるのが見ててワクワクします。

いまさら後追いしても遅いですが、ユーザーに楽しいと思ってもらえる工夫として、有効そうなテクニック。この「筆順再生」をどう作るのかを考えてみました。

とりあえず現状のサンプル。

以下、僕の思考順にメモ。

筆順記憶ということで、onMouseDownかつonMouseMove時の毎フレームの_xmouse, _ymouseを配列に格納させることにする。とりあえずArray(x1, y1, x2, y2, x3, y3, …)という原始的な配列にしました。筆順再生時には、配列に記憶させておいた座標を、onEnterFrameで描画させていくことにしました。

Flash上でペンツールということで、最初にBitmapDataのsetPixelやcopyPixelで描画する方法を思いつき、できたのが下の例：

詳しくは調べてないけれど、どうも点描になってしまう。updateAfterEventしても、フレームレートを90ぐらいまで上げても点々感丸出し。フレームレートを上げてしまうと、onEnterFrameで筆順記憶させる座標データも増える（setIntervalすればいいけど）ので、このアプローチはやめました。

そこで、lineToなら点描にはならないのでテスト。以前はlineTo()を使いまくると、処理がもたつくので使えなかったのですが、Flash8のBitmapDataのおかげで、この問題が解決しました。ユーザーが一筆書くたびのonMouseUp時に、描かれた線をdrawしてビットマップとしてキャプチャ、別の場所にattachBitmapすれば見かけ上は変化なく、ラインをビットマップ背景にすり替えることができます。その後、lineをclear()、これを繰り返せば軽いです。

このままでは、筆順再生時にすべての線を一筆書きしてしまいます。ユーザーの筆順と同様に一旦筆を上げて、次の筆までの間を結ばせないための処理が必要。ユーザーのonMouseUp時に配列に中断を示す”hold”というストリングを入れることにした。
Array(x1, y1, x2, y2,…… , x180, y180, “hold”, x181, y181,…….)
将来的には”hold”の代わりに、色情報を突っ込む予定。後は再生時に分岐処理させて今に至ります。とりあえず今日はこれだけです。ソースがすごく汚いので、公開はもう少し作りこんでからにします。。

以後の課題

• 配列のフォーマットをどうしよう。文字数（バイト）的に見れば今のままが軽そうなのだけど、オブジェクトとか二元配列にしたほうが良いのだろうか。もちろんWebサービスっぽくなったときのユーザー情報や日時が出てきたらxmlで管理する予定。
• メソッドのパラメータ中、method(a.shift(), a.shift())が後ろから実行されるっぽいのを確認すること。
• 配列を２個ずらすのってどうやるか確認。今はshift()×２なので、格好悪い。
• 色、ブラシサイズ、消しゴム機能をつけること。
• データをPHPに渡し、サーバーにセーブ＆ロード。
• よそ様のパーツばっかり再現してんと、はよ作品つくらんかい！

関連記事：
「trick7.com blog: Flashで筆順再生２：色とブラシサイズ」
「trick7.com blog: Flashで筆順再生のflaソース配布します」