Contenu connexe Similaire à Flashup 12 Basic Training of Away3D (20) Flashup 12 Basic Training of Away3D3. 1. Away3Dについて
2. サンプルを使ってオリジナル作品を作ってみよう
3
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
7. Away3D:ショーケース
Delta Strike: Beta release on Facebook
Social 3D Action RPG
http://www.deltastrike.org/
ソーシャルオンランRPG。クラシカルな
宇宙シューテゖングゲーム。
*Pro3games : http://pro3games.com/
7
12. Away3D:マテリアル/シェーダー
・カラーマテリゕル ・バンプマッピング
・ビットマップマテリゕル ・ノーマルマッピング
・フォンシェーデゖング ・フレネル効果
・ゕウトラン ・草シェーダー
・フラットシェーデゖング ・ランバート反射
・ビデオマテリゕル ・表面散乱
・環境マッピング ・影
12
13. Away3D:カメラ、ライト
■カメラ ■フォグ(霧)
・フリーカメラ
・標的カメラ ■被写界深度
・空中カメラ
・追尾カメラ ■ライト
・ポントラト
■レンズ ・ゕンビエントラト
フゖッシュゕ~isometric(等身大) ・方向ラト
13
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
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
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
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
34. サンプル4:霧をかける (sample4.as)
・霧の色を変えるには?
new FogMethod(350, 0xFF0000);
・霧の距離(奥行き感)を変えるには?
new FogMethod(100, 0xFF0000);
34
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
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
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 & 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