ハッカソン事前準備で作ったハッカソン向け基盤システム

この記事はサムザップ Advent Calendar 2017の25日目（最終日）の記事です。

別のこと書くつもりでしたが、
ちょうど12/16,17にsgj6 ハッカソンに参加して、
優秀賞と最優秀賞のW受賞してきたので、
ハッカソン前日に用意したハッカソン向け基盤システムに関して書こうと思います。

余談ですが、参加した"sgj6 ハッカソン"は2日間で小学低学年向けの英語教育と親子のコミュニケーションをテーマにしたゲームのハッカソンです。（確か…）貰った賞は、優秀賞は教育ゲームとしての高評価、最優秀賞は全体的なゲームのクオリティ、だったと思います。

（「取り敢えず中身を見たい。」という方は『基盤システムまとめ』へ）

# アジェンダ
・はじめに
・ハッカソン向け基盤システムの目指したもの
・遷移周り
・サウンド周り
・ウィンドウ周り
・基盤システムまとめ
・最後に

# はじめに
今回参加した"sgj6 ハッカソン"は予めテーマが分かっていたのですが、
大抵の場合、当日テーマが発表されることが多いので準備がしづらいと思います。
ただ、さすがに「ゲームを作る」ということまでは事前に分かると思うので、
ゲームを作ることが分かっている前提で、ハッカソン向けの基盤システムを作ったので紹介します。

# ハッカソン向け基盤システムが目指したもの
今回作成したハッカソン向け基盤システムが目指したものは下記4点です。
・テーマに依存しないゲーム共通の部分をピックアップ
・見た目のクオリティアップも視野に入れる。
・AssetStore等で課金しない。
・小規模実装を想定とする。サーバー使わない。通信を必須としない。

今回、テーマに依存しないゲーム共通の部分としてピックアップしたのは、
「シーン遷移」「サウンド」「ポップアップウインドウ」です。
見た目のクオリティアップに関しては、
基盤システムとして予め作らなくても支障はないのですが、
他のチームと差を付けるには必要かなという感じです。

# 遷移周り
## Unityデフォルトの遷移を見てみる
いきなりですが、デフォルトのシーン遷移を確認します。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【Qiita投稿用】デフォルトのシーン遷移<br> <a href="https://t.co/oJtOKpKEBN">https://t.co/oJtOKpKEBN</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; だっきぃ@サブ (@smhiroms) <a href="https://twitter.com/smhiroms/status/944839913794543616?ref_src=twsrc%5Etfw">2017年12月24日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

シーン切り替え一瞬っ！！
(ﾟ△ﾟ；)え？

## 今回作った遷移を見てみる
今回作ったシーン遷移を確認します。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【Qiita投稿用】カスタムしたシーン遷移<br> <a href="https://t.co/O9CIt3WcTH">https://t.co/O9CIt3WcTH</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; だっきぃ@サブ (@smhiroms) <a href="https://twitter.com/smhiroms/status/944839697380950021?ref_src=twsrc%5Etfw">2017年12月24日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

フェードありの遷移の方がクオリティ高く見えますね♪
Ｏ(≧∇≦)Ｏ イエイ！！ 

## 概要
デフォルトのシーン遷移よりも今回作ったシーン遷移の方が、
フェードしていてクオリティが上がったように感じませんか。
たかがシーン遷移、されどシーン遷移ですね。
細かいところに注意を向けることでクオリティの評価がされますので、
是非使ってください。

何も配置されていないBlankを仲介シーンとし、フェードさせるようにしています。

## 使い方
【前提条件：遷移させたいシーンが存在する】
・普通にシーンを設定する

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【Qiita投稿用】ハッカソン事前準備で作ったハッカソン向け基盤システム<br>説明用スクリーンショット <a href="https://t.co/RgTGcsTOJs">pic.twitter.com/RgTGcsTOJs</a></p>&mdash; だっきぃ@サブ (@smhiroms) <a href="https://twitter.com/smhiroms/status/944841713926860800?ref_src=twsrc%5Etfw">2017年12月24日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 

・CustomSceneManager.csに遷移させたいシーンの情報を定義する

        public enum STATE
        {
            BLANK,
            TITLE,
            WINDOW_TEST,
        }

        Dictionary<STATE, string> SceneName = new Dictionary<STATE, string>
        {
            { STATE.BLANK, "Blank" },
            { STATE.TITLE, "TitleScene" },
            { STATE.WINDOW_TEST, "WindowTestScene" },
        };

STATEにenumでシーンを定義し、SceneNameのDictionaryに先ほど定義したenumをkey、Valueをシーン名として定義する。

・遷移の呼び出し（例はタイトルへの遷移）

        CustomSceneManager.Instance.ChangeState(CustomSceneManager.STATE.TITLE);

