ナビで地上絵―TOKYO ZOO PROJECT

2010.08.31 01:14 PM

ナビで地上絵―TOKYO ZOO PROJECT

『“nav-u”presents ナビで地上絵―TOKYO ZOO PROJECT』キャンペーンサイトのFlash制作を担当させていただきました。

“nav-u”(ナブ・ユー)『NV-U35』を使用して、東京に世界最大の動物園を開園させてしまおうというGPSアートプロジェクトです。“nav-u”の走行ログ機能とGoogle Mapを連携させて、たくさんの動物を入園させました。

動物の地上絵は、「TOKYO ZOO PROJECT制作委員会」が実際に街を自転車走行・歩行した上で作成しています。
また、動物ごとに、制作委員会が走っている道中で見つけたカフェや、お勧めしたい景色等の楽しい「おでかけポイント」も紹介しています。

Twitterの公式アカウント(@tokyozoopj)で、ユーザーから描いてほしい動物を募り、そのツイートの中から制作委員会がピックアップし、実際にコースを作成・公開していきました。
当初は10種類の動物を入園する予定でしたが、最終的には全部で15種類の動物達が入園しました!
この15種類の地上絵の膨大なGPSデータを、いかにGoogle Map上に描画負荷をおさえて表示させるかに、個人的には苦心したところでもあります。

『NV-U35』を使うと、自分でも同じように地上絵を描くことができます。走行ログはPetaMapで共有したり走行軌跡(GPSログ)をKMLフォーマットで記録し、対応アプリケーションで表示することも可能です。当然Google Mapに表示することも可能ですので、興味のある方は、ぜひ挑戦してみてはいかかでしょうか。

Google Maps API For Flash

2010.07.30 07:37 PM

先日、某案件でGoogle Maps API For Flashを使ってごにょごにょしたので、
自分なりに感じたことや注意点をメモっとく。

APIキーに関して

Google Maps APIを使用するには、ここでGoogle Maps API For Flashを使用するサイト(またはアプリ)のドメインを指定してAPIキーを取得する。
取得したAPIキーは、Flashで開発する場合は以下のようにASのコード内で指定する。

map.key = “取得したAPIキー”;

APIキーはSWFファイルにコンパイルされ、SWFファイルがホストされているドメインと一致する必要がある。
なので、開発環境、テスト環境、本番環境など、各環境でドメインが違う際には、予め各ドメインごとにAPIキーを取得しておいて、ドメイン判別してそれぞれにAPIキーを設定してあげる作りにしておくと良いかもしれない。

var _url:String = loaderInfo.url;
if(_url.indexOf(”honban.jp”) >= 0) map.key = “honban.jp用のAPIキー”;
else if(_url.indexOf(”test.com”) >= 0) map.key = “test.com用のAPIキー”;
else if(_url.indexOf(”dev.co.jp”) >= 0) map.key = “dev.co.jp用のAPIキー”;
Map3Dに関して

※以下2010年7月現在の最新版であるVersion 1.18に対しての内容

・地図を3Dで見せたい時などはMap3Dクラスを使用する。
使い方はここを参考。
ただMapクラスに比べると、Map3Dクラスは地図画像の読み込みや描画が若干遅いようだ。
・Map3Dクラスは、デフォルトだと黄色の枠が表示されてしまう。これはAPI独自のキーボードイベントが有効になっていると出てしまう枠のようだ。黄色枠を消したければ、キーボードイベントを無効にする。

map.disableControlByKeyboard();

黄色枠は気になるけど、キーボード操作をさせたいのであれば、API独自のキーボードイベントを使わずに、Flashのネイティブキーボードイベントを使用して、自分でキーボード操作の仕組みを作った方がよさげ。

・地図にパースをつける。

地図にパースをつけたい時は、Map3DインスタンスのsetAttitudeメソッドに対してAttitudeクラスのインスタンスを指定する。

Attitude(yaw:Number, pitch:Number, roll:Number)

例えば、30度Pitch回転させたい時は以下のように指定する。

map.setAttitude(new Attitude(0, 30, 0));

ただ、傾ければ傾けるほど描画処理が重くなるようなので注意が必要。

・ドラッグを無効にする。

map.disableDragging();
・ダブルクリックを無効にする。

