これは、2005年春から夏にかけて、FLASHのAction Scriptに取りつかれた時の記録である。およそ3ヶ月の間、私は、仕事もそっちのけで連日徹夜するほど夢中になった。そしてある日、つきものが落ちるように、突然興味を失った。このときの様子は、私のブログ「あと何日かな〜/Action Scriptに挑戦!」で。


習作No.29
魚の泳ぎ-3/餌を与える
魚の泳ぎ-3/餌を与える 動きに変化をつけるため、青い魚に餌を与えてみることにした。hittestを仕込んだ餌をランダムに落とし込み、青い魚のエリアに入った時にヒットする、というもの。魚が餌をとる時に、そっぽを向いていたのではおかしいので、常に餌の方を向いているようにしてみた。餌をとった時の動きはまあまあなのだが、餌を狙っている時の動きが予想外。常に狙っているのではなく、あるエリアに餌が入り込んだ時だけ、餌を狙うようにしたかった。また、魚に立体感(厚み)が欲しいのだが、平面を反転させているだけなので、しょうがない。


習作No.28
魚の泳ぎ-2/写真を当て込む
魚の泳ぎ-2/写真を当て込む プロトタイプが、反転時に横に延びてしまうという計算式のミスがあるようだが、解決できないまま、魚の写真を図鑑からスキャンして当て込んでみた。魚が反転した後、横長になってしまうのがちょっと気になるが、動きとしてはまあまあ。水槽をイメージして、揺れる水草と泡を加えてみた。水草は、No.6の動きとまったく同じ。泡は、No.12のシャボン玉を応用したもの。考えてみれば、本当に基本的なスクリプトしか使っていない。水草の複製過程が表示されてしまうのを、消したいのだが、消せない。

習作No.27
魚の泳ぎ-1/プロトタイプ
魚の泳ぎ-1/プロトタイプ 歩行は非常に複雑で、しかも写真を当て込むのも難しい。そこでふと思ったのが魚の動き。動く部分があまりなく、あとは反転する動作などを考えればいい。これなら簡単そうだ。まず、魚の動く部分、「尾」と「ひれ」は、動き方がそれぞれ違う。そこをどう動かすかだが、動く部分をパーツとして切り離し、それぞれに動きを与えて合体するという方法がよさそうだ。自由に動き回るスクリプトは頭に当る部分に書き込み、他の部分はその頭を追随する、という、これまで練習してきたスクリプトが使えそうだ。まず、プロトタイプ。

習作No.26
歩行_3/ゲーム風
歩行_3/ゲーム風 計算式を何とかこなして、歩く動きはできた。これだけではおもしろくないので、これまで学習してきたスクリプトを応用して、ゲームのようなものを作ってみた。歩くロボットの全く同じ複製を作り、障害物をクリアして、どちらが先に行けるか競うもの。いまのところ、見ている側がコントロールすることはできないが、ポイントを付加するような機能を考えれば、何かゲームが作れそうだ。絵は、イラストや写真を当てはめればいいのだが、現在線で結んであるところや手の動きなどに苦労しそうだ。

習作No.25
歩行_2/膝を回転
歩行_2/膝を回転 足下を動かすのでは、うまく行かないことに気が付いた。足の動きに、膝や腰の動きを合わせるのは至難の技だ。足の構造を考えれば、歩くということは、腰を中心に、膝という点とかかとという点による円運動だ。腰、膝、かかとを線で結べばいい。先の「線で結ぶ」スクリプトが役に立ちそうだ。まず、腰を中心に、膝がある一定角度で、交互に円運動を行う。かかとは、その膝を中心に一定角度で円運動を行う。そうすれば、歩いている感じを出すことができる。うまくいった!と思ったら、よく見ると、何度か折り返すたびに、どんどん膝がまがっていく。折り返す時に、そのままバックするように折り返したために、膝の運動が逆になってしまうことと、腰と膝とかかとの計算式が間違っているようだ。

習作No.24
歩行_1/足を交互に動かす
歩行_1/足を交互に動かす 先の円運動がロボットのようでおもしろかったので、ロボットが歩くイメージを考えてみた。まず、足下の動きなのだが、右と左が交互に動くことが前提。一歩で動く距離を決め、それを交互に行う。それもただ、横に動くだけでは足の動きに見えないので、放物線を描くように動く。当然、足の上には胴体や頭などがあるので、その動きとの連動も必要だ。まず、この足を交互に動かすというのが難問で、なかなかうまく行かない。ご覧の通り、計算を間違えると、折り返した後に動きがばらばらになってしまう。

