「【年末だよ】Unity お・と・なのLT大会 2020」登壇資料です https://meetup.unity3d.jp/jp/events/1266

1. 積み上げ棒グラフの
リザルト画面を作る
＆
いい感じに音をつける
＠Takaaki_ichijo

2. 自己紹介：一條 貴彰
● 株式会社ヘッドハイ 代表取締役
○ 「ゲーム開発者向けのツールやサービスを広める」をやる会社
■ CRI ADX2 アンバサダー
■ Google Indie Games Festival ファシリテーター
■ Genvid Developer Relations
○ 書籍執筆
■ 「Unityサウンド エキスパート養成講座」
● 個人ゲーム開発活動
○ 「Back in 1995」(Switch/PS4/PS Vita/One/N3DS)
● 最近の趣味
○ AVATAR2.0の「巻乃もなか」さんを観る
○ そして...？

3. 最近ハマっていること：家でクラフトビール
ブログ「国産クラフトビールおすすめリスト ゲーム開発の創造性をビールで高める」
https://joed.hateblo.jp/entry/2020/11/25/142740

4. 「デモリッションロボッツK.K.」を開発中
このゲームのために
本日発表する機能を調査した

5. 積み上げ棒グラフのリザルト画面を作りたい

6. ● 対戦ゲームで1ラウンドごとの得点合計を積み上げて見せるやつ
○ 棒グラフが横方向に積みあがってく
○ 基本点数とボーナス点数が積みあがる
積み上げ棒グラフのリザルト画面 is 何

7. UIアセット関連
● Doozy UI
○ シンプルなプログレスバーは作れる
○ 連続してバーが積みあがっていくのは標準では作れなそう

8. 手法：Layout Groupを使う
● 子となるUI要素の位置を変更する
○ ボタンとかを指定の空間内にバランスよく並べる
○ 親となるコンポーネントにアタッチすると子の Rect Transformが従属する
○ 横方向の奴は「Horizontal Layout Group」

9. 本来の使い方
● 本来はUIを整列するためのコンポーネント
○ スクリーンサイズが異なる端末へのマルチ展開とか
○ プレイヤーがUIのサイズを自由に変更できるシステムへの対応とか

10. 整列処理は実行中にもリアルタイム反映される
● これを転用して積み上げ棒グラフを楽に作る
○ 子のRect TransformのWidthを変更すれば他の要素も追従する
■ 長さ0のImageをあらかじめ用意しておき、順番に Width変更
■ 1段目の棒が伸びきった位置が 2段目の起点になる
○ 長さの変更はDoTweenを使ってなめらかに
○ 描画負荷はたぶんよろしくない ...リザルト画面では他は描画しないから(ﾟεﾟ )ｷﾆｼﾅｲ!!

11. 作成手順
親にHorizontal Layout Group
コンポーネントをアタッチ
・左端から伸びてく
Child AlignmentをMiddle Leftにする
・隙間は作らない
チェックボタンは全部外して、
Padding, Spacingも0。

12. スクリプト１：高さが一定で幅が０のImageを生成して参照をリストで持つ
（オブジェクトプーリング）
public int barHeight = 80;
List<Tuple<RectTransform, Image>> barDataList = new List<Tuple<RectTransform, Image>>();
private void Start()
{
for (var i = 0; i < 20; i++)
{
barDataList.Add(GenerateBarParts());
}
}
private Tuple<RectTransform, Image> GenerateBarParts()
{
GameObject go = new GameObject("BarParts");
go.transform.parent = this.transform;
Image image = go.AddComponent<Image>();
RectTransform rect = go.GetComponent<RectTransform>();
rect.sizeDelta = new Vector2(0, barHeight);
return new Tuple<RectTransform, Image>(rect,image);
}

13. スクリプト２：プールしたImageを使って順番にバー伸びアニメを表示
public int counter = 0;
public void ShowBarParts(Color color, float size)
{
if(counter >= barCount) return;
barDataList[counter].Item2.color = color;
barDataList[counter].Item1.DOSizeDelta(new Vector3 (size, barHeight),1.0f)
.SetEase(Ease.InCubic));
counter++;
}
プールしているbarDataListにImageとRectの参照セットが入っているので、色と大きさを指定する。

14. 動かしてみる

