Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
「最新のFlash3Dを使ってコンテンツを作ってみよう Away3D入門講座」2011.11.20(日)場所:有限会社ビバマンボ様オフゖス特別協賛:ラ゗フサウンド株式会社様       有限会社ビバマンボ様                   ...
本日のメニューorange-suzuki.com                          2
1.   Away3Dについて2.   サンプルを使ってオリジナル作品を作ってみよう                              3
Away3Dについてorange-suzuki.com                             4
Away3D:概要・ActionScript 3.0 リゕルタ゗ム3Dエンジン・2007年より Alexander Zadorozhny氏(http://www.lidev.com.ar/)と Rob Bateman氏  (http://www...
Away3D:ショーケースNissan Stage-Juk3D3D brand site for Nissan Europehttp://www.nissan-stagejuk3d.com/精細に作りこまれた3Dモデルとシルクのようなスムーズな...
Away3D:ショーケースDelta Strike: Beta release on FacebookSocial 3D Action RPGhttp://www.deltastrike.org/ソーシャルオンラ゗ンRPG。クラシカルな宇宙シュ...
Away3D:ショーケースBattlegrounds of EldhelmGamehttp://eldhelm.com/マジック・ザ・ギャザリングを彷彿させるオンラ゗ンフゔンタジーカードゲーム。*Essence ltd : http://ess...
Away3D:ショーケースNaampetje.nl :3D e-Commercehttp://naampetje.nl/好きなデザ゗ンの帽子をカスタムして注文できるEコマースサ゗ト。ハ゗クオリテゖなテクスチャ、モデルが特徴。          ...
Away3D:ショーケースChristmas Card greets from Away3Dhttp://kerst.tribal-im.com/?vip=uhgn507オリジナルのクリスマスカードを送ることができる。Away3Dオリジナルコン...
Away3D:主な特徴・様々なフォーマットの゗ンポート/エクスポート、(ゕニメーションメッシュも含む)・25種類以上の便利なプリミテゖブと拡張可能なマテリゕル・バージョンの4.0では、Stage3D API(aka Molehill) をサポー...
Away3D:マテリアル/シェーダー・カラーマテリゕル      ・バンプマッピング・ビットマップマテリゕル   ・ノーマルマッピング・フォンシェーデゖング    ・フレネル効果・ゕウトラ゗ン        ・草シェーダー・フラットシェーデゖン...
Away3D:カメラ、ライト■カメラ                     ■フォグ(霧)・フリーカメラ・標的カメラ                   ■被写界深度・空中カメラ・追尾カメラ                   ■ライト   ...
Away3D:プリミティブ・直方体              ・ビルボード・球                ・面(Plane)・円錐               ・カプセル・円柱               ・SkyBox・トーラス(ドーナツ...
Away3D:その他機能 その1■ファイルインポート                              ■メッシュの突き出し, 押し出しASE, AWD, 3DS, MD2, Collada, MQO,       旋盤、パス、セグメン...
Away3D:その他機能 その2■ユーティリティ                                  ■生成機能:GeneratorsFaceLink                                  ベ゗クテクス...
Away3D:GUIアプリケーション■Prefab3Dhttp://www.closier.nl/prefab/http://www.youtube.com/watch?v=02YDN9KQD2khttp://www.youtube.com/w...
Away3D:物理エンジン■AwayPhysics  http://www.github.com/away3d/awayphysics-core-fp11・バージョン4.0から搭載予定の物理エンジン・Alchemy製・Bullet Physic...
~休憩タ゗ム~          19
サンプルを使ってオリジナル作品を作ってみよう                               *Falling Leaves  http://orange-suzuki.com/flashup/12/sample/         ...
サンプルについて今回のサンプルではすべてのコードの説明は行いません。「カスタマ゗ズ」項目を試しながら体験していただくスタ゗ルをとっています。また、以下のゕ゗コンの意味はそれぞれこのようになっています。    サンプルの実行    ・サンプルを実...
下準備日本語版 Flash Professional CS5 & CS5.5 に Flash Player 11 設定を追加するMXPhttp://clockmaker.jp/blog/2011/11/fp11_publish/注:今回のサンプ...
目次     1. シンプルな床の表示     2. マウスで動くカメラ     3. 床にライトを照らす     4. 霧をかける     5. 落ち葉を加える                    23
サンプル1:シンプルな床の表示 (Sample1.as)1.   サンプルフォルダ→fla/flashup12_sample.flaを開き、ドキュメントクラスにSample1.asを設定。     (以降のサンプルではこちらのドキュメントクラス...
サンプル1:シンプルな床の表示 (Sample1.as) ・回転を早くするには?  plane.rotationY += 10; ・大きさを変えるには?  plane = new Plane( material, 10, 10 );  または、...
サンプル2:マウスで動くカメラ (sample2.as)                  カスタマイズ              ・動く速さを変えてみよう              ・動く範囲を変えてみよう                  ...
サンプル2:マウスで動くカメラ (sample2.as) ・動く速さを変えるには?  cameraController.panAngle = 2 * (stage.mouseX - lastMouseX)   + lastPanAngle;  ...
サンプル3:床にライトを照らす (sample3.as)                   カスタマイズ                ・ラ゗トの位置を変えてみよう                ・ラ゗トの色を変えてみよう          ...
サンプル3:床にライトを照らす (sample3.as) ・ラ゗トの位置を変えるには?  light.x = -15000;  light.y = 5000;  light.z = -5000; ・ラ゗トの色を変えるには?  light.col...
サンプル3:床にライトを照らす (sample3.as) material.specular による違い → ハ゗ラ゗トの強度に影響    material.specular = 0;     material. specular = 1;  ...
サンプル3:床にライトを照らす (sample3.as) material.gloss による違い → ハ゗ラ゗トのシャープネスに影響     material.gloss = 0;   material.gloss = 5;    mater...
サンプル3:床にライトを照らす (sample3.as) material.ambient による違い → 環境光の反射強度に影響    material. ambient = 0;   material. ambient = 1;   mat...
サンプル4:霧をかける (sample4.as)                    カスタマイズ                 ・霧の色を変えてみよう                 ・霧の距離(奥行き感)を変えてみよう         ...
サンプル4:霧をかける (sample4.as)  ・霧の色を変えるには?   new FogMethod(350, 0xFF0000);  ・霧の距離(奥行き感)を変えるには?   new FogMethod(100, 0xFF0000); ...
サンプル5:落ち葉を加える (sample5.as)                    カスタマイズ                 ・落ち葉の数を変えてみよう                 ・落ち葉の動き方を変えてみよう        ...
サンプル5:落ち葉を加える (sample5.as)  ・落ち葉の数を変えるには?   createLeaf関数の中を変更します。   leafArray = [];   for (var i:int = 0; i < 150; i++)  ・...
補足:ループするテクスチャの作り方1. Photoshopのフゖルタ→スクロールを使って、画像の半分の幅ずらす2. 境目をごまかす(この場合は落ち葉で隠す)                                         37
補足:その他1. マテリゕルの画像サ゗ズは2の累乗のサ゗ズで作成する必要があります。   126px*126px   256px*256px   512px*512px   など2. 透明PNG画像をマテリゕルで使うには?   material...
補足:Away3Dのテンプレ (基本的な書き方)/** * 3D空間の作成 *///シーン、カメラ、ビューを作成                                                1. 舞台の作成var scene:...
おわりご意見、ご感想、ご質問など、お気軽にお寄せください。     http://orange-suzuki.com/blog/                                      40
参考にさせていただいたWebサ゗ト様                        深く感謝いたします。(敬称略)                                  Away3D                         ...
Upcoming SlideShare
Loading in …5
×

Flashup 12 Basic Training of Away3D

7,060 views

Published on

最新のFlash3Dを使ってコンテンツを作ってみよう Away3D入門講座

Published in: Technology
  • Be the first to comment

Flashup 12 Basic Training of Away3D

  1. 1. 「最新のFlash3Dを使ってコンテンツを作ってみよう Away3D入門講座」2011.11.20(日)場所:有限会社ビバマンボ様オフゖス特別協賛:ラ゗フサウンド株式会社様 有限会社ビバマンボ様 FLASHUP#12 orange-suzuki.com 鈴木克史 1
  2. 2. 本日のメニューorange-suzuki.com 2
  3. 3. 1. Away3Dについて2. サンプルを使ってオリジナル作品を作ってみよう 3
  4. 4. Away3Dについてorange-suzuki.com 4
  5. 5. Away3D:概要・ActionScript 3.0 リゕルタ゗ム3Dエンジン・2007年より Alexander Zadorozhny氏(http://www.lidev.com.ar/)と Rob Bateman氏 (http://www.infiniteturtles.co.uk/blog/)により開始されたプロジェクト・ラ゗センスはApache 2.0 商用利用可・ショーリール:http://www.youtube.com/watch?v=qj84wP0diUo 5
  6. 6. Away3D:ショーケースNissan Stage-Juk3D3D brand site for Nissan Europehttp://www.nissan-stagejuk3d.com/精細に作りこまれた3Dモデルとシルクのようなスムーズなレンダリングが特徴。カスタムした車で運転できる*digitas : http://www.digitas.com/ 6
  7. 7. Away3D:ショーケースDelta Strike: Beta release on FacebookSocial 3D Action RPGhttp://www.deltastrike.org/ソーシャルオンラ゗ンRPG。クラシカルな宇宙シューテゖングゲーム。*Pro3games : http://pro3games.com/ 7
  8. 8. Away3D:ショーケースBattlegrounds of EldhelmGamehttp://eldhelm.com/マジック・ザ・ギャザリングを彷彿させるオンラ゗ンフゔンタジーカードゲーム。*Essence ltd : http://essenceworks.com/ 8
  9. 9. Away3D:ショーケースNaampetje.nl :3D e-Commercehttp://naampetje.nl/好きなデザ゗ンの帽子をカスタムして注文できるEコマースサ゗ト。ハ゗クオリテゖなテクスチャ、モデルが特徴。 9
  10. 10. Away3D:ショーケースChristmas Card greets from Away3Dhttp://kerst.tribal-im.com/?vip=uhgn507オリジナルのクリスマスカードを送ることができる。Away3Dオリジナルコンテンツ。 10
  11. 11. Away3D:主な特徴・様々なフォーマットの゗ンポート/エクスポート、(ゕニメーションメッシュも含む)・25種類以上の便利なプリミテゖブと拡張可能なマテリゕル・バージョンの4.0では、Stage3D API(aka Molehill) をサポート 4000~8000ポリゴンが限界だったFlashlayer10のバージョンに比べ、100万ポリゴン程度まで表現可能・数少ないオープンソースの3Dエンジン 11
  12. 12. Away3D:マテリアル/シェーダー・カラーマテリゕル ・バンプマッピング・ビットマップマテリゕル ・ノーマルマッピング・フォンシェーデゖング ・フレネル効果・ゕウトラ゗ン ・草シェーダー・フラットシェーデゖング ・ランバート反射・ビデオマテリゕル ・表面散乱・環境マッピング ・影 12
  13. 13. Away3D:カメラ、ライト■カメラ ■フォグ(霧)・フリーカメラ・標的カメラ ■被写界深度・空中カメラ・追尾カメラ ■ライト ・ポ゗ントラ゗ト■レンズ ・ゕンビエントラ゗トフゖッシュゕ゗~isometric(等身大) ・方向ラ゗ト 13
  14. 14. Away3D:プリミティブ・直方体 ・ビルボード・球 ・面(Plane)・円錐 ・カプセル・円柱 ・SkyBox・トーラス(ドーナツ型) ・その他 14
  15. 15. Away3D:その他機能 その1■ファイルインポート ■メッシュの突き出し, 押し出しASE, AWD, 3DS, MD2, Collada, MQO, 旋盤、パス、セグメント、上昇KMZ and OBJ http://www.closier.nl/blog/?p=62■ファイルエクスポートAS3 class, AWD, Elevation2AS3 and OBJ■メッシュモディファイア整列、パスに整列、爆発、グリッド、マージ、鏡面、模写、曲げる 15
  16. 16. Away3D:その他機能 その2■ユーティリティ ■生成機能:GeneratorsFaceLink ベ゗クテクスチャ、ノーマルマップ生成、http://www.closier.nl/blog/?p=85 BSP生成座標軸 (Trident) ■開発中の機能http://away3d.com/livedocs/away3d-core-fp11/away3d/debug/Trident.html 3D audio, Vector sprites, 3D Textノーマル表示(Normals display) 16
  17. 17. Away3D:GUIアプリケーション■Prefab3Dhttp://www.closier.nl/prefab/http://www.youtube.com/watch?v=02YDN9KQD2khttp://www.youtube.com/watch?v=D-YKdVsO07s&feature=player_embedded 17
  18. 18. Away3D:物理エンジン■AwayPhysics http://www.github.com/away3d/awayphysics-core-fp11・バージョン4.0から搭載予定の物理エンジン・Alchemy製・Bullet Physics Engine派生: http://bulletphysics.org/wordpress/*Away 3D 4 & AwayPhysics & ASFEAT - AR http://www.visualiser.fr/blog/index.php?q=content/away-3d-4-awayphysics-asfeat-ar 18
  19. 19. ~休憩タ゗ム~ 19
  20. 20. サンプルを使ってオリジナル作品を作ってみよう *Falling Leaves http://orange-suzuki.com/flashup/12/sample/ 20
  21. 21. サンプルについて今回のサンプルではすべてのコードの説明は行いません。「カスタマ゗ズ」項目を試しながら体験していただくスタ゗ルをとっています。また、以下のゕ゗コンの意味はそれぞれこのようになっています。 サンプルの実行 ・サンプルを実行してみましょう カスタマイズ ・クエストが与えられるのでまずはやってみましょう。 答え ・クエストに対する答えを確認しましょう TIPS ・さまざまなテクニックの紹介 21
  22. 22. 下準備日本語版 Flash Professional CS5 & CS5.5 に Flash Player 11 設定を追加するMXPhttp://clockmaker.jp/blog/2011/11/fp11_publish/注:今回のサンプルを試していただく前にこちらの記事をご確認いただくことをお勧めいたします。引用:動作確認は Flash Playe 11 のインストールされたブラウザで行うようにとのことで、[パブリッシュプレビュー]→[デフォルト(HTML)](F12 / cmd-F12)の使用が推奨だそうです。この拡張機能ではFlash Pro内部のプレイヤーまでは更新されないので、ムービープレビュー(ctrl-Enter / cmd-Enter)では、Flash Player11の確認ができません。 22
  23. 23. 目次 1. シンプルな床の表示 2. マウスで動くカメラ 3. 床にライトを照らす 4. 霧をかける 5. 落ち葉を加える 23
  24. 24. サンプル1:シンプルな床の表示 (Sample1.as)1. サンプルフォルダ→fla/flashup12_sample.flaを開き、ドキュメントクラスにSample1.asを設定。 (以降のサンプルではこちらのドキュメントクラスを変更していきます。)2. パブリッシュプレビューを行います。 カスタマイズ ・回転を早くしてみよう ・大きさを変えてみよう ・いろんな回転をさせてみよう 24
  25. 25. サンプル1:シンプルな床の表示 (Sample1.as) ・回転を早くするには? plane.rotationY += 10; ・大きさを変えるには? plane = new Plane( material, 10, 10 ); または、plane.scaleX = 2; ・色々な向きに回転をさせるには? X軸回転 plane.rotationX += 0.3; Y軸回転 plane.rotationY += 0.3; Z軸回転 plane.rotationZ += 0.3; 25
  26. 26. サンプル2:マウスで動くカメラ (sample2.as) カスタマイズ ・動く速さを変えてみよう ・動く範囲を変えてみよう 26
  27. 27. サンプル2:マウスで動くカメラ (sample2.as) ・動く速さを変えるには? cameraController.panAngle = 2 * (stage.mouseX - lastMouseX) + lastPanAngle; cameraController.tiltAngle = 2 * (stage.mouseY - lastMouseY) + lastTiltAngle; ・動く範囲を変えるには? cameraController = new HoverController(camera, plane, 0, 90, 100, -30, 60, 10, 200); 変数の解説 new HoverController(targetObject, lookAtObject, panAngle, tiltAngle, distance, minTiltAngle, maxTiltAngle, minPanAngle maxPanAngle) Tiltはカメラの経度方向の角度、Panは緯度方向の角度です。 27
  28. 28. サンプル3:床にライトを照らす (sample3.as) カスタマイズ ・ラ゗トの位置を変えてみよう ・ラ゗トの色を変えてみよう ・床の光の反射率を変えてみよう 28
  29. 29. サンプル3:床にライトを照らす (sample3.as) ・ラ゗トの位置を変えるには? light.x = -15000; light.y = 5000; light.z = -5000; ・ラ゗トの色を変えるには? light.color = 0xffddbb; ・光の反射の様子を変えるには? var floorMt:BitmapMaterial = new BitmapMaterial(new leaf()); floorMt.lights = [light]; floorMt.gloss = 5; floorMt.specular = 1; floorMt.ambientColor = 0x303040; floorMt.ambient = 1; floorMt.repeat = true; 29
  30. 30. サンプル3:床にライトを照らす (sample3.as) material.specular による違い → ハ゗ラ゗トの強度に影響 material.specular = 0; material. specular = 1; material. specular = 1.2; material. specular = 2; 30
  31. 31. サンプル3:床にライトを照らす (sample3.as) material.gloss による違い → ハ゗ラ゗トのシャープネスに影響 material.gloss = 0; material.gloss = 5; material.gloss = 20; material.gloss = 50; 31
  32. 32. サンプル3:床にライトを照らす (sample3.as) material.ambient による違い → 環境光の反射強度に影響 material. ambient = 0; material. ambient = 1; material. ambient = 20; material. ambient = 50; 32
  33. 33. サンプル4:霧をかける (sample4.as) カスタマイズ ・霧の色を変えてみよう ・霧の距離(奥行き感)を変えてみよう 33
  34. 34. サンプル4:霧をかける (sample4.as) ・霧の色を変えるには? new FogMethod(350, 0xFF0000); ・霧の距離(奥行き感)を変えるには? new FogMethod(100, 0xFF0000); 34
  35. 35. サンプル5:落ち葉を加える (sample5.as) カスタマイズ ・落ち葉の数を変えてみよう ・落ち葉の動き方を変えてみよう 35
  36. 36. サンプル5:落ち葉を加える (sample5.as) ・落ち葉の数を変えるには? createLeaf関数の中を変更します。 leafArray = []; for (var i:int = 0; i < 150; i++) ・落ち葉の動き方を変えるには? update関数の中を変更します。 function update():void{ this.rotationX += drx; this.rotationY += dry; this.x += dx; this.y += dy; if (this.y < 100) { BitmapMaterial(leaf.material).alpha -= 0.02; } if (this.y < 0) { init(); } } 36
  37. 37. 補足:ループするテクスチャの作り方1. Photoshopのフゖルタ→スクロールを使って、画像の半分の幅ずらす2. 境目をごまかす(この場合は落ち葉で隠す) 37
  38. 38. 補足:その他1. マテリゕルの画像サ゗ズは2の累乗のサ゗ズで作成する必要があります。 126px*126px 256px*256px 512px*512px など2. 透明PNG画像をマテリゕルで使うには? material.alphaBlending = true;3. カメラの初期位置は、camera.positionで取得できます。 Vector3D(0, 0, -1000) となっています。4. Away3Dの根幹となるテンプレート 38
  39. 39. 補足:Away3Dのテンプレ (基本的な書き方)/** * 3D空間の作成 *///シーン、カメラ、ビューを作成 1. 舞台の作成var scene:Scene3D = new Scene3D();var camera:Camera3D = new Camera3D(); ↓var view:View3D = new View3D();//ビューにシーンとカメラを結びつける 2. 役者を配置view.scene = scene; ↓view.camera = camera;//ビューを表示させる 3. 上演addChild(view);/** * 素材、オブジェクトなどの作成 *///マテリゕルを作成var material:BitmapMaterial = new BitmapMaterial(new leaf());//表示オブジェクトを作成 (プリミテゖブまたは3Dモデル)→マテリゕルを割り当てるvar plane:Plane = new Plane( material, 100, 100 );//シーンに3Dモデルを追加するscene.addChild(plane);/** * エンジンの実行 *///毎フレーム実行されるaddEventListener(Event.ENTER_FRAME, loop);function loop(e:Event):void{ //オブジェクトの移動、回転などの処理 plane.rotationY += 5; //ビューをレンダリングする view.render();} 39
  40. 40. おわりご意見、ご感想、ご質問など、お気軽にお寄せください。 http://orange-suzuki.com/blog/ 40
  41. 41. 参考にさせていただいたWebサ゗ト様 深く感謝いたします。(敬称略) Away3D http://away3d.com/ lidev! | Interactive Development (Alexander Zadorozhny) http://www.lidev.com.ar/ infinite turtles (Rob Bateman) http://www.infiniteturtles.co.uk/blog/ akihiro kamijo http://cuaoar.jp/日本語版 Flash Professional CS5 &amp; CS5.5 に Flash Player 11 設定を追加する MXP | ClockMaker Blog http://clockmaker.jp/blog/2011/11/fp11_publish/ FlashDevelop + FlashPlayer11(Molehill) + Away3D 4.0 Alpha での遊び方 http://blog.bk-zen.com/2011/02/28/428/ 41

×