ハッカドールに Candy Rock Star 踊ってもらってみた話

ハッカドールの MMD モデルが公開されました。
このモデルを見た瞬間に " Unity ではかどらせてくださいっ！"
という声が聞こえた気がしました。

そこで、Candy Rock Star をハッカドール 1号・2号・3号ちゃんに踊ってみてもらいました！

動画はこちら。https://youtu.be/QwFyeasCg64
[![ハッカドールに Candy Rock Star を踊ってもらってみた。](http://img.youtube.com/vi/QwFyeasCg64/0.jpg)](http://www.youtube.com/watch?v=QwFyeasCg64)

Unity で WebGL ビルドして、フレーム落ちも気にならない程度に動きました。
MMD4Mecanim の利用規約の関係上、現在ビルドは公開できないため、動画にして公開します。

以下スクリーンショットです。

![Screen Shot 2015-10-17 at 11.33.26 AM.png](https://qiita-image-store.s3.amazonaws.com/0/1635/0eec8aae-3f36-79ef-d023-a7223c9961c9.png)

![Screen Shot 2015-10-17 at 8.04.37 PM.png](https://qiita-image-store.s3.amazonaws.com/0/1635/6e7c4d86-58cf-fbf8-2ead-22c6b38f53b6.png)

![Screen Shot 2015-10-17 at 11.29.17 AM.png](https://qiita-image-store.s3.amazonaws.com/0/1635/6088ebb6-449a-9917-55b1-099d20a72709.png)

以下で、今回使った情報をまとめます。

(正直なところ、Candy Rock Star のアセットや MMD4Mecanim が優秀すぎて、調整する要素の方が多いです。以下に書く内容は、この調整をするためには、どの記事を見たらいいのかという情報程度です。)

# そもそも
## ハッカドールとは
今期アニメにもなっている 君にシンクロするニュースアプリ のキャラクターです。
https://hackadoll.com/

MMD モデルが公開されています。
https://hackadoll.com/#mmd-section

今回はこの MMD モデルを Unity で使える形式に変換して利用しました。

## Candy Rock Star とは
ユニティちゃん Candy Rock Star という、ユニティちゃんが歌って踊るライブステージです。
その様子はこちら。https://www.youtube.com/watch?v=M_GUlXJ52YA

アセットが公開されており、ユニティちゃんライセンスの範囲で自由に使うことが出来ます。
http://unity-chan.com/download/index.php

# 今回使ったもの
- Unity 5.2.0f3
- ユニティちゃん Candy Rock Star アセット
- MMD4Mecanim

## MMD4Mecanim について
Nora 氏作成の MMD4Mecanim は Unity で MMD モデルを扱うためのツールです。
Unity は MMD モデルをサポートしていないため、このツールを使って、利用できる形 (FBX) に変換して使うことにしました。

たいへん使いやすく、ドキュメントも充実しており、素晴らしいです。
http://stereoarts.jp/

導入の流れに関して、以下の記事もわかりやすいです。
http://qiita.com/hiroyuki_hon/items/931c79164b0ffe19517f

## Candy Rock Star アセットについて
公式のアセット以外にも、大変わかり易い記事が公開されています。

[テラシュールブログ ユニティちゃんライブのシーン構造について軽く解説してみる](http://tsubakit1.hateblo.jp/entry/2014/11/09/235348)

とてもお世話になりました。

# Candy Rock Star を自然に踊ってもらうためにしたこと
MMD4Mecanim を使って Unity 上にモデルを持ってきただけでは、かなり違和感がある状態になってしまいます。

そのため、幾つか調整しました。

## 1. マテリアルの変更
変換したモデルでは、不自然に明るいように見え、ユニティちゃんと比較しても、絵の違いが気になったので、ユニティちゃんのマテリアルをハッカドール達に設定しました。

### Before
![Screen Shot 2015-10-17 at 9.54.48 PM.png](https://qiita-image-store.s3.amazonaws.com/0/1635/cd08dfd9-8bb0-4d00-a98a-c3129401c5e7.png)

### After
![Screen Shot 2015-10-17 at 10.06.26 PM.png](https://qiita-image-store.s3.amazonaws.com/0/1635/9bb83f0b-e4dd-8e5d-5651-06e26494f584.png)


## 2. 髪揺れの追加
このままだと、粘土が動いているみたいなので、髪を揺らします。

(ここでも以下のサイト記事が大変参考になりました。)
[テラシュールブログ ユニティちゃんのおっぱいとか髪とかを揺らす仕組みの設定方法について](http://tsubakit1.hateblo.jp/entry/2014/11/08/233000)

今回は後ろ髪と前髪を揺れるように設定しました。
(SpringBone コンポーネントの追加と、そこに設定するコライダーをひたすら追加)

## Before
![before.gif](https://qiita-image-store.s3.amazonaws.com/0/1635/1c134595-a498-7483-92ac-fe439eb310c8.gif)


## After
![after.gif](https://qiita-image-store.s3.amazonaws.com/0/1635/50eeba38-0730-0b19-3696-3603e26d5243.gif)


## 3. カメラの調整
Candy Rock Star は複数のカメラ位置が設定されています。(実行時にランダムで選択される)
今回はハッカドール 3 人に踊ってもらったので、ユニティちゃん 1 人の時と比べて、若干違和感のあるカメラ位置は消しました。
また、なるべく3人が見えるようにしたかったので、使わないポジションを削り、位置調整もしています。

### Before / After
![before-after.png](https://qiita-image-store.s3.amazonaws.com/0/1635/e8ead462-d661-15b0-b82c-4e70487c7d55.png)

非アクティブなカメラポジションは使わないように変更しました。

## その他色々な調整
- できるだけ処理負荷を下げる
    - WebGL ビルドをそのまま公開ではなく、スクリーンキャプチャを行って動画で公開する事になったため、WebGL で公開するよりもフレーム落ちが目立つようになってしまいました。そのため、紙吹雪のエフェクトは無くしています。
- 表情の調整
    - ユニティちゃんが表情が変わる瞬間と同じタイミングで変わるように、ハッカドール用に設定しなおしています
- 特定のタイミングでカメラの位置固定
    - Candy Rock Star には特定のタイミングで必ずこのカメラを使うというイベントが設定されています。
        - このイベントをハッカドール用に少々修正しました。
- バックスクリーンのエフェクト調整
    - かなり明るくなってしまったので、ハッカドール1号の色が潰れないように調整しました。

# やり残したこと
まだ違和感が残っていて、フィギュアが動いている様に見えるので、以下の点を入れたかったです。

- 服の揺れ表現
    - スカート部分が太ももに刺さっている…
    - 3号ちゃんの腕が、服の肩の部分を突き抜けてしまっている…
- 視線
    - カメラの方を向いて欲しい。視線が欲しい。
    - Candy Rock Star のアセットを参考にすれば簡単に出来そう
- カメラの調整
    - 1号ちゃんしか追っかけていない…
    - 2号/3号のアップも欲しい
    - イマイチなアングルの時がある
- 表情の制御
    - 数カ所だけ表情を入れているが、もっと入れたい
- リップシンク
    - 曲に合わせて口パクさせたい…
    - Candy Rock Star のアセットを参考にすれば出来そう
- 突然のユニティちゃん!!!
    - 突然ユニティちゃんが現れたりさせたかった

ハッカドール ED のキャラクターの表情や動きがとても良いので、それを目指したいです。

# 最後に
ユニティちゃん可愛い！ハッカドールも可愛い！

# 権利関係
本記事で使っているモデルは、
以下で公開されている MMD モデル (ハッカドール1号 / 2号 / 3号) です。
https://hackadoll.com/mmd
© 2015 DeNA Co.,Ltd.

また、

<div><img src="http://unity-chan.com/images/imageLicenseLogo.png" alt="ユニティちゃんライセンス"><p>このコンテンツは、『<a href="http://unity-chan.com/contents/license_jp/" target="_blank">ユニティちゃんライセンス</a>』で提供されています</p></div>