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.
「Flare3D入門講座 簡単な3Dのゲームを作ってみよう」2012.3.4(日)場所:株式会社KDDIウェブコミュニケーションズ様 セミナールーム特別協賛:株式会社KDDIウェブコミュニケーションズ様                     ...
本日のメニューorange-suzuki.com                          2
1.   Flare3Dについて2.   Flare3D Studioのデモ3.   サンプルを使って簡単な3Dゲームを作ってみよう                               3
Flare3Dについてorange-suzuki.com                              4
Flare3D:概要1. ActionScript 3.0 リゕルタ゗ム3Dエンジン2. Flashゕーテゖスト、プログラマーに最適化されたツールセットを提供3. Autodesk社の3D studio Maxのプラグ゗ンが提供されている4. ...
Flare3D:ラ゗センス1. 非商用ラ゗センス 学習用、または非商用のためのラ゗センス。無料で使うことができます。2. 商用ラ゗センス 商用使用のためのラ゗センス。 1ラ゗センスにつき、年間$496のサブスクリプション制。3. コーポレートラ...
Flare3D:ショーケースRepublic Bikehttp://www.republicbike.com/build_plato.asp自分でカスタマ゗ズした自転車を360度ビュワーで確認、さらに購入することができる。友人へのシェゕも可能。...
Flare3D:ショーケースSOCCERTRIXhttp://www.soccertrix.com/http://flare3d.com/demos/soccertrix2/一流のサッカープレ゗ヤーの華麗なテクニックを3Dで見ることができる。W...
Flare3D:ショーケースSolitaire3http://www.mochimedia.com/games/play/solitaire-3#リゕルなカードの動きとともに楽しむことができるシンプルなカードゲーム。              ...
Flare3D:ショーケースRADIOCOMMANDEhttp://www.jeu-de-voiture.com/course+de+voiture+radiocommande.php部屋中に散りばめられたコ゗ンを制限時間内にラジコンで拾い集め...
Flare3D:ショーケースSHERWOOD DUNGEONhttp://www.mmorpg.ca/sherwoodalpha.html (Flashデモ)http://www.sherwooddungeon.com/ (公式サ゗ト)カナダの...
Flare3D Studio                    デモンストレーションorange-suzuki.com                                   12
手順1: モデルデータの読み込み             キャラクターのゕニメーションは、             Mixamoというサービスを利用しました。             モーションデータを.dae形式でダウンロード        ...
手順2: プリミテゖブの配置                 メニューからCreate -> Sphereを選択すると、                 球が配置できます。                 モデルを選択して           ...
手順3: テクスチャの設定                画像フゔ゗ルをモデルにドラッグ&ドロップするだけで                テクスチャの設定ができます                マテリゕルにスペキュラー、スペキュラーマップを...
手順4: 配置をゕレンジ               キャラクターと地球をまとめて選択し、               Edit -> Duplicate               で複製します。               そのまま移動させ...
手順5: ラ゗テゖング              ステージの適当な箇所をクリック後、              LIGHT SETTINGS を編集。              好みのカラーに変更します                 今回、デ...
手順6: フゔ゗ルに出力               File -> Publish をクリックすると、               プロジェクトの保存ウゖンドウが表示されます。               保存をクリックすると、自動でhtml...
~休憩タ゗ム~          19
Flare3Dで簡単な                    ミニゲームを作ってみようorange-suzuki.com                                  20
下準備1. 最新のFlashDevelopを゗ンストール2. 最新のFlashPlayerを゗ンストール3. Flare3D 2.0 Pre-Releaseをサ゗トからダウンロード   http://www.flare3d.com/   ※要ユ...
サンプル1: シーンの作成と3Dモデルデータの読み込み//シーンの作成var scene:Scene3D = new Scene3D(this);※引数はDisplayObject。   Scene3Dの代わりにViewer3Dを使うとマウスの...
サンプル1: シーンの作成と3Dモデルデータの読み込み//3Dモデルデータの読み込みについてplanet = scene.addChildFromFile( "planet.f3d" );astronaut = scene.addChildFr...
サンプル2: 各オブジェクトに動きを与えるには?          1. オブジェクトの位置             chara.x = 10;   //y,zも同様          2. オブジェクトのY軸周りの回転            ...
サンプル2: 各オブジェクトに動きを与えるには?1. 3Dモデルデータからの各オブジェクトを取得するには?   sky = planet.getChildByName( “sky” ); //戻り値はPivot3D2. userDataプロパテ...
サンプル2: 各オブジェクトに動きを与えるには?                                                   カスタマ゗ズ                                         ...
サンプル3: キャラクターを追いかけるカメラの作り方  カメラの位置と、カメラの向きを常にキャラクターからの相対値として一   定に保つ便利な関数がある1. カメラ位置の指定: setPositionWithReference   Pivot3...
サンプル3: キャラクターを追いかけるカメラの作り方                カスタマ゗ズ             ・カメラゕングルを変えてみよう             ・カメラに揺れの効果を加えてみよう                ...
サンプル4-1: キーボード入力を取得するには? キーボード゗ベントを自作しなくても便利な関数が用意されています。 //updateEvent内 //キーボードの上を押したときに、処理をさせる方法 if ( Input3D.keyDown( I...
サンプル4-2: キャラクターに球上を歩かせるには?レ゗の交差判定メソッドを使って、キャラクターを球上に這う動きを作ります。レ゗とは直線のことを指します。ある空間上の点と向きのベクトルを指定したものです。ray = new RayCollisi...
サンプル5: 障害物との衝突を検出するには?1. SphereCollision゗ンスタンスを作成し、それを包むターゲットPivotオブジェクト、直径、   オフセットを代入します。   collisions = new SphereColli...
サンプル5: 障害物との衝突を検出するには?  計算負荷を減らすコツ1. ローポリが大事   SphereCollisionは計算負荷が高いため、障害物は少ないポリゴン数で作成することが   大事2. デバッグモードとリリースモードで計算負荷が...
サンプル6: パーテゖクルを追加するには1. ParticleEmiter3Dクラスを継承したクラス作成2. スーパークラスのメソッドをオーバーラ゗ド →                    動きを実装3. ParticleMaterial3...
サンプル6: パーテゖクルを追加するには//゗ンスタンスの定義private var smoke:Texture3D;private var fire:Texture3D;private var fireEmiter:FireEmiter;//...
サンプル7: キャラクターをジャンプさせるには?//ステート(状態)を保持する変数、ジャンプの値の変数を作成//ゲームロジックの変数private var state:String = "run";private var jumpValue:N...
サンプル8: 敵をたおす/やられるロジックを実装するには//カメラのゆれエフェクトのための変数private var shakeFactor:Number;// 扇風機とキャラクターとの距離によって状態を変更します// 距離がradiusより短...
サンプル8: 敵を復活させる仕組み              一度倒した敵の正反対(球の裏側)に              進んだときに、敵を復活させる方法           //障害物のUpベクトル           var mineUp...
サンプル9: GUIを追加するには?1. Flaフゔ゗ルを元にFlash Professionalを用いて、SWCフゔ゗ルを生成2. SWCにあるシンボルをnewすることで表示します   ※今回は詳細は割愛します//3Dオブジェクトの画面上での...
Special Thanks!                               Adrian Simonovich                                      and                  ...
おわりご意見、ご感想、ご質問など、お気軽にお寄せください。     http://orange-suzuki.com/blog/                                      40
Upcoming SlideShare
Loading in …5
×