習作No.23
線で結んで回転_2/カビのように増殖
線で結んで回転_2/カビのように増殖 前の動きを一歩進めて、各点が接触したら合体するようにしたらどうなるか。細菌がごにょごにょ動きながら、カビのように増殖していくようにはならないか。親になる一本の物体を作り、ランダムに複製したものをhittestで合体させる。何とかなりそうなので、まず、合体させるプロトタイプを作ってみた。うまくいきそうなのだが、合体すると動きがおかしくなる。ランダムに動くコマンドを与えられた二つの点が、それぞれ合体した場合、どちらのコマンドを優先するのか決めないと、点同士が戸惑ってしまうのだ。失敗作。

習作No.22
線で結んで回転_1/アクロバット風
線で結んで回転_1/アクロバット風 ただ線で結ぶだけでは、単調でおもしろくない。もっと予想できないようなおもしろい動きはできないだろうかと考えたのがこれ。ある点を中心に、ランダムな角度で円運動する点があり、またその点を中心にして円運動する点がある。これをいくつか繰り返し、それぞれの点を線でつないだら、おもしろい動きにならないだろうか。元になっている点も自由に動いていれば、ダイナミックになる。予想通り、不思議な動きだ。まるで器械体操をするロボットのようだ。

習作No.21
線で結ぶ-4/揺れる
線で結ぶ-4/揺れる 前の二つが、あまりにも抽象的すぎたので、もっと何かに応用できそうな、具体的なイメージを作れないかと考えたのがこれ。草とか、麦の穂が揺れるイメージ。1点を固定し、他の一点を、逆さになった振り子のような動きにして、それを規則正しく複製する。風に吹かれるように、しかも静かにゆっくりと揺れるイメージ。動きが単調になることを避けるために、点の動きはランダムにし、右側にある点ほど激しく揺れるようにする。さらに、動いている点を、ランダムに光らせた。

習作No.20
線で結ぶ-3/曲線
線で結ぶ-3/曲線 直線がまあまあおもしろかったので、曲線ではどうなるか試してみた。「直線で結ぶ」というコマンドを「曲線で結ぶ」に変えただけだ。こちらの方が、放物線のカーブも変わり、動きが激しくなる分、おもしろいかもしれない。などと思いながら、ちょっとトイレにいって戻ってみると、画面は真っ黒で、パターンが全くなくなっている。一瞬エラーかと思ったのだが、何のことはない。点がフレームから遠ざかってしまったのだった。移動に制限をかけないと駄目なようだ。

習作No.19
線で結ぶ-2/直線
線で結ぶ-2/直線 ここまでいろいろ覚えてきた、自由な動きと増殖のスクリプトを使って、まず、点と点を直線で結んでみることにした。どんどん増殖していく点を、とにかく線で結んでしまう。どの点も常に自由に動いており、さらにどんどん増えていくので、どうなることやら、収拾のつかないパターンになりそうだ。と思いつつ作ってみると、これがまあまあおもしろい。線に秩序がないところに、落書きのような楽しさがある。ぼーっと見ている分には暇つぶしになる。

習作No.18
線で結ぶ-1/プロトタイプ
線で結ぶ-1/プロトタイプ 点と点を線で結ぶことができれば、いろいろなことができそうだ。特に動いている点同士を結んだらどうなるか、興味がある。プロトタイプを作り、試してみることにした。動かない緑の点と左右に動いている青と赤の点をそれぞれ直線と曲線で結んでみる。直線で結んだ場合は、線がゴムのように伸び縮みするだけだが、放物線で結んだ場合は、2点間のX軸とY軸の距離によって放物線のカーブが異なることがわかる。これをうまく応用すればおもしろいパターンができる。

習作No.17
ランダムに動く-4/ライン再び
ランダムに動く-4/ライン再び Action Script辞典で、点と点をラインで結ぶスクリプトを見つけたので、No.16でできなかったことができそうな気がして、再び挑戦。考え方としては、左右に固定した点を置き、間にランダムに動く点をいくつか置く。それぞれの点を直線で結結べば、ランダムに動く屈曲したラインができる。これができてしまえば後は簡単。No.3のスクリプトを応用して、屈曲したラインを均等位置に複製し、複製された子供が親を追い掛けるようにすればいいのだ。思った通りだ。

習作No.16
ランダムに動く-3/ライン
ランダムに動く-3/ライン ラインをつなぎ合わせ、そのつなぎ目をランダムに動かしたらどうなるか。簡単な直線のパターンを動かしたいのだが、簡単そうに見えて、できない。ラインの長さをランダムに変えればいいと思っていたのだが、ライン同士の関係があって、うまく動いてくれない。ついにあきらめて、方針を変更。等間隔のラインパターンを2枚つくり、間隔分だけずらして重ね、マスクをかける。そのマスクの幅をランダムに変えることで、動いているように見える。一種のごまかし。

