ただいま横浜のElectrical Fantasistaに展示しているGyorolでは、携帯で釣った魚を水槽に放つことができます。 その魚たちに自然な間合いで泳いでもらえるよう、BOIDというアルゴリズムを使いました。 結構適当な理解でもそれっぽく動いてくれて嬉しかったのでご紹介します。 その概要は、ほぼ日刊イトイ新聞 - がんばれ森川くんの遺伝子くんがとても分かりやすいです。 実装はt-pot 『水族館を作ろう:BOIDの基本』に載っているコードをなんとなく眺めながらやりました。 本当になんとなくの理解でそれらしく動いてしまうのですが、気を使うのは、魚同士が引っ張り合ったり整列したりする、パラメータの度合いの調節です。この値次第で動きが全然変わってしまいます。 以下は、ほぼGyorolで使われているBOIDの実装のサンプルです。
横浜ZAIMにて展示中のケータイ釣りコンテンツ、Gyorolのオンライン版を公開しました。ぜひ、ケータイを片手にアクセスしてみてください。 http://gyorol.bascule.co.jp/ 遊び方はとても簡単。 画面上に表示されるQRコードのURLにジャンプするとFlashが表示され、あなたのケータイが釣竿になります。 池に浮きを落とししばらく待つと、浮きが沈みケータイがブルブルしますので、タイミングよく引き上げましょう。 見事魚が釣れたらおめでとうございます!水槽に放って愛でましょう。 巨大な古代魚が釣れるという噂もありますので、根気よくトライしてみてください。 Gyorolの仕組みには、以下のような特長があります。 ・リアルタイム連動 ケータイとWEBがリアルタイムに連動した、今までにない新しいインタラクティブな体験です。 ビジョン上で魚が引いたときにケータイが
DisplacementmapFilterは面白い表現ができるのですが使いにくいです。 photoshopのワープツールのようにできたら良いなと思って作りました。 1.テキストフィールドに画像(600*600以下が良いです)のパスを入力してloadボタンを押してください。 2.画像が表示されたら、青と赤の四角いポインタを適当にいじってください。 3.納得いったら、drawボタンを押してください。 4.右側に変形後の画像が表示されます。 source です。 phpを使うと画像をアップロードしたり、displacementmap画像をダウンロードしたりできるようになります。 1.phpフォルダ内のファイルをphpが動くサーバーにあげます。 2.config.xml内のuploadURLとdownloadURLを1でアップしたphpファイルの場所に書き換えます。 phpは良く分
Flash以外のエディタでコード書いてる時に、即座にFlashでムービープレビューさせる方法を発見しました! Windowsでの話です。 fl.getDocumentDOM().testMovie() とエディタで書き、.jsflという拡張子で適当なフォルダに保存します。 そのショートカットをデスクトップに配置します。 右クリックしてプロパティを表示し、適当なショートカットキーを設定します。 以上で、メールを見ているときや、デイリーポータルを見ている時など、思い立った瞬間にムービープレビューすることが可能になります。 デスクトップのショートカットキーは各アプリケーションのショートカットキーよりも優先されるみたいなので、 普段使わないようなキーの組み合わせにしておくのがよいかと思います。僕はCtrl + Shift + Alt + \にしました。Enterキーをショートカットキーとして
7月10日に行われたAdobe AIR Developers Nightで2種類のデモプログラムを紹介させていただきました。 そのうちの一つ、Airworksについてご説明します。 Airworksは「ブラウザに見えないブラウザ」を目指して作ったデモプログラムです。 見た目はFireworksにそっくりです。実際にインターフェースも動作します。ペンツールで絵も描けますし、描いた絵を移動したり消したりできるところも同じです。 しかし、矩形ツールで四角を描くと、実はその領域がブラウザです。ドラッグして動かせますし、そのままブラウジングもできます。 傍目には「Webページのスクリーンショットで資料を作ってる」ようにしか見えず、安心して仕事中にブラウジングできるのです。 しかしずっと同じ画面だと怪しまれます。そこで、編集機能を無駄に充実させてみました。 レイヤーパネルでの表示/非表示の切り替え レ
お初です。 Flash8から様々なフィルタ効果を扱えるようになりましたが、 フィルタを通じて境界線を設定する方法を紹介します。 派手じゃありませんが、地味に便利かなぁとか思ってます。 [レイヤースタイル] → [境界線] と簡単にできちゃうのですが、 Flash の場合は、[MCを選択] → [フィルタ] → [グロー] → [強度1000%] とするとそれっぽく見えます。 このとき、ぼかしの量をいじることで境界線の幅を設定できます。 で、この作業を ActionScript からいじれるようにクラス化してみました。 (オーサリング上の設定には限界がありました) サンプルをどうぞ。 右側は Photoshop で作った画像です。 左側は ActionScript から境界線を設定しています(テキスト選択できます)。 さらに動的に色を変化させています。 比べると僅かな違いは
こんにちは、春のうららかな気候に誘われてもぞもぞと出現してみました。 benkoです。よろしくお願いします。 さてみなさん、突然ですが、flaファイルを最初に構造化して、さぁリンケージ書出ししよう、というときに面倒だなっと思ったことはありませんか? ひとつひとつ右クリックして、おんなじようなパスを打ち込み、1回打ったMC名をもう1回打って… めまいがしそうです。 それがこちら。 とっても簡単です。 これでもう何度もシテイ行動をとる必要はありません。 クラスは1つのプロジェクトでは大体共通のパスを使用することが多いので、半分くらいはこれで出来てしまいます。 その他カスタムボタンなど、共通クラスを持たせたい場合は、2つ目の「クラス名の最後にMC名をつけるか」を「つけない」にしてあげれば、選択した全てのMCに同じAS2.0クラスが指定されることになります。 ちなみにコマンドの処理が
ColorMatrixFilterを使って頂点の変換を一括で行いました。頂点数のわりに高速ですが、AS2を使っています。 3D空間上の複数の頂点を互いの位置関係を保ったまま回転や移動や伸縮する際に、Matrixが良く使われます。 このとき行われる計算は、ColorMatrixFilterがビットマップの各ピクセルのRGBに対して行う計算とほぼ同じです。 そこで、ColorMatrixFilterを使って頂点の変換ができるかどうか試してみました。 用意した頂点(x, y, z)それぞれを1つのピクセルのR, G, Bに収めています。ここでちょっと思いつき、頂点を2種類ずつ用意して2つのビットマップに格納しました。ビットマップのブレンドは簡単に行えるため、大量の頂点のモーフィングも高速にできるわけです。
DisplacementMapFilterを使って、某ゲームのタイトル画面のようなエフェクトを作りました。 フィルタに使うマップ画像はリアルタイムに生成しています。 さらに、setPixelを各ピクセルに対して呼ぶ操作を画像全体に対する操作に置き換え、速度を改善しています。 左がMayaで書き出したZバッファです。この形状の表面をテクスチャが這っているようなマッピングが目標です。 中がランタイムに作成したマップ画像です。四隅がベタ塗りになっているのは、DisplacementMapFilterの"color"モードで設定した色を採用するためです。 右がDisplacementMapFilterを適用した出力画像です。適用する前の入力画像は、perlinNoiseにpaletteMapで着色したものです。 以下がZバッファからマップ画像を作成する部分です。 // マップ画像作成 pr
バスキュールサイトの最後のお尻の部分に、 つぼに全てが吸い込まれていくという演出があります。 仕組みとしては大したことをしてるわけではないですし 要はジニーエフェクトの亜種なんですが 今でもそれなりに反響をもらうので解説しておこうと思います。 大分前なので結構忘れちゃいましたが。 ちなみにあそこ、その場で演算して描画してるんです。 flvとか事前に作っておけば軽くていい気がするんですが。 最初はインタラクティブになにか反応させる予定だったような。 さて、自分の場合、大きい面積で派手に絵が動く演出を作る場合 スピードを稼ぐためにflash.filters.DisplacementMapFilterに 計算で作ったBitmapDataを食わせるということをするんですが、 (数式が苦手な人には辛いと思いますがかなりスピードが稼げます。 これはこれで面白いです。そのうち機会が
どもです。 情報ありがとうございます。ワケあって色々と試してみたのですが、ヒットエリア対象のMCが外部にあるとダメのようですね。kampさんのサンプルで言いますと、tgtMcの中にhitAreaMcを置く場合なら、ヒットエリアは有効となるようです。でも、それだと使いどころ難しいですね。あぁ、それにしても痛い仕様ですね・・・
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く