Flash 10でPS2の花火デモ

wonderfl初投稿。パーティクル&モーションブラーな花火です。

firework1

元ネタはPS2が出たときのこれ。

この花火デモ、洗面台のアヒルと並んで人気でしたけど、難度は一番低いですよね。MSが対抗意識丸出しでXboxでも似たようなデモを出してきたり、DirectX SDKのサンプルにも入れてきたりして、当時ちょっと面白かったです。

Flashについてですが、直径0?16ピクセルでプリレンダリングしたパーティクルをBitmapDataにcopyPixelsで描画してフレームを作成し、drawで加算半透明で10枚合成してモーションブラーをかけています。最初はパーティクルをShapeやBitmapDataのdrawで描画していたんですが、案の定ものすごく遅かったのでcopyPixelsに置きかえました。アンチエイリアスがかからないので描画品質は落ちますが、7倍くらい速くなってます。copyPixelsだとパーティクルの重なりで加算合成ができませんが、そこはモーションブラーで明るくなってくれるだろうと。

ちなみにマウスをぐりぐり回すとブラーで楽しいです。こんな感じ。

firework2

火花の照り返しは、テクスチャにdrawで適当なサイズとアルファで描画して、床ポリゴン2枚に貼りつけています。Flash 10ではパースペクティブ補正つきでポリゴンが描画できるので、普通に火花と描画位置がぴったり合うのが嬉しいところです。

また、座標変換にFlash 10で新しく追加された3Dベクトル・行列クラスを使用しています。wonderflのおかげでこのAPIの存在を知りました。ただ、このAPIについてはかなり独特の癖やバグがあったり、Flash Playerがクラッシュしたりして(まさにCrash Playerってやかましい)、あれこれ調べまわるはめに。せっかくなので、これまで分かったことについて後でまとめてみるつもりです。

あと、ActionScriptの最適化で気づいたポイントですが、アクセサ(set、get)はあくまで関数だということ。APIのプロパティにアクセスするときなど、つい普通の変数を読み書きしているつもりで、遅い関数呼び出しをしてしまっていることに気づきにくいので要注意だと思いました。そのあたりをチェックしたら描画込みであっさり倍以上速くなったりしています。他にもいろいろチューニングして、それでもCore 2 Duo E8500-3.16GHz機で1フレームに20ミリ秒ほどかかってますが……wonderflを見るような人なら大丈夫でしょう、たぶん。

それと、wonderflのコードがうまく埋め込めない感じなんですが、他のブログでも同じ表示になってるみたい? 一時的なものなんでしょうか。

2009年1月17日

Google Maps API for Flash v1.5

Google Maps API for Flashのv1.5が出ています。まだchangelogは更新されていないみたいですが。

Map.disableCrosshairs()で中央の”+”が消せるように。というかデフォルトで非表示になってます。あと、disableControlByKeyboard()でキーボードによる移動を無効化。というわけで、早速アップデート

2008年7月6日

Flexのコーディング規約

Adobe Edge: 2008年6月 コーディングスタンダードのススメ

こんな記事が上がってきて、そういえばまだコーディング規約に目を通していなかったなと遅まきながらチェックしてみる。

基本的にJavaスタイルベースで書けばだいたい大丈夫だと把握。気になったところだけメモ。

命名規則

名前は略さないのが基本だが、いくらかお決まりの略称が用意されている。

* acc for accessibility, as in ButtonAccImpl
* auto for automatic, as in autoLayout
* eval for evaluate, as in EvalBindingResponder
* impl for implementation, as in ButtonAccImpl
* info for information, as in GridRowInfo
* num for number of, as in numChildren
* min for minimum, as in minWidth
* max for maximum, as in maxHeight
* nav for navigation, as in NavBar
* regexp for regular expression, as in RegExpValidator
* util for utility, as in StringUtil

頭文字でできた略語は全部大文字にするか全部小文字にするかのどちらか。例えばSWFなら、Swfではなく、SWFかswfにする。ちなみに、AIR(エア)など単語のように読ませるものをacronym、CSS(シーエスエス)のようにアルファベットで読ませるものをinitialismというらしい(Acronym and initialism – Wikipedia)。

アセットのファイル名は小文字で、アンダースコアで区切る(icon_align_left.pngなど)。

アクセサ

getHoge()やsetHoge()ではなくgetter/setterを使う。ただし、getHoge()が計算に時間のかかるメソッドのときは、getterは使わず、findHoge()、calculateHoge()、determineHoge()などと名づけて、遅いメソッドであることを示唆しなさいと。なるほど。

setterの引数にはvalueを使う。

public function set hoge(value:String):void

getter/setterでhogeを扱うとき、保存する変数は_hogeにする。

イベントハンドラ

イベントハンドラの名前はイベントの種類+Handler。mouseDownHandler()など。個人的にはonMouseDown()のほうが好みなんですが。引数にはeventを使う。eなどは駄目。要するにこれが制式。

protected function mouseDownHandler(event:Event):void

サブコンポーネントからイベントが送られるときはプリフィックスにコンポーネント名を入れてアンダースコアで区切る。textInput_focusInHandler()など。

配列その他

