さて、早速休日を使ってGoogle Maps API for Flashのサンプル作成。
取り敢えず今回は、映画「クローバーフィールド」に影響を受けて、NYを怪獣が襲う様子を作ってみた。
怪獣と言うかドラゴンの画像は、こちらのサイト「敦煌回廊」さんから素材をお借りして、透明色部分を透明に加工しました。ありがとうございます！
Flashコンテンツにフォーカスをあわせ(クリックして)、上下左右でドラゴンがNYの街を歩いてるかのように見えます。
とりあえず、今回の技術的ポイントは以下の3つかな。
- 地図の上にキャラクター画像を配置する
- キャラクターの歩行画像を作る
- キー入力で地図をちょっとだけ動かす
キャラクターの配置
要するにマップの上にDisplayObjectを配置すると言うコトなんだが、少しコツがあるように思える。それは、
「MapEvent.MAP_READYのイベントハンドラ内でDisplayObjectを配置すること」
である。このイベントハンドらが呼ばれるより前(地図が準備できない内に)配置しちゃうと、上に地図が来て見えなくなるんじゃないかな?？詳しくはわからないけど、そのような状況に悩まされたので。
キャラクターの歩行
元の画像が1枚の絵を16分割して、前後左右各4枚ずつの歩行アニメーションを表現してるので、これを使って歩行アニメーションするようなクラスを作成してみた。コイツはその内Spark Projectにコミットしよう。
キー入力で地図をちょっと動かす
まず、キー入力に関しては
AS3 のキーイベント監視でなんかいい方法ないかなー、と考えていたら良い方法が思いついたので実装してみた、らかなり便利な気がするので公開してみます。
ActionScript3 でネームスペース使ったキーイベント監視ユーティリティ作りました – 川o・-・）＜2nd life
を使って簡単実装。助かります。
で、地図の動く量が問題。何もしない場合、キー入力でかなーリ大幅に地図が動くが、今回の場合、それだとドラゴンの移動量としては大きすぎて格好悪いのでちょっとだけ動かしたい。
と言うような時は、com.google.maps.Map#panByメソッドを使う。
こんな感じ。
- private static const UP_PANBY_POINT:Point = new Point( 0, -5);
- ・・・
- key_down function UP():void
- {
- character.back();
- panBy(UP_PANBY_POINT);
- }
今後は、ドラクエ風に「話す」メニューでもつけて、Twitterにコメント投げられるようにでもしてみようかなと言う雰囲気が、実はswfファイルから伝わってくる。