15. うまく再計算されない場合はスクリプトから叩く
● タイミングによっては反映が変になることもあるらしい
○ 定期的にレイアウト計算、更新のスクリプトを叩く

16. 積み上げ(ryにいい感じに音をつける
● バーが伸びてるときに効果音を再生したい
○ バーの長さは不定なので伸びきるタイミングは不定
○ 伸び初め～伸び加速時に音のピッチを変えたい
○ 伸びきった時に停止音
● 普通の実装
○ バー伸びスタート：ループ音再生開始
○ バー伸び中：音量、ピッチ（音の高さ）を変更
○ バー伸びエンド：ループ音再生停止、停止音再生
■ ピッチ変更が途中だったらそれも停止
● 思ったより めんどい

17. そこで「CRI ADX2」を活用する
● サウンド演出が組み込まれたライブラリ & ツール
○ イントロ付きループ再生
○ 効果音の再生数の上限を設定
○ 音をランダムに変化させる設定
● ゲームに最適化した音声圧縮形式
○ たくさん音が鳴るゲームの 負荷軽減
○ ボイスが多いゲームの データ圧縮
○ 音声データの暗号化
● インタラクティブミュージックの実現
○ ゲームの展開に合わせて変化するBGM
● 製品版「ADX2」と無料版「ADX2 LE」がある
○ 無料版は売上1,000万円のゲームまで商用も無料
17

18. サーバー
ADX2の
パックファイル
Unity + ADX2のフロー
Script：
・キューを指定して再生
再生制御はキューの設定を
ランタイムが自動処理
Unity Editor + ADX2 plugin
g)
av, Ogg)
WAV
ビルド
実行ファイル
専用ツール CRI Atom Craft
ツール操作：
再生単位「キュー」を作り、
鳴り方をパラメータで指定。
・フェードイン
・再生数制御
・ダッキング
ADX2の
パックファイル
ADX2の
パックファイル
インポート ビルド
18

19. 音の構造
● バーが伸びている時はループ音源を再生
○ 伸びきったら停止
● ループ音源は序盤ピッチが上昇している
○ 伸びてる感を音で表現
● 伸びきった時に停止音を再生

20. ADX2ツールでの構造
バー伸び開始時の音設定 (呼び出し名 MeterStart)
・音をループさせる
・時系列に沿ってボリュームを上げる（黄色線）
・時系列に沿ってピッチを上げる（青線）

21. 停止音：ADX2の「アクション」機能を使う
● ADX2では「キュー」という単位で音を再生する
○ キューには様々なパラメーターが含まれている
○ そこに「他の音の停止」設定もできる
● 「再生」コマンドで停止っておかしいやろ
○ 「音の再生」ではなく、「音の何らかのアクションが発生する」と再定義
○ 今回は「バーの伸び開始」「バーの伸び停止」をアクションと定義して音の演出をつける
● 何が嬉しいのか？
○ 連続した効果音の演出を作る時、 1つのトリガーで複数の音の操作ができる
○ 今回は「ループ音の再生停止」と「バーが伸び終了時の効果音再生」を同時に行う
○ 何の音を止めなくてはならないか保持しておかなくてよい
○ コードを変えずにサウンドツールでやれることが増える音を増やしたり減らしたり

22. ADX2ツールでの構造
バー伸び終了時の音設定 (呼び出し名 Meter Stop)

23. MeterStopの設定に注目
「MeterStart」に対して、0.2秒でフェードアウトさせる命令

24. スクリプト修正：「MeterStart」の再生と「MeterStop」の再生
public void ShowBarParts(Color color, float size)
{
if(counter >= barCount) return;
barDataList[counter].Item2.color = color;
atomSource.Play("MeterStart");
barDataList[counter].Item1.DOSizeDelta (new Vector3 (size, 100),1.0f)
.SetEase(Ease.InCubic)
.OnComplete(() =>
{
atomSource.Play("MeterStop");
});
counter++;
}
ポイント：バーが伸びている音のループの停止をこ
こでは処理していない

25. まとめ
● Horizontal Layout Groupを使うと
○ 「積み上げ棒グラフのリザルト画面」がすぐ作れる
● ADX2を使うと
○ ループ再生やピッチ変更、再生停止などの処理をデータ側に持たせられる
○ 実装量が減る

26. ご清聴ありがとうございました