1ピクセルずつ粉になって落下していく画像

最近ブログを書くたびにHTMLの編集をして億劫です。
さてそんなわけで、今回はクリックすると粉になって落ちていくFlashを作ってみました。
仕組みはステージにオーサリング上で配置したムービークリップをBitmapDataでdrawしてそいつをgetPixels()メソッドでByteArray配列に入れてみる。
色ごとに入れられるようなので、ByteArray.positionで一旦0地点に戻してそこからARGBの4チャンネルを1ターンとして抜いた後に1ピクセル分のBitmapDataを作り直し、BitmapData.setPixel()で、ピクセルを設定したら、Bitmapのx,y座標を入れ直して、超重たい作業をしてみたら・・・。
激重でした。
約1万ピクセルを一斉に動かすのは負荷がかかり過ぎなので、1ピクセル分のBitmapクラスを継承させて新しいカスタムクラスを作ってそれを下から順に落としていく事で一斉には動かさずに済むので、まあ割とマシかもしれません。

プログラマの方たちはもっと効率よく組むんだろうな〜

なんか無駄が多いような気がしてなりません。

Papervision 3Dでシンプル立体迷路を作る勉強

カーソルキーで動かしてください。

あんまり複雑にならないように、立体迷路を作ります。

  • XMLを読んで、地図を解析する。
  • XML通りに壁を作っていく(Cubeクラス)
  • Cubeオブジェクトに貼るマテリアル(テクスチャ)には取り急ぎ1枚の画像で間に合わせる。
  • 移動キャラにはこちらもまずは紙飛行機オブジェクト(PaperPlane)を使う
  • 紙飛行機はカーソルキーで左右に向き(角度)を変える
  • 紙飛行機の移動はカーソルキー上下で行う
  • カメラが紙飛行機の後を追従していく
  • カメラは角度も紙飛行機の方角を狙い続ける
  • 紙飛行機が壁に衝突したらそれ以上進まないようにする

まず、XMLの読み方としては、多くの方がEventDispatcherクラスを継承したXMLを読み込み完了したイベントを知らせるクラスを経由した後に解析する事が多いですが、ひとまず簡単に省略してしまいました。

外部に配置されているXMLファイルはこんな感じです。

0が通路で1が壁。それだけで試してみます。
一度Scene3Dクラスでシーンを作成してカメラはCamera3Dクラスを使います。
Viewport3Dではレンダリングする範囲などを決定させるために、第1,2引数にはステージサイズを入れておいて画面いっぱいを表示範囲にしてしまいましょう。この3つのオブジェクトはレンダリングする時に必要な要素になります。

さて、それらをレンダリングするエンジンとなるオブジェクトを作成するためにBasicRenderEngineクラスを使う、先ほどの3つのオブジェクトはこれによって関連付けられます。

DisplayObject3DクラスのインスタンスrootNodeを一つ作ったら、その中に『表示3Dオブジェクト』を入れてあげると階層3D空間を作る事が出来ます。

インスタンスrootNodeの中に紙飛行機PaperPlaneクラスのインスタンスをaddChild、さらにXMLを読み終わったら解析をして、配列にCubeオブジェクトを作成しながら、こちらもインスタンスrootNodeにaddChildさせるだけです。

Cubeオブジェクトの場合テクスチャを貼る場合は他クラスとちょっと違ってMaterialsListで各面に何を貼るか?を設定出来るのですが、複雑さを避けるため全面同じ画像を貼ります。

あとは、2重ループで1個づつCubeを配置してずらしていきます、このとき、出来たらXMLで書いた通りの順番に配置していきたいので、for文はデクリメントで回していきます。
csvデータの様に、カンマ(,)区切りなので、splitして配列に直していきます。

6列×5行なので、合計30回のループですね。

後で衝突判定用に別途配列wallArrayを作成して、マスが0の場合通路なので、Cubeは作らずに

wallArrayにはnullを代入します。

カメラがターゲットの向きを向きっぱなしにしたいため、三角関数atan2を使ってやっと出来たんですが、Papervision 3Dにはカメラにtargetって便利なプロパティがあるのを知らず、一生懸命計算してました。

衝突判定でまずやるべき事は、紙飛行機にどの壁(Cube)が当たっているか、とりあえず最も簡単なやり方、hitTestObjectメソッド(物理的にはこれではいけない場合もあるかもしれません)でいきます、先ほど作り直した配列内のCubeに総当たりで衝突判定をします。if文の条件ですが、配列にはCubeかnullが入っているため、まず配列に入っているオブジェクトの型はCubeなのか(nullじゃ無いのか)、それと、そのCubeが紙飛行機と衝突しているか、この2つがtrueの場合のみ、変数hitWallBlockに当たってるCubeを代入して、degreeLimitterメソッドを実行し、breakでそこでループ処理を中断します。


Math.atan2

