セガゲームス第4事業部第4開発1部TA(テクニカルアーティスト)セクション*1 宮下です。2019年が始まって早１カ月がたとうとしてますが、あなたにとって2018年はどんな年でしたか？（少々時期外れな質問なのですが…）
Readyyy!
私は2019年2月1日にリリースされたスマホタイトル「Readyyy!」に携わっており、とても忙しい1年でした。このタイトルは、プレイヤーが新人プロデューサー兼寮長として、男子高校生アイドル18人を育成するスマホゲームで、ゲームエンジンUnity*2を使って開発しています。
TAとして、3Dによるチビメンや「Live2D*3」の立ち絵をはじめとする「Readyyy!」の技術的なグラフィック表現の根幹を担っています。特に立ち絵については、ライティングという結構面白いことしているんですよ。
昼間、夕方、逆光などの環境によるライティングを実現するための仕組みの設計と、それに関連するシェーダーやコンポーネント*4を作りました。そのデータを「Photoshop」や「Live2D」から出力するためのツール整備もしています。
ご興味あれば、ぜひ遊んでみてください！
CEDEC+KYUSHU2018
実はこのセガテックブログのおかげで、昨年12月に「CEDEC+KYUSHU2018」での講演という、貴重な体験をさせていただきました。おかげというのは、「CEDEC+KYUSHU2018」の関係者の方が、2017年に私の書いた記事、
をご覧になって、講演を依頼してくださったのです。
今回は、そのとき講演した５つの自動化効率化のお話*5の中から、ディープラーニングをテーマにしたものにプラスアルファしてお届けします。
「CEDEC+KYUSHU2018」での講演をお聞きになった方も復習を兼ねてご覧いただければと思います。説明も、より丁寧になっていますので！
ディープラーニングで自動的にサムネイルを作れないか！？
前置きが大変長くなりました。それでは始めましょう！
なお、ディープラーニングを勉強するのに「ゼロから作るDeep Learning ―Pythonで学ぶディープラーニングの理論と実装」という本を使っています！難しいですがとてもいい本です。
アニメ顔検出
2016年ごろ、とあるデザイナーさんからこのような相談を受けました。
「サムネイルを自動的に作れませんか？」
サムネイルとは縮小した画像のことですが、このように顔など特徴的な箇所をクローズアップしてトリミングするケースもあります。ちなみに彼らは、「Readyyy!」の「SP!CA」というユニットのアイドルたちです。
そのデザイナーさんが所属しているプロジェクトのプラットフォームはスマホでした。スマホタイトルは運営を長く続けていくため、新規要素をどんどん追加していきます。その要素を一覧で表示させたりするために、サムネイルが必要となるのです。
また、ご存知とは思いますがゲーム開発ではアニメ顔が使われることが多く、そのプロジェクトでもアニメ顔が採用されていました。
これを自動的に作成…何か良い方法はないものか…。検索すると…出てきました！「OpenCV」を使ったものです。
多くの人がこれを使ってアニメ顔検出しているようですね。勉強も兼ねて「Photoshop」のプラグインという形で実装してみました。一から実装すると大変なので、サンプルのプラグインに間借りする感じで作りました。
余談ですが、「Photoshop」プラグインのAPIって独特というか、なんとも難しいですよね…。下のgif動画は、プラグインを動作させたときのものです。
どうですか！？素晴らしい性能ですね！ただ、おしいのが誤検出（下の半透明で赤く塗り潰した部分）です。
このOpenCV（lbpcascade_animeface）を使った手法は検出精度の調整ができるのですが、精度を上げすぎると、顔ではない部分も検出してしまい、精度を下げると、顔を検出しづらくなってしまうという現象が発生します。そのちょうどよいバランスを見つければいいのかもしれませんが、その設定で絶対大丈夫と言い切る自信がありません。残念ながら、これでは自動生成するツールとして、信頼性が足りませんよね…。
顔なのか？顔ではないのか？
しばらくして、１つのアイデアが閃きました。OpenCV（lbpcascade_animeface）が検出した画像の、「顔」「顔ではない」をディープラーニングで学習させて、判断させるようにすればいいのではないか…と。ここではディープラーニングの代表的な手法、畳み込みニューラルネットワーク（Convolutional Neural Network、以下CNNと呼びます）を用います。本来なら切り出した顔などの特徴量から誰なのかを判定できる素晴らしい手法なのですが、今回は贅沢（？）に、「顔」「顔ではない」の２種類の判定のためだけに使います。
後で知ったのですが、この物体検出後にCNNで分類する手法は「R-CNN」という立派な名前がついていました。
Keras
ディープラーニングのフレームワークには、簡単で分かりやすいという評判のKeras*6を使いました。KerasはPythonによるフレームワークで、TensorFlowやTheanoなどのディープラーニングライブラリをバックエンドとして選択できます。今回バックエンドには、CPU版TensorFlowを使いました。
KerasやCNNについては、こちらの記事を参考にしています。
教師データ
ディープラーニングを始めるにあたって、まず教師データというものを大量に用意します。ここでは「顔」と「顔ではない」画像ファイル群ですね。実は、この教師データを用意するところに１つのハードルがあります。個人で用意する場合「大量に」という点が大変だと思うのですが、セガでは複数のタイトルを開発していますので、他のプロジェクトから画像を提供してもらいました。これに先ほどのOpenCV（lbpcascade_animeface）を使ったアニメ顔検出をさせて、「顔」と「顔ではない」画像群を、比較的簡単に用意できました。
これで準備が整いました。100回学習させてみると、7時間ほどかかりました。
学習させた成果のことをモデルと呼びます。モデルは基本的に学習回数が多いほど、性能が良くなります。ただし、特定の教師データにだけ過度に対応した状態、過学習（overfitting）になってしまうことがあります。未知のデータに対応できない状態ですね。
下の図は今回学習させたモデルの性能を表しています。
「acc」は正答率、「loss」は性能の悪さを示す指標で、教師データに対してどれだけ一致していないかを表しています。横軸は学習回数で、多いほど性能が良くなる傾向を示しているのがお分りいただけると思います。
また、実は教師データの全てを学習に使っているわけではなく、教師データの一部は未知のデータに対応できるかどうかのテストに使っており、そのテスト結果が、「val_acc」と「val_loss」です。
緑のグラフ「val_loss」は、学習を繰り返すたびに上昇していく傾向にありますが、これは過学習状態であることを示しています。なので100回ではなく、30回ぐらいで止めておいたほうが良いモデルと言えそうですが、今回はこのまま100回学習したモデルで話を進めます。
では、このモデルを切り出した画像に適用してみましょう。
「Readyyy!」のキービジュアルでの判定の成果はこのようになりました。7番だけ99%顔と判断して失敗してしまいましたが、この手法は有効そうです。
デザイナーが使えるようPhotoshopで動作させてみる
では、この顔検出＋顔判定のシステムを、「Photoshop」から使えるようにしてみましょう。システムはPythonで動作しているので、「Falcon*7」というフレームワークを使って、WebAPIとしてアクセスするようにしてみます。手順としては、
- Photoshop上でドキュメントを一時的にファイル(JPEG等)保存する。
- Photoshop上でそのファイルを読み込んで、WebAPIを使ってアップロードし、応答を待つ。
- 画像を受け取ったWebサーバー側で、アニメ顔を検出する。
- 引き続きWebサーバー側で、「顔」か「顔ではない」かを判定し、「顔」の矩形の座標を返す。
- Photoshop上でその結果を受け取り、選択範囲として反映する。
となります。
今回は「Photoshop」上での動作には、プラグインではなくスクリプト（JavaScript）を使います。青い文字が「Photoshop」スクリプトでの処理。赤い文字がWebサーバーでの処理となります。
「Photoshop」スクリプトでバイナリデータをアップロードする方法は、ここに良いコードがありますので、参考にしてみてください。
「Falcon」を使ったWebAPIも簡単に実装できます。今回はこちらを参考しました。
対象の画像内に複数人いる場合は最初に見つかった人の顔の矩形を返します。上の動画では、左から２番めの茶色の髪の比呂君が選択されてますね。
これで、「Photoshop」スクリプトを使って、画像から自動的にサムネイルを作りだせるようになりました。
ここまでが、「CEDEC+KYUSHU2018」でディープラーニングについて講演した内容です。
ツールと連携させる（プラスアルファ）
ここから先が今回追加する内容で、「Readyyy!」で試みた★1と★2フォトの自動生成をご紹介します。人間並みの高い精度でアニメ顔を矩形選択できるのであれば、いろいろ応用できそうですよね。
ちなみにフォトというのは、「Readyyy!」内で手に入るアイドルの写真のことです。★5フォトは、このような豪華なフォトです。
★1と★2のフォトは、アイドル画像と汎用的な背景画像を組み合わせたシンプルなフォトです。
なお、連携させるツールのフローは以下のようなもので、全て「Photoshop」上での操作です。
- アイドル画像を読み込み、あとでデザイナーが位置調整しやすいように、スマートオブジェクト化しておく。
- アイドル画像の顔の部分を選択範囲として囲む。
- 背景画像を読み込む。
- その背景画像にあらかじめ指定してある基準位置と、先ほどのアイドル画像の選択範囲の大きさが一致するように調整して、アイドル画像をコピー＆ペーストする。
- 完成した画像を書き出す。
2番（赤い文字の部分）にアニメ顔検出判定システムを組み込んで、自動化を試みます。では実行してみますね。動画の左側が「Photoshop」、右側が出力フォルダの様子です。また20倍速で再生しており、本来はもっとゆっくりとした動作となります。
よし！どんどん生成されている！結構いい感じです！
ただ極端な例なのですが、このあたりを比較してみるとアイドルの顔の大きさがそろっていません。このあたりの微調整は、デザイナーさんにがんばってもらいました…。さらなる自動化を目指すには、工夫が必要そうです。
今回は検出にOpenCV（lbpcascade_animeface）を使いましたが、検出自体をDeepLearningで行う手法（Faster R-CNN）もあるので、次はこちらも試したいと思っています。
まとめ
- アニメ顔検出は、OpenCV（lbpcascade_animeface）が使える
- 誤検出には、ディープラーニング（CNN）で対応
- 検出されたアニメ顔のトリミングに課題あり
最後に…
ここまで読んでくださり、ありがとうございました。課題も見つかり今回は道半ばという結果になってしましたが、いかがだったでしょうか？今後も継続的に改良を積み重ねて、またここでお伝えできればなぁと思っています。
TAセクションではこのようにデザイナーの制作に役立つ環境を提供できるよう力を注いでおります。Unityの登場でTAの活躍できるフィールドは格段に広がり、シェーダーやポストエフェクトなど面白い表現を生み出せないかと日々格闘中です。
そんな中でお仕事したい方は、ぜひ下記の弊社グループ採用サイトをご確認ください。いっしょに働いてみませんか？
そして、「Readyyy!」、よろしくお願いします！
*1:1月に組織改編がありまして部署名が変わりました。
*3:ここではLive2D Cubismのこと。2Dイラストに擬似3D的な滑らかなアニメーションを追加することのできるソフト。Spineという海外の競合ソフトがある。また、最近はVTuberにも良く使われている。https://www.live2d.com/ja/products/cubism3
*4:Unityにおいてオブジェクトの振る舞いを記述するためのスクリプトのこと。