map.setDoubleClickMode(MapAction.ACTION_NOTHING);
・マウスホイールでのZOOM機能はAPI独自の機能を使わずに自分でZOOMの仕組みを作った方がいい。
理由は、Macのfirefoxで動作しないし、細かい動きの設定などができないから。
ちなみにAPI独自の機能を使う場合は以下のように指定する。

map.enableScrollWheelZoom(); //マウスホイールで拡大縮小できる
map.enableContinuousZoom(); //スムースな拡大縮小ができる
・地図上を滑らかに移動、寄り引きをさせる。
個人的な感覚だが、setCenterメソッドが、一番滑らかに移動できた。
panToやsetZoomなどメソッドは何種類か用意されているが、setCenterが一番良さげ。
このsetCenterメソッドをENTER_FRAMEイベントとかトィーンライブラリのUPDATEイベントの中で処理して、
アニメーションさせるとそれなりに滑らかに動く。

public function setCenter(latLng:LatLng, opt_zoom:Number, opt_mapType:IMapType = null):void

・Parameters
latLng:LatLng — Coordinates for the new center.
opt_zoom:Number — New zoom level.
opt_mapType:IMapType (default = null) — New map type.

・ズームの範囲。
ズームは0〜21くらい(すごいアバウトw)までの数値で指定できるようだ。0が一番引き、21が一番寄り。
Polylineに関して

Polylineオブジェクトは、地図上に線形のオーバーレイを作成する。
Polylineは一連の点で構成され、これらの点を指定された順序に結ぶ連続した線セグメントを作成する。
KMLデータを元にPolylineを描画することもできる。
点(緯度経度)が多すぎると画面描画処理が重くなるので注意が必要。
個人的な感覚では、20,000ポイントくらいがまともに動く限界の数といったところ。
エンコード化ポリラインを使用すると、描画処理も軽くなる。
これは地図のズームレベルによって、ラインの精度をコントロールできるらしい。詳細地図の場合は詳細なポイントを、粗い地図の場合はポイントも粗くして表示速度を得ているらしい。

注意点やもっとこうして欲しい点はあるけど、
やっぱりよくできてる、すごいぞGoogle Maps API!!

After Effectsでループ作成

2010.06.01 02:07 PM

やるたびに毎回忘れているのでメモ。
はいすいません、またまた備忘録メモです。

フッテージをループさせるには、ビジュアルフッテージをプロジェクト内で連続してループする場合は、
After Effectsで1サイクルのみのフッテージを作成すればよい。
手順は下記のとおり。

1.プロジェクトパネルで、ループさせるフッテージを選択する。
2.ファイル/フッテージを変換/メインを選択する。
3.「ループ」に整数値を入力して、「OK」をクリック。

以上。
いいかげん覚えろ、俺。

ジオメトリパイプライン

2010.05.06 08:25 PM

ジオメトリパイプラインの超私的メモ。毎度の超私的メモでスミマセン。
このサイトの記事を参考にさせていただきました。ありがとうございました。

ジオメトリパイプラインとは3Dオブジェクトを画面に描画するための座標変換のこと。

変換の流れは以下。

1 . ローカル座標で3Dオブジェクトを組み立てる。
2 . ワールド座標変換
3 . ビュー座標変換(またはカメラ座標変換ともいう)
4 . プロジェクション座標変換(または射影変換ともいう)
5 . スクリーン座標変換(またはビューポート座標変換ともいう)

1 . ローカル座標で3Dオブジェクトを組み立てる。
まず、ローカル座標で3Dオブジェクトを組み立てる。
2 . ワールド座標変換
ワールド変換行列でローカル座標からワールド座標に変換する。
平行移動行列、回転行列、スケーリング行列を使う。
※平行移動行列は演算順序によって、結果が変わるので、以下の順序で演算を行う。

求めたい行列 = スケーリング行列 * 回転行列 * 平行移動行列

※ちなみにアフィン変換とは、変換によっても図形の形が変わらない変換のことをいう。

3 . ビュー座標変換(カメラ座標変換)
カメラの位置を定義することによって、物体をワールド座標からカメラの位置・方向を表す座標系への変換を行う。
カメラの位置を定義するには、視点(カメラ)の位置ベクトル、注視点の位置ベクトル、およびカメラの上方向を表すベクトルの3つのベクトルによって定義される。

