Unity 1 week game jam に公開した hana-hiroi の解説

Unity 1 week game jam で公開した hana-hiroi というゲームについての解説記事です。

作って公開しっぱなしであまりコミュニティ貢献出来ていなかったので、何を考えたか、何を意識したか、込み入った部分、について改めて振り返った内容を記事化しました。

# Unity 1 week game jam って ？

unityroom というサイトで時折催されるイベントです。

https://unityroom.com/unity1weeks

> Unityを使って1週間でゲームを作るイベントです。
> UnityがインストールされたPCとインターネット環境があればどなたでも参加可能です。
> ...
> ハッシュタグは #unity1week です。みんなでゲーム作りを楽しもう。

# Hana-hiroi って？

私の拙作です、 Unity 1 week game jam 初参加作品です。

unityroom
https://unityroom.com/games/hana-hiroi

github
https://github.com/dolow/hana-hiroi

- ユーザーがマウス/タップで画面の任意の場所を押下すると、プレイヤーである葉っぱその場所に向かって移動を行います

- 画面にはいくつもの小さな枯れ葉が散らばっていますが、プレイヤーがそれらの葉のそばに居続けることで、徐々にその葉は回復します

- ゲームはおよそ一分間で自動的に終了しますが、ゲーム終了時にどれだけの葉を回復したがで最後に表示される称号が変わります

