- 2006-11-26 (日)
- action script
最近、ネットユーザーとして「おっ、こりゃ楽しいや」と思ったサイト、
「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ソース配布します」
- Newer: Fuse Kitが2.0.5になっています
- Older: ゲーム開発のための数学・物理学入門
Comment:0
Trackback:0
- TrackBack URL for this entry
- http://www.trick7.com/blog/mt-tb.cgi/398
- Listed below are links to weblogs that reference
- Flashで筆順再生 from trick7.com blog
![FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付]](http://images.amazon.com/images/P/4881664573.01._SCTHUMBZZZ_.jpg)
