習作UI: 初めてのFlash その4
ネットの時代には「知識量・記憶力」よりは「適応力・応用力」の方がずっと大切

習作UI: 縁日の金魚を再現してみた

 Flashでプログラムを書く機会があったら一度は作らねばと思っていたのが、鳥や魚の群れ(flock)のシミュレーション。そこでカスタムクラスのプログラミングの練習も兼ねて作ったのがこれ。アルゴリズムそのものは、良く知られた(1)仲間と同じ方向に泳ごうとする気持ち、(2)仲間と一緒に泳ごうとする気持ち、(3)衝突を避ける気持ち、をそれぞれの魚に持たせて泳ぐ方向を少しずつ変化させる、というものである。

 プログラムはそれほど時間をかけずに作ることができたのだが、苦労したのがそういった「気持ち」の部分を表現するのに必用な具体的なパラメーター(どのくらい離れた仲間まで認識しているか、どのくらいの距離までの接近を許すか、など)を見つけ出す部分。金魚すくいの水槽の中の金魚の動きをちょうど良い感じで再現するためのパラメーターを見つけるのにかなりの試行錯誤が必要であった。

 しかし、これを作って思ったのは、Flashの開発環境は水と油で作ったドレッシングのようだということ。デザイナー向けの機能(keyframeとtweenを使ってmovie clipを作る部分)と、プログラマー向けの機能(ActionScriptを使ってインタラクティビティを実現する部分)の両方をキチンと使いこなすのは結構難しい(この例では、個々の金魚の尾びれの動きはmovie clipを使って実現しているが、泳ぎの方向の決定とフレームごとの位置の移動はActionScriptを使って実現している)。

 本来なら、こういったインタラクティビティの部分こそUIデザイナー自身がデザインしながら作るべきなのだが、この開発環境だとその部分はプログラマーに頼らねばならないのが残念なところだ。まあ、そのおかげで私みたいな「UIプログラマー」が職にありつけるのだから個人的には悪くないのだが、やはり開発ツールを作る仕事をしている私としては、「デザイナー自身がプログラムを書かずにインタラクティブなアプリケーションを作れる環境を提供せねば」とつくづく思ったしだいである。

 ちなみに、金魚を実際にすくうことは出来ないが、ちょっとしたお遊びインタラクティビティの機能も追加してみたので、マウスを水槽の上で動かしてみて欲しい。

Comments

Meigara

これはおもしろいですねぇ! ぜひ、餌をあげてみたいです。追いかけるだけでなく。

satoshi

Meigaraさん、さっそくコメントありがとうございます。餌ですか…考えて見ますね。手をたたくとよってくるとか^^;

ひろし

これは美しいですね!しばらくみとれてしまいました。

かわうそ

これは素晴しい。色のバリエーションを増やしたり影をつけたりするだけで、さらに見栄えするのではないでしょうか。

Ken

いいですね。清涼感があります。

ちょっと違いますが、わたしのブログで、海中散歩的な3DFlash(へのリンク)を紹介したことがあります。
http://fxsystemtrader.blogspot.com/2007/05/flash-http-www.html

みっきぃ

デスクトップや携帯の画面で泳がせたいですね。

hg

かなり活発な金魚ですね。
大部分がほとんど動かなかったりその場で停止してたりしたらお祭りの金魚っぽいかもしれませんw

ガなー

素晴らしい。どれぐらい時間かかりましたか?

satoshi

 プログラムそのものは3~4時間ぐらいで作りました。そこから、金魚のデザインも含めて色々なパラメーターの調整にさらに4時間ぐらいですか。上にも書きましたが、プログラムそのものはそれほど難しくなかったんですが、「金魚に見える」ようにするのにとても苦労しました。

F

魚の気持ちをプログラムで表現とは深いですね。とても面白いです。
私も機会があったらモデリングの勉強がてら作ってみたいですね。

dasign

はじめましてです。
dasignと申します。

satoshiさんの習作を参考にさせていただきました!
http://d.hatena.ne.jp/dasign/20081211
事後報告ですみません><

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Your Information

(Name is required. Email address will not be displayed with the comment.)