「FITC Tokyo 2010」レポート

「FITC Tokyo 2010」に参加してきました！
前回東京で開催された時は、参加できなかったので今回が初参戦となります。
朝9:30から18:20までと長丁場でしたが、やっぱり Flash って面白い！
この手のイベントはすごく刺激になります。

———————————————————————————————————–
Flashで作成する高性能モバイルコンテンツ
Creating high Performance mobile content
with ActionScript 3 and Flash CS5
マイク・チャンバーズ • Mike Chambers
———————————————————————————————————–

Android を含めたモバイルでのパフォーマンスアップに関する Tips でした。
3月に行われた「Adobe FLASH PLATFORM CAMP Tokyo」の内容と
かぶる部分も多かったのですが、
新しい 3D API である molehill などの新情報も聞くことができました。

■Tips & Tricks
メモリ管理の最適化でパフォーマンスをあげる
モバイルコンテンツは、PC 向けの開発とは異なる

• 画面サイズが違う
• インタラクションが違う など

最適化する前に、コードのどこにボトルネックがあるか知る必要がある

パフォーマンスチェック
・AS3 Performance Harness
http://bit.ly/as3performance

これを使うと、どのようにコードが最適化されるか分かる。

■Rendering / Composition
ベクターを GPU でレンダリングできる→パフォーマンスがあがる
AIR で GPU を利用するには、GPU モードに切り替える必要がある

避けなくてはならないこと

• フィルターは使わない（shadow, blur…）
• ブレンドモード（layer、alpha …）

■GPU Composition
動かすことはハードウェアがやる。

使うには…

• cacheAsBitmap:Boolean
• cacheAsBitmapMatirx:Matrix

cacheAsBitmap を true に設定
動かす、tween とか

cacheAsBitmapMatrix
回転、スケーリングなど

ハードウェア加速する場合には、これらを使うように念頭に置いておく

設定方法

• cacheAsBitmap = true;
• cacheAsBitmapMatrix = new Matrix();

アクセラレーションが効いているのでパフォーマンスが向上

■Debugging HWA
コンテンツのデバッグ
CTTextureUploadTracking（※ iOSのみ）

再描画している部分が赤くなり、どこを再描画しているか分かる

■Prevent Redraws
Drawing API を使っているとスピードが落ちる
マスク、カラートランスフォーム

■Instance Allocation
新しいインスタンスの生成はさけ、
再利用することでパフォーマンスをあげる

■Object Pooling
オブジェクトインスタンスを再利用する考え方
レンダリングの負荷が下がる

キャッシュされた DisplayObject を再利用する
DisplayList から削除するのではなく、visible を false にする

■Event Dispatching
一般的にイベントは負荷が大きい
イベントがボトルネックになっている場合、callback を使うのが有効
dispatchEvent より早い！

■Event Propagation
Event.stopPropagation();

■Mouse/Touch Event
マルチタッチの方がオーバーヘッドが大きい
シングルタッチの場合は、Mouse イベントを利用する

負荷が大きいので MouseEvent.MOUSE_MOVE は使わない！

■molehill
大きくパフォーマンスを向上させる新しい 3D API
2011年中に発表予定

今日話した技法、コードなどはこちらにアップされている
https://github.com/mikechambers

———————————————————————————————————–
拍動性クラックル
Pulsatile Crackle
アンドレ・ミシェル • Andre Michelle
———————————————————————————————————–

mp3 や wav を使わなくともここまで音の制御ができることに驚きました。
また、音だけでなく、物理学とオーディオプログラミングを組み合わせたような
可視化されたデモンストレーションはすごく面白かったです。
内容はマニアックというより、その研究心の強さに関心させられました。
ひとつのデモンストレーションを、また違う角度から検証してみる。
それを踏まえて新しいデモンストレーションで検証、といったような。
見習わなくては。…です。

■www
http://lab.andre-michelle.com
http://blog.andre-michelle.com

■audiotool
http://www.audiotool.com

■source
http://tonfall.googlecode.com
ほとんどのコードで公開している

ローパスフィルタリング
波形をスムーズにしていく

Flash クリエイターも MP3 ではなく、サウンドジェネレータで生成できる
最初のアルバムが2日前に生まれた（リリース？）

———————————————————————————————————–
Unity入門 – ハイクオリティ・インタラクティブ・3Dコンテンツ
Intro to Unity – High-Quality Interactive 3D Content
トム・ヒギンズ • Tom Higgins
———————————————————————————————————–

Unity は最近よく耳にしており、会場でもかなり人が知っているようでした。
ゲーム開発の民主化という企業方針にも好感が持てます。
Web上のデモも見ましたが、サクサク動くし、
何よりコンソール、モバイル、Web の開発がワンソースで
管理できるのはすごく良いと思いました。

■Unity Technology
Unity Game Engine の開発
誰もが使えるハイクオリティなクオリティなプロツールを提供

