CEDEC 2018 セガグループセッション紹介

皆さんこんにちは！
セガゲームス、開発サポート部の麓です。

毎月お送りしているSEGA Tech blogも読んでいただいている皆さんのおかげを持ちまして来月でまる2年。
これからもセガグループが持っているいろいろな技術の種を紹介していきたいと思っています。

そして今回で三回目となるCEDEC登壇者の紹介です。

来月にパシフィコ横浜で開催されるゲーム業界最大のカンファレンス
CEDEC 2018　会期：2018年8月22日(水)～8月24日(金)
に今年もセガグループから多くの登壇者が名前を連ねています！
それでは今回もセッションと登壇者紹介に加え、ここでしか見れない講演内容の見どころと、当日の資料からの抜粋を(セッションとラウンドテーブルに限り)紹介します。

セッション

---

モバイルタイトルにおける横断的な機械学習によるレベルデザイン支援システムの構築と運用

セッションの内容

セガゲームス開発統括部で実際に開発・運営中のタイトルに導入した、レベルデザイン＆デバッグを自動化とAIにより支援するシステムの概要紹介と、そのシステム構築フロー、運営ワークフローを説明します。
3タイトル4事例を紹介しながら実際のシステム紹介に加え、導入する際に重要なこと、各タイトルでどのように運用されているか等も紹介します。
・事例１：「Ｄ×２ 新・女神転生 リベレーション」におけるクエスト難易度調整支援
・事例２：「Ｄ×２ 新・女神転生 リベレーション」におけるマップ設計支援
・事例３：「コトダマン」におけるデッキ調整・報酬設定支援
・事例４：新規タイトル事例(予定)
また現在検討中のユーザー動向を利用したより高度な支援システムの構想をお話しします。
株式会社セガゲームス　開発統括部　ディレクター／シニアプログラマ　松田 剛
8月22日(水) 11:20 〜 12:20

資料スナップショット

講演内容についてのコメント

機械学習の導入が各業界で進んでおりますがゲーム業界でもその流れが進んでおります。
本セッションでは実際にセガゲームスで使用されている機械学習の活用例とそのワークフローの
紹介を通じて、より面白いゲームを制作するための創意工夫の一環を知っていただけると思います。

---

「Ｄ×２ 真・女神転生リベレーション」におけるアニメーション制作事例〜184体の魅力ある悪魔アニメーションを少人数＋アウトソーシングで短期間で制作するヒント～

セッションの内容

「Ｄ×２ 真・女神転生リベレーション」におけるアニメーション制作事例を通し大量のユニーク体格のキャラクターのアニメーションアセットを少人数・短期間でどのように外部の協力会社と共に制作したかの実例となります。アニメーションをアウトソーシングする際の会社選定の基準、ワークフロー、発注仕様、チェックバックやリグの考え方について事例を交えながら解説致します。また本作でのデザイン要件、Unityでのアニメーションについて苦労した点とその解決法についても解説したいと思います。また業務効率化に繋がったツールについてもいくつか紹介させて頂く予定です。アニメーション制作をアウトソーシングする際のヒントになればと思います。
株式会社セガゲームス　開発統括部アート＆デザイン部TAセクション　リードテクニカルアーティスト　亀川 祐作
8月22日(水) 16:30 〜 17:30

資料スナップショット

講演内容についてのコメント

弊社のモバイル向けゲーム開発では内部は少人数でアセットの量産部分を外部スタジオに依頼する事は日常的となっております。内製とはまた違う苦労があり
特にアニメーション制作を外部に出すという事は比較的難度が高いと考えております。自身も模索しつつやっている部分もありますので、本セッション内容が
最適解だとは考えておりませんが、何か一つでもヒントになれば幸いです。

---

Ｄ×2真・女神転生リベレーションでの新しいＵＩデザイン制作方法の試みと発見

セッションの内容

Ｄ×2真・女神転生リベレーション開発時にＵＩデザイン組織を担うこととなり、
組織の新しい方向性とＵＩデザインの表現幅を広げるため、新たにユーザーテスト法とアイトラッカーカメラを交えた調査をプロジェクトに導入いたしました。テストから見えてきたアプリゲームでのＵＩルールの研究結果や、被験者に制作中のデザインをふれてもらいライブ中継することで、プロジェクト単位でデザイン表現をチャレンジする方法を本作品の表現の説明を踏まえつつ紹介致します。
株式会社セガゲームス　開発統括部アート＆デザイン部　UIデザインチームリーダー　良知 将範
株式会社セガゲームス　株式会社セガゲームス　開発統括部　デザイナー　山崎 陽平
8月22日(水) 14:50 〜 15:50

資料スナップショット

講演内容についてのコメント

ＵＩデザインの表現幅を広げるため、ユーザーテストと
アイトラッカーカメラを交えた調査をプロジェクトに導入いたしました。
テストから見えてきたアプリゲームでのＵＩルールの研究結果や、
プロジェクト単位でデザイン表現にチャレンジする方法を表現の説明を踏まえつつ紹介致します。

---

プロシージャルゲームコンテンツ制作ブートキャンプ Part 2 実践

セッションの内容

最近日本のゲーム業界でも導入が増えてきたプロシージャル法によるゲームコンテンツ制作。業界を代表するゲーム会社4社から、それぞれの製作現場で実践しているプロシージャル手法によるゲームコンテンツ制作実例を紹介します。
このセッションは2コマ連続のセッションの第2部で、プロシージャル法を使ったより実践的な中~上級の講演内容です。
株式会社セガゲームス　第一CSスタジオ　リードアーティスト　伊地知 正治　他
8月23日(木) 11:20 〜 12:20

資料スナップショット

講演内容についてのコメント

GDC2017でSideFX社より発表されたVertexAnimationTextureという手法を実際に龍が如く極２という製品に使用したエフェクト制作の流れを説明させて頂きます。
この手法はテクスチャに座標や角度などのアニメーション情報を焼き込んでシェーダに計算させ物理破壊、ソフトボディ、流体などの表現を現状で最も高速に描画させるものです。またHoudiniならではのワークフローも効率的で再シミュレーションからデータ生成まで数秒でイテレーションをかける事が出来ます。他にもHoudiniを使用したエフェクト制作のTipsをご紹介致します。まさにHoudiniはエフェクトアーティストにとって福音ともなる技術ですので是非ご聴講下さい。

ラウンドテーブル

---

プロダクション分野のプラクティスの中で開発における生産性向上のためのツールにフォーカスして議論するラウンドテーブル

セッションの内容

プロダクション分野のプラクティス（手法・技法）の中で、生産性向上に繋がる取り組みについてのラウンドテーブルを行います。
※議論の範囲を限定するために、この回では開発工程でのツールに特化した話題のみ扱います。
「生産性の向上を支援するツール」、「生産性を可視化・計測するツール」、「効果のあった事例」、「効果は測定できていないが導入した例」、「ツールで解決したい課題」にまつわるトピックを参加者それぞれが持ちより、情報共有や発展性のある議論を目指します。
ラウンドテーブルを効率的に進めるため、以下のレギュレーションを設定します。
[トピックの分類]
・生産性の向上を支援するツール
・生産性を可視化・計測するツール
・効果のあった事例
・効果は測定できていないが導入した例
・ツールで解決したい課題
[レギュレーション]
1. トピック登録：
生産性向上のためのツールに関する議題をお持ち下さい。
セッション会場内にホワイトボードを用意しますので、そちらに議題をお書き下さい。
2. 優先入場
議題を事前に登録して頂ける方は優先入場可能とします。セッション開始時間前に入室する事ができます。
聴講のみ希望もしくはその都度発言の方は、セッション開始時間直前に入室可能となります。
3. 進行
提出して頂いた議題を基に、議論を進めます。
4. 議題・議事録の公開
提出して頂いた議題と、議事録は後日CEDEC Digital Libraryに公開予定です。
株式会社セガゲームス　開発技術部　ビルドエンジニア　粉川 貴至
株式会社セガゲームス　開発技術部　プログラマー　竹原 涼
8月23日(木) 13:30 〜 14:30

講演内容についてのコメント

過去のCEDECでも何度かプロダクション分野のラウンドテーブルを開催している粉川です。
（どういう話題が扱われるかイメージしづらい方は、CEDiLで過去のラウンドテーブルの議事録を確認してみてください。）
今回は「生産性向上のためのツール」と少し視点を変えたテーマになっていますが、
働き方改革⇒生産性向上⇒自動化・効率化⇒ツールによる解決や課題（⇒ビルドエンジニア・QAエンジニアの活動）
と話題が繋がっていくイメージでこのテーマを設定させて頂きました。
いつものように自動ビルド・自動テストや構成管理ツール周りの話題が集まるのか、
生産性という観点から今まで考えなかった切り口の話題が出るのか、
それは当日集まったみなさん次第です。
ご参加、お待ちしています！

---

若手テクニカルアーティストの育成とその役割について話すラウンドテーブル

セッションの内容

本ラウンドテーブルは、昨年度の「若手テクニカルアーティスト（以下、TA）の業務効率改善への貢献、育成について話すラウンドテーブル」についての議論に続くものです。
TAとはベテランのアーティスト、プログラマが行う業種であるものというもの認識がありました。しかし、その需要からTA業務を行う若手を育成する動きが見受けられます。
そこで、各社で育てられた若手のTA複数名をラウンドテーブルへと参加していただき、どのような業務を割り当てる事がTAとしての知見を深め、育成に繋がるかをラウンドテーブルと言う形で突き詰め共有し、業界への貢献へとつなげていきたいと考えています。
本ラウンドテーブルは次の２つの議題を主に話し合う予定です。
　◆若手TAの活用事例
　　：若手としてTA業務を行う者たちは、どんな成果を上げることが出来るのか、
　　　どのような業務を割り振ることが成長につながるのか等について議論を行う
　◆若手TAの育成に向けての活動
　　：実体験をもとにした育成への工夫や、その成果。
　　　育成に着手したいがそれを実行できない会社などの理由やその対策などを議論する。
開場後、ラウンドテーブル開始までに、「若手TAの活用事例」について先行して議題を１、2個募集します。話したい話題がある人はぜひご意見ください！
株式会社セガゲームス　オンラインコンテンツ事業部　開発サポート部　エンジニア　清水　宣寿　他
8月23日(木) 10:00 〜 11:00

講演内容についてのコメント