今回の移動制限の方法として、まず三角関数Math.atan2によって、紙飛行機と衝突している壁の距離が解るので、そこから2者の角度を出して180度逆の方向をはじき出します。
通常の移動量の分だけ、逆の方向にX,Z座標を移動させておけば、壁を突き抜けないようになります。

あと、3Dオブジェクトの移動はDisplayObject3DクラスのmoveLeft()などが使えるらしいんだけど、今回はそれを知らずにx,y,zで移動してしまいました。今日はとりあえずここまで。次回はColladaオブジェクトで迷路を徘徊したいです。

イメディオセミナーの講師をさせていただきます。

2008年11月26日(水)にアジア太平洋トレードセンター(ATC)内ITM棟6階 PCトレーニングルームにて、「『脱・やらず嫌い!』デザイナーのためのFlash ActionScript 3.0 ノンプログラマー編」という、CSS Nite in Osakaのセッションと似たタイトルで、セミナー講師をつとめさせていただきます。

主に、イベント取り扱いや表示オブジェクトの基礎操作、外部ローディング方法、XMLとの連携などの基礎的動作を実際にPCを触りながら体験しながら学べる内容となっております。

ただ、お堅い内容ばっかりでは面白くないから、この間CSS Nite in Osakaでお見せした、
『Papervision3DとWiiリモコンで遊んでみよう!』
という内容を『番外編』としてカリキュラムに入れました。
こちらもちょっとだけ、AS3を使ってWiiFlashServerと連携させてWiiリモコンのイベントを受けて『楽しむ』というお時間も設けようと思っております。

簡易だけど、初心者には濃い秋葉手作りのテキスト付きです

なるべく楽しく、かつ、しっかりと学べるセミナーにしたいと思います。
今回の講義の受講スキルとしては、ASそのものが未経験、プログラミングにハードルを感じているデザイナー職の方など、Flashはアニメーションしか出来ないという初級入門編というレベルの方対象です。

詳細とお申し込みはイメディオのサイトから。
http://www.sansokan.jp/events/eve_detail.san?H_A_NO=09033

CSS Nite in Osaka, Vol.12 終了(秋葉秀樹)/ スライド公開

dscf7977.jpg

本日アップルストア心斎橋にて行われました『CSS Nite in Osaka, Vol.12』に出演してきました。
皆様のご清聴のお陰で無事、セッションを終わらせる事が出来ました。平日の割には予想を上回る大勢の方にご参加いただきました。

ノンプログラマーとして、ノンプログラマーへのプレゼン的のようなActionScript 3.0のセッションでした。
プレゼン音声資料に関してはこちらもご参考ください。

足りないサンプルファイルがありましたので、現在選別して公開させていただいております、特に『写真アルバム』のAS3サンプルファイルがないというお声をいただいております、近日、必ずアップします。

あと、補足ですが、スライド内では『変数の型指定』については省略させていただきました。お配りした用紙をご参照ください。

dscf7948.jpg

撮影:岡田陽一

色々なご意見をいただきました。

「脱・やらず嫌い!Flash ActionScript3.0 入門以前編」アンケート統計結果

スライドを公開させていただきます。

折り込みプリントが足りなくて、お届け出来なかった方、入ってなかった方、PDFファイルで、公開させていただきます。
どうぞ、ご活用くださいますよう、よろしくお願い申し上げます。

皆様のお声をまとめて、お返事させていただきました。

