人類は目で見て耳で聞く生き物。だから、音の鳴るUIは触っていて気持ちいいし、記憶に残る。これってゲームに限らず全てのUIにいえること。 そして、人類は肌で触れる生き物。iPhoneやSwitchにあるような触覚のフィードバックも大切。そういう音や触覚の管理をどうやすれば簡単にできるのか、という話題提供。 今回はUnityを対象に紹介していますが、アノテーション(言語によってはアトリビュート)の使える言語全般で使えるお話です。アノテーションだけで実現したかったのですが、IL2CPPの都合上interceptorを使わない手法を採用しています。

1. 効果音管理でラクしたい人のための
Unity実装テクニック
2017年4月14日
デジタルハリウッド大学院
株式会社エクストーン
木野瀬友人

2. デジタルハリウッド大学院に
入学しました

3. 今回はゲームの効果音(SE)の話

4. 効果音は大切な手がかり
https://connpass.com/event/51527/
https://t.co/YbTe087zTS

5. 設計から実装まで、ちゃんとできていますか？

6. 「反復可能なSE決め」の提案

7. 一般的な管理方法
・企画書作成
・動画ラフ作成(効果音を仮割当)
実装、SE管理表
試遊、レビュー
改善サイクル

8. 一般的な管理方法
・企画書作成
・動画ラフ作成(効果音を仮割当)
実装、SE管理表
試遊、レビュー
改善サイクル
×
SEの適用状況がわからない
SEの不整合に気づきにくい

9. 開発現場でよくある問題
プランナー、サウンドエンジニア：
効果音の実装状況がブラックボックス
プログラマー：
実装した効果音の整合性を確認できない
プランナー
サウンドエンジニア
プログラマー
SE管理表 プログラム
工程が一方向！！

10. SE管理表を自動更新させる
プランナー、サウンドエンジニア：
効果音の実装状況が資料に一覧化されている
プログラマー：
実装した効果音が正しいことを確認できる
プランナー
サウンドエンジニア
プログラマー
SE管理表 プログラム
反復可能！

11. メソッド
＝動作するところ
＝音が鳴るところ
メソッドの呼び出し時に音が鳴ればいい、という新しい発想。
攻撃した時、ダメージを食らった時、回復した時、バトルの開始時、勝利、敗北、
それぞれだいたいメソッド化されている。
OnCollisionEnter()やOnTriggerEnter()も、音が鳴るところ。

12. 「反復可能なSE決め」
使いかたの紹介

13. SE管理表(Spreadsheet)の構成
シート名 目的 入力者
BGM、SE 必要なBGMとSEを入力
各アセットの制作状況を入力
ディレクター
コンポーザー
Doxygen表 Doxygenで自動生成したTSVを貼り付けるシート エンジニア
SE入力項目 メソッドにSEを割り当てる表 ディレクター
SE割当表 実装状況を確認する表 自動

14. 1. BGM、SEシートに素材を書く
シート名 目的 入力者
⇒BGM、SE 必要なBGMとSEを入力
各アセットの制作状況を入力
ディレクター
コンポーザー
Doxygen表 Doxygenで自動生成したTSVを貼り付けるシート エンジニア
SE入力項目 メソッドにSEを割り当てる表 ディレクター
SE割当表 実装状況を確認する表 自動
担当者や制作状況などを自
由に追加

15. 2. メソッドの説明を書く(チームがわかる言葉で)
/// <summary>
/// OKボタンタップ
/// </summary>
public void TappedCloseButton(){
//必須チェック
if(string.IsNullOrEmpty(this.NameInputField.text)){
var dialogItem = new OkDialogItem{
ExplainText = "ユーザーネームは必ず入力してください",
OkText = "OK",
OkProcedure = delegate {
}
};
var dialog = OkDialog.InstantiateObject(dialogItem);
dialog.transform.SetParent(this.transform, false);
dialog.Show();
return;
}
...
}
メソッドの説明を記述
シート名 目的 入力者
BGM、SE 必要なBGMとSEを入力
各アセットの制作状況を入力
ディレクター
コンポーザー
⇒Doxygen表 Doxygenで自動生成したTSVを貼り付けるシート エンジニア
SE入力項目 メソッドにSEを割り当てる表 ディレクター
SE割当表 実装状況を確認する表 自動

