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