Download Report

Unity × Sprite Animation
株式会社Whomor
木下智弘
遠藤有
発表者
• 木下智弘
• 遠藤有
• 株式会社フーモア
• 開発事業部
• エンジニア
• 株式会社フーモア
• CG開発室
• ディレクター
フーモア書籍
Agenda
1. ゲームに必要な要素
2. スプライトアニメーションとは
3. アニメーションのワークフローを確認
4. ソフトウェアを検証
Agenda
1. ゲームに必要な要素
2. スプライトアニメーションとは
3. アニメーションのワークフローを確認
4. ソフトウェアを検証
ゲームに必要な要素
Architect
Art
Scenario
Program
Music
「Art」に着目
Architect
Art
Program
Scenario
Music
ゲームで必要となる
「Art」とは
ゲームに登場する「Art」の一例
ICON
Character
Item
etc…
Back
ground
「Art」の表現例
UI
イラスト
Art
3DCG
アニメー
ション
Agenda
1. ゲームに必要な要素
2. スプライトアニメーションとは
3. アニメーションのワークフローを確認
4. ソフトウェアを検証
スプライトアニメーションの構成
イラスト
(素材)
スプライト
アニメー
ション
スプライト
アニメー
ション
スプライトアニメーションの種類
• コマアニメ(連番画像)方式
•
•
•
•
【手法】スプライトの画像を随時切り替え
【メリット】CPU負荷が小さい
【デメリット】画像容量が増える
【例】GIF画像
• キーフレーム方式
•
•
•
•
【手法】キーフレーム毎にアニメーションの値を設定し計算表示
【メリット】動きが滑らか
【デメリット】実装工数が高い
【例】Flashアニメーション
画像とエンジニアの力で
どこまで表現できるか
2Dゲームの開発で
挑戦してみた
チャレンジ内容
1.スプライトの表示
2.ただひとつのアニメーション
3.複数のアニメーション
チャレンジ内容
1.スプライトの表示
2.ただひとつのアニメーション
3.複数のアニメーション
1. スプライトの表示
スプライトとして画像を
表示させるだけ
問題ない！
補足
• トゥイーンを設定
•
•
•
•
var tweenScale = startButtonObject.AddComponent<TweenScale>();
tweenScale.to = new Vector3(0.8f, 0.8f);
tweenScale.style = UITweener.Style.Loop;
tweenScale.animationCurve = new AnimationCurve(new Keyframe(0f, 0f),
new Keyframe(0.5f, 1f), new Keyframe(1f, 0f));
• クリックイベントを追加
• var startUiButton = startButtonObject.AddComponent<UIButton>();
• EventDelegate.Add(startUiButton.onClick, () => { /*クリック時の処理*/});
※NGUIアセットを利用
チャレンジ内容
1.スプライトの表示
2.ただひとつのアニメーション
3.複数のアニメーション
2. ただひとつのアニメーション
画像を連番で変更させるだけ
問題ない!!
補足
• 画像のコマ送り
•
•
•
•
•
•
•
private int currentSpriteNo = 1;
private UISprite ui;
private float time;
private float waitingTime = .1f;
void Start()
{
this.ui =
gameObject.GetComponent<UISprite>();
• }
•
•
•
•
•
•
•
•
•
•
•
•
•
void FixedUpdate()
{
this.time += Time.deltaTime;
if (this.time > this.waitingTime)
{
this.ui.spriteName = "blink" + "_" +
this.currentSpriteNo.ToString("00");
if (this.currentSpriteNo == 15)
this.currentSpriteNo = 1;
else
this.currentSpriteNo++;
this.time = 0f;
}
}
※NGUIアセットを利用
チャレンジ内容
1.スプライトの表示
2.ただひとつのアニメーション
3.複数のアニメーション
3. 複数のアニメーション
大変…
複数のアニメーションを実装するためには
連番画像を大量に用意
連番画像のセットを指定
アニメーション間の繋ぎを調整
これらの準備をキャラクタ毎に
すべて用意する?
やれなくはないが…
工数の観点から
厳しい!!!
スプライトアニメーション
ソフトウェアの
導入が正義!!
そこで、本題の
スプライトアニメーション
ソフトウェアにフォーカス
スプライトアニメーションソフトウェアの歴史
1993年 1996年 2002年 2005年 2008年 2013年 2014年
After
Effects
Flash
Maya
Sprite
Studio
Cocos
Studio
Sprite
Builder
Spine
Puppet2D
SpriterPro
スプライトアニメーション
ソフトウェアは
色々あるが・・・
注目のソフトウェアを
ピックアップ
Agenda
1. ゲームに必要な要素
2. スプライトアニメーションとは
3. アニメーションのワークフローを確認
4. ソフトウェアを検証
スプライトアニメーション制作に
必要な工程
アニメーションワークフロー
ワークフローを確認する前に…
それぞれのソフトウェアで
実際の動きを確認してみましょう
デモ実演
それでは
デザイナとエンジニアの側面から
フローを確認してみましょう!!
まずは
デザイナのフローを確認
ソフトウェア共通
1.イラストを描く
2.パーツを分割
3.スクリプトでレイヤーを書き出し
ソフトウェア共通
1.イラストを描く
2.パーツを分割
3.スクリプトでレイヤーを書き出し
ソフトウェア共通
1.イラストを描く
2.パーツを分割
3.スクリプトでレイヤーを書き出し
ソフトウェア共通
1.イラストを描く
2.パーツを分割
3.スクリプトでレイヤーを書き出し
ここまでは全ソフトウェア
共通の流れ
1.
2.
3.
4.
シェーダーの制作
プレーンの制作
リグの制作
アニメーションの制作
最後にfbxで書き出し
作業が大変!
MELScriptで効率化すべき!!
1. スプライト読込み
2. リグの制作
3. アニメーションの
制作
慣れると楽!!!
慣れると楽!!!
慣れるまでは大変!!!
次に
エンジニアのフローを確認
Spine 基本～Skelton Animation～
1. 公式SDKをUnityにインポート
2. Spineデータをインポート
3. 「Skelton Animation」でオブジェクトを生成
4. アニメーションを名前で指定・切り替え
Spine 応用～Mecanim～
1. 公式SDKをUnityにインポート
2. Spineデータをインポート
3. 「Mecanim」でオブジェクトを生成
4. 「Animator Controller」を作成
2015年2月公式が
Mecanimに対応!!
簡単なアニメーションから
複雑なアニメーションまで
エンジニアに優しい設計思想!!!
Maya
1.FBXデータをUnityにインポート
2.Animationをモーション別に分割
3.「Animator Controller」を作成
Animationの準備が特殊であることから
仕様変更があると
手戻りが発生することも
Puppet2D
1.「Animator Controller」を作成
デザイナーに用意してもらえれば
ほとんど工数が発生しない
ただし、デザイナーと
レギュレーションをしっかり握る
必要あり
Agenda
1. ゲームに必要な要素
2. スプライトアニメーションとは
3. アニメーションのワークフローを確認
4. ソフトウェアを検証
デザイナー
三者の視点からソフトウェアを
比較検証しました
マネージャー
エンジニア
デザイナー
まずは、デザイナーの視点から
マネージャー
エンジニア
デザイナーの視点で検証
Spine
Maya
Puppet2D
工数
表現力
柔軟力
◎
×
○
◎
◎
×
○
○
○
デザイナー
次に、エンジニアの視点から
マネージャー
エンジニア
エンジニアの視点で検証
Spine
Maya
Puppet2D
工数
表現力
柔軟力
○
○
◎
×
◎
○
○
○
×
デザイナー
最後に、マネージャーの視点から
マネージャー
エンジニア
マネージャーの視点で検証
Spine
Maya
Puppet2D
費用
サポート
分業
○
○
◎
×
◎
◎
×
○
×
三者検証の結果…
まとめ
1. Spine
• バランスが良い
• 万人向け
2. Maya
• 機能的に最高
• 十分にプリプロダクションするチーム向け
3. Puppet2D
• Unityのインタフェースの改善に期待
• Unityの操作性に慣れているチーム向け
御社・あなたはどのソフトウェアを
選択する?
ご清聴ありがとうございました