■Unityのビジョン
ゲーム開発の民主化を行いたい

■Unity
マルチプラットフォーム
beast、fmod、mono、physX、Umbraといった標準ツールを組み込んでいる
言語は C#、javascript、boo をサポート

Unity は 2D、3D、ゲームが作れるツール
ゲーム開発だけでなく、トレーニングツール開発、教育ツール、データの可視化などにも使える

モバイル開発対応
iPhone、iPad etc..
iOS、Android2.x

コンソール開発対応
Wii、xbox、PS3

Unity は、web 向け、モバイル向け、コンソール向けにビルト可能

■Unity Web Player
Mac、win すべてのブラウザに対応
簡易なインストールプロセス

現在、3500万アクティブウェブプレイヤー
毎月2〜2.5万の新しいインストール

■Unity & Unity Pro

• Unity
  ベースライセンス無償
  前年度 10 万ドル以上の売り上げをあげている企業は Pro を使う
• Unity Pro
  ￥136,000
  1ライセンス／1デベロッパー

機能的にも Pro 版の8割はフリー版にも入っている

■モバイル開発（アドオン）

• Unity iOS：￥36,500
• Unity iOS Pro：￥136,000

＊ウィンドウズでは非対応

• Unity Android Pro：￥136,000
  現在 Pro バージョンのみ

■コンソール開発
Unity Proライセンスのみ

■今後
Unity Android ファイナルリリース

———————————————————————————————————–
HYPE Frameworkで創造力を加速する
Accelerating Creativity with the HYPE Framework
ジョシュア・デイビス • Joshua Davis
———————————————————————————————————–

Joshua Davis は、Praystation 時代の作品に衝撃を受けたこともあり、
今回一番楽しみにしていたセッションでした。
彼と Branden Hall という人物がふたりで作っている HYPE フレームワークを
アーティスティックなデモンストレーションで紹介してくれました。

HYPEはライブラリのコレクション
http://www.hypeframework.org/

Quick Sketches
ObjectPoolはアニメーションにも有効
Objectのリサイクル
メモリ、プロセッサにも最適化

グリッドレイアウト

• オーバーラップ
• スケールのランダム化

ShapeLayout
アセットがベクターにはりつけることが出来る

FlashからPOSTスクリプトへ変換し、書籍やバッグのアートワークで利用

• colorPool
• PixelColorist
• BitmapCanvas and ContextSaveImage
• FixedVibration
  アニメーション
  透過、スケール、回転、移動へ対する振動
  これらの振る舞いはスタッカブルで、すべてビヘイビアを同時に可能で、
  コードを最小限に抑えられる
• DirectionalVibration
• SimplePisobirity
• SimpleBallistic
• soundAnalyzer

———————————————————————————————————–
『 TelephoneMe』と陰謀のための陰謀
TelephoneMe and the Conspiracy to have a Conspiracy.
MK12
———————————————————————————————————–

MK12 の歴史を追いながら、時系列に作品を見ていきました。
007 のオープニングをやらせてもらうために、
勝手にプロトタイプ（クオリティ高すぎ！）を作ったりするクリエイター魂に震えました。
そして、みごと受注した『007 慰めの報酬（Quantum of Solace）』の
オープニングはカッコよく、最高にセクシーです。

■4-D SOFTCORE SWEATERPORN (2001)
MK12 では各自の役割は決まっていない

■UNTITLED EXP : INFINITY (2001)
オーディオも重要視していて、曲も自分たちで書いている

■SUNKENLUST (2004)

■HISTORY OF AMERICA (2001-2007)
役者も自分たちでやっている
使っている機材も普通に買えるもの

■STRAINGER  THAN FICTION (2006)

■THE KITE RUNNER (2007)

無償で制作
007 のガジェットの依頼を受け、
オープニング制作も請け負わせてもらえるよう頼むも断られる。
007 のオープニングを試作（2回）し、繰り返し懇願し、受注！
↓
■QUANTUM OF SOLACE (2008)

THE ALPHABET CONSPIRACY (INSPIRATION)
この作品に感銘を受け、
台詞をすべてカットアップしランダムに組み合わせた
まるでアメリカ国民を洗脳するかのように

■TELEPHONEME (2010)

———————————————————————————————————–
オープンソースマジック
OpenSource Magic
マルコ・テンペスト • Marco Tempest
———————————————————————————————————–

何の前知識なしに見たのですが、すごかった！
AR 等を使ったカードマジックで一躍有名になった方のようです。
マジック界でもこんなテクノロジーを使った人がいることに驚きです。
今回は、最近流行っているプロジェクションマッピングを使ったパフォーマンスと、
AR を使ったカードマジックを披露してくれました。
セッションも後半戦、ちょっと疲れも出てきた中で、
リラックスして楽しめました。
いやー、すごかった！

