Downloaded 19 times
3ds MaxとAway3Dを使った キャラクターアニメーション 株式会社ICS 鈴木 克史
自己紹介 • 鈴木 克史(すずき かつし) • 株式会社ICS • Flashup • 3Dキャラクターアニメーション (3ds Max & Lightwave)
AIRアプリのご紹介
Away3Dを使ったスマートフォンアプリ 「どこでも イタメくん」 http://www.nichireifoods.co.jp/character/itamekun/apli/docodemo.html 『イタメくん アプリ』で検索 © ニチレイフーズ 企画: 株式会社IMJ (敬称略)
本日のメニュー • 3ds Max ワークフロー • Away3D ワークフロー
3ds Max ワークフロー
3ds Max ワークフロー モデリング ボーンの挿入とス アニメーションリ モーションの作成 キニング グの作成 アニメーション UVマップの作成 テクスチャの作成 AWDファイルの カーブの調整 書き出し
モデリング ポリゴン数: ポリゴン数: 頭部: △しろさんかく1600 △しろさんかく480 体: △しろさんかく1500
ボーンの挿入とスキニング ボーン数: 29本 頭部と小道具はウェイト (1頂点に影響するボーンの数は2〜4本) 100%に設定
アニメーションリグの構築 ボーンを直接操作しないようにコントローラーを作成
アニメーションリグの構築 頭部のコントローラーリグ
アニメーションリグの構築 リグ全体図 バク宙を頭を中心に行うため、縦回転用のコントローラーを頭部に配置
アニメーションリグの構築 足にIKを使った古典的なリバースフット 腰を下げる or 踝の位置を変える → 自動的に膝が曲がる
アニメーションリグの構築 小道具用コントローラー 位置・角度を丸いつまみ一つで自由に設定可
アニメーションの作成 手を振る バク宙 尻もち バンザイ おねだり バランス
アニメーションの作成 手を振る バク宙 尻もち バンザイ おねだり バランス • アニメーションをすべて1つのタイムラインで作成 • 1アニメーション = 1 SkeletonClipNode (Away3D) • アニメーションの区分 → 設定ファイル(sequences.txt)を使用 sequences.txt を忘れるとアニメーションが書きだされ ないので注意!
アニメーションカーブの調整 Maxスクリプトを活用してツールをカスタマイズする 例:F5キーでフレームを挿入する
UVマップの作成 UVアンラップに3D-Coat を使用 (ペイントにも一部使用)
テクスチャの作成 デフューズ アンビエント オクルージョン ダストマップ 最終テクスチャ モバイルAIRでの負荷軽減のため、シャドウやライティング などの質感をテクスチャに描き込む
AWDファイルの書き出し スキンモディファイアの 拡張パラメータタブ ウェイト調整の際に「ゼロウェイト削除」をしておかない と3ds Maxごとフリーズするので注意!!
AWDファイルの書き出し GZIP圧縮を使用すると容量は半分程度に削減される
AWD読み込み時間の比較 (5回計測の平均) 圧縮あり 圧縮なし 850.4 ミリ秒 732.2 ミリ秒 圧縮した場合、解凍時間にコストがわずかにかかる
AWDファイルの書き出し 残念ながら現時点ではマテリアルまでは書き出されないの で、AS側で設定を行う
AWDファイルの書き出し jointsPerVertexの値を3以上にするとテクスチャが崩れ る現象が稀に起こる → 3ds Max側のウェイトの振り直しで解決!
Away3D ワークフロー
Away3D ワークフロー Away3Dシーンの作成 AWDファイルの読み込み マテリアルの割り当て アニメーションの割り当て アニメーション切り替えの設定
Away3Dシーンの作成 // シーンの作成 view = new View3D(); // アンチエイリアスの設定 view.antiAlias = 4; addChild(view); // カメラ設定 camera = new Camera3D(); // パースの変更 camera.lens = new PerspectiveLens(3); view.camera = camera; パースの値(PerspectiveLensの引数)を変更するとキャラク ターの印象が大きく変わる
AWDファイルの読み込み // 読み込み AssetLibrary.enableParser(AWD2Parser); // イベントの取得 AssetLibrary.addEventListener(AssetEvent.ASSET_COMPLETE, onAssetComplete); AssetLibrary.addEventListener(LoaderEvent.RESOURCE_COMPLETE, onResourceComplete); AssetLibrary.addEventListener(LoaderEvent.LOAD_ERROR, onLoadError); // 読み込み AssetLibrary.loadData(new ModelData()); // ロード後のメッシュの取得方法 character = AssetLibrary.getAsset("モデルの名前") as Mesh;
マテリアルの割り当て // 輪郭線の作成 var outlineColor:uint = 0x3c3b34; var outlineSize:Number = 0.35; var outlineMethod:OutlineMethod = new OutlineMethod(outlineColor, outlineSize, true, false); // キャラクターのマテリアル var bmd:BitmapData = Bitmap(new ImageData()).bitmapData; var modelTexture:BitmapTexture = new BitmapTexture(bmd); var material:TextureMaterial = new TextureMaterial(modelTexture); material.addMethod(outlineMethod); OutlineMethodで輪郭線を追加
アニメーションクラス概念図 Skeleton (ボーン構造) SkeletonClipNode (1モーション) SkeletonClipNode (1モーション) SkeletonAnimator (スイッチャー) SkeletonAnimationSet Mesh SkeletonClipNode (アニメーションの束) (キャラクター) (1モーション)
各クラスの解説 ・キャラクターのボーン構造 → Skeletonクラス ・アニメーションの動作1つ(バク宙、待機などの単位) → SkeletonClipNodeクラス ・一連のアニメーションをセットにしたもの → SkeletonAnimationSetクラス ・アニメーションを切り替えるためのスイッチャー → SkeletonAnimatorクラス
実際のコード // ボーン構造の取得 (ルートのボーン) skeleton = Skeleton(AssetLibrary.getAsset("Bone001")); // 待機モーション breatheState = AssetLibrary.getAsset(ANIM_BREATHE) as SkeletonClipNode; // ループの設定 breatheState.looping = false; // アニメーション用の入れ物を作成する animationSet = new SkeletonAnimationSet(); // 待機モーションを挿入 animationSet.addAnimation(breatheState); // モーションとボーン構造を元にアニメーションを制御するアニメーターを作成する animator = new SkeletonAnimator(animationSet, skeleton, false); // アニメーターをメッシュに適用する character.animator = animator;
アニメーション切り替えの設定 // アニメーションのブレンド時間の設定 crossfadeTransition = new CrossfadeTransition(0.5); // 切り替え animator.play("Breathe", crossfadeTransition); // 1アニメーションの終了イベントを取得するには? skeletonClipNode.addEventListener(AnimationStateEvent.PLAYBACK_CO MPLETE, イベントハンドラ);
Links ・Away3D Tutorials Wiki http://away3d.com/tutorials/ ・3DS Max Workflow http://away3d.com/tutorials/3DS_Max_Workflow ・3dflashlo http://3dflashlo.wordpress.com/