習作No.15
ランダムに動く-2/生命体のイメージ
ランダムに動く-1/パターン 円形のパターンではあまりおもしろくないので、もっと立体的で、生命体のような動きを試してみた。考え方は、No.14と同じで、円形の代わりに、球体が微妙に動いてくれればいい。まず、同心円をレイヤー別に描画し、グラデーションで、球体らしく見せたものを作る。球体をスライスして重ねたイメージだ。同様のモノを数個作り、トランプを切る時の要領で、スライスされた球体(レイヤー)を交互に挟み込む。そうしておもむろに、ここの球体をランダムに動かすと、この画面のように、もごもごとした動きになるのだ。これを考えつくのに、数日かかったように思う。ただ動くだけではおもしろくないので、「Hittest」でマウスを球体に合わせると、弾けるようにしてみた。弾けたところをみれば、スクリプトの考え方が理解できるのではないかと思う。

習作No.14
ランダムに動く-1/パターン
ランダムに動く-1/パターン 半径の異なる同心円をレイヤーで積み重ね、それぞれをランダムに動かしたらおもしろいのではないかと思った。モノをランダムに移動することは既に習得済なので、簡単にできそうだった。ところが、円がそれぞれ勝手な方向に動きだし、収拾がつかなくなる。ある一定の範囲を定め、その範囲の中でランダムに動くようにしないとだめだ。何度も失敗しながら、ようやくここまでたどりついたのだが、まだときどき、何かの拍子に暴走することがある。原因は不明だ。

習作No.13
弾むシャボン玉
弾むシャボン玉 弾むシャボン玉を作れないか。シャボン玉をぷるぷる震わせるためには、シャボン玉をランダムに歪ませる必要がある。スクリプトで作成した円形であれば、ある程度歪ませることはできそうだが、このシャボン玉は画像だ。画像の縦横比をランダムにしかもスムーズに変えることができれば、何となくぷるぷる感が出るかもしれない。何度も試行錯誤しながら、ようやくここまで到達することができた。それでもやっぱり物足りない。実物のシャボン玉を見ると、かなり大きく歪んでいる。

習作No.12
画像のランダム複製/シャボン玉
画像のランダム複製/シャボン玉 画像の複製を、サイズも発生間隔もランダムに発生させるスクリプトに挑戦してみた。よくあるのだが、シャボン玉が次から次に飛んでくるイメージを想定した。シャボン玉の画像づくりにちょっと手こずったが、スクリプトはそれほど苦労することなく、なんとかできた。ただ、これだけではおもしろくないので、シャボン玉に触れると破裂するようにしてみた。しかし、何かが違う。シャボン玉特有の、あのぷるぷると弾む感じがないのだ。上のNo.11と同様、もう一つリアル感がない。

習作No.11
ランダムに分裂して増殖
ランダムに分裂して増殖 Flashの動きは、どこか機械的で冷たい感じがするものが多いので、もっと生命体を感じさせるようなものはできないかと思い作成したもの。イメージしたのは、どんどんん成長して増殖するウイルス。増殖するのは簡単なのだが、生命体のような動きに苦労した。本当は球体そのものもぷよぷよとした感じにしたかったのだが、この時点では、まだできなかった。このままでは、ウイルスがどんどん成長しながら増殖してしまうので、ある程度成長したところで破裂するようにした。

習作No.10
平面図形のランダム複製/メッセージ
平面図形のランダム複製/メッセージ No.9の「冬木立ち」を応用して、カタカナのメッセージのようなものを自動生成できないかと思って作ったもの。結局は、カタカナの文字を作ることはできなかったのだが、何となくおもしろいパターンができた。これは、一見簡単そうだが、非常に難しい。4×4のブロックスペースの中で、複製された四角が、色を変化させながら動き、一定の動きが終わると、次のブロックスペースが動き出す、という連続がなかなかできない。この複製する動きを制御できれば文字を作ることも可能だと思うのだが。

習作No.9
平面図形のランダム複製/冬木立ち
平面図形のランダム複製/冬木立ち これは非常に苦労したFlash。四角形を複製して冬木立ちのイメージを生成しているのだが、この枝振りを作り出すのが一苦労。まず木の幹を作り、それに枝を付けていく、ということを考えで、始めたものの、幹は簡単に作れても、枝を作ることができない。枝のつく順序や、枝の先がさらに二股になっていくところなど、それこそ、夜も寝ないで考えて、二週間近く、頭の中ではできたと思っても、いざ実行してみると全く動かない、といった日が続いて、ある日突然出来上がったもの。