アーティストも調査や研究結果をシェアすべきだ
■magic projection
プロジェクションマッピングを使ったインタラクション（マジック）

４つのフォロースポット
プロジェクターがカンバスの赤外線装置をおいかけ、投影

drawing mode
直接キャンバスの上に記述できる

game mode
AR カードを使ったインタラクション

———————————————————————————————————–
アメーバピグ for Androidができるまで
切通伸人 • Nobuhito Kiritooshi
———————————————————————————————————–

アメーバピグ PC 版から AIR for Android への移植に関する話です。
PC 版が汎用性のある設計をされていたことから、
移植自体は、さほど苦労されなかったようですが、
いくつか移植に関するポイントの解説でした。

内容的に先日公開された Adobe デベロッパーセンターの記事と
かなりかぶる部分があったので参考リンクとして掲載しておきます。
http://www.adobe.com/jp/joc/devnet/air/articles/pigg_ameba.html

■アメーバピグ PC 版
サービス　2009年2月19日開始
現在の体制50人

■Android 版
2010年11月1日リリース
開発体制５名
業務外時間で対応し、スタートから3ヶ月でリリース

デザインより先にモックから制作
↓
実機確認だと、誰でもイメージしやすい
通常の確認系統をレビュー会で確認

PC 版も Android で動くが操作が難しい
AIR for Android で作り直し

今回気をつけたこと

• 表示するものは少なく、大きく
• ボタンのサイズと余白
• 多機能な UI を簡略化 etc

機能の移植は簡単

• 汎用性のある設計
• PC 版が低スペック PC でも動くように作られていたから
• AIR for Androidだから

実際に行った作業

• AIR アプリに変換
• Android 用の対応

これからの展開と課題

• まだ実装していない機能を追加
• 今後増えてくる画面サイズへの対応
• PC 版とのソース管理
• 正式なチームビルド

———————————————————————————————————–
アクチュアル デザイン
Actual Design
中村勇吾 • Yugo Nakamura
———————————————————————————————————–

中村さんの作品群は、もちろんどれも拝見していますが、
今回、そこへ落とし込まれるまでの、
思考や思いを聞けたのは興味深かったです。
クリエイティブに関して、そもそも基準点というものが必須であり、
そこに何かイレギュラーなものを組み合わせていくという思考に
共感しつつも、なかなか形にするのは難しいんですよね。
iida の CM に関しては、プレゼン用デモ（Flashで作られていて、ほぼ完成形に近い）が
見れたのも良かったです。

木が揺れている
それは、風が吹いて、木が風圧を受けて葉が動くから
↓
仕組みを知っている

アニメーション ≒ 関係のデザイン

• アニメーションデザインは、「動きそれ自体」と「その背後にある原動力や文脈」の関係を操作すること。
• アニメーションの語源は「アニマ」（霊魂）
• ウェブは多様なアニマの宝庫

触っていくうちに、そのルールが分かってくる過程が面白い

type accident

• モナリザ
  徐々に知って行く感じ
• Everything in it’s right place
  徐々に分からなくなっていく過程

アルゴリズム／コンピューテーション
データ／データベース
画面の前の人／画面の向こうの人

fontpark（アーキテクチャ型アニメ）
http://fontpark.morisawa.co.jp/

■Composition of Logic

コラージュ
全然違うものをぶつけて、新しい手法ができないか？
カリフォルニアロール、明太パスタ

• 異なる文脈に属するもの同士を並置したり、組み合わせたりすることで、
  予想外の効果を生み出す事　＝　コラージュ
• アルゴリズム次元におけるコラージュ　→　まだ幼いから色々やれる
• 基準点が大切。
  「差異」は「常識」から生まれる。
  「新鮮」は「当たり前」から生まれる。
  全部が新しすぎると、斬新すぎて受け入れられない

• dropclock (http://scr.sc/products/dropclock/)
  基準点としての「時計」
• EQV beta
  基準点としての「映像」
• Wonderwall (http://wonder-wall.com/)
  基準点としての「ウェブサイト」
• FPM (http://www.fpmnet.com/)
  基準点としての「フォント」
• WonderwallSCR (http://wonder-wall.com/scr/)
  基準点としての「タイポグラフィ」

自分が作っているものをどう呼ぶかで、デザインは変わる。
言い換えるバランス操作

• wonderwall (http://wonder-wall.com/)
  インタラクティブにアニメーションするウェブサイト →「ウェブサイトづらをしたアニメーション」
• iida (http://www.youtube.com/watch?v=jc090rBP3bA)
  CM映像を効果的に使った製品ウェブサイト →「ウェブサイト風のCM」
• UTweet
  広告キャンペーンサイト →「認知拡散機構」
• UTLoop
  AUDIOVISUAL（音楽で映像を作る）→ VISUALAUDIO（映像で音楽を作る）

今回の講演のメモが公開されていたので、URLを載せておきます。
http://yugop.net/blog/archives/1287