人生ゲーム漬けなダメ人間のBlog

ページ内検索
<< April 2017 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
月ごとで検索 カテゴリーで検索

プロフィール

ここなのプロフィールページ / 過去展示物はこちら / 昔の日記:fUteiKi_niKKi(old)

コンテンツはここから

【Away3D】3Dコンテンツ表示の手順をまとめてみた

前回の日記で、成果物
ソースコードの全体を置いてあります。

3Dシーンを表示できるようになるまでに
結構なプロセスを踏むことになります。

最後までついてきてくれると幸いです。

(´・ω・`)<ぶっちゃけ、今ならUnity最強な気がするけどな!

※意訳:引き返すなら今のうちだからな!

全体の概要はこんな感じ

ネット上のプラクティスでは
常にプリミティブを扱うことしかしてくれません。

が、実際に使われるシナリオを考えると
3Dシーンを作成し、それを表示できなければ
殆ど使いみちなんてないと思います。

今回は、そこも含めて紹介しようかと。
大雑把に手順をならべると以下な感じ。

  1. 3Dツール で 形状、3Dシーン を作成
  2. AWD形式 にコンバート
  3. AwayBuilder で内容確認。 Light や Camera、Animation の関連付け等の設定を行う
  4. Flash CC にて flaファイル を作成
  5. flaファイル のコンパイル設定を変更
  6. Flash CC で3D部分のコーディング
  7. UI部分のコーディング
  8. レンダリング & 最終調整
  9. 出力完了

大雑把だけど、やること多いね、はい。
覚悟が出来た人だけ続きを読みましょう(´・ω・`)


順番にポイントになりそうなところを
つらつら、と書いていきます。

3Dツールまわり


自分も昔は Lightwaver でブイブイいってました。
が、今は出先での作業しやすさとかから安価なツールを使っています。
  • モデラー:メタセコ
  • シーン、アニメーション:ToyStudioAdvance
  • コンバータ:Unwrap3D
Unity の場合はメタセコ、トイスタだけで済みます。

Away3Dの場合は後々のメンテしやすさを考慮すると、
もう少しだけ手間をかけてあげないと使いづらいかも。

自分の場合は後々の作業を考えると
複数アニメーションを保持しておきたかったので、
以下のような手順でAWDへの変換をしています。


AwayBuilderでオーサリングできるようにする

AwayBuilderは、
AWDファイルを編集できるオーサリングツールです。
読み込んできたモデルのアニメーション関連付けや
ライト、カメラの影響などを視覚的に編集することができるツールです。

Away3D は dae など幾つかのフォーマットをサポートしています。
しかし、 fbx形式 を読み込むことはできません。

また、AWDフォーマット以外のファイル形式では fbx形式 に比べ
複雑なシーン情報を保持することができない仕様ものが多いです。

なので、Away3D上で多様なコンテンツ制作に対応するには、
AWD形式か、MD5形式のどちらかでのやりとりが必須になってきます。

ただ、全ての情報を AwayBuilder へ正確に
インポートできる仕組みはそれほど多くはありません。

そういう理由から、以下の様な手順を踏んで
AwayBuilder へ読み込ませるようにしました。

  1. トイスタでシーンを構築後、x形式でエクスポート
  2. x形式をUnwrap3Dで読み込み。AWD形式で保存
  3. エクスポートしたAWDファイルをシーンにインポート
  4. インポートされたシーン内の各要素を関連付けして保存

この手順でも幾つか注意事項があります。
どの形式で読み込ませても、
カメラ、ライト情報は持ち込めません。

ボーン入りのモデルがある場合に
以下のような状態だとエクスポートエラーになります。
  1. ルートボーンの位置が原点にない
  2. 根本から分岐が発生しルートが特定しづらい状態

最後に x形式だと座標系が異なります。

インポート時に正しい向きになっているか
わかるようにしておくと手戻りを少なくできると思います。

AWD保存することができたら読み込み準備完了です。


AwayBuilder 側の操作は割愛します。
ツール配布サイトのドキュメントを参照してください。

背景つきシーンにしたい場合

もし背景つきのAWDシーンを作成したい場合は、
ボーン入りのキャラだけのシーンと背景は別に用意しておきましょう。

メタセコで作った背景をobj形式にしておいて
AwayBuilder上で別途インポートして統合する方法が、
考えること少なく済んで組みやすいと思います。


Flash CCでの作業


コーディングの準備

Away3Dに関連するメソッドをコンパイル定数として
登録しておかないとコーディングができません。

この辺はググると沢山手順が出てくるので、
メモ程度に記載しておきます。

  1. fla形式 のファイルを新規作成。フォーマットはお気に入りの形式でOK
  2. ファイルを開き、パブリッシュ設定→コンパイル設定
  3. Away3Dのライブラリフォルダパスとswcファイルを指定
  4. 試しにコード上で import away3d から適当なものが引ければ準備完了

コーディングしてみる

コード詳細は前回の日記を参照してください。
また、自分のコードだけでわかりづいらい場合は、こちらの動画
ソースコード配布も行っていてわかりやすいです。

まずは、ロードの流れ。

  1. View3D と Scene を定義。AddChildする ※これをしないと AssetEvent が走らない
  2. Loader3Dでアセット読み込み。 ※URLを頻発したくないものはEmbetするのがベター
  3. Parserを指定。 ※AllBundleでもOK
  4. Loader3Dでロードしたものから AssetEvent を使って Asset を抽出
  5. アニメーションなどの初期ロードで読み込まれない Asset の読み込み完了後 AddChild


データロード時は2つのEventを使って
データロードを行う必要があります。

Loader3Dの初期ロードだけでは
全てのAsset は引いてくることができません。

AnimationNode や Skeleton などを使う場合、
LoaderEvent のあとに AssetEvent を使う必要があります。

AssetEvent はオブジェクトツリーをロードするので
こちらにデータ読み込み以外の挙動は
記述してはいけません。

LoaderEvent だけでは
全ての Asset を引いてこれない都合上
ロード直後の扱いは注意が必要です。

Skeleton 付きのAsset の場合
BindPorse や Animetion の初期位置が
おこしなことになりやすいです。

なので、Animation 再生時の開始位置などは
メソッド側でしっかりと設定する必要があります。

ロード後の扱い

ここまでの流れをつっかりと作ってあげると、
Flash 側で 3Dつきのコンテンツが再生できます。

また、この時点でVector3Dとして
扱えるようになっているので、いつも通りの
コーディングで3Dコンテンツを
移動、拡縮したりの制御も可能になります。

最初に少し手間はかかりますが、
ここまでくると、2DUI側との連携に
手間をとることも少ないはずです。

少しの手間でリッチ感を演出するには
非常に強力な機能になるのかなと思います。

コツをつかむと意外と楽に実装できるので、
是非トライしてみてください!

( ゚Д゚)ノシ オワリ



| ここな | 制作 | comments(0) | trackbacks(0) |


<< 【Away3D】Flashで3D表示ができるようになったお | main | HPのトップ絵を変えました >>



Comment











Trackback
url: http://kurobee.kokona.lomo.jp/trackback/1038031

その他情報

管理者ページ / RSS1.0 / Atom0.3 / Powered by ロリポブログ

無料ブログ作成サービス JUGEM
(C) 2017 ブログ JUGEM Some Rights Reserved.