Arrayには何の型の要素が入るかコメントで注釈すること。まだ調べてませんが、Flash 10ではVectorを使うところなんでしょう。

var a:Array /* of String */ = [];
function f(a:Array /* of Number */):Array /* of Object */

Arrayの初期化には基本的に配列リテラルを使うこと。サイズを指定するときのみArrayコンストラクタを使う。

× new Array()
× new Array(1, 2, 3)
○ []
○ [ 1, 2, 3 ]
○ new Array(3)

オブジェクトも同様。

× new Object()
○ {}
○ { a: 1, b: 2, c: 3 }

以下、正規表現やXMLなどの例がありますが、要はリテラルで簡潔に書けるときはいつでもそうするようにってことですね。

16進数はx以外大文字で(0xFFCC88)。Numberの定数は必ず小数部まで表記すること(1なら1.0)。ただし、ピクセルの座標は例外。

overrideキーワードはアクセス修飾子の前、static、finalキーワードはアクセス修飾子の後ろに書くこと。

override protected method measure():void
public static const MOVE:String = "move";
public final class BoxDirection

コンストラクタが変数を初期化する引数を取るときは、変数と同じ名前で。

public function MyClass(foo:int, bar:int)
{
    this.foo = foo;
    this.bar = bar;
}

あと、括弧の位置が自分の趣味に合わない。それに、1行80文字制限なんていまどきないんじゃないかと思うんですが……このあたりは丁重にスルーさせてもらうということで。ひとまずこんなところでしょうか。

やっぱりいろいろ議論があるらしい。

2008年6月29日

robots.txtでGoogleの検索結果にFlashが表示されないようにする

Googleの検索結果にSWFファイルが直接出てきて、しかもページよりも上位に出てきたりするのが気になっていたので、robots.txtを書いてみました。参考にしたのは「Google の検索結果にコンテンツが表示されないようにする方法」。というより詳しくて答えそのもの。

とにかくFlashをヒットさせたくなければ簡単で、

User-Agent: *
Disallow: /*.swf$

これでサイト内のSWFファイルを全部はじける。*は任意の文字列に一致するワイルドカード、$はURLの末尾に一致。

ついでに、WordPressのログインページがインデックスされていたのもブロック。「WordPress パスワード紛失」でぐぐるとぞろぞろ無数にヒットするあたり、どうなのかと思う。気分の問題として。

Disallow: /blog/wp-login.php

Google ウェブマスターツールの「robots.txt を解析」を使えば、任意のURLが意図通りにブロックされるかチェックできる。

そうしてできたrobots.txtをアップロードしたのが1週間前。robots.txt自体は半日しないうちにbotにアクセスされた。で、今日検索結果からきちんと消えたのを確認。

ちなみに、robots.txtの仕様はまだ標準化されていないらしい。

ところで、ウェブマスターツールの表示を見る限り、やっぱり海外向けコンテンツは.jpドメインじゃないほうがいいのかな。どうもこの「日本」との関連付け、解除できないみたいなんですよね。

Google ウェブマスターツールはいろいろ面白いことが分かるのでサイト持ちの人にはお勧めです。例えば、「こーりん」で検索するとこのサイトが意味もなく上位に出てくること、しかもまったくクリックされないこととか。

2008年6月13日

Googleの開発者ブログにエントリを書いた

2D自動車シミュレーター on Google Mapsについて、Google Maps APIの公式ブログ、Google Geo Developers Blogにゲストエントリを書かせていただきました。

ありのまま起こったことを話すと、「すばらしいシミュレーターだ! ちょっと宣伝させてもらっていい?」というメールが来て、メールアドレスをよく見たらgoogle.com。ぐぐるとGoogle Maps APIのエンジニア。で、エントリを書かないかというので喜んでと。先に書いたように僕の英語はひどいので、ほぼ全文リライトしてもらいましたけど。

それにしても、こんなことがあろうとはまったく予想しなかった。むしろAPIのイレギュラーな使用法とサーバへの負荷で、APIキーを無効化されてもおかしくないと思っていたんですが(一応、カーソル上をずっと押しっぱなしにすると「オーバーヒート」フラグを立てて止めるような対策はしてあります)、逆にこんな面白い機会をいただけるなんて、本当にいいんでしょうか。

とりあえず、出たてのAPIを速攻で使ってみたことと、それなりに海外からもアクセスがあるからとインチキでも英語ページを作っておいたのが良かったのかなと。やっぱり速度とアウトプットは重要だなあと。僕には普段どっちもまるっきりないので、たまに奮発してみたらいきなり確変が来た感じです。調子に乗って、取得したまま何年も放ったらかしにしていた.comドメインを使って英語サイトをきちんとでっちあげて(?)みたりして。

というわけで、もっと頑張っていろいろ作ろうと思います。メインプロジェクトのほうもきりきり進めなければ。

ちなみに、このFlashには隠しコマンドがあります。’F'キーで空を飛びます。

(追記)Google I/OのGoogle Maps API for Flashのセッションでちょこっと紹介されていました。36分8秒あたりから。

2008年6月5日

トップページ
プロフィール

はてなブックマーク
wonderfl