ビュー座標変換の手順としては、まずカメラの座標を定義された位置から原点まで移動する。
そして、その負の移動座標を全てのオブジェクトに適用する。

カメラを移動したら、軸の調整をする。カメラの軸は以下のようにして求める。

At = 注視点の位置ベクトル
Eye = 視点(カメラ)の位置ベクトル
Up = カメラの上方向を表すベクトル

//z軸にカメラをあわせる。視線方向の単位ベクトルを求める。
zaxis = normal(At – Eye)

//x軸にカメラを合わせる。カメラの向いてる方向とカメラの上方向の法線がx軸となる。 
xaxis = normal(cross(Up, zaxis)) 

//y軸にカメラを合わせる。カメラの向いてる方向とx軸の方向の法線がy軸となる。
yaxis = cross(zaxis, xaxis)

軸を求めたら、それに合わせて全てのオブジェクトを回転させる。
以上をふまえるとビュー座標変換行列は以下になる。

ビュー座標変換行列 = [
 xaxis.x  yaxis.x  zaxis.x  0
 xaxis.y  yaxis.y  zaxis.y  0
 xaxis.z  yaxis.z  zaxis.z  0
 -dot(xaxis, eye)  -dot(yaxis, eye)  -dot(zaxis, eye)  1
]

※normal(a) = aの単位ベクトルを求める
※cross(a,b) = aとbの外積を求める
※dot(a,b) = aとbの内積を求める

4 . プロジェクション座標変換(射影変換)
3Dの情報であるビュー座標を、投影により2Dの座標に変換する。
それと、カメラの設定(主にズームなどの機能)をする。

プロジェクション座標変換行列には二通りある。平行投影と透視投影。
平行投影は視点の手前にあるものと視点の奥にあるものの大きさが同じ。
透視投影は実際にカメラで覗いてるように物体が視点に近いと大きくなり、遠いと小さくなる。

平行投影に関しては今回はスルーして、透視投影について。

まず視錘台を定義する。
定義する要素は、近クリップ平面、遠クリップ平面、アスペクト比、視野角。
近平面と遠平面の間が実際に画面に表示される部分。つまり視錘台とは見える領域を表す。
視野角はカメラの角度。ズームインやズームアウトといったことができる。
アスペクト比は横と縦の比率を決める。

視野角に関して。
視野角が広いほど奥行き感が増加する。またズームアウトする感じになり、周りの映る範囲が広がる。
カメラを回転させるとパースがきき過ぎて歪んでいる感じがする。
逆に視野角が狭いほど奥行き感が減少する。
ズームインする感じになり周りの映る範囲が狭くなる。
45 ~ 60度くらいが3Dゲームではよく使われているらしい。

先にも書いたが、視錘台の外にあるオブジェクトは見えない。つまり描画処理を行う必要はない。
そこでオブジェクトを内包する単純な形状(球など)を考え、それが視錘台の内部にあるかを判定し、
内部に無ければ描画処理を行わないようにする。これを視野カリングとか視錘台カリングと呼ぶ。

プロジェクション変換行列を適用した結果は、
X座標が-1.0 から1.0、
Y座標が-1.0 から1.0、
Z軸が0.0 から 1.0の間の値になる。
ちなみに、近クリップ平面がz=0、遠クリップ平面がz=1。

んで、プロジェクション変換行列を生成する計算式。

θ = Y方向の視野角
a = アスペクト比
n = 近クリップ平面までの距離
f = 遠クリップ平面までの距離

sy = cot(θ/2)
sx = sy / a
sz = f / (f-n)

プロジェクション変換行列 = [
 sx, 0, 0, 0,
 0, sy, 0, 0,
 0, 0, sz, 0,
 0, 0, -sz*n, 0
]

となる。
んー、むずい。

5 . スクリーン座標変換(ビューポート座標変換)
スクリーン座標は左上隅を原点とし、Flashの場合なら、右方向を+X、下方向を+Yとする。

w = スクリーンの横幅/2
h = スクリーンの縦幅/2