Qiita 向けにシステマチックな表現をしていますので、世界観を知りたい方は [unityroom 掲載の説明](https://unityroom.com/games/hana-hiroi)をご参照ください。


# 開発・動作確認環境

- maxOS 10.15.6
- Unity 2019.2.13f1
- Chrome 84.0.4147.125

Unity は、最新版は心もとないのでバージョンを一つ落としています。

# モチベーション

はじめは Unity 1 week game jam に参加する予定はなく、趣味で群衆アルゴリズムの Boids の実装を Unity で行っていたことが始まりです。

Boids
https://cs.stanford.edu/people/eroberts/courses/soco/projects/2008-09/modeling-natural-systems/boids.html

ある程度、実装が形になった所で Unity 1 week game jam の開催を知り、せっかくなので何らかの形で公開しようかなと考えたことがきっかけです。

本稿では Boids そのものの解説は割愛します。

# Boids による表現

アルゴリズムと言っても非常にシンプルで、下記の要素の実装を行い、それっぽく見えれば Boids です。

- Separation
- Alignment
- Cohesion

hana-hiroi では Boids について下記のような設計を行っています。

__モジュール側__

- [Boids アルゴリズム定義](https://github.com/dolow/hana-hiroi/tree/0e9778e10a4bc1b96ce031e396a9f0f3655e5a59/Assets/Scripts/Boids) 
  - [BoidsConfig](https://github.com/dolow/hana-hiroi/blob/0e9778e10a4bc1b96ce031e396a9f0f3655e5a59/Assets/Scripts/Boids/BoidsConfig.cs) / メタ的な設定
  - [BoidsEntity](https://github.com/dolow/hana-hiroi/blob/0e9778e10a4bc1b96ce031e396a9f0f3655e5a59/Assets/Scripts/Boids/BoidsEntity.cs) / アルゴリズム実装の実行
  - [BoidsInterface](https://github.com/dolow/hana-hiroi/blob/0e9778e10a4bc1b96ce031e396a9f0f3655e5a59/Assets/Scripts/Boids/BoidsInterface.cs) / ユーザ側が実装すべき I/F の提供

__ユーザ側__

- [BoidsImpl](https://github.com/dolow/hana-hiroi/blob/0e9778e10a4bc1b96ce031e396a9f0f3655e5a59/Assets/Scripts/Game/BoidsImpl.cs) / アルゴリズム実装

アルゴリズム実装は全てユーザ側に委ねています。
というのも、アルゴリズムの本質は非常にシンプルなものですが、ゲームという舞台でこれを応用しようと考えたときに、実現できる表現は非常に多彩なものとなるためです。
hana-hiroi での Boids 実装の特色は下記となり、特色であるがゆえに全てユーザ側で実装を行っています。

- [全てのエンティティが一人称視点で行動を決める](https://github.com/dolow/hana-hiroi/blob/0e9778e10a4bc1b96ce031e396a9f0f3655e5a59/Assets/Scripts/Game/BoidsImpl.cs#L215-L216) (神 AI の不在)
- [Boids のリーダーの概念がある](https://github.com/dolow/hana-hiroi/blob/0e9778e10a4bc1b96ce031e396a9f0f3655e5a59/Assets/Scripts/Game/BoidsImpl.cs#L15-L16)

前者の「全てのエンティティが一人称視点で行動を決める」、これについてはゲーム観点では特にこだわりはなかったのでパフォーマンス改善余地のある神 AI を用意しても良かったのですが「一人称で思考(計算)して行動したほうがより生き物らしくなるのではないか」と考え、また群衆 AI の魅力もそこにあるのではないかという仮説があったため、一人称での計算を採択しています。

後者の「Boids のリーダーの概念」についてですが、ここでのリーダーはプレイヤーを指します。
今回はプレイヤー以外のエンティティは静止して出現するため、プレイヤー以外を追従するようにすると、勝手にプレイヤー以外のエンティティ同士が凝集してしまう動きになります。
これは見た目的にもゲームバランス的にもあまり好ましくなかったため、リーダーの概念を加えています。


一方で、モジュール側のBoids 本体では下記のようなパラメータを有しています。

https://github.com/dolow/hana-hiroi/blob/0e9778e10a4bc1b96ce031e396a9f0f3655e5a59/Assets/Scripts/Boids/BoidsEntity.cs#L26-L28

- `float cohesionDistance` / cohesion を開始する最低距離
- `float alignmentDistance` / alignment を開始する最低距離
- `float separateDistance` / separation を開始する最低距離

これらのパラメータはどのようなゲームでも用いられる、アルゴリズムとして提供すべき最低限のものであると判断したためです。


Boids というと鳥や鰯のような統率されたような動きを想起しますが、 hana-hiroi ではプレイヤーが他のエンティティのそばに居続けることで加点されるシステムであるため、これらのパラメータを群衆がプレイヤーから散開しやすい値に調整することで、ぬるくなりすぎない難易度に保っています。


# 世界観の出来上がり方

hana-hiroi の評価コメントにおいては「雅」や「粋」とうお言葉を頂戴していたりしますが、その世界観の出自と演出方法について触れます。

## 花

はじめは何も考えておらず、三角形などの幾何学模様が今とは違った統率された Boids パラメータで動くような無機質なものでしたが、 パラメータをいじっているうちに [that game company の flower (邦題:flowery)](https://thatgamecompany.com/flower/) を彷彿とさせる動きが見られたため、花を使ってみようと思い付きました。
つまり偶然と思いつき。

## 和

花を採用した時点ではまだ和風なモチーフは考えていませんでしたが、フリーで使える花の画像を探している時に見つけた水彩画風の花から、日本っぽい世界観に少しずつ寄っていっています。
つまり偶然。

## 四季
花のテクスチャを適用し、Boids でプレイヤーとそれ以外を区別するために少し Color を調整した所、枯れ葉のような色合いを見せたために、日本の四季が表す諸行無常を強く取り入れたいと考えるようになりました。
つまり偶然。

[花の色指定](https://github.com/dolow/hana-hiroi/blob/0e9778e10a4bc1b96ce031e396a9f0f3655e5a59/Assets/Scripts/Game/Leaf.cs#L14-L17)
_スクリプトに直書き、個人開発が故の怠惰_

ゲーム終了時に表示される花模様は、おそらく人生で一度しか見ないという諸行無常のアイディアを乱数生成で表現しています。

[花のランダム配置](https://github.com/dolow/hana-hiroi/blob/0e9778e10a4bc1b96ce031e396a9f0f3655e5a59/Assets/Scripts/Game/GameController.cs#L193-L198)
_乱数もパフォーマンス面で気になるが、回数が少ないので看過した_

## 自然音・生音
テキストなどの UI を極力削いだ結果、画面全体としても動と静でいうところの静の印象が非常に強く出たため、サウンドも自然音や生音を中心に用いるようにしました。


# システム要因の世界観

## 2D

3D ではなく 2D を採択した理由はいくつかあります。

- WebGL を前提としたときの UX 面での懸念
- 表現面の資産がない中でゼロからやるなら 2D のほうが安い
- ３D で表現したいものがなかった

## 言語による表現の削減
チュートリアルや遊び方説明、スコア表示などの過多な説明はローカライズのコストにも影響を与え(そもそも web がグローバル)、また個人の好みとも異なっていたため、操作やルールを可能な限りシンプルにしています。

## ハンバーガー・サムライなフォント
UI を削ぐとはいっても、ライセンス表記による英語の使用は避けられませんでした。
日本語フォントは和風スタイルのものが当然豊富ですが、Web で動かす以上は日本語フォントだと最初の読み込みに一定の時間がかかるため、比較的軽量な英字フォントを用いています。
素朴な印象のフォントを探し出すことは出来ず、今のフォントに落ち着いています

[40.2kb のフォント](https://github.com/dolow/hana-hiroi/blob/0e9778e10a4bc1b96ce031e396a9f0f3655e5a59/Assets/Resources/Fonts/YozakuraJP-Light.otf)
_断然軽い_

# システム要件

以下はゲームの世界観ではなく、システムの世界観です。
本当は対応しなくても良かったユーザインタラクションと、WebGL 吐き出し周りの留意点について触れます。

## ユーザインタラクション

普段、スマートフォンデバイスを扱うことが多いため、基本的に操作はマウスではなく指を想定しています。
そのため、簡易な実装ですがユーザ入力もタップとクリックの両方に対応しています。

マクロで実装を分けたり、ビルドパイプラインでスクリプトを分けるように組んだりしても良かったのですが、今回の開発スコープでは大げさだったので全てランタイムに載せています。
インターフェースを `UserInteractionDevice` として定義し、マウスとタッチ処理のそれぞれを `UserInteractionDevice` で実装し、Start 時に実行環境を見て利用する `UserInteractionDevice` 実装クラスを決める、という流れです。

[UsetInteractionController](https://github.com/dolow/hana-hiroi/blob/0e9778e10a4bc1b96ce031e396a9f0f3655e5a59/Assets/Scripts/Game/UserInteractionController.cs)
_この量なので、マクロなど使ってもランタイムの軽量化にあまり貢献はしない_


同様に、キーボードがないと遊べないというのは避けたかったため(キーボード配列ごとのローカライズ対応が茨の道)、タップとフリックだけで遊べる、というのが条件でした。
unityroom では、結果画面で進行不能になる場合があることを確認していますが、 Unity から吐き出されたものをそのままアップした私の github.io 環境では、Android/Chrome 84 と iPad/Safari 13.0 で問題なく遊べました。

https://dolow.github.io/games/unity1week/Hana-Hiroi/
_unityroom はオープンなプラットフォームなので、ある程度安全に動くように制約入れてるのかな_

## WebGL 吐き出し

emscripten の時代で Unity の WebGL 吐き出しの検証はしていたので、かなり慎重になっていました。
基本的には Unity Editor 上での動作は信頼せず、節目節目で書き出して一通りの動作を確認しています。
結果的には杞憂で、Unity やブラウザの進歩には頭が下がる思いでした。
前述の一人称 Boids で覚悟していたパフォーマンス劣化もほとんど起きていません。

一方で、シェーダーは可能な限りデフォルトのもので済ますようにしています、今回書いたのはグレースケールのみでした。
背景の籠目も、はじめはガウシアンブラーをかけようと考えていましたが、パフォーマンス面とシェーダーが正しくかかるかに懸念があったため、元素材にブラーエフェクトをかけています。

[オリジナル](https://github.com/dolow/hana-hiroi/blob/0e9778e10a4bc1b96ce031e396a9f0f3655e5a59/Assets/Resources/RawImage/kagome01.png)
[エフェクト適用](https://github.com/dolow/hana-hiroi/blob/0e9778e10a4bc1b96ce031e396a9f0f3655e5a59/Assets/Resources/RawImage/kagome01_blur.png)

タイル状に配置しているため、継ぎ目に違和感が出ないかが懸念でしたが、直線的で境界のはっきりしている色味だったからか、結果的には気にならないレベルでした。


# まとめ

以下は hana-hiroi 固有のポイントのまとめです。

- 本当は Boids 実装してみた系ゲーム
- Boids はゲーム固有表現の領域が広い
- 世界観は作りながら出来上がった
- スマフォ/タブレットでも遊べる(github.io なら)

とりとめないですが、 [Unity プロジェクト現物](https://github.com/dolow/hana-hiroi)も併せて参照できるようになってますので、ものづくりの一助になれば幸いです。