Unity Sprite Animation 株 式 会 社 Whomor 木 下 智 弘 遠 藤 有
発 表 者 木 下 智 弘 株 式 会 社 フーモア 開 発 事 業 部 エンジニア 遠 藤 有 株 式 会 社 フーモア CG 開 発 室 ディレクター フーモア 書 籍
Agenda 1. ゲームに 必 要 な 要 素 2. スプライトアニメーションとは 3. アニメーションのワークフローを 確 認 4. ソフトウェアを 検 証
Agenda 1. ゲームに 必 要 な 要 素 2. スプライトアニメーションとは 3. アニメーションのワークフローを 確 認 4. ソフトウェアを 検 証
ゲームに 必 要 な 要 素 Architect Art Program Scenario Music
Art に 着 目 Architect Art Program Scenario Music
ゲームで 必 要 となる Art とは
ゲームに 登 場 する Art の 一 例 ICON Character Back ground Item etc
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の 操 作 性 に 慣 れているチーム 向 け
御 社 あなたはどのソフトウェアを 選 択 する?
ご 清 聴 ありがとうございました