スクリーン座標行列 = [
 1, 0, 0, 0,
 0, 1, 0, 0,
 0, 0, 1, 0,
 w, h, 0, 1
]

※Flashで実装する場合はわざわざスクリーン座標変換するよりも、3D空間を内包したDisplayObjectをまるっとステージの中央に配置した方が処理的に軽いかも。

ちょっと間違ってるところありそうだけど以上。

SanDisk | zoom±ZOO

2010.04.26 12:32 PM

SanDisk | zoom±ZOO

サンディスク様「SanDisk | zoom±ZOO」の制作に関わらせていただきました。

動物写真家、前川貴行氏が撮り下ろした、地球に生きる命の数々を記録したフォトギャラリーです。

今回は「大きく、残そう。」というテーマのもとに、高画質で美しい写真を記録に残していくということはもちろん、心を揺さぶられた時の人間の気持ち、つまり感動や思い出も記憶に残していってもらいたい、というサンディスクの思いが込められています。

個人的にはインタラクションデザインとFlash開発を担当させていただきました。
前川氏の撮り下ろした迫力のある動物達の命の記録を、可能な限り等身大に近いサイズまで拡大させることで、写真自体の持つ活き活きとした迫力をより引き立たせ、見ていただいた方に驚きや興奮、または喜びや癒しなど、様々な感情を抱いていただければという思いで制作いたしました。

また、写真の切り替わるトランジションでは、10種類の動物それぞれに異なったモーションをつけています。
有機的な(動物的な)動きと、サイトのテーマでもあるズーム感を感じてもらえるようなモーションに注力してみました。

さりげない機能として、それぞれの写真に対して抱いた感情を5パターン(Surprise、Excite、Relax、Cute、Cool)の中から選択して投稿できたり、その結果を絞込みできる機能もつけました。

また、今回はブログパーツも制作しております。
動物達がブログ上でとんでもないことをしでかすかも?
ぜひクリックしてみてください↓↓↓。
ちなみに、アクセスする度に違う動物が登場します。

さらに、野生動物の宝庫「ボルネオ島」の旅などが当たるプレゼントキャンペーンもやっております。

USJ宇宙じゃんけん

2010.04.26 12:29 PM

USJ宇宙じゃんけん

もう随分前にやらせて頂いたお仕事の話です。
ユニバーサル・スタジオ・ジャパンが2010年3月19日にオープンした本格的宇宙体験ライドアトラクション、スペース・ファンタジー・ザ・ライドのキャンペーンサイト「USJ宇宙ジャンケン」の制作をさせていただきました。

スペース・ファンタジー・ザ・ライドは、危機に瀕している太陽をみんなで助けに行くというストーリーのライドアトラクション。「USJ宇宙ジャンケン」もアトラクションと同様に、太陽を救うというミッションのため太陽系の8つの各惑星にいるAKB48とジャンケン対決して勝ち進み、太陽を救いに行くというものです。太陽に到達した人の中から抽選でケネディ宇宙センター見学付きアメリカオーランド6日間の旅や賞金100万円が当たります!

サイトは2010年5月末日までの公開ですので、豪華賞品目指してAKB48相手にじゃんけんで勝ちまくって、太陽到達に挑戦してみてはいかがでしょうか。
またmixiアプリ版も制作しました。mixiアプリ版ではサイト版とは別の豪華賞品が当たります!

EXILIMケータイ フォトアワード

2010.01.11 02:13 AM

EXILIMケータイ フォトアワード
またまた、公開してから、随分月日が経ってしまいましたが、
カシオ計算機様の「EXILIMケータイ フォトアワード」の制作をさせていただきました。

EXILIMケータイ フォトアワードは、期間ごとに決まったテーマ(笑えた一枚、元気になれた一枚、感動した一枚)に沿ったケータイフォトをユーザーに送付してもらい、その中から、グランプリ、準グランプリ、ベストショット賞、入賞が選ばれるというコンテンツになっています。

私個人としては、Flash Developを担当したわけですが、
今回は、応募していただいたユーザーの皆様の渾身の一枚を、より楽しく見ていただけるように、
「笑えた」、「元気になれた」、「感動した」の三つのテーマごとに、写真の動きやインタラクションなどの演出に注力してみました。
関係者の皆様、お疲れ様でした。