Más contenido relacionado La actualidad más candente (20) Similar a Flashup13 Basic Training of Flare3D (20) 3. 1. Flare3Dについて
2. Flare3D Studioのデモ
3. サンプルを使って簡単な3Dゲームを作ってみよう
3
5. Flare3D：概要
1. ActionScript 3.0 リゕルタム3Dエンジン
2. Flashゕーテゖスト、プログラマーに最適化されたツールセットを提供
3. Autodesk社の3D studio Maxのプラグンが提供されている
4. 多くのゲームスタジオ、製作会社、デベロッパーに使用されている
5. .f3dという独自のモデル形式。テクスチャとモデルが合体したバナリー形式
5
13. 手順1: モデルデータの読み込み
キャラクターのゕニメーションは、
Mixamoというサービスを利用しました。
モーションデータを.dae形式でダウンロード
Flare3D Studioにドラッグ＆ドロップします
上下反転していることがあるので、
一旦保存し、再起動すると直ります。
13
14. 手順2: プリミテゖブの配置
メニューからCreate -> Sphereを選択すると、
球が配置できます。
モデルを選択して
Wキー → 移動
Eキー → 回転
Rキー → スケーリング
大きさと位置を調整します。
複数選択することでまとめて処理ができます
14
15. 手順3: テクスチャの設定
画像フゔルをモデルにドラッグ&ドロップするだけで
テクスチャの設定ができます
マテリゕルにスペキュラー、スペキュラーマップを設定。
光の反射を表現できます。
スペキュラーマップのリピートの値を変更して、
ちょっと変わった効果が表現できます。
15
16. 手順4: 配置をゕレンジ
キャラクターと地球をまとめて選択し、
Edit -> Duplicate
で複製します。
そのまま移動させて、配置をゕレンジします。
右クリックで、デフォルトカメラのゕングル変更、
ホール操作でズームを変更できます。
16
17. 手順5: ラテゖング
ステージの適当な箇所をクリック後、
LIGHT SETTINGS を編集。
好みのカラーに変更します
今回、デフォルトのラトを使用しましたが、
個別にラトを追加することも可能
17
18. 手順6: フゔルに出力
File -> Publish をクリックすると、
プロジェクトの保存ウゖンドウが表示されます。
保存をクリックすると、自動でhtml, swf が生成され、
Flashを作成できます。
作成した、.f3dフゔルをスクリプトで
読み込むことも可能です
18
23. サンプル1: シーンの作成と3Dモデルデータの読み込み
//3Dモデルデータの読み込みについて
planet = scene.addChildFromFile( "planet.f3d" );
astronaut = scene.addChildFromFile( "astronaut.f3d" );
//読み込み中のプログレスベント、読み込み完了ベント
scene.addEventListener( Scene3D.PROGRESS_EVENT, progressEvent );
scene.addEventListener( Scene3D.COMPLETE_EVENT, completeEvent );
addChildFromFileの戻り値はPivot3Dクラスのンスタンスとなる。
Pivot3Dクラスとは、いわゆるMovieClipと同じと考えてOK。
移動、拡縮、回転、さらに他のオブジェクトをaddChildできる。
オブジェクトの最小単位。
23
24. サンプル2: 各オブジェクトに動きを与えるには？
1. オブジェクトの位置
chara.x = 10; //y,zも同様
2. オブジェクトのY軸周りの回転
chara.rotateY(1); //引数は増分
3. オブジェクトのスケーリング
chara.scaleX = 10; //10倍に拡大
右手座標系
24
25. サンプル2: 各オブジェクトに動きを与えるには？
1. 3Dモデルデータからの各オブジェクトを取得するには？
sky = planet.getChildByName( “sky” ); //戻り値はPivot3D
2. userDataプロパテゖとは？
Pivot3Dクラスのオブジェクトは、ユーザーが自由に使えるプロパテゖがある
それが、 userDataプロパテゖ(Object型)です。ここに例えば扇風機の回転ス
ピードを格納することで、それぞれのスピードを保持できる。
3. メンループはupdateEventで受け取ることができます。
25
26. サンプル2: 各オブジェクトに動きを与えるには？
カスタマズ
・オブジェクトの大きさを変えてみよう
・オブジェクトの回転させてみよう
//クラスプロパテゖ
private var param1:Number = 0;
//updateEvent内
planet.getChildByName("floor").scaleX = 0.7 + 0.5 * Math.sin(param1 += 0.03);
26
27. サンプル3: キャラクターを追いかけるカメラの作り方
カメラの位置と、カメラの向きを常にキャラクターからの相対値として一
定に保つ便利な関数がある
1. カメラ位置の指定： setPositionWithReference
Pivot3DUtils.setPositionWithReference( scene.camera, 0, 80, -20,
container, 0.1 );
2. カメラの向きの指定： lookAtWithReference
Pivot3DUtils.lookAtWithReference( scene.camera, 0, 0, 0, container,
container.getDir(), 0.05 );
27
30. サンプル4-2: キャラクターに球上を歩かせるには？
レの交差判定メソッドを使って、キャラクターを球上に這う動きを作ります。
レとは直線のことを指します。ある空間上の点と向きのベクトルを指定したものです。
ray = new RayCollision(); //レの作成
ray.addCollisionWith( planet.getChildByName( “floor” ), false ); //レに床を追加
//ループ関数内でレの再定義
var from:Vector3D = container.localToGlobal( new Vector3D( 0, 100, 0 ) );
var dir:Vector3D = container.getDown();
//衝突判定チェック 複雑な地形でも
if ( ray.test( from, dir ) ){
var info:CollisionInfo = ray.data[0]; //衝突位置を取得
判定できる！
//補正
container.setPosition( info.point.x, info.point.y, info.point.z );
container.setNormalOrientation( info.normal, 0.05 ); 30
}
32. サンプル5: 障害物との衝突を検出するには？
計算負荷を減らすコツ
1. ローポリが大事
SphereCollisionは計算負荷が高いため、障害物は少ないポリゴン数で作成することが
大事
2. デバッグモードとリリースモードで計算負荷が大きく異なります
3. SphereCollisionは、拡大されたオブジェクトには効かないので、障害物は1倍(ノーマ
ラズ)しましょう
32
33. サンプル6: パーテゖクルを追加するには
1. ParticleEmiter3Dクラスを継承したクラス作成
2. スーパークラスのメソッドをオーバーラド → 動きを実装
3. ParticleMaterial3Dクラスを作成、テクスチャ、カラー、その他のパーテゖクルに
適合するフゖルターをセット
4. マテリゕルとパーテゖクルテンプレートを用いて、ParticleEmiter3Dクラスを作成
5. 最後にエミッターの値を設定します。
emitParticlesPerFrame, particlesLife, decrementPerFrameなど
33
34. サンプル6: パーテゖクルを追加するには
//ンスタンスの定義
private var smoke:Texture3D;
private var fire:Texture3D;
private var fireEmiter:FireEmiter;
//スモークのマテリゕル
smoke = scene.addTextureFromFile( "smoke.png" );
//火のこのマテリゕル
fire = scene.addTextureFromFile( "particle.png" );
//キャラクターから出る火のこの演出
fireEmiter = new FireEmiter( fire );
fireEmiter.parent = astronaut;
//障害物から出るスモークの演出
var particles:SmokeEmiter = new SmokeEmiter( smoke );
particles.copyTransformFrom( pivot );
particles.parent = scene;
34
35. サンプル7: キャラクターをジャンプさせるには？
//ステート(状態)を保持する変数、ジャンプの値の変数を作成
//ゲームロジックの変数
private var state:String = "run";
private var jumpValue:Number = 0;
//ゲームロジックを構築します
private function gameLogics():void{
switch( state ) {
case "run":
if ( Input3D.keyHit( Input3D.SPACE ) ) {
jumpValue = 4;
fireEmiter.emitParticlesPerFrame = 25;
state = "jump";
container.gotoAndPlay( "jump", 3 );
}
break;
case "jump":
if ( astronaut.y == 0 ) {
state = "run";
container.gotoAndPlay( "run", 3 );
}
break;
}
} 35
36. サンプル8: 敵をたおす/やられるロジックを実装するには
//カメラのゆれエフェクトのための変数
private var shakeFactor:Number;
// 扇風機とキャラクターとの距離によって状態を変更します
// 距離がradiusより短い場合、状態をfanに変更します
if ( Vector3D.distance( f.getPosition(), position ) < radius ) state = "fan";
//カメラの揺れを実装します
if ( shakeFactor > 0 )
{
scene.camera.x += Math.random() * shakeFactor;
scene.camera.y += Math.random() * shakeFactor;
scene.camera.z += Math.random() * shakeFactor;
shakeFactor *= 0.9;
}
36
37. サンプル8: 敵を復活させる仕組み
一度倒した敵の正反対(球の裏側)に
進んだときに、敵を復活させる方法
//障害物のUpベクトル
var mineUp:Vector3D = m.getUp();
//キャラクターのUpベクトル
var contUp:Vector3D = container.getUp();
//2つのベクトルが正反対になったときに、復活さ
せる
if ( mineUp.dotProduct( contUp ) < 0 )
m.visible = true;
37
38. サンプル9: GUIを追加するには？
1. Flaフゔルを元にFlash Professionalを用いて、SWCフゔルを生成
2. SWCにあるシンボルをnewすることで表示します
※今回は詳細は割愛します
//3Dオブジェクトの画面上での位置を取得するには
private function newPop():void
{
var pos:Vector3D = container.getScreenCoords();
var pop:Pop = new Pop();
pop.x = pos.x;
pop.y = pos.y;
addChild( pop );
}
38
39. Special Thanks!
Adrian Simonovich
and
Flare3D Team
http://www.flare3d.com/
Building a 3D Flash game with Flare3D and Stage3D
http://www.adobe.com/devnet/flashplayer/articles/flare3d-building-3d-game.html
39
