脱出ゲーム 静寂

※ゲームの世界観や操作方法をまとめています。ゲーム本体はページの下部にありますので、スクロールしてお楽しみください。

静かな森にたたずむ一軒の不思議な建物。
本作『静寂』は、タイトル通り「音のない世界」を大切にしています。
お仕事が終わったあとの静かな夜に、温かい飲み物でも飲みながら、何も考えずに画面の中の空気感を楽しんでいただければ幸いです。
鳥のさえずりや風の音が聞こえてきそうな、静かな森をイメージして制作しました。実際のゲーム中には環境音も入れていませんが、その分、静寂の中に漂う空気感をプレイヤーの皆さんの想像力で補完しながら楽しんでいただければ嬉しいです。

あなたはこの場所から脱出することができるでしょうか?

今回は、森の『静寂』を感じていただけるようゲーム中にBGMはありませんが、最後にはBGMが流れます。音量設定にご注意ください。

遊び方

・画面の下部にある左、右の◀▶マークをクリックまたはタップすることで、部屋を左右に移動できます。
・画面の下部にある下の▼マークをクリックまたはタップすることで、部屋を戻ることができます。
・気になる場所や怪しい物はどんどんタップしてください。意外なところにアイテムが隠されているかもしれません。
・アイテム欄のアイテムは、1回タップして選択状態(色が付いた状態)にすることで使用可能になります。
・選択した状態でもう一度タップすると拡大図が表示されます。
・アイテム同士をくっつけて、1つのアイテムになることがあります。
・オートセーブです。
タイトル画面の『つづきから』で入っていただくと、続きからプレイできます。 

脱出のヒントは部屋のあちこちに隠されています。

もし謎解きに行き詰まってしまったら、一度その場所を離れて、別の部屋を探索し直してみるのが脱出のコツです。見逃していた小さな色の違いや、壁の模様が実は重要なヒントになっていることがよくあります。
「紙と鉛筆」をお手元に用意して、気づいたことをメモしながらプレイすると、意外な繋がりが見えてくるはずです。よりスムーズに謎解きを楽しめるかと思います。



脱出のヒントは部屋のあちこちに隠されています。

もし謎解きに行き詰まってしまったら、一度その場所を離れて、別の部屋を探索し直してみるのが脱出のコツです。見逃していた小さな色の違いや、壁の模様が実は重要なヒントになっていることがよくあります。
「紙と鉛筆」をお手元に用意して、気づいたことをメモしながらプレイすると、意外な繋がりが見えてくるはずです。よりスムーズに謎解きを楽しめるかと思います。

準備はよろしいでしょうか?それでは、森の中の不思議な建物での探索をお楽しみください。※ゲームの読み込みに時間がかかる場合があります。画面が表示されるまで、そのまま数秒お待ちください。

↓↓↓ ゲームプレイはこちらから ↓↓↓

脱出ゲーム 静寂

製作舞台裏

ネタバレを含みます。ゲームをプレイされた後に興味のある方は読んでいただけると幸いです。

「あぁ、どこか静かな場所へ行きたい。きれいなものを見て、おいしいものを食べて、ただただゆっくりしたい。」
そんな日々の疲れから生まれたのが、この『静寂』というゲームです。あえて音を無くし、視覚と静けさだけで癒やされる空間を目指しました。(ゲーム最後に音が出ます。)

以前、このゲームをアプリとしてGooglePlayに出していた時、あるユーザーさんから、「静寂というタイトルなのに、BGMがうるさい」とご指摘を受けました。あぁ、確かにその通り。とてもやさしいBGMを選んだつもりでいたのですが、うるさかったか。最近のゲームは派手なBGMや効果音が多いですが、たまには耳を休ませる時間があってもいいんじゃないかと思いました。無音だからこそ、最後のアヒルのシーンで流れる音がより際立ってくれたらいいな。『引き算の美学』ですかね。かっこいい・・・。今回Web版で公開するにあたりBGMを無くしました。

最後、大海原へアヒルが解放されるシーンには、自分自身の「自由になりたい」という願いも少し込めています。アヒルは海には行かないでしょうが、でもこの世の中に絶対なんて無いですからね。行くかもしれません。プレイしてくれた方が、ちょっと笑えて、少しでも肩の力が抜けるような、そんな体験になってもらえたら嬉しいです

この制作日記は、Blender、Unity初心者の私が試行錯誤した過程を残すための備忘録です。紹介しているコードや設定は、必ずしも最適解や正解ではないかもしれませんが、「自分の環境ではこう動いた」という一つの事例として参考にしていただければ幸いです。