AS3から始めてもいいかな、と思うような内容でした それで良いですよ!
感覚的にわかりやすい内容でした!つれが光GENJIのカー君に似てると言ってました。 むかしはジミー大西似だったんだけどね(笑)
スピードが速かったのもあってなかなか難しかった 反省点、ご意見参考にさせていただきます。
詳しく知りたい またご一緒に勉強したいですね。
これを機に始めてみようと思いました。 僕にも始まりがありました、いいきっかけになれば良いのですが・・
やる気が出てきました。写真ブログのトップ作りたいです。 上達の半分はモチベーションかもしれません。
もっと聞きたかったです。 もっとしゃべりたかったです(苦笑)
入門講座にもっと参加したいと思います 僕にも出来る事があれば良いんですが・・
AS3の特徴の良く分かる解説だったと思います。 ちょっとマンガちっくだったんですがね〜
AS3の文法がどのようになっているか少し分かったと思います スライドでは「型指定」を省略してます。お配りした用紙をご確認ください。
AS3勉強します!!でもすごく分かりやすかったです。 僕もお役に立てるよう、情報を増やします。
面白かった~中略~でも遊びよりお客さんに出せることを見たいですね。 遊び過ぎでしたね(汗)実用的な内容も欲しい、、確かに。
一度頑張って勉強してみます。 はい!何度でも!!
もっと聞きたいです。 何か機会を作りましょうか・・。
使ってみようと思います じっくりあきらめずに。
これから勉強しようと思えました それだけでこのセッションは大成功です。
プレゼンが分かりやすかった かなり初学者に目線を向けました、本当はもっと盛り込みたかったんですが・・
てんこもりでよかったです。 最初はもっとてんこもりだったんですよ!
勉強します がんばって!
やっぱりちょっと難しかったかも、でも話は分かりやすかったです。 そうですか、反省してさらにプレゼン能力を高めたいと思います、ご意見ありがとうごさいます。
HTML5+JavaScriptの動きも気になります 最近はJavaScriptを使ったリッチなサイト、流行ってますね、すごくいいと思いますよ。
スピード感があったけれど難しかった なるべく早口にならないように、と、臨みましたが、今後の反省点と参考にさせていただきます。
何となく分かって挑戦してみようと思いました。 あせらずにやってみてください。
どんなものか一度触ってみたいです 興味をもつことも大事ですね、簡単なものから触ってみてください。
挑戦します!! チャレンジ精神で!
もうちょっと踏み込んだAS3が聞きたかった、しかし入門であれば高いハードルが低く感じられるものでした。 そうなんですよ!あくまで「入門以前編」ということで、ご理解いただけたらと思います。
一度離れましたがこれを機会にトライしてみたい そうですか、ぜひトライしてみてください。
少し難しかったので帰ってデモを触ってみようと思う スライドだけだとなかなか難しいかもしれませんね、ぜひ手を動かして触ってみてください。
最近流行のライブラリについて聞けてよかった ほんの一部、さわりだけでしたね。
2~3時間くらいのPCありの講座があったら行きたい 検討させてください。
ピンチになったら秋葉さんのスライドを読み直そうと思いました あと、サンプルとお配りした用紙も見直してみて下さいね。

Papervision 3Dで浮遊するCSS Niteのロゴマーク

Special Thanks CSS Nite様

Flash上で3Dレンダリングを行ってくれる有名なライブラリ、Papervision3D 2.0 Alpha – Great Whiteで、複数のPlaneのサブクラス、WiiPlane(!?)を配置して泳ぐように浮かんでいるCSS Niteのロゴマーク。
Papervision3D 2.0 Alpha – Great Whiteでは、BasicViewというクラスが存在しています、便利なんでしょうが、詳しく調べると、AbstractViewクラス、さらにその親クラスのSpriteを継承しているようです。
で、色々なサンプルを拝見させていただきましたら、いきなりsceneにprimitivesパッケージ内のオブジェクトをaddChildしているので、いったいどこでインスタンスを作ったんだ!?と悩んでいたんですが、AbstractViewクラスを確認してなかったですね、しっかりと

なんて書いてありますね、確認確認・・と。
なので、sceneという3D空間にPlaneのサブカスタムクラス、WiiPlaneクラスのインスタンスをaddChildしてます。
ロゴマークは外部ファイルとして置いていますので、BitmapFileMaterialクラスを使って外部ファイルを読み込みします、ただ、Cubeオブジェクトは6面体なので、MaterialsListを使わないといけないみたいです。
そんな訳でソースコード。

『CSSNite3D.as』

『WiiPlane.as』

ところで、なぜ、『WiiPlane』??

Wiiと来たら!?

果たして、CSS Nite in Osakaまでに間に合うかどうか・・・。

CSS Nite様のロゴの使用を許可していただきました、本当にありがとうございました。

UMapでGoogleEarthみたいなレンダリングバー

ActionScript 3.0の地図ライブラリ・・じゃなくて、コンポーネント、『UMap』。
とても便利そうだし、表示させるだけならそんなに難しくないです。
ただ、ダウンロードして使えるので、チャレンジしてみました。

これ、もしかしたらこんなタイトル入れていて、もしそういったクラスがあればすごい恥ずかしいんですが、GoogleEarthみたいなレンダリングバーが出来たら、仕事などで実装する場合、ユーザの目線で見たらいい感じなんじゃないかな?と思って。
やっぱり、待ってる間、タイルが出っぱなしだとカッコ悪いような気がして。

コンポーネントをダウンロード

ダウンロードしたら、Adobe Extention Managerで機能を拡張します。
そのあたりは書籍Flash OOP for ActionScript 3.0にも掲載されてました、ご一読をおススメします。

さて、一旦UMapコンポーネントをステージにドラッグして消して(ライブラリに登録して)すぐに表示される。簡単で、申し訳ないくらいです・・
しかも座標はGoogleMapと一緒だし、だからhttp://www.geocoding.jp/で分かるし。

ローディングイベントはMapLoadEventで!

LoaderInfoクラスを使ったProgressEventと同じ感覚です。
event.bytesLoadedの代わりにevent.currentTile
event.bytesTotalの代わりにevent.totalTiles
タイルなんですね!よく出来てる!!と思います。
なので、パーセンテージを調べるにはevent.currentTile/event.totalTilesでいいんですね。

続きを読む UMapでGoogleEarthみたいなレンダリングバー