16. 3. doxygenでメソッド一覧のTSVを生成
コメントが抽出されている
このTSVをGoogle Spreadsheetにコピペ
シート名 目的 入力者
BGM、SE 必要なBGMとSEを入力
各アセットの制作状況を入力
ディレクター
コンポーザー
⇒Doxygen表 Doxygenで自動生成したTSVを貼り付けるシート エンジニア
SE入力項目 メソッドにSEを割り当てる表 ディレクター
SE割当表 実装状況を確認する表 自動

17. 4. SE入力項目にSEの設定を書く
シート名 目的 入力者
BGM、SE 必要なBGMとSEを入力
各アセットの制作状況を入力
ディレクター
コンポーザー
Doxygen表 Doxygenで自動生成したTSVを貼り付けるシート エンジニア
⇒SE入力項目 メソッドにSEを割り当てる表 ディレクター
SE割当表 実装状況を確認する表 自動
メソッドシグネチャ 割り当てたいSE グレー部分は自動表示 (他シートからVLOOKUP)

18. 5. SE割当表が完成
シート名 目的 入力者
BGM、SE 必要なBGMとSEを入力
各アセットの制作状況を入力
ディレクター
コンポーザー
Doxygen表 Doxygenで自動生成したTSVを貼り付けるシート エンジニア
SE入力項目 メソッドにSEを割り当てる表 ディレクター
⇒SE割当表 実装状況を確認する表 自動
ソースのコメント 割り当てたSE名 実装制作

19. 6. SEを鳴らすコードを書く
/// <summary>
/// OKボタンタップ
/// </summary>
[PlaySE("se_system_yes")] //追加
public void TappedCloseButton(){
PlaySE.Instance.Play (System.Reflection.MethodBase.GetCurrentMethod ()); //追加
//必須チェック
if(string.IsNullOrEmpty(this.NameInputField.text)){
var dialogItem = new OkDialogItem{
ExplainText = "ユーザーネームは必ず入力してください",
OkText = "OK",
OkProcedure = delegate {
}
};
var dialog = OkDialog.InstantiateObject(dialogItem);
dialog.transform.SetParent(this.transform, false);
dialog.Show();
return;
}
...
}
アノテーションとSE名を記述
SEを鳴らす処理を追加
シート名 目的 入力者
BGM、SE 必要なBGMとSEを入力
各アセットの制作状況を入力
ディレクター
コンポーザー
⇒Doxygen表 Doxygenで自動生成したTSVを貼り付けるシート エンジニア
SE入力項目 メソッドにSEを割り当てる表 ディレクター
SE割当表 実装状況を確認する表 自動

20. 7. Doxygenで再生成すると更新される
シート名 目的 入力者
BGM、SE 必要なBGMとSEを入力
各アセットの制作状況を入力
ディレクター
コンポーザー
⇒Doxygen表 Doxygenで自動生成したTSVを貼り付けるシート エンジニア
SE入力項目 メソッドにSEを割り当てる表 ディレクター
SE割当表 実装状況を確認する表 自動

21. おまけ：
音の鳴るUI
PON！

22. 音の鳴るUI
Button
(継承元)
SEButton
.unityファイル(YAML)をパースしてTSVに追加
PON！

23. 運用して気づいた点
1. サウンド管理の全体の見通しがとても良くなった
2. ブラックボックスになりがちなバトル系のSEも同様
3. エンジニアはソースコードだけを編集すればいい。精神的にラク
4. 使っていないSEがひと目で分かる
5. SEを鳴らす場所がわかるのでコンポーザーがイメージしやすい
6. SEの制作依頼時にキャプ動画を渡すとイメージを共有しやすい
7. 上記メリットがあるのにエンジニア側の実装がラク。基本コピペ

24. 音の鳴るUIは
触っていて気持ちいい
アノテーションの仕組みを使えば
Android / iOS開発でも真価を発揮