Unity

今回はスクリプトを使わず、『イベントトリガー(Event Trigger)』の『Pointer Click』という機能を使ってみました。
ただ単純に『クリックしたら花を消す』という動きを作りたかったので、できるだけシンプルに、Unityの基本機能だけで完結させたかったからです。

  1. Event Triggerの + を押して、対象のオブジェクト(花の画像など)を左の下枠に直接ドラッグ&ドロップします。
  2. その右側の 「No Function」 をクリックします。
  3. 出てきたリストの中から GameObject を探します。
  4. SetActive (bool) を選択します。(下の方)bool型・真(true)または偽(false)
    今回は「画像を消したい」ので、その チェックを外した(OFFにした)状態 にしておけばいいです。

Blender

ゲームクリア後に流れるアニメーション。Blenderで画像を作成し、Unityで画像をパラパラ漫画のように繋げました。アヒルが森の中を駆け抜けるシーンで一つのアニメーション。アヒルが海で漂うシーンでもう一つのアニメーション。二つのアニメーションを続けて流します。

アヒルが森の中を駆け抜けるシーンの作成
  1. 平面で道を作成(あとから足すのが面倒なので少し長めに作成し、曲げやすいように細分化しておく)
  2. ベジェカーブを作成(このカーブ線の形が道の形になるので考えて作る)
  3. 1の平面にモディファイアーで「カーブ」を追加し、カーブオブジェクトに2のベジェカーブを指定する 曲がりくねった道ができるので森の中に配置して調整する
  4. 道の終わりにアヒルを配置
  5. カメラを作成
  6. カメラにオブジェクトコンストレイントプロパティで「パスに追従」を追加し、ターゲットに2のベジェカーブを選択する
    ここでカメラが遠くへ飛んだり、明後日の方向を向き始める。Ctrl+Aで全トランスフォームを押す。前方の軸をY、上向きの軸をZにして何とか落ち着く
  7. さらにカメラにオブジェクトコンストレイントプロパティでトラックを追加し、ターゲットにアヒルのオブジェクトを選択(アヒルのオブジェクトは1つのオブジェクトにしておく)
    前方の軸を-Z、上向きの軸をY
  8. アニメーションパスを押す(フレームの数値を変更、250にすれば250フレームかけてゆっくり進む)
  9. 出力プロパティで解像度X720、Y1280、70%に変更 開始フレーム1、終了を60(1番から60番までの60枚の画像を出力する) 出力先のファイルを準備 ファイルフォーマットをPNG カラーRGB Ctrl+F12を押してアニメーションのレンダリングを開始
    カメラがターゲットのアヒルを追いかけながら、曲がりくねった道に沿って動く様子が60枚の画像として出力されます。 

    途中、道はカーブに沿わずに異次元にくねくねしちゃうし、カメラはどこかに行っちゃうし。何度も作り直したけれど、これが勉強になります。全トランスフォームを忘れずに行うといいです。


アヒルが海で漂うシーン
  1. 砂浜となる平面の作成(あとから海の大きさに合うように調整する)
  2. 海となる平面の作成(小さくてよい)
  3. 2の平面にモディファイアーで「海洋」を追加(2で作成した小さい平面が大きくなる)
Unity内モディファイアー画像

設定はこんな感じです。各項目の数値を変更して自分好みの波にしてください。

4.マテリアルプロパティの設定

Unity内マテリアル画像

色の付いたバーを自分好みに変更してみてください

5. 参考にした動画 
chan14-CGさんの【Blender3.2】波に揺られるアニメーションを参考にさせていただきました。ここからのアニメーション出力は、語り出すと一冊の本が書けるくらい膨大なので(笑)
具体的な出力方法は、こちらの動画が一番わかりやすかったです!こちらを参考にして、アヒルと波の設定をして、先ほどと同じように画像を出力しました。

6. 今回の制作の流れ(まとめ)
全体の流れを整理すると、こんな感じです
①Blenderで海とアヒルの動きを作る
②アニメーションを60枚の連番画像として出力
③Unityへ持っていき、パラパラ漫画のように再生!

Unity側での設定もかなり試行錯誤しましたが、基本的には「画像を順番に表示させる」というシンプルな仕組みです。
苦労した分、アヒルが海へたどり着いたシーンを見たときは、本当に「自由になれた気がする…」と感動してしまいました(涙)。難しい・・・覚えられない・・・。


このゲーム、公開当初はスマホで画面が切れてしまっていました。格闘の末、共通の解決策を見つけたので、こちらの記事で詳しく解説しています。
[画面サイズが合わないよ]