昨年度のCEDECで「若手テクニカルアーティストの業務効率改善への貢献、育成について話すラウンドテーブル」で登壇させていただいた清水です。
昨年に引き続き、今年も若手テクニカルアーティスト（以下、TA）の育成についてのラウンドテーブルを開催できることになりました。
当日会場にお集まりいただいた参加者の皆さまと共に、若手TAの育成や活用事例などについて話し合いませんか？
一緒に「若手TAが担うべき役割とは何か？」について議論を交わし合いましょう。
皆様のご参加をお待ちしています。

---

【ラウンドテーブル】ワーママ・ワーパパたちの働き方改革を共有しよう！そして、何か新しい行動を興してみよう！

セッションの内容

※こちらのラウンドテーブルはタイムシフトパス以外のすべての受講パスで受講可能です※
2017ラウンドテーブル、「WM（ワーキングマザー）開発者の悩みとその解決策を共有しよう！－ワークライフバランス実現のためのTIPS」 参加後、セガで行ってきた、セガWMたちの動きに関して共有します。
セガでのその後１年の動きを説明後、前回同様、５～７人程度のグループに分かれて、皆さんの会社では、この１年でどのような動きがあったか、働きかけを行ったか、等、情報の共有をしていただきます。
（できれば、１グループに最低１人は男性に入っていただきたいと思っています。男性の皆さん、どうぞ、躊躇せず輪に入ってきて下さいね！大大大歓迎です！）
その後、グループごとに発表。
他社事例の情報を共有し、各自、自社へ持ち帰り。
それぞれの会社で、何か新しい１アクションを興していただきたいと思っています。
業界の、これからの働き方改革に繋げていきましょう！
勇気を共有できるようなラウンドテーブルにしたいです。
※ラウンドテーブル後は、希望者を募りランチ交流会の開催を検討中。（自費）
　CEDECでの出会いを、大切に繋げてきたいです。
　「夜の交流会には参加できないけど、ランチタイムなら！」
　という方は是非に！
株式会社セガゲームス　IP＆ゲーム事業部 開発統括部 企画開発運営部　茂呂　真由美
株式会社セガ・インタラクティブ　第二研究開発本部　デザイナー　鈴木　こずえ
8月23日(木) 11:20 〜 12:20

講演内容についてのコメント

貴方は、職場に何を望みますか？

会社が変わるのは時間がかかることかも知れません。
しかし、誰かが動かないと、変わることはありません。

弊社も、働き方改革については、まだ手探りな状況です。

職場環境改善のため、私たちにできることは何でしょう？
一緒に考え、協力し、それぞれ自社を成長させていきませんか？
後に続く、後輩たちのためにも。

昨年度スクエニさん主催のラウンドテーブル、「WM（ワーキングマザー）開発者の悩みとその解決策を共有しよう！－ワークライフバランス実現のためのTIPS」の続編として開催します。この流れを止めずに躍動させたいです。

ラウンドテーブルの結果をそれぞれの職場に持ち帰り、新しい行動を興す、最初の一歩の手助けになると嬉しいな、と思い、企画しました。

「ラウンドテーブル」ですので、テーブルについてディスカッションに参加していただきます。貴方の悩みや、貴社での動きなどを、是非教えて下さい！
「どうしても見学だけしたい」という方は、テーブルトークが聞こえる場所までご移動下さいね。（離れて見ていても、会話が何も聞こえないので…）

ラウンドテーブル後は、希望者を募りランチ交流会の開催を検討中。（自費）
CEDECでの出会いを、大切に繋げてきたいです。
「夜の交流会には参加できないけど、ランチタイムなら！」
という方は是非に☆
ランチは、雰囲気変えて、ざっくばらんに交流したいですね♪
貴方とお話しできることを、楽しみにしています。

パネル・ディスカッション、他

---

オンラインゲームのこれまでとこれから　～国内主要オンラインゲームのスタッフが送るパネルディスカッション～

セッションの内容

CEDECは今年で20周年を迎えます。
ゲーム業界もこれまで長くの年数を重ねてきましたが、ここ20年の歩みの中で忘れてはいけないジャンルがあります。
それが「MMORPG」に代表されるオンラインゲームです。
1997年にMMORPGの先駆けである『Ultima Online』がサービス開始となり、その後、国内でも様々なオンラインゲームが開発されました。
オンラインゲームといえば、これまでにない広大なステージ、とことんやり込める奥深さとコンテンツ量、そして何より、遠く離れた他のプレイヤーとのつながり。
これらの魅力的な要素を備え、多くのオンラインゲームがユーザーを虜にしました。
あれから20年が経ち、現在のゲーム業界はスマートフォンアプリが話題の中心になりつつありますが、その中でも、長年サービスを続け、まだまだユーザーの心を掴んで離さない多くのオンラインゲームがあります。
そのような魅力あふれるオンラインゲームの主要タイトルに関わるスタッフを一同に会し、これまでのオンラインゲームの開発・運営、これからのオンラインゲームの未来を、熱く語ろうではないか！というパネルディスカッションとなります。
●講演概要
◇各タイトル、登壇者の紹介
◇主要テーマによるディスカッション
・オンラインゲームの企画から立ち上げ
・オンラインゲームの開発・運営秘話　～直面する課題と解決に向けて～
・オンラインゲームが業界にもたらしたもの
・オンラインゲームとユーザーとのつながり
◇皆さんから事前に募集したテーマに応じたディスカッション
・聞きたい疑問質問、話してほしいテーマなどを募集します！
◇さいごに
・これからのオンラインゲームの未来
株式会社セガゲームス　オンライン研究開発部　『PSO2』シリーズプロデューサー　酒井 智史　他
8月22日(水) 13:30 〜 15:50（休憩含む）

---

ゲームグラフィックス20年の進化とこれから

セッションの内容

本セッションはTRY-Zの西川善司氏をモデレータ、ゲストに株式会社セガゲームスの厚孝氏、ソニー・インタラクティブエンタテインメントの山田裕司氏をお迎えしてゲームグラフィックスの20年を振り返り、その進化とこれからの期待を語るトークセッションです。20年とは世代を跨ぐ月日です。CEDECには幅広い年齢層の開発者が参加していますが、若い人にとってはレトロなゲームがむしろクールという価値感もでてきています。壮年の世代にとっては青春のハードかもしれません。各時代ごとに当時の制約を超える工夫や発明があり、限界を突破する進化を続けてきました。その進化の内容やきっかけを知ることは、今の開発にも生かせる大きな刺激となることでしょう。内容はグラフィックス寄りの話題を基本軸としていますが、映像表現、カメラ演出、アニメーションなど幅広く取り扱います。
株式会社セガゲームス　コンシューマコンテンツ事業部 第1CSスタジオ アドバンスト・テクノロジー開発チーム　チームマネージャー　厚 孝　他
8月23日(木) 13:30 〜 14:30

---

次世代QAとAI 〜ゲーム開発におけるAI活用に正しく向き合うために〜

セッションの内容

近年、AI分野の研究は大きく進捗しており、様々な業界で活用事例が増えてきました。こうした流れはゲームドメインにおいても起こっており、各社様々な試みが進んでいます。このパネルディスカッションは、ゲーム業界全体でどのようにAIと向き合うべきかを考えるきっかけになることを目的としております。

今回はAIの適応領域の中でも、特に開発・運用の品質管理に関わるユースケースにフォーカスし、話を展開していきたいと思っています。AIというと大きな期待値が先行してしまいがちですが、本セッションでは、モバイル・コンシューマ領域で実際にAI活用に取り組んでいるメンバーを集め、「現在の課題は何か」「AIに何ができて何ができないのか」「導入する際の障壁はなにか」といった現実的な目線で議論を広げていきます。
株式会社セガゲームス　第1CSスタジオ　リードプログラマー　阪上 直樹　他
8月22日(水) 17:50 〜 18:50

---

ここまでで紹介したセッションのなかに聴講したい！と思ったものはありましたか？
弊社だけでなく、多くの高レベルな講演の集まるCEDECは、8月の22～24日はパシフィコ横浜　会議センター(神奈川県横浜市西区みなとみらい)で開催されます。
それでは皆さんCEDECでお会いましょう！

私達は将来CEDECに登壇してみたいと思っている、技術に興味のある方を求めています。
以下にアクセスして一緒に働いてみませんか？
採用情報 | セガ企業情報サイト

※複数社登壇の場合でもセガの社員のみ表記しています
©SEGA

ゲームサウンドクリエーターの役割

こんにちは。
セガゲームス開発技術部の塚越です。
主に戦国大戦や三国志大戦などのサウンド制作を担当して来ました。

これまでのこのブログの記事ではプログラマやテクニカルアーティストの方の記事が多かったため、そちらに興味の強い読者の方が多いかもしれません。
またゲームに必要不可欠なサウンドであってもあまりサウンドデザイナーと関わることがなく、何をやっているのか知らないという方も居ることでしょう。
そんな方達にぜひ知ってほしい、ゲームサウンドクリエーターの役割を簡単に解説していきます。

サウンドクリエーターの役割

サウンドクリエーターには実は色々な役割があります。
その中からいくつかの例を紹介していきます。

• 世界観やビジュアルから音の方向性を考える
• 音楽を作る
• 効果音を作る
• 音声を収録して編集する

この他にも色々な仕事があり、ゲーム内容や部署による違いなどもありますが、サウンドクリエーターがどんなことを考えてどのように仕事をしているのか、少しでも知っていただければと思います。

1.世界観やビジュアルから音の方向性を考える

いきなりですが少し想像して見てください。
音楽や効果音があるゲームの世界観や映像の質感にあっていない場合どう感じるでしょうか？
音ばかり気になってしまってそのゲームに没頭できなかったり、主人公に感情移入できなかったり、ということが起こりそうです。

音楽や効果音、ボイスでプレイヤーの感情が動かされるものであって欲しいものです。
そのためには世界観や映像の質感などをきちんと取り入れた音になっていなければいけません。

いきなり本番のデータを作り始めるのではなく、プロデューサーやディレクタ、ビジュアルデザイナーと相談をしながらどのようなサウンドスケープ（音の風景）にしていくのかを考えいくのか、まずはいわば音のコンセプトを考えていくことが重要となります。

ゲームのジャンルや取り扱っている題材などで何が重要な音になるのかが変わってきます。

