1. 3ds MaxとAway3Dを使った
キャラクターアニメーション
株式会社ICS
鈴木 克史

2. 自己紹介
• 鈴木 克史(すずき かつし)
• 株式会社ICS
• Flashup
• 3Dキャラクターアニメーション
(3ds Max & Lightwave)

3. AIRアプリのご紹介

4. Away3Dを使ったスマートフォンアプリ
「どこでも イタメくん」
http://www.nichireifoods.co.jp/character/itamekun/apli/docodemo.html
『イタメくん アプリ』で検索
© ニチレイフーズ
企画: 株式会社IMJ (敬称略)

5. 本日のメニュー
• 3ds Max ワークフロー
• Away3D ワークフロー

6. 3ds Max ワークフロー

7. 3ds Max ワークフロー
モデリング ボーンの挿入とス アニメーションリ モーションの作成
キニング グの作成
アニメーション UVマップの作成 テクスチャの作成 AWDファイルの
カーブの調整 書き出し

8. モデリング
ポリゴン数: ポリゴン数:
頭部： △1600 △480
体: △1500

9. ボーンの挿入とスキニング
ボーン数: 29本 頭部と小道具はウェイト
(1頂点に影響するボーンの数は2～4本) 100%に設定

10. アニメーションリグの構築
ボーンを直接操作しないようにコントローラーを作成

11. アニメーションリグの構築
頭部のコントローラーリグ

12. アニメーションリグの構築
リグ全体図
バク宙を頭を中心に行うため、縦回転用のコントローラーを頭部に配置

13. アニメーションリグの構築
足にIKを使った古典的なリバースフット
腰を下げる or 踝の位置を変える → 自動的に膝が曲がる

14. アニメーションリグの構築
小道具用コントローラー
位置・角度を丸いつまみ一つで自由に設定可

15. アニメーションの作成
手を振る バク宙 尻もち
バンザイ おねだり バランス

16. アニメーションの作成
手を振る バク宙 尻もち バンザイ おねだり バランス
• アニメーションをすべて1つのタイムラインで作成
• 1アニメーション = 1 SkeletonClipNode (Away3D)
• アニメーションの区分 → 設定ファイル(sequences.txt)を使用
sequences.txt を忘れるとアニメーションが書きだされ
ないので注意!

17. アニメーションカーブの調整
Maxスクリプトを活用してツールをカスタマイズする
例：F5キーでフレームを挿入する

18. UVマップの作成
UVアンラップに3D-Coat を使用
(ペイントにも一部使用)

19. テクスチャの作成
デフューズ アンビエント
オクルージョン
ダストマップ 最終テクスチャ
モバイルAIRでの負荷軽減のため、シャドウやライティング
などの質感をテクスチャに描き込む

20. AWDファイルの書き出し
スキンモディファイアの
拡張パラメータタブ
ウェイト調整の際に「ゼロウェイト削除」をしておかない
と3ds Maxごとフリーズするので注意!!

21. AWDファイルの書き出し
GZIP圧縮を使用すると容量は半分程度に削減される

22. AWD読み込み時間の比較
(5回計測の平均)
圧縮あり 圧縮なし
850.4 ミリ秒 732.2 ミリ秒
圧縮した場合、解凍時間にコストがわずかにかかる

23. AWDファイルの書き出し
残念ながら現時点ではマテリアルまでは書き出されないの
で、AS側で設定を行う

24. AWDファイルの書き出し
jointsPerVertexの値を3以上にするとテクスチャが崩れ
る現象が稀に起こる
→ 3ds Max側のウェイトの振り直しで解決！

25. Away3D ワークフロー

26. Away3D ワークフロー
Away3Dシーンの作成
AWDファイルの読み込み
マテリアルの割り当て
アニメーションの割り当て
アニメーション切り替えの設定

27. Away3Dシーンの作成
// シーンの作成
view = new View3D();
// アンチエイリアスの設定
view.antiAlias = 4;
addChild(view);
// カメラ設定
camera = new Camera3D();
// パースの変更
camera.lens = new PerspectiveLens(3);
view.camera = camera;
パースの値(PerspectiveLensの引数)を変更するとキャラク
ターの印象が大きく変わる

28. 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;

29. マテリアルの割り当て
// 輪郭線の作成
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で輪郭線を追加

30. アニメーションクラス概念図
Skeleton
(ボーン構造)
SkeletonClipNode
(1モーション)
SkeletonClipNode
(1モーション) SkeletonAnimator
(スイッチャー)
SkeletonAnimationSet Mesh
SkeletonClipNode (アニメーションの束) (キャラクター)
(1モーション)

31. 各クラスの解説
・キャラクターのボーン構造
→ Skeletonクラス
・アニメーションの動作1つ(バク宙、待機などの単位)
→ SkeletonClipNodeクラス
・一連のアニメーションをセットにしたもの
→ SkeletonAnimationSetクラス
・アニメーションを切り替えるためのスイッチャー
→ SkeletonAnimatorクラス

32. 実際のコード
// ボーン構造の取得 （ルートのボーン)
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;

33. アニメーション切り替えの設定
// アニメーションのブレンド時間の設定
crossfadeTransition = new CrossfadeTransition(0.5);
// 切り替え
animator.play("Breathe", crossfadeTransition);
// 1アニメーションの終了イベントを取得するには？
skeletonClipNode.addEventListener(AnimationStateEvent.PLAYBACK_CO
MPLETE, イベントハンドラ);

34. Links
・Away3D Tutorials Wiki
http://away3d.com/tutorials/
・3DS Max Workflow
http://away3d.com/tutorials/3DS_Max_Workflow
・3dflashlo
http://3dflashlo.wordpress.com/