習作No.8
平面図形の複製
平面図形の複製 線だけでなく、スクリプトで書いた図形でも、写真などの画像でも、動きのあるアニメでも複製することができる。これは、直接スクリプトで書いた三角形を、一定のパーセンテージで拡大しながら、色も一定の法則で変化しながら、渦巻きの数式上に複製され、増殖していくもの。これもこのままでは無限に拡大していくので、ある一定のところで、元に戻って繰り返すということにしている。ただ、これは、色の設定にバグがあり、不自然なところがあるが、原因不明で直せなかった。

習作No.7
ラインの複製
ラインの複製 モノの移動は、基本中の基本だが、モノの複製もAction Scriptでは、よく使用される基本スクリプトだ。このFlashは、画像を使用せず、すべてスクリプトで作っている。太さを固定したラインを設定し、ランダムな長さのラインの複製を、X軸に対しては規則的に、Y軸に対しては、ランダムに発生させるスクリプト。このままでは永久に複製を作り続けるので、複製が三段完成したところで、ドミノのように崩すことにした。変化が少なく、あまりおもしろくはないが、何かに応用できそうだ。

習作No.6
追いかけて捕まえる
追いかけて捕まえる 「hittest」をマスターしようと、「食虫植物」というものを考えてみる。当初は、花に虫が近付いたら捕まえてしまう、という構想だったのだが、それだと、ただ虫が捕まるだけでおもしろくない。捕まった虫は逃げようとし、花は虫を追い掛けようとする。草は揺れていなければならない(これはNo.2の応用)。しかし、思わぬ誤算があった。虫の動きが早いため、草の茎の動きが追い付いていかないのだ。しょうがない。花だけが虫に飛びついていくようなスクリプトにしてしまった。

習作No.5
逃げる
逃げる 「hittest」というスクリプトがある。モノとモノの領域が重なったと判定した時に、何かイベントを起こすものだ。Flashのシューティングゲームは、「hittest」を使わなければおそらく作れない。例えばこれが「hittest」。この青いボールの、ある決められた領域に、マウスが近付いたら逃げなさい、というスクリプトが書いてある。だから、マウスを近付けるとボールが逃げる。簡単なようだがこれがなかなか難しい。逃げるといっても、どこにどういう風に逃げるのか。それが問題だ。

習作No.4
親を子供が追いかける-2
親を子供が追いかける-2 習作No.3の、どこか芋虫とか蛇、竜などを思わせる、生物的な動きがおもしろいので、ちょっとイメージを膨らませ、物体をむかでのようなデザインにしてみた。動きのスクリプトはNo.3とまったく同じなのだが、長く張り出したバーが、意外な動きを見せておもしろい。どこか宇宙のイメージもあったので、周りに小さな宇宙船をイメージした物体を飛ばせてみる。これも一つの親から複製を作って、No.1と同様、ランダムな動きにした。メインの物体が宇宙船の母船のようにも見える。

習作No.3
親を子供が追い掛ける-1
親を子供が追い掛ける-1 どの入門書にも書いてある、複製のスクリプトと前のNo.1、No.2のスクリプトを組み合わせた、優雅に、自由に動く物体。
親(先頭にいる物体)の複製が親を追いかけていくというもの。自由に動き回る親を(No,1の応用)、まず、その複製である子供が追いかけ、その子供を次の子供が追いかける(No.2の応用)という考え方。動きに緩急をつけ、表情を出そうとしたのだが、これもNo.1と同様のバグがあるようだ。どこかが間違っている!

習作No.2
だんだんゆっくりと近付く
ゆっくり近付く 例えば、ある標的に近付いて止まるという動作は、入門書に書いてある。例えば、マウスを動かすと追いかけてくるというスクリプト。スクリプトを書いてみれば分かるのだが、標的がパッとマウスのポインタにくっついてしまい、どこか不自然だ。もっとゆっくりと優雅に近付いて欲しい場合もある。最初は早く、標的に近付くに連れてゆっくりとした動きにしたい。これも意外に難しい。試行錯誤で一晩かかってしまった。ポインタの周りで恥じらうように躊躇するところが最大のポイントだ。

習作No.1
ランダム移動
ランダム移動 action scriptの基本は移動。直線的に移動し、反転して戻ってくるというスクリプトは簡単で、すべてのAction Script入門書には書いてある。しかし、これは三つの物体が、それぞれ自由曲線を描いてランダムに移動している。こうしたスクリプトは、入門書には、あまり書かれていないが、そこは、基本的な動きの応用で、頭を悩ませるわけだ。スクリプトにバグがあるようで、時間と共にどんどん移動の幅が大きくなり、長時間そのままにしておくと、画面からはみだしてどこかにいってしまう。




since april.2005:y.ohta Copyright(C)2005〜 All Rights Reserved. 無断転載を禁止します。 |since2008.11.17