方法は実に簡単です。
スマホなどで製作中のゲームをムービーで撮影します。
その後Apple Logic Pro XやSteinberg Cubase ProなどのDAWアプリケーション（Digital Audio Workstation）で、そのムービーに試しに作った音を置いていきます。そうすることでどんな音が必要か、どんな音楽なら心が動くか、を探っていくことができます。
さらにそれをチームの皆んなで試聴してもらい意見を交わし、この提案と修正を繰り返して行きます。
またその中で、サウンド再生の仕組みを考えたり実験したりする際にはプログラマの助けが必要不可欠です。

少し時間がかかってしまいますが最初にこの作業ができるのとできないのとでは、仕上がりに差が出てくるのです。
このようなコンセンサスがないまま作り進めていけば、いびつでチグハグな音になってしまうのは想像に難くないですね。

2.ゲームのBGMを作るとは

最近のゲーム音楽はゲーム中とサウンドトラックで聴くのとでは違う場合があることにお気づきでしょうか？
実はゲーム中ではゲームのプレイによって状況が変化するのとともに音楽が追従し変化しているのです。
このような手法はインタラクティブミュージックと言ったり、アダプティブミュージックと言ったりしますが、言葉は違えどほぼ同じことを指しています。

BGMは聞く人にどういう気持ちになってほしいかをダイレクトに伝えることができる手段の一つです。
例えば『ファンタシースターオンライン２』を思い浮かべてみてください。
フィールドで敵が居ない時は静かな音楽ですが、敵と戦闘状態になると激しい音楽へと音楽的に自然に変化しますね。*1*2
この様にBGMは気持ちを切り替えていたり、場面転換を気づかせたりという役割を担っています。

これは昔のゲームであっても実は使われている手法で、制限時間が近くなると音楽が早くなったり、水で溺れそうになると違う音楽が流れたりしていました。
それが今ではとても音楽的で自然な流れで行われるようになったのです。

インタラクティブミュージックの手法の例

このため、作る曲の量はとても増えましたし、プログラマさんとの連携もとても大切です。
ゲーム中のどのパラメータが変化したら音楽をどの様に変化させるかという設計図をしっかり作るところからがゲームのBGMづくりが始まっているということなのです。

3.効果音を作る

効果音を作るのには大まかに２つの手法があります。
1.　現実にある音を使う
2.　シンセサイザーで作る

現実にある音を作るには、現実にある音を使うというわりと当たり前と思われる手法を使います。
効果音の素材集の様なものを使ったりもしますが、フィールドレコーディングやフォーリーレコーディングをしたものを集めて使うこともあります。*3*4

現実にはない音を作るには、シンセサイザーを使って作るしかありません。

「プニョっ」とした音や、「ギュイーン」とした音など、想像でしかない音を効果音として形にします。
レーザー銃を想像してみてください。
実際本物のレーザーが「ビィーーーー」などと音はしませんが、ゲーム中では音がないと寂しいですよね。

ゲーム中の効果音には大切な音と、そこまで大切ではない音、全然大切ではないけど雰囲気を作る音がありますので、バランスを取りながら作って行くことになります。
※大切ではないからと言っていい加減な音は作りませんよ。

実際に音を作っていくプロセスを説明しますと

• 音のイメージを具体的に思い描く（頭の中で音を鳴らすイメージです）
• その音の要素を分解しDAW上でシンセサイザーや実際の音を使い再構築していく

という手順で作っていきます。

現実音に忠実な簡単な音は誰が作っても同じ音（近い音）になりますが、想像上の音や演出の入った音はとてもクリエイティブで、作るのに時間がかかります。*5

ディレクターやエフェクトデザイナと相談しながら作っていくことが多く、密なコミュニケーションが求められます。

DAWで効果音を作っている画面

4.音声の収録〜編集

近頃のゲームはスマホゲームでもよく喋りますよね。
この音声を収録したりゲームで使えるように編集したりするのも仕事です。

収録現場ではどの様な演技をして欲しいのかを声優さんに伝え、ゲームディレクターやシナリオライターが思い描いている演技に近づけるということもします。
それに加えてノイズが入ってしまっていないかなどを常にチェックしながら、台本も追って行くのでかなり気を使う仕事です。

ゲームの種類にもよりますが、5千〜数万のセリフを収録するのが最近では普通です。
こうなると何日もかかって収録することになりますので、演技のブレがないか、掛け合いがある部分に不自然さがないかなど確認することも多くなります。

また、ゲーム中でしっかりと聞こえる様にするために音量の調整をしたり、チェックを漏れたノイズを除去したりという編集作業があります。
ノイズが残ってしまうと、音量の調整でノイズが大きく聞こえてしまったり、不自然さが強調されてしまうため地味ですが大切な作業です。

近年ではiZotope RX6などのノイズ除去作業に優れたツールが出てきたため、少しくらいのノイズであれば演技重視でOKにしてしまうことも増えました。このソフトが出る以前のノイズ除去は波形を拡大してノイズ部分を特定し、全て手作業で修正するといった大変苦痛を伴う作業でした。
ですからなるべく収録現場でノイズを混入させずに収録するといったことが重要だったわけです。

RXによる音声の修正

まとめ

ここまで紹介した仕事以外にも多数の役割がありますが、長くなってきましたので今回はこの辺で終わります。なんとなくサウンドデザイナーの仕事をご想像いただけたでしょうか。
サウンドデザイナーはこれら全ての仕事を少人数で行なっています。また、ディレクターやデザイナー、プログラマーとの関わりをより強く意識する部門でもあります。

またサウンドは色々な感情（燃える、ドキドキする、爽快になる、優しい気持ちになる、暗い闇を感じる、など）と密接に関わっています。
サウンドデザイナーは自然に、時には主張して色々な感情を刺激する様に設計しています。
次にゲームをプレイする時には音に少し注目（注耳）してみてください。

(C)SEGA

*1:参考1：CEDEC 2012 2012年8月20日 Phantasy Star Online 2におけるプロシージャルBGMシステム

*2:参考2：CEDEC 2015 2015年8月27日 それからのPSO2BGM：プロシージャルを利用したオーダーメイドな場面表現・サウンドツールとプログラムの連携による簡略化

*3:フィールドレコーディング：簡単に言えば外に音を録りに行くことです。山奥や工場など色々なところへ出かけ目的の音を録音します。

*4:フォーリー：足音やものが当たる音をなどを専門に取ることができるスタジオを使った録音です。靴の質感や地面の素材などによって変化する足音を録ることができます。

*5:本当に現実音に忠実に音を作ろうとするととても複雑にレイヤーを重ねて周りの状況の変化に応じた変化を再現する様な作り方もありますが、とても大変な作業です。

Anima2Dのセットアップを自動化しよう！編

こんにちは。
セガゲームス 開発統括部 アート＆デザイン部 TAセクション 廣田です。

おかげさまで、コトダマンはサービス開始1ヶ月で500万ダウンロードを越え、たくさんの方に楽しんでいただいております！
今回も引き続き、コトダマンを題材にAnima2Dの紹介をしていきたいと思います。

前回はAnima2Dでセットアップを行い、アニメーションを作るところまで紹介しました。
セットアップがとても大変だったと思いますが、他の2Dアニメーションツールで用意されている、
・Photoshpからのエクスポート
・Unityへのインポート
がありませんでした。
今回はこの面倒な部分の自動化と描画最適化を行っていきましょう。

■Photoshopからのエクスポート

まずはPhotoshopからパーツ画像と位置情報を出力するスクリプトを作成していきます。

Photoshopデータの作り方

スクリプトで処理するために、データに決まりを作っておきます。
全てのデータ構成に対応しようとすると処理が複雑になりますので、ある程度決めごとを作ります。
今回は下記のようなデータを想定して進めていきます。

• 1パーツ=1レイヤー
• グループでまとめられているものも1パーツとして扱う
• レイヤー第一階層にあるものを出力対象にする
• レイヤー名を画像ファイル名,Anima2Dのスプライト名として使う

必要な処理を考えよう

いきなりスクリプトを書き始めずに、まずは必要な処理をリストアップしてから取り掛かります。

• 各レイヤーを画像として書き出し。
• Anima2Dでパーツを並べる時に必要な情報を出力。
  • 各パーツの画像位置, サイズ
  • レイヤー名（=画像名）
  • レイヤー順

便利な処理も追加しよう

• 画像の縮小処理
  • ゲームで使うには、元のPSDサイズでは大きすぎると思います。
  • 大きさはゲーム中でキャラが表示される最大サイズに合わせて決めましょう。
• レイヤー名のチェック
  • 全角文字のチェック（ゲームデータでは全角は使わないというお約束として）
  • スペースのチェック

仕様

上記をまとめて、このような仕様でスクリプトに実装してきます。

• 事前にPSDのエラーチェックを行う
• 画像を適正サイズに縮小
• 1レイヤー=1パーツとしてpngファイルを出力
• PSDファイルと同名のフォルダを作成してpngファイルを出力
• PSDファイルと同名の位置情報ファイルを出力
• 位置情報ファイルの出力形式：json形式

パーツの画像位置を取得する

エクスポートのキモの部分、パーツ位置を取得する部分について詳しく説明します。
PhotoshopとUnityで原点(0,0)の基準位置が違います。
Photoshop：左上
Unity：中央

エクスポートする時にUnityの座標でエクスポートするようにしましょう。

画像の中心を求める

• Photoshop画像サイズの縦横半分の位置を中心にします。(例：512x512の半分の256,256)

各パーツの位置を求める

