unity1week「あける」で脱出ゲーム制作とイラスト自作に挑戦しました
キャンペーンやってる！ってことで note 初投稿になります。
拙文ですが、よろしくお願いいたします。
はじめに
unityroom 様にて定期的に開催されているゲーム作りイベント「Unity1週間ゲームジャム（通称 unity1week）」で『YOUR GAME』というゲームを作りました。
今回で 6 回目の参加になります。
プレイはこちら↓
以下はゲームのクリア方法・ネタバレを含みますのでご注意ください。
↓
↓
↓
↓
↓
クリア方法
すでにクリア済みの方は本項目を飛ばして頂ければと思います。
ゲームを開始すると、目の前に4桁の番号が必要な扉が現れます。
このゲームの目的はこの扉を開けることです。
①各部屋を回って 3 つのメモを集める（順不同）
※絵がアレすぎて「どれのことですか？」というのがあったらコメントでもください…。
(1/3). カーテンを開ける → 水差し入手 → テーブルの上の瓶をクリック → 瓶に水差しを使用 → 小さな鍵を入手 → デスクの引き出しを開ける → 中の箱に小さな鍵を使用 → 中の紙をクリック
(2/3). 額縁をクリック
(3/3). 壁掛け棚にある懐中電灯を入手（後で使います） → クローゼットを開ける → ねじ巻き入手 → 鳩時計をクリック → 鳩時計にねじ巻きを使用 → 鳩から鍵を入手 → 地下への扉に鍵を使用 → はしごをクリック（地下に移動します） → 懐中電灯を使用（選択状態にすればOK） → 貼り紙をクリック
②金庫を開ける
金庫は 4x4 のスイッチを正しく入れる必要があります。3 つのメモを頼りに解きます。
各メモには 4x4 のマスとマス内に 1 ～ 2 つの丸、マスの外にもマークがあります。マスの外のマークを金庫の取っ手とみなして回転させて、重ねた状態（下図）が正解となります。
③URL を書き換える
金庫の中には次のように書かれたメモがあります。
「かえて your-game → my-game」
あなたは your-game がこのゲームの固有 ID である（＝URL の最後が your-game である）ことに気づきます。（気づいたことにしてください。）
ブラウザの URL の「your-game」を「my-game」に書き換え、ページを移動します。
④MY GAME をプレイする
シューティングゲームが始まります。
敵を倒して進めていきますが、途中までスコアを稼ぐとバグって画面が停止します。…が、そのときのスコアが必ず「3998」という4桁の数字であることに気づきます。（気づいたことにしてください。）
⑤元の URL に戻り数値を入力
元の URL に戻り、最初の扉の 4 桁入力画面で「3998」を入力すると、開錠音とともにダイアログが閉じます。
この状態で扉をクリックするとクリアです。
振り返り
以下、振り返りになります。結構長文になってしまいましたので、もしお時間ありましたらで。
感想：まず反省
■ヒントの出し方が下手
今回、クリアに辿り着くためにはゲームの URL を書き換える必要がある、という変化球を投げたわけですが、それにしてはヒントが足りなさ過ぎたなぁと思っています。
ただあまり直接的なヒントは解けたときの楽しみを奪ってしまう気がして、どうしていいか分からなかったんですね…。（まぁそれはエゴな気もしますが。）
評価期間途中で焦り（シューティングゲームの閲覧数からなんとなくわかる）、苦肉の策で作者ページに分かりやすめのヒントを置いてみたりしたものの、普通ゲームのクリア方法が分からないからと言ってそんなとこ見に行かないですし…。コメントで作者ページのヒントに言及してくれた方が現れ、天の助けといった感じでした。
■シューティングゲームの必然性がない
今回 URL を書き換えた先のゲームをシューティングゲームにしましたが、理由は単純で、手持ちの中にすぐに用意できるのがこれしかなかったからです。もっと「あける」っぽいゲームを用意できなかったものかと思います。
感想：嬉しかったこと
プレイ、評価、コメントはいつでもとても嬉しいのでそれ以外で。
予想外の嬉しさとしてシューティングゲームの方にコメントや評価をしてくれた方々がいました。ありがとうございます！
あとは、ゲーム内ツイート機能がないにもかかわらずツイートしてくれた方もいました。感謝です！
ゲーム制作：アイデア出し
私の場合、なるべく初日にアイデアを固めることにしています。実装が間に合わなくなってしまうので…。
まずは、お題「あける」とのことで色々連想してみます。
夜・年が明ける、ドア・窓等を開ける、箱・蓋・缶・瓶等を開ける、スペース・間隔・席等を空ける、店を開ける、あを蹴る…。
時期時世を表したいいテーマだと思いましたが、意外と難しい。
とりあえず開けると言えばドア。そういえば unityroom のアイコンはドアだなー。じゃあそれにつながるゲームをつくろう、と思い、今回はメタ要素を入れる方向で攻めてみようと考えました。
で、ドアといえばで脱出ゲームにしようかなとなりました。脱出ゲームは沢山出てくることが想像に難くないのですが、被りを気にしていたらアイデア出せない脳みそなのは分かっているのでそこは割り切ります。
ということで、今回は「メタ要素を含み、何かを〈開ける〉ことで進行していく脱出ゲーム」を作ることに決めました。（脱出ゲーム作ったことないのになぜ…。）
メタ要素としては、申し訳程度ですがストーリー的なものを入れ、エンディングで少し触れる程度にしました。
あとは、unityroom 内で別のゲームを渡り歩いてクリアする、という奇をてらった要素を入れることにしました。構想自体は以前からなんとなく考えていたもので、メタ要素ありの今回はちょうどいい機会かなということで。
やることは単純で、unityroom にもう一つ限定公開設定でゲームを投稿し、URL を直接書き換えてもらうように誘導します。
ここでランキングとツイート機能は入れないと決めます。そもそも競うものは出てこないでしょうし、ツイート機能もなんとなくマッチしなさそうな気がしたので…。それにより実装を少しばかり軽減できました。
※念のため、naichi さんのランキング、ツイート機能は導入がとても簡単にできるように作られている（実際何度も使わせて頂いている）ので、特に理由がなければ是非使わせて頂きましょう！
さて、ある程度方針が決まったので 2 日目くらいから仕事の合間を見つけつつ、制作を開始したのでした。
実装と素材作成は並行して行いました。というより、最初はゲームのルールやクリアまでのフローもよく分かっていなかったのでそうせざるを得なかったと言った方が正しいです。（なぜ脱出ゲームにしてしまったのか…。）締め切りという恐怖に苛まれ続けることになりました。
ゲーム制作：謎を考える
アイデアの内容から必然的に「最後に URL を書き換えてもらって、その先のゲームでクリアの番号を入手する」という所までは思い付いたものの、その URL にたどり着くために出す謎が問題でした。
謎解きは解くのはともかく作るのはさっぱりで、オッとなりそうなものは全く思いつきません。（なぜ脱出ゲームにしてしまったのか…。）
ということで他のゲームを参考に、比較的シンプルな「いくつかの情報を集めて統合すると答えになる」タイプ（今回はメモを集めて重ねると答えがわかる謎）にしました。ただ重ねるだけだと単純すぎかなと思い、無駄に回転させる必要があるようにしてささやかに抵抗。
ゲーム制作：イラスト素材
絵をまともに描いた経験がなく、私のメインの画像編集ソフトはペイントだったにもかかわらず、イラスト自作に挑戦しました。
というのも、脱出ゲームは様々なモノや謎解き用の一枚絵（図など）が必要になるわけですが、それらのイラスト／モデル素材を集める自信がなかったからです。（なぜ脱出ゲームにしてしまったのか…。）頼める人も特にいない（泣）
一時期 Quick, Draw! を狂ったようにプレイしていた私ならモノクロ線画くらいなら何とかなるのでは？と見切り発車しましたが、その幻想はすぐさま打ち砕かれることになります。
そんなことは知る由もなく、セールだからという理由で購入してあったペンタブを開封し、CLIP STUDIO を立ち上げるのでした。
■線がたがた問題
マウスで絵を描くと線ががたがたすると思いますが、私はこれはデバイスのせい（日常生活で使う筆記用具とマウスでは使用感が違いすぎるせい）だと思っていたので、ペンタブを使えば解決するのだろうと安直に考えていました。
ところがペンタブを使っても（マウスで書いたほどではないにしろ、）割とがたがたすることに絶望しました。
まあ下手なだけの可能性もありますが、入力（ペンタブやマウス）と出力（ディスプレイ）の距離が物理的に離れていることが影響してそうです。
焦った私はグーグル先生に助けを求めました。「CLIP STUDIO 綺麗な線」
■ベクターで描くという方法
CLIP STUDIO は 2 種類の描き方をサポートしていることを知ります。ラスターとベクターです。簡単に言うと、ラスターはピクセルでデータをもち、ベクターは制御点でデータをもちます。
ベクターは線の情報に特化しており、塗りができませんが線の補正が後からできるという強力なメリットがあります。
また、ベクター画像→ラスター画像であれば非可逆の変換（ラスタライズ）が可能です。
よって次の手順で作成しました。
1. 下書き＠ラスターレイヤー
2. 清書＠ベクターレイヤー ※この時点でがたがたでもOK
3. 清書画像の制御点をマウスでぽちぽち消したり移動したり
4. 色を塗りたい場合はラスタライズして塗る
5. png 形式で保存
割とそれっぽくなる気がします。
欠点はぽちぽちに少し根気がいる。いや本職の人に比べたら大したものではないと思いますが…。
ゲーム制作：実装
脱出ゲームは初めてということもあり、独自のやり方とか多いと思われますので、そんな実装もあるんだなー程度に思って頂ければ。
かいつまんでお話しします。
■ゲームシーケンス
実装スピードを優先した結果、下記のようにしました。
主要となる 2 つのクラスを考えます。
・ゲームの進行に関わるオブジェクト（ドアとか）：KeyObject
・ゲームの進行に関わるアイテム（水差しとか）：KeyItem
KeyObject は有効・無効 2 つの状態をもっており、①有効時クリックされたときの処理／②無効時クリックされたときの処理／③有効無効が切り替わったときの処理、の 3 つを UnityEvent にして外部にゆだねる形にしておき、各箇所で勝手にやってくれ、という実装にしました。
KeyItem は基本的にインベントリに入ることができるくらいの機能しかなく、KeyObject 側で対応の KeyItem を使われたら状態を有効にするなどを登録してました。
この設計ですが、モノ毎にインスペクタぽちぽち必要に応じて勝手に拡張、とできて作りやすかったですが、全体像を捉えにくいと思います。
・どれとどれが関係しているのかが分かりにくい。
・作用させた結果として何が起こるのか分かりにくい。
結果としてクリアまでにどういうフローになるのかがさっぱりといった感じになってしまうと思います。
また、各所で色々な方法で実装できるため、
・実装手段がばらつく可能性がある。
・実装漏れが起きそう。
という懸念もあります。
短期間かつ個人開発だったので致命的な問題は出ませんでしたが、少し大きめの規模になってくると破綻しそうです。
■ステージ
脱出ゲーム部分はワンシーンです。1 画面に 1 探索エリアを表示し、左右の矢印などをクリックでエリア移動するタイプにしました。エリア移動はカメラを動かしています。
シーンのキャプチャを見てもらった方が早いですね。
■インベントリシステム
過去に自前実装したものを使用しています。
脱出ゲームに限らず使われる機能ということもあり、参考になる実装記事やアセットが多数あるので割愛。
■クリックした対象の取得
Unity においてクリックしたオブジェクトを取得する方法は色々ありますが、今はほぼ EventSystem 一択と言っていい気がしています。
uGUI を押したときの除外処理を考えなくて済むので楽ちんです。
分かりやすかった記事を貼っておきます。
[Unity初心者Tips]オブジェクトがクリックされたか検知する方法、よく見かける？あの方法と比較 の「■EventSystemを用いた方法」の方ですね。
■シューティングゲームの方
基礎部分は皆さんご存知？の昔の Unity 公式のチュートリアルを自分用に少し改造しただけですので割愛します。
■バグ演出
Time.timeScale = 0 にしてサウンドをバグっぽい SE に切り替えているだけです。
本当は、演出だよってことがちゃんと伝わるようにグリッチエフェクトを入れる想定でした。スクリーンキャプチャを最前面に張り付け、それにシェーダーをあてることで実現しました。エディタ上では。
…WebGL で上手く動作しませんでした。スクリーンキャプチャがうまくいっていない模様。
調査する時間がなく謎。調査する時間があるはずの今も謎。
おわりに
長文にお付き合いいただきありがとうございました。
unity1week は最高のイベントですね！ゲームが完成するので。
他の方のゲームもものすごく参考や刺激になります。
Q＆A
Q. 瓶から鍵取り出すところ、瓶を逆さまにして普通に取り出せばよくないですか？
A. 本当は瓶は固定されていて持ち上げられない設定なのですが、表現できませんでした。
Q. なんでデスクの引き出しの中身みんな同じなんですか？
A. コライダーが 1 つだからです。
Q. 地下へのはしご出っ張りすぎてて蓋閉められなくないですか？
A. はい。
Q. 開いた金庫の線汚くないですか？
A. はい。
Q. 地下エリアの床の線が棚と重なってますが？
A. はい。
Q. ソファの立体感ないのはなぜですか？
A. うるせーーーーー！！！！
この記事が気に入ったらサポートをしてみませんか？