Flare3Dの入門講座です。

1. 「Flare3D入門講座
簡単な3Dのゲームを作ってみよう」
2012.3.4(日)
場所：株式会社KDDIウェブコミュニケーションズ様 セミナールーム
特別協賛:株式会社KDDIウェブコミュニケーションズ様
FLASHUP#13
orange-suzuki.com 鈴木克史
1

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

3. 1. Flare3Dについて
2. Flare3D Studioのデモ
3. サンプルを使って簡単な3Dゲームを作ってみよう
3

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

5. Flare3D：概要
1. ActionScript 3.0 リゕルタ゗ム3Dエンジン
2. Flashゕーテゖスト、プログラマーに最適化されたツールセットを提供
3. Autodesk社の3D studio Maxのプラグ゗ンが提供されている
4. 多くのゲームスタジオ、製作会社、デベロッパーに使用されている
5. .f3dという独自のモデル形式。テクスチャとモデルが合体したバ゗ナリー形式
5

6. Flare3D：ラ゗センス
1. 非商用ラ゗センス
学習用、または非商用のためのラ゗センス。無料で使うことができます。
2. 商用ラ゗センス
商用使用のためのラ゗センス。
1ラ゗センスにつき、年間$496のサブスクリプション制。
3. コーポレートラ゗センス
カスタマ゗ズ可能なラ゗センス。要問い合わせ
6

7. Flare3D：ショーケース
Republic Bike
http://www.republicbike.com/build_plato.asp
自分でカスタマ゗ズした自転車を360度ビュワーで確認、さらに購入することができる。
友人へのシェゕも可能。 7

8. Flare3D：ショーケース
SOCCERTRIX
http://www.soccertrix.com/
http://flare3d.com/demos/soccertrix2/
一流のサッカープレ゗ヤーの華麗なテクニックを3Dで見ることができる。
Webまたは、iPhoneゕプリで楽しめる。
ユーザーからの動画の投稿、投票、ランキングなどもある。
Unity版をFlash版へ移行するらしい。
*モーションキャプチャーの制作の様子
http://www.youtube.com/watch?v=YJNo_YvrCqs&feature=player_embedded#!
8

9. Flare3D：ショーケース
Solitaire3
http://www.mochimedia.com/games/play/solitaire-3#
リゕルなカードの動きとともに楽しむことができる
シンプルなカードゲーム。
9

10. Flare3D：ショーケース
RADIOCOMMANDE
http://www.jeu-de-voiture.com/course+de+voiture+radiocommande.php
部屋中に散りばめられたコ゗ンを制限時間内にラジコンで拾い集めるゲーム。
衝突判定には、QuickBox2Dを使用し、制作期間はたったの2日！
作者はフランスのクリエ゗ター @alchymi さん
10

11. Flare3D：ショーケース
SHERWOOD DUNGEON
http://www.mmorpg.ca/sherwoodalpha.html (Flashデモ)
http://www.sherwooddungeon.com/ (公式サ゗ト)
カナダのゲームクリエイター・Gene Endrody氏が一人
で作ったという月刊100万UUを誇る無料のオンライ
ンゲーム。
元々Shockwave版だったものの、現在Flash版
を開発中とのこと。
11

12. Flare3D Studio
デモンストレーション
orange-suzuki.com
12

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

19. ～休憩タ゗ム～
19

20. Flare3Dで簡単な
ミニゲームを作ってみよう
orange-suzuki.com
20

21. 下準備
1. 最新のFlashDevelopを゗ンストール
2. 最新のFlashPlayerを゗ンストール
3. Flare3D 2.0 Pre-Releaseをサ゗トからダウンロード
http://www.flare3d.com/
※要ユーザー登録
4. プロジェクト設定を開きプレ゗ヤーのバージョンの箇所を11に変更します
5. FlashDevelopのプロジェクトパネルを開き、lib/Flare3D_2042.swcを右ク
リックし、‘Add to Library‘ (ラ゗ブラリに追加)をクリック
21

22. サンプル1: シーンの作成と3Dモデルデータの読み込み
//シーンの作成
var scene:Scene3D = new Scene3D(this);
※引数はDisplayObject。
Scene3Dの代わりにViewer3Dを使うとマウスのドラッグ操作、
ホ゗ール操作などが有効になります。
22

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

28. サンプル3: キャラクターを追いかけるカメラの作り方
カスタマ゗ズ
・カメラゕングルを変えてみよう
・カメラに揺れの効果を加えてみよう
28

29. サンプル4-1: キーボード入力を取得するには？
キーボード゗ベントを自作しなくても便利な関数が用意されています。
//updateEvent内
//キーボードの上を押したときに、処理をさせる方法
if ( Input3D.keyDown( Input3D.UP ) ) container.translateZ( 1 );
29

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
}

31. サンプル5: 障害物との衝突を検出するには？
1. SphereCollision゗ンスタンスを作成し、それを包むターゲットPivotオブジェクト、直径、
オフセットを代入します。
collisions = new SphereCollision( container, 3, new Vector3D( 0, 3, 0 ) );
2. SphereCollision゗ンスタンスに対して障害物を追加します。
collisions.addCollisionWith( object );
3. ループ関数の中で、collision゗ンスタンスを更新します。
collisions.slider(),
※衝突が発生した場合は、衝突データを使うことができます。
31

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

40. おわり
ご意見、ご感想、ご質問など、お気軽にお寄せください。
http://orange-suzuki.com/blog/
40