Utility.Systemをusingしてくるのは忘れずに。

# サウンド周り
## 概要
今回作ったサウンド関連は音ゲーでは厳しい部分があるので予めご了承ください…orz
ただ、今回はハッカソン向けでテーマが分からない前提なので、
音ゲーでも使えるレベルのものは要求されない想定で対応してみました。
万が一、音ゲーになってしまった場合は諦めて独自で組んでください。笑
BGM,SE,VOICEと3つに分かれて制御出来るようにしたので、
是非使ってください。

## 使い方
・サウンド周りの配置場所
「Resources/Sounds」のそれぞれ「Bgm」「Se」「Voice」から取得します。

・サウンド周りの呼び出し

            // BGMが再生中か
            Sound.IsPlayingBgm();

            // BGMを再生
            Sound.PlayBgm("再生したいBGM名");

            // Seを再生
            Sound.PlaySe("再生したいSE名");

            // Voiceを再生
            Sound.PlayVoice("再生したいVoice名");

            // BGMを停止
            Sound.StopBgm();

            // ボリュームの調整(タイプ【BGM/SR/Voice】, 音量)
            Sound.SetVolume(Sound.eType.Bgm, 1f);

# ウィンドウ周り
## 概要
ウィンドウなんてどこで使うんだ！って感じの方もいらしゃるかもしれませんが、
意外と重宝したので基盤システムに含めておきます。
ちなみに、参加したハッカソンではステージ選択/設定/ヘルプ/他、
多数のウィンドウで活躍しました。

基本的にWindowのマネージャークラスがウィンドウの管理と命令をします。
WindowBaseはその命令を受け取り、開閉処理を実行するようなイメージです。
使用する際は、WindowBaseを継承するのを忘れないでください。

## 今回作ったWindowBaseを見てみる
今回作ったWindowBaseを使ってWindowを確認します。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【Qiit投稿用】Windowの動作確認<a href="https://t.co/2EIF4Q1ct5">https://t.co/2EIF4Q1ct5</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; だっきぃ@サブ (@smhiroms) <a href="https://twitter.com/smhiroms/status/944848058449141760?ref_src=twsrc%5Etfw">2017年12月24日</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 使い方
・Windowの定義設定

        public enum WINDOW_TYPE
        {
            NONE,
            BASE,
            SETTING,
            HELP,
        }

        public Dictionary<WINDOW_TYPE, string> WindowName = new Dictionary<WINDOW_TYPE, string>
        {
            { WINDOW_TYPE.BASE, "BaseWindow" },
            { WINDOW_TYPE.SETTING, "SettingWindow" },
            { WINDOW_TYPE.HELP, "HelpWindow" },
        };

        public Dictionary<WINDOW_TYPE, string> WindowClass = new Dictionary<WINDOW_TYPE, string>
        {
            { WINDOW_TYPE.BASE, "WindowBase" },
            { WINDOW_TYPE.SETTING, "SettingWindow" },
            { WINDOW_TYPE.HELP, "HelpWindow" },
        };

WINDOW_TYPEでWindowのタイプを指定しておく。
WindowNameにはKeyを先ほど定義したenum、ValueにはWindowのプレハブ名を登録する。
WindowClassにはKeyを先ほど定義したenum、ValueにはWindowのプレハブにアタッチされているWindowBaseを継承したWindowクラスを登録する。

・Windowの呼び出し

                // Windowを開く
                WindowManager.Instance.OpenWindow(WindowManager.WINDOW_TYPE.SETTING);
                // Windowを閉じる
                WindowManager.Instance.CloseWindow(WindowManager.WINDOW_TYPE.SETTING);

Utility.Systemをusingしてくるのは忘れずに。

# 基盤システムまとめ
本稿で紹介したもの以外にも少し基盤システムとして入っているものがありますが…
今回作ったハッカソン向け基盤システムはgitHubで公開します。
ハッカソンに参加する際は、是非使ってください。
Sampleの中も是非是非参考にしてください。

https://github.com/UniMulRock/hackathons_base_system

# 最後に
今回作ったものを実際にハッカソンで使ってみて、「サウンド周り」はフェードインとフェードアウトは欲しいなという感じでした。他はいい感じに活躍してくれたので良かったです。

P.S. Qiitaは初回投稿は投稿画像に容量制限があったんですねw

# 参考資料
・[Unityドキュメント](https://docs.unity3d.com/ja/current/Manual/index.html)
・[DOTween](https://www.assetstore.unity3d.com/jp/#!/content/27676)
・[DOTweenをふわっとまとめてみた](https://qiita.com/kagigi/items/bdf4d42835add07b0077)