• レイヤーの選択範囲を作成し、selection.boundsで選択範囲のバウンディング座標を取得できます。この座標を利用してパーツ位置を割り出します。こちらもバウンディングサイズの半分をパーツ位置とします。（例：329, 296）
• そして、先ほど求めた画像の中心を引くことによって、Unity座標(=中心からどのくらい離れた位置にいるか）を求めることができます。（例：+73, -40）

JSONファイルに情報を出力

求めたパーツ位置をUnityから読めるように、ファイルに記録しましょう。
Order in Layerを設定するためのレイヤーの順序も記録します。
ファイル形式はJSONを使用し、レイヤー数分、下記のようなフォーマットで情報を書き込んでいきます。

{
	"[レイヤー名1]":{"index":[レイヤー順序], "x":[パーツx座標], "y":[パーツy座標]},
	"[レイヤー名2]":{"index":[レイヤー順序], "x":[パーツx座標], "y":[パーツy座標]},
	"[レイヤー名3]":{"index":[レイヤー順序], "x":[パーツx座標], "y":[パーツy座標]},
	"[レイヤー名4]":{"index":[レイヤー順序], "x":[パーツx座標], "y":[パーツy座標]},
                  ・
                  ・
}

スクリプトの流れ

1. エラーチェック
　そもそもデータが仕様にあっていなければエクスポートする状況ではないので、チェック処理は最初に行います。

2. PSDを新ドキュメントに複製
　PSDに対してスクリプトで色々操作しますので、元のPSDを破壊しないように複製してから操作します。

3. 画像を縮小
　出力サイズに縮小します。

4. レイヤー位置を求める
　Photoshopに画像位置を問い合わせる

5. 画像をバウンディングサイズで切り抜く
　パーツレイヤーをそのまま出力すると余白が多いですので、パーツ画像のサイズに切り抜きます

6. JSONファイルに情報を出力

完成スクリプト

以上をまとめたのが、こちらのスクリプトになります。

ExportAnima2D.jsx

▶クリックで展開

/********************************************************************
        Export Anima2D 
        2018.05.25 (c) SEGA
********************************************************************/

// 定数
var EXPORT_SIZEX = 512;  // キャラの出力サイズ X
var EXPORT_SIZEY = 512;  // キャラの出力サイズ Y
var PREFIX_EXPORT_DIR = "-parts"   // 出力ディレクトリの末尾名
var PREFIX_EXPORT_FILE = "-partspos"  // 出力JSONファイルの末尾名

main();

function main() {
        
        // Photoshopの基本設定の変更
        var originalRulerUnit = preferences.rulerUnits;
        preferences.rulerUnits = Units.PIXELS;
        
        // レイヤー名のエラーチェック
        if (checkLayer(activeDocument) == false) {
                // エラーがあれば終了
                return false
        }  

        // 現在のドキュメントの情報を取得
        var filename = activeDocument.name.split(".")[0];
        var pathCurrentDir = activeDocument.path;
        var pathExportDir = pathCurrentDir + "/" + filename + PREFIX_EXPORT_DIR;
        var layerData = [];  // JSON出力用レイヤーデータ(名前, 順番, x座標, y座標)

        // エクスポートディレクトリ内を空にする
        cleanDir(pathExportDir);
        
        // エクスポート作業用にドキュメントを複製
        doc = activeDocument.duplicate();

        // レイヤーセットを結合
        //（レイヤースタイルを使用している場合、ドキュメントをリサイズすると効果の掛かり方が変わってしまうので、リサイズ前に結合する）
        margeLayerSets(doc);

        // 非表示のレイヤーを削除
        deleteHideLayers (doc);

        //ドキュメントのリサイズ
        doc.resizeImage(EXPORT_SIZEX, EXPORT_SIZEY);

        //画像の中心を求める(ドキュメントの幅の半分を中心とする)
        var w = doc.width.value;
        var h = doc.height.value;
        var docCenter = Math.round(w / 2);

        // 不要画像範囲の削除
        activeDocument.crop([0, 0, w, h]);

        // レイヤーを全て非表示に
        hideAllLayers (doc);

        //レイヤー一覧の取得
        for(i=0; i<doc.layers.length; i++){
            
                var layer = doc.layers[i];
            
                // エクスポート対象レイヤーの表示
                doc.activeLayer = layer;
                layer.visible = true;
                
                // レイヤー番号を求める（一番下のレイヤーを0番）
                var order = doc.layers.length - i - 1;

                // 画像のポジションを求める
                var x = 0;
                var y = 0;
                try {

                        // 選択範囲のセンターを求める
                        loadSelection();
                        var cx = (doc.selection.bounds[0].value + doc.selection.bounds[2].value) / 2;
                        var cy = (doc.selection.bounds[1].value + doc.selection.bounds[3].value) / 2;

                        // ドキュメントの中心を原点とした時の座標を求める
                        var x = (cx - docCenter); 
                        var y = (docCenter - cy); 
                        
                }
                catch(e) {
                }
        
                layerData[i] = [doc.layers[i].name, order, x, y];
                
                //エクスポート(png)
                historyIndex = storeHistory();
                activeDocument.trim(TrimType.TRANSPARENT, true, true, true, true);
                saveAsPng(activeDocument, pathExportDir, layer.name);
                restoreHistory(historyIndex);
                layer.visible = false;

        }

        // JSONデータの出力
        pathJSON = pathCurrentDir + "/" + filename +PREFIX_EXPORT_FILE + ".json"
        writeJSON(pathJSON,  layerData);

        // エクスポート用仮ドキュメントのクローズ
        doc.close(SaveOptions.DONOTSAVECHANGES);
                
        // 変更したPhotoshopの設定を元に戻す
        preferences.rulerUnits = originalRulerUnit;

        return true;

}

/*===================================
    レイヤー名のチェック
===================================*/
function checkLayer(doc) {

        var err = [];
        var layernames = {}

        for (i=0; i<doc.layers.length; i++){

                //2バイト文字がないか判定
               layername = doc.layers[i].name;
               flg = layername.match(/[^A-Za-z0-9_]+/) ;
                if (flg) {
                        err.push( "使用できない文字があります：" + layername );
                }

                // 同名レイヤーが無いか判定
                if ( layername in layernames) {
                        err.push( "同名レイヤーがあります：" + layername );
                } else {
                        layernames[layername] = "";  // 同名チェック用に連想配列に仮のキーを登録
                }
         
        }

        // エラーがあれば表示
        if(err.length > 0) {
                var msg = ""
                for (i=0; i<err.length; i++) {
                        msg = msg + err[i] + "\n";
                }
                alert(msg);
        }

        //戻り値
        //      エラーなし：true
        //      エラーあり：false
        return err.length == 0 ? true : false;

}


/*===================================
    不透明部分の選択範囲を作成
===================================*/
function loadSelection() {
        
    var desc = new ActionDescriptor();
    var ref = new ActionReference();
    ref.putProperty(charIDToTypeID('Chnl'), charIDToTypeID('fsel'));
    desc.putReference(charIDToTypeID('null'), ref);
    var ref1 = new ActionReference();
    ref1.putEnumerated(charIDToTypeID('Chnl'), charIDToTypeID('Chnl'), charIDToTypeID('Trsp'));
    desc.putReference(charIDToTypeID('T   '), ref1);
    desc.putBoolean(charIDToTypeID('Invr'), false);
    executeAction(charIDToTypeID('setd'), desc, DialogModes.NO);
    
}


/*===================================
    レイヤーセットを結合
===================================*/
function margeLayerSets(doc) {
    
    var doc = activeDocument;
    
    // レイヤーセットの収集     
    var layersets = deepcopy (doc.layerSets)
    
    // レイヤーセットの結合
    for(var i=0; i<layersets.length; i++) {
        var tmpVisible = layersets[i].visible;
        app.activeDocument.activeLayer = layersets[i];
        var idMrgtwo = charIDToTypeID( "Mrg2" );
        executeAction( idMrgtwo, undefined, DialogModes.NO );
        app.activeDocument.activeLayer.visible = tmpVisible;
    }

}
    


/*===================================
        非表示のレイヤーを削除
===================================*/
function deleteHideLayers(doc) {
        
        var tmpLayers = deepcopy(doc.layers);
        for(i=0; i<tmpLayers.length; i++){ 
            if (tmpLayers[i].visible == false) {
                tmpLayers[i].remove();
            }
        }
} 


/*===================================
        全レイヤーを非表示に設定
===================================*/
function hideAllLayers(doc) {
        for(i=0; i<doc.layers.length; i++) { 
                doc.layers[i].visible = false;
        }
}



/*===================================
    PNGで保存
===================================*/
function saveAsPng(doc, path, filename) {
        
        // フォルダが存在しない場合作成
        var folder= new Folder(path);
        if (!folder.exists) {
                folder.create();
        }
    
        // PNG保存オプション
         var pngOpt = new PNGSaveOptions();
        pngOpt.interlaced = false;

        // 保存
        var file = new File(folder.fsName + "/" +filename);
        doc.saveAs(file, pngOpt, true, Extension.LOWERCASE);
        
}

/*===================================
    JSONファイルの書き出し
===================================*/
function writeJSON(path, data){
        
        var jsonArray = [];
        var templateJSON = '\t"LAYERNAME":{"index":INDEX, "x":VALUEX, "y":VALUEY}';
        for(i=0; i<data.length; i++) {
                tmpJSON = templateJSON;
                tmpJSON = tmpJSON.replace("LAYERNAME", data[i][0]);
                tmpJSON = tmpJSON.replace("INDEX", data[i][1]);
                tmpJSON = tmpJSON.replace("VALUEX", data[i][2]);
                tmpJSON = tmpJSON.replace("VALUEY", data[i][3]);
                jsonArray.push(tmpJSON);
        }
        json = "{\n" + jsonArray.join(",\n") + "\n}\n";

        // JSONデータの出力
        var file = new File(path);
        file.remove();
        file.open("w", "TEXT");
        file.lineFeed = "\n";
        file.write(json);
        file.close(); 
        
}



/*===================================
    配列のディープコピー
===================================*/
function deepcopy(array_data){
    var arr=[];
    for(i=0; i<array_data.length; i++){  
        arr.push(array_data[i]);
    }
    return arr;
}


/*===================================
    現在のヒストリーインデックスを取得
===================================*/
function storeHistory () {
        
        return activeDocument.historyStates.length - 1;
        
}

function restoreHistory (historyIndex) {
        
	activeDocument.activeHistoryState = activeDocument.historyStates[historyIndex];
}



/*===================================
    ディレクトリの中身を空にする
===================================*/
function cleanDir(path) {
        
        fld = new Folder (path);
        if ( fld.exists ) {
                fileList = fld.getFiles();
                for (i=0; i<fileList.length; i++) fileList[i].remove();
        }

}

スクリプトの保存先（Windows PhotoshopCC2018の場合）

C:\Program Files\Adobe\Adobe Photoshop CC 2018\Presets\Scripts
（Photoshopを起動したままスクリプトを入れた方は、Photoshopを再起動するとメニューに出てきます）

実行してみる

出力したいPSDファイルを開いて、実行します。
（スクリプト中でUndoを実行しているところがあるので、もし途中で止まってしまうようでしたらUndo回数を上げてください）
PSDと同名の下記ファイルが無事に出力されましたでしょうか？

Textureアトラスの作成

フォルダ内にパーツ画像のpngファイルが出力されていますので、TexturePackerなどを使って1枚のテクスチャーにまとめます。

■Unityへの取り込み

Photoshop情報を元にAnima2Dスプライトを並べていきます。

事前準備（MiniJSON)