Flashup13 Basic Training of Flare3D

3,874 views

Published on

Flare3Dの入門講座です。

Published in: Education
  • Be the first to comment

Flashup13 Basic Training of Flare3D

  1. 1. 「Flare3D入門講座 簡単な3Dのゲームを作ってみよう」2012.3.4(日)場所:株式会社KDDIウェブコミュニケーションズ様 セミナールーム特別協賛:株式会社KDDIウェブコミュニケーションズ様 FLASHUP#13 orange-suzuki.com 鈴木克史 1
  2. 2. 本日のメニューorange-suzuki.com 2
  3. 3. 1. Flare3Dについて2. Flare3D Studioのデモ3. サンプルを使って簡単な3Dゲームを作ってみよう 3
  4. 4. Flare3Dについてorange-suzuki.com 4
  5. 5. Flare3D:概要1. ActionScript 3.0 リゕルタ゗ム3Dエンジン2. Flashゕーテゖスト、プログラマーに最適化されたツールセットを提供3. Autodesk社の3D studio Maxのプラグ゗ンが提供されている4. 多くのゲームスタジオ、製作会社、デベロッパーに使用されている5. .f3dという独自のモデル形式。テクスチャとモデルが合体したバ゗ナリー形式 5
  6. 6. Flare3D:ラ゗センス1. 非商用ラ゗センス 学習用、または非商用のためのラ゗センス。無料で使うことができます。2. 商用ラ゗センス 商用使用のためのラ゗センス。 1ラ゗センスにつき、年間$496のサブスクリプション制。3. コーポレートラ゗センス カスタマ゗ズ可能なラ゗センス。要問い合わせ 6
  7. 7. Flare3D:ショーケースRepublic Bikehttp://www.republicbike.com/build_plato.asp自分でカスタマ゗ズした自転車を360度ビュワーで確認、さらに購入することができる。友人へのシェゕも可能。 7
  8. 8. Flare3D:ショーケースSOCCERTRIXhttp://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. 9. Flare3D:ショーケースSolitaire3http://www.mochimedia.com/games/play/solitaire-3#リゕルなカードの動きとともに楽しむことができるシンプルなカードゲーム。 9
  10. 10. Flare3D:ショーケースRADIOCOMMANDEhttp://www.jeu-de-voiture.com/course+de+voiture+radiocommande.php部屋中に散りばめられたコ゗ンを制限時間内にラジコンで拾い集めるゲーム。衝突判定には、QuickBox2Dを使用し、制作期間はたったの2日!作者はフランスのクリエ゗ター @alchymi さん 10
  11. 11. Flare3D:ショーケースSHERWOOD DUNGEONhttp://www.mmorpg.ca/sherwoodalpha.html (Flashデモ)http://www.sherwooddungeon.com/ (公式サ゗ト)カナダのゲームクリエイター・Gene Endrody氏が一人で作ったという月刊100万UUを誇る無料のオンラインゲーム。元々Shockwave版だったものの、現在Flash版を開発中とのこと。 11
  12. 12. Flare3D Studio デモンストレーションorange-suzuki.com 12
  13. 13. 手順1: モデルデータの読み込み キャラクターのゕニメーションは、 Mixamoというサービスを利用しました。 モーションデータを.dae形式でダウンロード Flare3D Studioにドラッグ&ドロップします 上下反転していることがあるので、 一旦保存し、再起動すると直ります。 13
  14. 14. 手順2: プリミテゖブの配置 メニューからCreate -> Sphereを選択すると、 球が配置できます。 モデルを選択して Wキー → 移動 Eキー → 回転 Rキー → スケーリング 大きさと位置を調整します。 複数選択することでまとめて処理ができます 14
  15. 15. 手順3: テクスチャの設定 画像フゔ゗ルをモデルにドラッグ&ドロップするだけで テクスチャの設定ができます マテリゕルにスペキュラー、スペキュラーマップを設定。 光の反射を表現できます。 スペキュラーマップのリピートの値を変更して、 ちょっと変わった効果が表現できます。 15
  16. 16. 手順4: 配置をゕレンジ キャラクターと地球をまとめて選択し、 Edit -> Duplicate で複製します。 そのまま移動させて、配置をゕレンジします。 右クリックで、デフォルトカメラのゕングル変更、 ホ゗ール操作でズームを変更できます。 16
  17. 17. 手順5: ラ゗テゖング ステージの適当な箇所をクリック後、 LIGHT SETTINGS を編集。 好みのカラーに変更します 今回、デフォルトのラ゗トを使用しましたが、 個別にラ゗トを追加することも可能 17
  18. 18. 手順6: フゔ゗ルに出力 File -> Publish をクリックすると、 プロジェクトの保存ウゖンドウが表示されます。 保存をクリックすると、自動でhtml, swf が生成され、 Flashを作成できます。 作成した、.f3dフゔ゗ルをスクリプトで 読み込むことも可能です 18
  19. 19. ~休憩タ゗ム~ 19
  20. 20. Flare3Dで簡単な ミニゲームを作ってみようorange-suzuki.com 20
  21. 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. 22. サンプル1: シーンの作成と3Dモデルデータの読み込み//シーンの作成var scene:Scene3D = new Scene3D(this);※引数はDisplayObject。 Scene3Dの代わりにViewer3Dを使うとマウスのドラッグ操作、 ホ゗ール操作などが有効になります。 22
  23. 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. 24. サンプル2: 各オブジェクトに動きを与えるには? 1. オブジェクトの位置 chara.x = 10; //y,zも同様 2. オブジェクトのY軸周りの回転 chara.rotateY(1); //引数は増分 3. オブジェクトのスケーリング chara.scaleX = 10; //10倍に拡大 右手座標系 24
  25. 25. サンプル2: 各オブジェクトに動きを与えるには?1. 3Dモデルデータからの各オブジェクトを取得するには? sky = planet.getChildByName( “sky” ); //戻り値はPivot3D2. userDataプロパテゖとは? Pivot3Dクラスのオブジェクトは、ユーザーが自由に使えるプロパテゖがある それが、 userDataプロパテゖ(Object型)です。ここに例えば扇風機の回転ス ピードを格納することで、それぞれのスピードを保持できる。3. メ゗ンループはupdateEventで受け取ることができます。 25
  26. 26. サンプル2: 各オブジェクトに動きを与えるには? カスタマ゗ズ ・オブジェクトの大きさを変えてみよう ・オブジェクトの回転させてみよう//クラスプロパテゖprivate var param1:Number = 0;//updateEvent内planet.getChildByName("floor").scaleX = 0.7 + 0.5 * Math.sin(param1 += 0.03); 26
  27. 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. 28. サンプル3: キャラクターを追いかけるカメラの作り方 カスタマ゗ズ ・カメラゕングルを変えてみよう ・カメラに揺れの効果を加えてみよう 28
  29. 29. サンプル4-1: キーボード入力を取得するには? キーボード゗ベントを自作しなくても便利な関数が用意されています。 //updateEvent内 //キーボードの上を押したときに、処理をさせる方法 if ( Input3D.keyDown( Input3D.UP ) ) container.translateZ( 1 ); 29
  30. 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. 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. 32. サンプル5: 障害物との衝突を検出するには? 計算負荷を減らすコツ1. ローポリが大事 SphereCollisionは計算負荷が高いため、障害物は少ないポリゴン数で作成することが 大事2. デバッグモードとリリースモードで計算負荷が大きく異なります3. SphereCollisionは、拡大されたオブジェクトには効かないので、障害物は1倍(ノーマ ラ゗ズ)しましょう 32
  33. 33. サンプル6: パーテゖクルを追加するには1. ParticleEmiter3Dクラスを継承したクラス作成2. スーパークラスのメソッドをオーバーラ゗ド → 動きを実装3. ParticleMaterial3Dクラスを作成、テクスチャ、カラー、その他のパーテゖクルに 適合するフゖルターをセット4. マテリゕルとパーテゖクルテンプレートを用いて、ParticleEmiter3Dクラスを作成5. 最後にエミッターの値を設定します。 emitParticlesPerFrame, particlesLife, decrementPerFrameなど 33
  34. 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. 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. 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. 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. 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. 39. Special Thanks! Adrian Simonovich and Flare3D Team http://www.flare3d.com/ Building a 3D Flash game with Flare3D and Stage3Dhttp://www.adobe.com/devnet/flashplayer/articles/flare3d-building-3d-game.html 39
  40. 40. おわりご意見、ご感想、ご質問など、お気軽にお寄せください。 http://orange-suzuki.com/blog/ 40

×