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

1. 「最新のFlash3Dを使ってコンテンツを作って
みよう Away3D入門講座」
2011.11.20(日)
場所：有限会社ビバマンボ様オフゖス
特別協賛:ラ゗フサウンド株式会社様
有限会社ビバマンボ様
FLASHUP#12
orange-suzuki.com 鈴木克史
1

2. 本日のメニュー
orange-suzuki.com
2

3. 1. Away3Dについて
2. サンプルを使ってオリジナル作品を作ってみよう
3

4. Away3Dについて
orange-suzuki.com
4

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. Away3D：ショーケース
Nissan Stage-Juk3D
3D brand site for Nissan Europe
http://www.nissan-stagejuk3d.com/
精細に作りこまれた3Dモデルとシルクのようなスムーズな
レンダリングが特徴。カスタムした車で運転できる
*digitas : http://www.digitas.com/
6

7. Away3D：ショーケース
Delta Strike: Beta release on Facebook
Social 3D Action RPG
http://www.deltastrike.org/
ソーシャルオンラ゗ンRPG。クラシカルな
宇宙シューテゖングゲーム。
*Pro3games : http://pro3games.com/
7

8. Away3D：ショーケース
Battlegrounds of Eldhelm
Game
http://eldhelm.com/
マジック・ザ・ギャザリングを彷彿させる
オンラ゗ンフゔンタジーカードゲーム。
*Essence ltd : http://essenceworks.com/
8

9. Away3D：ショーケース
Naampetje.nl :3D e-Commerce
http://naampetje.nl/
好きなデザ゗ンの帽子をカスタムして注文できるEコマースサ゗ト。
ハ゗クオリテゖなテクスチャ、モデルが特徴。
9

10. Away3D：ショーケース
Christmas Card greets from Away3D
http://kerst.tribal-im.com/?vip=uhgn507
オリジナルのクリスマスカードを送ることができる。Away3Dオリジナルコンテンツ。
10

11. Away3D：主な特徴
・様々なフォーマットの゗ンポート/エクスポート、(ゕニメーションメッシュも含む)
・25種類以上の便利なプリミテゖブと拡張可能なマテリゕル
・バージョンの4.0では、Stage3D API(aka Molehill) をサポート
4000～8000ポリゴンが限界だったFlashlayer10のバージョンに比べ、100万ポリゴン
程度まで表現可能
・数少ないオープンソースの3Dエンジン
11

12. Away3D：マテリアル/シェーダー
・カラーマテリゕル ・バンプマッピング
・ビットマップマテリゕル ・ノーマルマッピング
・フォンシェーデゖング ・フレネル効果
・ゕウトラ゗ン ・草シェーダー
・フラットシェーデゖング ・ランバート反射
・ビデオマテリゕル ・表面散乱
・環境マッピング ・影
12

13. Away3D：カメラ、ライト
■カメラ ■フォグ(霧)
・フリーカメラ
・標的カメラ ■被写界深度
・空中カメラ
・追尾カメラ ■ライト
・ポ゗ントラ゗ト
■レンズ ・ゕンビエントラ゗ト
フゖッシュゕ゗～isometric(等身大) ・方向ラ゗ト
13

14. Away3D：プリミティブ
・直方体 ・ビルボード
・球 ・面(Plane)
・円錐 ・カプセル
・円柱 ・SkyBox
・トーラス（ドーナツ型） ・その他
14

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. Away3D：その他機能 その2
■ユーティリティ ■生成機能：Generators
FaceLink ベ゗クテクスチャ、ノーマルマップ生成、
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. Away3D：GUIアプリケーション
■Prefab3D
http://www.closier.nl/prefab/
http://www.youtube.com/watch?v=02YDN9KQD2k
http://www.youtube.com/watch?v=D-
YKdVsO07s&feature=player_embedded
17

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

20. サンプルを使って
オリジナル作品を作ってみよう
*Falling Leaves
http://orange-suzuki.com/flashup/12/sample/
20

21. サンプルについて
今回のサンプルではすべてのコードの説明は行いません。
「カスタマ゗ズ」項目を試しながら体験していただくスタ゗ルをとっています。
また、以下のゕ゗コンの意味はそれぞれこのようになっています。
サンプルの実行
・サンプルを実行してみましょう
カスタマイズ
・クエストが与えられるのでまずはやってみましょう。
答え
・クエストに対する答えを確認しましょう
TIPS
・さまざまなテクニックの紹介
21

22. 下準備
日本語版 Flash Professional CS5 & CS5.5 に Flash Player 11 設定を追加する
MXP
http://clockmaker.jp/blog/2011/11/fp11_publish/
注：今回のサンプルを試していただく前にこちらの記事をご確認いただくことをお勧めいたします。
引用：動作確認は Flash Playe 11 のインストールされたブラウザで行うようにとのことで、［パブリッシュプレ
ビュー］→［デフォルト（HTML）］（F12 / cmd-F12）の使用が推奨だそうです。この拡張機能ではFlash Pro
内部のプレイヤーまでは更新されないので、ムービープレビュー（ctrl-Enter / cmd-Enter）では、Flash Player
11の確認ができません。
22

23. 目次
1. シンプルな床の表示
2. マウスで動くカメラ
3. 床にライトを照らす
4. 霧をかける
5. 落ち葉を加える
23

24. サンプル1：シンプルな床の表示 (Sample1.as)
1. サンプルフォルダ→fla/flashup12_sample.flaを開き、ドキュメントクラスにSample1.asを設定。
(以降のサンプルではこちらのドキュメントクラスを変更していきます。)
2. パブリッシュプレビューを行います。
カスタマイズ
・回転を早くしてみよう
・大きさを変えてみよう
・いろんな回転をさせてみよう
24

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. サンプル2：マウスで動くカメラ (sample2.as)
カスタマイズ
・動く速さを変えてみよう
・動く範囲を変えてみよう
26

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. サンプル3：床にライトを照らす (sample3.as)
カスタマイズ
・ラ゗トの位置を変えてみよう
・ラ゗トの色を変えてみよう
・床の光の反射率を変えてみよう
28

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. サンプル3：床にライトを照らす (sample3.as)
material.specular による違い → ハ゗ラ゗トの強度に影響
material.specular = 0; material. specular = 1;
material. specular = 1.2; material. specular = 2; 30

31. サンプル3：床にライトを照らす (sample3.as)
material.gloss による違い → ハ゗ラ゗トのシャープネスに影響
material.gloss = 0; material.gloss = 5;
material.gloss = 20; material.gloss = 50; 31

32. サンプル3：床にライトを照らす (sample3.as)
material.ambient による違い → 環境光の反射強度に影響
material. ambient = 0; material. ambient = 1;
material. ambient = 20; material. ambient = 50; 32

33. サンプル4：霧をかける (sample4.as)
カスタマイズ
・霧の色を変えてみよう
・霧の距離(奥行き感)を変えてみよう
33

34. サンプル4：霧をかける (sample4.as)
・霧の色を変えるには？
new FogMethod(350, 0xFF0000);
・霧の距離(奥行き感)を変えるには？
new FogMethod(100, 0xFF0000);
34

35. サンプル5：落ち葉を加える (sample5.as)
カスタマイズ
・落ち葉の数を変えてみよう
・落ち葉の動き方を変えてみよう
35

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. 補足：ループするテクスチャの作り方
1. Photoshopのフゖルタ→スクロールを使って、画像の半分の幅ずらす
2. 境目をごまかす(この場合は落ち葉で隠す)
37

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. 補足：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. おわり
ご意見、ご感想、ご質問など、お気軽にお寄せください。
http://orange-suzuki.com/blog/
40

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