PhotoshopからJSON形式で画像位置情報を出力しましたので、UnityでもJSONを扱えるようにしましょう。
今回はMiniJSONを使用します。

MiniJSONの入れ方

• https://gist.github.com/darktable/1411710にアクセス
• ページ右上のDownload ZIPを押してダウンロード＆解凍
• 出てきたMiniJSON.csをプロジェクト内のPluginsフォルダに入れる（無ければ作成）

必要な処理を考えよう

Unity側に関しては、難しい処理はありません。
Photoshopで出力したJSONを読み込みながら、スプライトとボーンの配置を行います。

• Meshの配置（JSONから位置情報を読み込んで、Photoshopパーツ位置の再現）
• ボーンのアサイン
• OrderInLayerの設定(JSONから読み込み）

前回の記事を引き継いで、シーン構成は下記の構成を予定しています。

仕様

• 選択されているスプライトを処理の対象にする
• 選択されているものと同じフォルダにあるJSONを参照
• 選択されているスプライト名からJSON内の配置情報を見つける
• スプライトをmesh階層に配置,位置設定
• ボーンをbone階層に配置,位置設定
• メッシュにボーンをアサイン

完成スクリプト

以上をまとめたのが、こちらのスクリプトになります。

ImportAnima2D.cs

▶コードはクリックで展開

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEditor;
using MiniJSON;
using System.IO;

namespace SegaTechBlog
{
    public class ImportAnima2D : EditorWindow
    {

        [MenuItem("Window/Anima2D/Import Anima2D")]
        public static void Open()
        {

            // -----------------------------------------
            // シーンの情報を取得
            // -----------------------------------------
            GameObject meshRoot = GameObject.Find("mesh");
            GameObject boneRoot = GameObject.Find("bone");

            // -----------------------------------------
            // パーツ位置JSONの情報読み出し
            // -----------------------------------------
            string path_select = AssetDatabase.GetAssetPath(Selection.objects[0]);  // 選択されているAssetのパスを取得
            string path_dir = Path.GetDirectoryName(path_select);     // 選択Assetのパスからディレクトリを取り出し
            string path_json = Directory.GetFiles(path_dir, "*-partspos.json")[0];    // 同ディレクトリのパーツ位置 Json を取得
            var jsonText = File.ReadAllText(path_json);
            Dictionary<string, object> jsonData = MiniJSON.Json.Deserialize(jsonText) as Dictionary<string, object>;


            // -----------------------------------------
            // Projectで選択しているSpriteを全て並べる
            // -----------------------------------------
            foreach (Object asset in Selection.objects)
            {

                // -----------------------------------------
                // パーツ位置情報の読み込み
                // -----------------------------------------
                // JSONデータの取り出し(miniJson)
                var jLayer = jsonData[asset.name] as Dictionary<string, object>;
               float index = System.Convert.ToSingle(jLayer["index"]);
               float px = System.Convert.ToSingle(jLayer["x"]);
               float py = System.Convert.ToSingle(jLayer["y"]);

                // -----------------------------------------
                // Anima2Dスプライトの配置
                // -----------------------------------------

                // Mesh
                GameObject tmpMesh = new GameObject(asset.name);
                var smeshInstance = tmpMesh.AddComponent<Anima2D.SpriteMeshInstance>();
                smeshInstance.sharedMaterial = UnityEditor.AssetDatabase.GetBuiltinExtraResource<Material>("Sprites-Default.mat");
                tmpMesh.AddComponent<MeshFilter>();
                tmpMesh.AddComponent<MeshRenderer>();

                // Bone
                GameObject tmpBone = new GameObject("j_" + asset.name);
                Anima2D.Bone2D cmpBone = tmpBone.AddComponent<Anima2D.Bone2D>();
                tmpBone.transform.localRotation = Quaternion.Euler(0, 0, 90);

                // Sprite Mesh Instance の設定
                smeshInstance.spriteMesh = asset as Anima2D.SpriteMesh; //  Meshの割り当て
                smeshInstance.bones = new List<Anima2D.Bone2D> { cmpBone };　

                // Order in Layer の設定
                smeshInstance.sortingOrder = (int)index;

                // Position の設定
                tmpMesh.transform.position = new Vector3(px / 100.0f, py / 100.0f, 0.0f);
                tmpBone.transform.position = new Vector3(px / 100.0f, py / 100.0f, 0.0f);

                // 親子の設定
                tmpMesh.transform.parent = meshRoot.transform;
                tmpBone.transform.parent = boneRoot.transform;

            }

            // -----------------------------------------
            // Order in layer の値で並べ替え
            // -----------------------------------------
            Dictionary<int, string> dicOrder = new Dictionary<int, string>();
            foreach (Transform child in meshRoot.transform)
            {
                int order = child.GetComponent<Anima2D.SpriteMeshInstance>().sortingOrder;
                dicOrder[order] = child.name;
            }
            ArrayList keys = new ArrayList(dicOrder.Keys);
            keys.Sort();
            keys.Reverse();

            int count = 0;
            foreach (int i in keys)
            {
                meshRoot.transform.Find(dicOrder[i]).SetSiblingIndex(count);
                boneRoot.transform.Find("j_" + dicOrder[i]).SetSiblingIndex(count);
                count++;
            }

        }

    }

}

スクリプトの保存先

UnityプロジェクトのEditorフォルダに入れてください（無ければ作成）。

実行してみる

Projectウインドウで配置したいスプライトを選択し、Window -> Anima2D -> ImportAnima2D を実行します。
mesh階層に選択したキャラパーツのメッシュが配置され、ボーンが自動的に割り当てられます。
この後は、前回の記事を参考に、ボーンの向きの設定・メッシュ割り・ウエイトの調整を行ってください。
ここまで自動でできるとずいぶん楽ですね。

■描画最適化

さて、セットアップは自動化されて一件落着なのですが、FrameDebugger(Window->Frame Debugger)で確認すると、パーツ数分DrawMeshが走っています。
今回はシンプルなキャラクターですが、パーツ数の多いキャラクターや、モバイル環境などではパフォーマンスに影響が出てきますので、まとめて描画できるものは1回で描画するようにしましょう。

FrameDebuggerでの確認（最適化前）

SkinnedMeshCombinerとは

前回の記事で、Examplesの中に入っているSkinnedMeshCombinerのお話をしました。
SkinnedMeshCombinerは登録してあるSpriteMeshをまとめて、1メッシュにしてくれるスクリプトです。
ゲーム再生時に１つのメッシュにまとめられます。
（プロジェクトに入っていない方は、Anima2Dのアセットからインポートしましょう）

SkinnedMeshCombinerの使い方

SkinnedMeshCombinerコンポーネントを追加し、Sizeに登録したいメッシュ数を入力後、レイヤーが下のパーツから順に登録していきます。（この辺はPhotoshopのレイヤー並びと逆順になるので、混乱しますね）
1番目に登録してあるものから、順番に重ねていき、最終結果としてまとめられるイメージです。

ですが、これでめでたく1ドローで描画されてめでたしめでたし！という訳にはいきません。
再生すると、SpriteMeshAnimationで付けた、目パチ・口パクが動かなくなっています。
どうやらパターンチェンジまで1メッシュに統合されて、パターンチェンジできなくなってしまうようです。

コンバインしてはいけないもの

メッシュ自体を操作している場合は、コンバインすると操作できなくなりますので、対象から外します。

• SpriteMeshAnimation（パターンチェンジ）
• 表示非表示アニメ（こちらも1メッシュにされてしまうと、ActiveのON/OFFアニメが効かなくなります）

SortingGroupの設定

さて、コンバインしてはいけないものを分けたとして、また新しい問題が出てきます。
今までパーツの前後関係はOrderInLayerで設定していましたが、内部的に生成されたコンバインメッシュに対して設定する方法がありません。
そこで、コンバインするもの/しないものを階層で分け、SortingGroupを使ってそれぞれの前後関係を指定します。

描画最適化（SkinnedMeshCombiner + SortingGroup）のキャラセットアップ例

以上の状況をふまえ、キャラクターセットアップは画像のようになります。
基本的に

• 体 (draw1階層)
• 目パチ, 口パク=SpriteMeshAnimation (draw2階層)→コンバインしない
• 目口より手前のもの (draw3階層)

で4DrawMeshに収まると思います。

キャラトップ階層にもSortingGroupを付けておくことで、ゲーム中に複数のAnima2Dキャラクターを出したときの、キャラ間の前後関係にも対応することができます。
（SortingGroupはコンポーネントが付いている同階層内で前後関係を並べてくれますので、draw階層とは別の番号を割り当てて制御することができます）

（基本構造説明のため、今まで説明していた青いキャラとは違うキャラの階層構造の画像を使用しています）

結果

FrameDebuggerで確認すると、かなり描画数が減ったと思います。（体＋目＋口）

FrameDebuggerでの確認（最適化後）

スクリプト化する

以上の手順をスクリプト化したいのですが、デフォルトの状態ではSkinnedMeshCombinerにアクセスできないパラメーターがありますので、SkinnedMeshCombiner.csのコードを書き換えます。

SkinnedMeshCombiner.cs
修正前

using UnityEngine;
using System.Collections.Generic;
using Anima2D;

public class SkinnedMeshCombiner : MonoBehaviour
{
	[SerializeField]
	SpriteMeshInstance[] m_SpriteMeshInstances;

	SpriteMeshInstance[] spriteMeshInstances {
		get {
			return m_SpriteMeshInstances;
		}
	}

修正後

using UnityEngine;
using System.Collections.Generic;
using Anima2D;

public class SkinnedMeshCombiner : MonoBehaviour
{
	[SerializeField]
	SpriteMeshInstance[] m_SpriteMeshInstances;

	public SpriteMeshInstance[] spriteMeshInstances {
		get {
			return m_SpriteMeshInstances;
		}
		set {
			m_SpriteMeshInstances = value;
		}
	}

10行目に「public」を追加
14行目に「set {~}」の部分を追加

スクリプトの流れ

SpriteMeshAnimationを別グループにまとめるように処理をします。
1.階層をOrderInLayerの順で並べ替え
2.下の階層からSpriteMeshAnimationが出てくるまでSkinnedMeshCombinerに登録し、drawグループを作成していく。
3.SpriteMeshAnimationが出てきたら新規drawグループを作成。SpriteMeshAnimationが無くなるまで上にたどる。
4.SpriteMeshAnimationが無くなったら、引き続きSkinnedMeshCombinerに登録してdrawグループを作成していく。
階層の一番上まで繰り返す。

完成スクリプト

CreateDrawgroup.cs

▶コードはクリックで展開

/********************************************************************
        Anima2D Create DrawGroup 
        2018.05.25  (c) SEGA
********************************************************************/

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEditor;

namespace SegaTechBlog
{
    public class CreateDrawGroup : UnityEditor.Editor {

        const int GROUP_ID_START = 0;
        const string GROUP_NAME = "draw_";

        [MenuItem("Window/Anima2D/Create DrawGroup")]
        public static void Do()
        {

            GameObject meshRoot = GameObject.Find("mesh");
            GameObject boneRoot = GameObject.Find("bone");
            GameObject charRoot = meshRoot.transform.parent.gameObject;

            // DrawGroupがある場合は、一旦解除する
            foreach (Transform i in meshRoot.GetComponentsInChildren<Transform>())
            {
                if (i.name.Contains(GROUP_NAME))
                {
                    foreach (Transform j in i.GetComponentsInChildren<Transform>())
                    {
                        j.parent = meshRoot.transform;
                    }
                    GameObject.DestroyImmediate(i.gameObject);
                }

            }


            // order in layer 情報の収集
            Dictionary<int, List<GameObject>> dicNewOrder = new Dictionary<int, List<GameObject>>();

            foreach (Transform child in meshRoot.transform)
            {
                int order = child.GetComponent<Anima2D.SpriteMeshInstance>().sortingOrder;
                if(dicNewOrder.ContainsKey(order)==false)
                {
                    dicNewOrder[order] = new List<GameObject>();
                }
                dicNewOrder[order].Add(child.gameObject);
            }
            ArrayList keys = new ArrayList(dicNewOrder.Keys);
            keys.Sort();


            //
            // DrawGroupの生成
            //
            bool flgCreateGroup = false;
            bool flgSpriteMeshAnim = false;
            int groupID = GROUP_ID_START;

            GameObject group = createDrawGroup(groupID, meshRoot, true);
            SkinnedMeshCombiner combiner = group.GetComponent<SkinnedMeshCombiner>();

            foreach (int i in keys)
            {

                foreach(var tmpMesh in dicNewOrder[i])
                {

                    // グループ作成
                    if (tmpMesh.GetComponent<Anima2D.SpriteMeshAnimation>() && flgSpriteMeshAnim==false)
                    {
                        // SpriteMeshAnimationが付いていたら別グループにする（連続してSpriteMeshAnimationが付いている場合は同グループ)
                        flgSpriteMeshAnim = true;
                        flgCreateGroup = true;
                    }

                    if (tmpMesh.GetComponent<Anima2D.SpriteMeshAnimation>()==null  && flgSpriteMeshAnim==true)
                    {
                        // SpriteMeshAnimation付きでないオブジェクトになったら、再度別グループにする
                        flgSpriteMeshAnim = false;
                        flgCreateGroup = true;
                    }

                    if (flgCreateGroup==true)
                    {
                        groupID++;
                        group = createDrawGroup(groupID, meshRoot, !flgSpriteMeshAnim);
                        combiner = group.GetComponent<SkinnedMeshCombiner>();
                        flgCreateGroup = false;
                    }

                    // meshのグループ登録
                    tmpMesh.transform.parent = group.transform;
                    tmpMesh.transform.SetSiblingIndex(0);

                }
            }

            // SkinnedMeshCombinerの設定
            List<Anima2D.SpriteMeshInstance> smInstances = new List<Anima2D.SpriteMeshInstance>();
            foreach (Transform i in meshRoot.transform)
            {
                smInstances.Clear();
                if (i.GetComponent<SkinnedMeshCombiner>())
                {
                    foreach (var j in i.GetComponentsInChildren<Anima2D.SpriteMeshInstance>())
                    {
                        smInstances.Add(j);
                    }
                    smInstances.Reverse();
                    combiner = i.GetComponent<SkinnedMeshCombiner>();
                    combiner.spriteMeshInstances = smInstances.ToArray();
                }
            }

            // キャラトップ階層にSortingGroupを作成
            if (charRoot.GetComponent<UnityEngine.Rendering.SortingGroup>() ==null)
            {
                charRoot.AddComponent<UnityEngine.Rendering.SortingGroup>();
            }

        }


        // ---------------------------------------------------------
        // DrawGroup階層の作成
        // ---------------------------------------------------------
        private static GameObject createDrawGroup(int groupID, GameObject parent, bool addCombiner)
        {

            GameObject group = new GameObject(GROUP_NAME + groupID.ToString());
            group.transform.parent = parent.transform;
            group.transform.localPosition = Vector3.zero;
            group.transform.localRotation = Quaternion.identity;
            group.transform.localScale = new Vector3(1.0f, 1.0f, 1.0f);
            group.transform.SetSiblingIndex(0);
            UnityEngine.Rendering.SortingGroup sortinggroup =  group.AddComponent<UnityEngine.Rendering.SortingGroup>();
            sortinggroup.sortingOrder = groupID;
            if (addCombiner)
            {
                group.AddComponent<SkinnedMeshCombiner>();
            }
            return group;

        }

    }
}

スクリプトの保存先

UnityプロジェクトのEditorフォルダに入れてください。

実行してみる

Winodw -> Anima2D -> Create Drawgroupを実行してください。
SpriteMeshAnimationが付いているものを避け、drawグループが作成されます。

まとめ

以上、２回に渡ってAnima2Dを紹介してきましたが、いかがでしたでしょうか？
Unity内のアニメーションツールなので、足りない機能などがあれば今回のように追加したり、ShurikenやSpringBoneなどの他のUnityコンポーネントとも自由に組み合わせて使うことができます。
今回PhotoshopからのエクスポートとUnityへのインポートスクリプトを掲載しましたが、基本的な部分のみですので、みなさんの作業に合わせてコードを改造して使ってみてください。
他のツールに比べて、制作物に合わせたフローを構築しやすいと思います。

　TAセクションではこのようにアーティストの制作に役立つ環境を提供できるよう力を注いでおります。やりたいことを遠回りせずに行える環境でお仕事したい方はぜひ下記の弊社グループ採用サイトをご確認ください。現在さまざまな職種でアーティストを多数募集しております！
採用情報 | セガ企業情報サイト

(C)SEGA

最近のアーケードゲーム開発

皆様、こんにちは。
セガ・インタラクティブ 第三研究開発本部 開発一部 プログラマの渡邉です。
新年度も始まり、心機一転といった感じでしょうか。本ブログも開始してから1年と8ヶ月程度と相成りました。
時が経つのは早いなと思いつつ、日々ゲーム開発に勤しんでいます。
私は近年アーケード（業務用）ゲーム開発を行っていますが、以前は主にコンシューマ（家庭用）ゲーム開発に携わっていました。
セガグループではコンシューマ、アーケード、PC、モバイル、ブラウザ等々と様々な機種でゲームを開発、リリースしています。
ここまでの技術ブログの記事を振り返ってみれば、様々な所属部門の記事があることがお分かり頂けると思います。
機種が違えば、開発する際の前提やお約束が変わってくるものです。そこで本記事では、自身の経験を元にコンシューマゲーム開発との比較も交えつつ、最近のアーケードゲーム開発について紹介させていただければと思います。なお、アーケードゲームは開発内容によって、紹介したものと環境が違うこともあることを予め申し上げておきます。あくまで一例ということをご理解いただければ幸いです。
過去記事では特定の職種向けのテクニックや事例の紹介が多かったかと思いますが、概括的なお題ということもあり、極力職種問わずの内容になっております。技術的な側面を期待されている方には退屈かもしれませんがご容赦ください。


目次

開発環境／ハードウェア

コンシューマゲーム開発では各プラットフォーマーが提供する開発キットを使用します。（周辺機器等の拡張を除くと）そのハードウェア構成は基本変動することはないので、ハードウェア性能は一定です。ハードウェア性能が決まっている分、素早くソフトウェア開発に移行出来ますが、その制約下で開発することになります。特にマルチプラットフォームタイトルは厳しい制約下でソフトウェア開発を強いられることになるでしょう。
アーケードゲーム開発ではハードウェア構成から検討することになります。その為、タイトルに合わせた最適なハードウェアを構築可能ですが、その分ハードウェア構成の選定には時間がかかりがちです。また、タイトルリリース後しばらくして採用した部品が製造中止になる可能性もあるため、注意が必要です。
なお、アーケード筐体は家庭用ゲーム機に比べ若干大き目なので、スペースの確保が大変です。マルチプレイになると尚更です。



弊社アーケードゲーム「Wonderland Wars」の開発用筐体エリアです。ちょっとしたゲームセンターですね。

使用言語／ソフトウェア

こちらはコンシューマ・アーケードあまり変わりありません。
クライアントアプリケーションの使用言語は C++ あるいは C# が主です。
最近では Unity や Unreal Engine 等といったゲームエンジンでの開発タイトルが増えています。
敢えて違う点を挙げるとすれば、プラットフォーマーの制約下に縛られないアーケードゲーム開発のほうがオープンソースや外部ライブラリを採用し易いかもしれません。
また、サーバー等インフラも自前で管理する為、専用モバイルアプリケーションやWebサイトとの連動も比較的容易です。（担当者の作業が容易だとは言いませんが…）



弊社では、アーケードゲームのIP（知的財産）を様々なデバイスに展開する「マルチデバイス×ワンサービス」戦略を掲げており、タイトルに連動したスマートフォンアプリやWebサイト等を同時に開発、提供しています。例えば「Wonderland Wars」では、Web上で戦績等を確認出来る「Wonder.NET」や、スマートフォン向けのサポートアプリケーション「Wonderland LIBRARY APP」の提供を行っております。

ゲームデザイン

アーケードゲームではコンシューマゲームとの差別化を図る為、「家庭での再現は難しい」ことを念頭に置いたデザインを心がけることが多いです。
ディスプレイからコントローラーまでタイトルに最適な構成を構築出来ることはゲームデザイナーにとって喜ばしいことではありますが、やりすぎると移植性に欠けるため、注意が必要です。
また、パッケージ売りのコンシューマゲームと、1プレイ幾らのアーケードゲームではマネタイズが大きく違うわけですが、アーケードゲームでは店舗の利益を考慮し、プレイ回数を稼ぐことが可能なゲームデザインが求められます。1プレイ時間は短く（数分～十数分程度）、それでいてライブで盛り上がるための体験を重視したデザインが好まれます。

エラー処理／データ分析

アーケードゲームでは直接硬貨を投入して遊んでいただいている為、エラー周りの例外処理には気を遣います。
例えば、停電等による電断や通信不良等が発生した場合でも極力不利益が生じないよう、大切なプレイヤーデータを随時バックアップしたり、ある程度の追跡および状況分析が出来るようプレイログ情報を専用サーバーにアップロード等しています。

開発規約／出荷基準

コンシューマゲーム開発では「一定時間以上、画面を静止してはならない」といった各プラットフォーマーが定めた規約（Technical Requirements Checklist 等）を遵守する必要があります。また、CERO や ESRB 等といったレーティング機構の審査もパスしなくてはなりません。
対してアーケードゲーム開発では、共通の規約・審査機構は無く、各メーカー独自で定めています。
弊社でも独自のガイドラインを用意し、デバッグサポートチームや品質保証部の元、厳格にチェック・パスしたタイトルをリリースしています。
また、アーケードゲームは風営法の適用対象なので、仕様作成の段階で法務部と擦り合わせを行う等、法令遵守を心がけています。



「Wonderland Wars」のチェックリストの一部です。実に 500 超の中項目があり、それぞれに数十～百程度のチェック項目が並んでいます。

顧客層

コンシューマゲームの顧客層は、各プラットフォーマーのターゲット機保有者、ターゲット機で遊んで下さるユーザーです。
アーケードゲームの場合、店舗に足を運んで遊んで下さるユーザーに加え、店舗（オペレーター）も顧客層に含みます。（いわゆる B to B to C の取引形態ですね）
ユーザーに楽しんでいただけるゲーム内容にするのは勿論ですが、店舗がオペレーションしやすい機能を実装することも忘れてはいけません。その為、入力テストや、クレジットの確認、店舗大会用の設定等を可能とする「テストモード」を通常用意します。

こちらは「Wonderland Wars」のテストモードの一部で、入力デバイスが正常に動作するかのテスト画面です。アーケードゲームでは毎日様々なユーザーにプレイいただくため、パーツの摩耗も激しいです。オペレーターが筐体の状態を確認する際の補助となるよう、このようなモードを用意しております。

まとめ

いかがでしたでしょうか。
簡単な解説ではありましたが、アーケードゲーム開発とコンシューマゲーム開発、同じゲーム開発でも違いが見て取れたのではないでしょうか。
本記事が皆様の気付きの一助となれば幸甚です。
もしアーケードゲーム開発にご興味を持たれましたらセガ・インタラクティブ採用サイトを、
逆にコンシューマゲーム開発のほうが面白そうだと思われた方はセガゲームス採用サイトを、
とにかくゲーム作りに関わりたいと思われた方はセガグループ採用サイトを是非ご確認ください。
我々セガグループは共にゲームを作り続けてくれる方々を歓迎します。
採用情報 | 株式会社セガ・インタラクティブ -【SEGA Interactive Co., Ltd.】
採用情報 | 株式会社セガゲームス -【SEGA Games Co., Ltd.】
採用情報 | セガ企業情報サイト

(C)SEGA

Anima2Dでキャラクターアニメーションを作ろう！編

■ 共闘ことばRPG 「コトダマン」

www.youtube.com

こんにちは。
セガゲームス 開発統括部 アート＆デザイン部 TAセクション 廣田です。

今春リリースの「共闘ことばRPG コトダマン」では全てのキャラクターアニメーション（700キャラ以上！）をAnima2D で作成しました。タイトルリリース前ですが、一足先にコトダマンのキャラクターを使って、Anima2D のセットアップからアニメーション作成を解説していきます。

さらに次回、Anima2Dでの制作をサポートするスクリプトについても書いていく予定です。

公式

好評配信中です！
kotodaman.sega.jp

Twitter

この記事で紹介しているキャラクターは、全てコトダマンのAnima2Dキャラクターです。
Twitterでは他のキャラクターもたくさん登場していますので、Anima2Dのサンプルとして是非ご覧ください！
（フォローもお願いします！）

twitter.com

■Anima2D とは

2017 年から Unity テクノロジーが提供しているアセットで、無料で利用できます。
将来的に Unity への組み込みを予定しているようです。
これを利用することで、Unity 内で 2D ボーンアニメーションができるようになります。
3DCGツールを使っている方なら、板ポリゴンにテクスチャーを貼り、ボーンを入れて2D イラストを動かすという工程がUnity内でできるようになったと思ってもらうと分かりやすいでしょう。

ドキュメント

上記画像にある、DocumentationというリンクからPDFをダウンロードできます（英語）

■Anima2D のメリット

1. FCurve エディタが使用できる（MayaやSoftimageで慣れたアニメーターの作業・修正スピードが格段に違う）
2. Unity のスクリプティングによる拡張ができる（セットアップの自動化や機能追加・作業支援ツールの作成など）
3. Unity 内で作業できるので、他ツールからのエクスポート/インポートの手間が無い。
4. メッシュをある程度自動で切ってくれる
5. 学習コストが安い(Unityを触ったことがある+3DCGツールでアニメーションを作成した事があればすぐ)
6. ゲーム画面内で見ながら作成・修正できる。（Shuriken のエフェクトも同時に作成可能）
7. Unityの公式アセットになった。

コトダマンでは700キャラ以上のアニメーションを作るにあたり、Spine, Live2Dも検討したのですが、上記理由でAnima2Dを採用しました（数字は選択理由順）。
簡潔に言うと「作業スピード＋スクリプティングによるカスタマイズ」が選択理由です。

■Anima2Dのデメリット

この場合は違うツールを選択した方が良いです。

• Unity 以外で開発を行う可能性がある(Cocos2D など）
• フリーフォームデフォーメーション（頂点を動かしての細かいアニメーション）を行う

フリーフォームでフォーメーションをやるかどうかが一番の判断基準ですが、作り方によっては、コトダマンのように魅力的に動かせますよ！

■Anima2D を準備する

では、さっそく始めてみましょう。
まずは、アセットストアから「Anima2D」で検索してダウンロードします。
後述する Skinned Mesh Combiner（複数のキャラパーツを1ドローにまとめてくれるスクリプト）が入っているので、Examples も含めてインポートを行っておきましょう。
（最低限でも、Examples/Scriptsのみはインポートしてください）

■全体の流れ

イラスト → パーツ分け → パーツ配置 → ボーン配置 → ウエイト付け → アニメーション作成 → 描画最適化
という流れで進みます。

■イラストの準備（パーツ分け）

Anima2Dで動かすために、キャラクターのパーツ分けを行います。

コツ

• まずはキャラクターがどう動くのか、アニメーションを決定しましょう。ここをきちんと計画しておかないと、アニメーションを作り始めてから、パーツが分かれていなくて動かせない！などの問題が出てきます。
• それでも、どう動かすかが決めきれない場合は、基本的に関節単位で分割します。
• Photoshop上でCtrl+Tでパーツを回転させて、パーツの割り具合と動きを確認してみましょう。隙間が見える場合は塗り足すか、それをカバーするような動きに変更します。
• 上腕・下腕・手、足などはパーツを分けておいた方が破綻せず、動きも大胆に作れるようになるので、分けておくのをオススメします。

Photoshopデータの作り方

• パーツを切り分ける。1 パーツ 1 レイヤー。
• 英数字でレイヤー名を付ける
• パーツの書き出し。1パーツ1画像(.png)

後でこのルールを元に、Unity取り込みまでを自動化するスクリプトを作成します。

■Unityへの取り込み

1枚のテクスチャーに収める

TexturePackerやSpriteUVなどを使って、1枚のテクスチャーにパーツを配置します。

マルチスプライトに設定

• テクスチャーをUnityに読み込んだら、SpriteModeをMultipleに設定します。
• 必要があれば、Sprite Editor ボタンを押して、スプライトを切り直します。

Anima2D SpriteMesh に変換

• テクスチャーを右クリック → Create → Anima2D → SpriteMesh でAnima2DのSpriteMeshを作成します。
• テクスチャーファイルを選んで実行すると、まとめてSpriteMeshが生成されます
• マルチスプライトの各要素（青い四角アイコン）を選んで、同じようにCreate → Anima2D → SpriteMeshとすれば、1個単位でSpriteMeshを生成されます。SpriteEditorで後からスプライトを追加した場合など、単品でSpriteMeshを作る事ができます。

グリーンのオブジェクトがAnima2D のスプライトです。

■Unity階層の準備

まず、メッシュとボーンを配置するための階層構造を準備しましょう。
GameObject -> Create Emptyで画像のような階層を組みます。

character　→　キャラクタートップ階層（全体に関するスクリプトはここに付けます）
/mesh　→　メッシュを置きます
/bone　→　ボーンを置きます

■パーツ(SpriteMesh)を並べる

配置テンプレート（下敷き）の準備

キャラクターの1枚画像を下敷きとして用意し、これをガイドにパーツを配置していきます。

• キャラの全身画像を用意し、Sprite(2D)に設定します。

• Hierarchy上にtemplate画像を置き、InspectorでColorのAlphaを半透明に設定し、配置ガイドにします。

• そして・・・頑張ってSpriteMeshを並べていきます！

パーツの前後関係の設定(Order in Layer)

Order in Layerでパーツの前後関係を設定します。数字が大きい方が前面に描画されます。

• 分かりやすいように、Hierarchy上でPhotoshopと同じ順に並べます。
• Order in Layerを下から順に番号を振っていきます。

この項目の工程は非常に面倒なので、後でスクリプトで自動化します！

■ボーンの配置と設定

配置

計画したアニメーションに合わせて、配置したパーツの上にボーンを並べていきます。

• Hierarchy上で右クリックし、CreateObject→2D Object → Bone でボーンを出します。（またはAlt+Shift+B)

• ボーンの根本を掴むと移動、先の方を選ぶと回転ができます
• Transform, Rotationツールを切り替える必要はありません。

親子階層の設定

配置が終わったらHierarchy上で親子関係を組み立てます。

boneの設定

Hierarchy上での親子関係とは別に、bone自体にChildという設定項目があります。
Anima2Dが計算する時に使うボーンの親子情報です。

• IKで動かす場合は、必ず設定します。
• 子階層に向かって、ボーンの向きと長さが自動で設定されるようになります。腕・脚など、関節部分は見た目が分かりやすくなります。

Colorの項目でボーンに色を設定できます。
自分で分かりやすい色に設定しましょう。

Color	ボーンカラー。見た目の変更。
Child	子ボーン。IKを使うなら設定必須。
Length	ボーンの長さ。Childが設定されていると自動計算されます。

コツ

• 階層構造は最後に組みましょう。
• 骨の配置時に階層構造も組みたくなるのですが、先にやってしまうと親の骨を動かした時に、子の位置もずれてしまうので、手戻りが発生します。

■メッシュにボーンを割り当てる

メッシュを選んで、対応するボーンを設定します。

• メッシュを選択
• Bonesの右下の「+」を、割り当てたい骨の数だけ押します。
• 出てきた空欄に、ドラッグ＆ドロップでボーンを割り当てます
• （まだメッシュにバインドしていないため警告が出ますが、今は大丈夫です）

• 階層をまとめて割り当てたい場合は、SetBonesにドラッグ＆ドロップすれば、子階層まで一気に設定してくれます。

■メッシュ割り

メッシュはボーンに合わせて割ると綺麗に曲がりますので、ボーン配置後にメッシュ割りをします。

SpriteMesh Editor

Anima2D用のメッシュ割り＆ウエイト付を行うエディタです。
Unity上部メニュー → Window → Anima2D → SpriteMeshEditor で表示します。

Sliceツールの利用

左上のSliceボタンを押すと、メッシュを自動で割ってくれます。

Outline Detail	画像形状をどれだけ正しく追跡するか。値を上げると画像に沿ってメッシュが切られますが、頂点数が多くなります。
Alpha cutout	メッシュを切る時のアルファの許容値。値を上げるほど画像の輪郭に近いメッシュが切られます。OutlineDetailの値が高くないとあまり効果はありません。
Tessellation	メッシュの中を分割するか。画像の輪郭だけでなく、内部にも頂点が生成されます
Detect Holes	ドーナツのような穴の空いた画像部分のメッシュをくり抜くか。

画像は自動で生成されたメッシュです。
手間を掛けたくない場合は、決め打ちパラメーターでもある程度の結果にはなりますが、Sliceのスライダーを動かし、自動で割ってから手で調整するのが楽でしょう。

手動でのメッシュの調整

頂点の追加	Shift+クリック
頂点の削除	Del

■ウエイトの設定

Bindボタンを押すと、メッシュに骨がバインドされ、自動的にウエイトが割り振られます。
ウインドウ下にWeightTool, Inspectorが出てきますので、これらのツールを使ってウエイトを調整していきます。

• 頂点を選択（Ctrlを押しながらで複数選択可）
• ウエイトを割り振りたい骨を選択
• Weight Toolのスライダーでウエイトの割合を設定する

Weight tool（SpriteMeshEditor：右下）

Overlay	メッシュ上にウエイトカラーを表示します
Pies	各頂点上にウエイトの割合を表示します
Smooth	ウエイト分配をスムーズ化します。選択した頂点だけにも掛けられます
Auto	自動でウエイトを割り振ります。選択した頂点だけにも掛けられます

Inspector（SpriteMeshEditor：左下）

SpriteMeshEditorで選択したものの情報が表示されます。
画像は頂点を選択した場合です。
選択頂点に割り当てられている、ボーンとウエイトの確認・調整ができます。

コツ

• ウエイトを付けた後に、バインドしたまま、頂点の追加と削除ができます。
• 後から足した頂点にはウエイトが割り振られていませんので（黒い点）、Autoボタンなどで忘れずにウエイト設定しましょう。
• Unbindすると、設定したウエイトが初期化されてしまいます！ 骨位置が違うと思ったら、早めにUnbindして骨位置を調整しましょう。ここはAnima2Dで改善して欲しい所です。

■リギング

IKの設定

• 先端の骨を右クリック→2D Object→IK Limb(IK CCD2D) を選択して、IKコントローラーを出します。
• グリーンの円がIKコントローラーです。

IK Limb（2ボーンIK）

腕・脚など2本の骨を制御する時に使用します。

Record	IKコントローラーを動かした時に、ボーン側にキーを打ってくれます。実機上でIKの計算コストを掛けたくない時はONにしてアニメーションを作成します。
Target	IKでコントロールされる骨。自動設定されます。
Restore Default Pose	計算を実行する前に初期ポーズを設定する。基本ON（現状ON以外の使い道が分かりません）
Flip	関節の曲がり方を反転。IK設定後に関節が逆に曲がってしまうならONにします。
Orient Child	IKでコントロールされているボーンより、下階層にあるボーンの角度をどうするか。ON：IKコントローラーと同じ角度にする。OFF：階層の角度を維持する。

IK CCD2D（多関節IK）

尻尾などの長い関節の制御に使用します。

Num Bones	多関節IKでコントロールするボーン数。自動設定されます。
Iterations	計算回数。大きいほど多関節ボーンがIKコントローラーを正しく追跡しますが、計算負荷が大きくなります。モバイルではデフォルトの10を基準とし、様子を見て値を下げましょう。
Damping	多関節ボーンの柔らかさ。1に近いほど固くなります。

Limb, CCD2Dの挙動の違い

IKによくある現象として、IKコントローラーとボーンが離れた時に、伸び切りが発生します。
伸び切った所から、再びIKコントローラーに接触すると、カクッとした動きになり非常に目立ちますが、
イラストを大胆に動かすと、どうしても伸び切り・カクつきが回避できない場合があります。
その場合は、2ボーンでもCCD2Dを使ってコントロールすると緩和されます。
Limbに比べて計算コストは高くなりますが、Iterationsの値（デフォルト10）を上げなければ、実機上でも問題ありません。

コントローラーの追加

ボーンに直接アニメーションを付けず、別階層でリグを組む時はコントローラーを利用します。

• ボーンを右クリック → 2D Object → Controlでコントローラーを出します。
• ボーンはコントローラーのTransformに追従するようになります。

■ポーズマネージャー

定型ポーズの保存・読み込みができます。
ポーズライブラリや、同じ骨構造で違うキャラを作る場合など、色々活用できます。

Poseファイルの準備

• Projectウインドウで右クリック → Create → Anima2D → Pose でポーズファイルを作成

コンポーネントのアタッチ

• bone階層にPoseManagerコンポーネントをアタッチ。
• 「+」ボタンを押してPoseファイルを設定
• 必要なポーズ数分繰り返します。

保存/読込

• Save/Loadボタンで、ポーズの保存・読込ができます。

コツ

• PoseManagerは、付いている階層以下のゲームオブジェクトのTransformを記録します。キャラクターの一番トップ階層につけてしまうと、メッシュの位置も記録されてしまい、違うキャラクター間でアニメーションを使いまわせなくなります。
• アニメーションエディタをレコードにした状態で、PoseManagerのLoadボタンを押せば、ポーズがロードされて、自動的にキーが打たれます。モーションの開始/終了時に基本待機ポーズに戻す時などに使えます。
• セットアップ中やアニメーション中に、デフォルトポーズに戻せるように、初期ポーズを登録しておくと良いでしょう。

■アニメーション作成

Animation, Mecanimを準備

ここはUnity通常のフローなので、簡単に書きます。

• Character階層を選択し、Animatorコンポーネントを付ける
• Projectウインドウで右クリック→Create→Animator Controller。Animatorコンポーネントに設定。
• Projectウインドウで右クリック→Create→Animation。
• Animatorウインドウで右クリック → Create State → Empty。出てきたステートに、上のAnimationを設定。
• Animationウインドウを開き（Ctrl+6）、ボーンを動かしてアニメーションを作成します。

パターンチェンジ（目パチ・口パク・着せ替え）

Anima2Dではパターンチェンジアニメーションを作成する事ができます。

• メッシュを選択
• Sprite Mesh Animation コンポーネントをアタッチ
• 「+」を押して出てきた欄に、SpriteMeshを設定
• Frameのスライダーを操作してパターンを切り替えます（上から順番に0, 1, 2・・・の値に対応しています）

コツ

• パターンチェンジするSpriteMeshの位置は、最初のメッシュ配置時にピッタリ同じ位置に合わせておきます。
• アニメーションに追従する必要があるので、パターンチェンジメッシュも忘れずに骨をバインドしておきましょう。
• 今回は目なので、パターンチェンジメッシュを全て頭の骨にバインドしています。これで頭の動きに合わせてついてきます。

IKによるアニメーション

IKコントローラーは、そのままアニメーションを付けて、実機再生可能です。

• IK計算のコストを省くには、最後にアニメーションベイクする方法もありますが、全フレームにキーが打たれるのでアニメーションデータが大きくなります。(IKコントローラーを選択 → Unity上部メニュー → Window → Anima2D → Bake Animation）
• IKコントローラーのRecordボタンをONにすることで、IKコントローラーを動かした時に、骨側にアニメーションキーを打つ事ができます。（最後にIK Limb, IK CCD2DのActiveをOFFにするのを忘れずに。IK計算がされたままになります。）
• IKのままアニメーション付けできるのがやはり楽ですが、実機での計算負荷を減らしたい場合は、Recordボタンの使用が落とし所だと思います。

その他

2Dアニメーションを作成していますが、UnityなのでZ軸（奥行き）が存在します。
アニメーションで上手く使えば、面白い表現ができるかもしれません。

■次回：Anima2Dを自動化しよう！スクリプトの作成

作業で面倒だった部分をスクリプトで自動化しましょう！

• Photoshopからのエクスポート（各レイヤー毎の画像と、位置情報の出力）
• 位置情報を元にAniam2Dメッシュを自動配置
• Photoshopレイヤー順にOrderInLayerを設定
• ボーンの配置
• ゲームに出すための最適化

について書く予定です。

　TAセクションではこのようにアーティストの制作に役立つ環境を提供できるよう力を注いでおります。やりたいことを遠回りせずに行える環境でお仕事したい方はぜひ下記の弊社グループ採用サイトをご確認ください。現在いろいろな職種でアーティストを多数募集しております！
採用情報 | セガ企業情報サイト

(C)SEGA

sgtech 2018-03-26 10:00