見出し画像

【Unity】脱出ゲームを作ってみる③【3Dを撮影して2Dに】【画像とタイムラインについて】

Yamasho[GamingGentoo][ゆっくり学ぶチャンネル]

1年間放置していたプロジェクトを再開

ちょうど1年前に、脱出ゲームの開発記事を書きました(昨日の事のように、今はっきりと想いだす)。

それから5本のアプリをリリースし、unity1weekにも4回参加したのですが、脱出ゲームはずっと放置してしまっていました。

しかし2024年3月から開発を再開し、この度ようやく配信できました！

こんな感じのゲームです。

GooglePlay

AppStore

よかったら是非遊んでください！
今までで一番開発に苦労しました。そして新しく学んだこと、気づいたことも沢山ありましたので、備忘録を残していきます。


1.3Dモデルを撮影して、2D脱出ゲームに

まず1年前の段階では3D脱出ゲームとして、作成していましたが、これを2D脱出ゲームに作り変えました。
まず、これをご説明します。

(1)3D素材を配置して、UnityRecoderで撮影する

個人製作者の方が、Blenderで3D素材を撮影した画像を使って、3Dに見える2D脱出ゲームを作っていたので、それBlenderじゃなくてUnityでもいけるなと思い、放置していた脱出ゲームプロジェクトを起動してみました。

すると、放置前に以下のようなPrefabを作っていました。

このPrefabを、まず横に並べます。そして、
・子オブジェクトに絵や宝箱を配置する。
・床と壁のマテリアルを変える。
・ドアは必要に応じてSetActiveを切り替える。
すると以下のようなステージが出来ます。

ながーい画廊

そして、このプロジェクトを再生し、メインカメラのX座標をずらたり、オブジェクトの状態を変えたり(宝箱を開けたり、ドアを開閉させる)して、Recoder(旧・UnityRecoder)で撮影していきます。
Recoderの使い方は以下の記事を参考にしてください。

画像を荒くすることでドット絵風にもできます。

(2)フラグを利用して画像を切り替える

どの脱出ゲームの講座でもフラグについては説明されているので細かい説明はしませんが、今作は画像切り替えやアイテム取得を以下のように行っています。

  • 宝箱の宝箱をタップすると、宝箱に近づく

  • 近づいた状態で謎を解くと、宝箱が空き、「宝箱を開けた」というフラグがオンになる

  • 近づいた状態で帽子をタップすると、帽子を取得し、「帽子を取得した」というフラグがオンになる

  • 「宝箱を開けた」がオンで「帽子を取得した」がオフのときは上下段ともに2枚目の画像を表示、「帽子を取得した」フラグがオンになったら3枚目の画像を表示する。

上段2枚目はアイテムが小さければ不要

遠景の宝箱と帽子には、透過度0のImageが重なっており、それがButtonになっています。そのButtonをタップすることで
イベントが発火し、画像の切替等が起きるわけです。

脱出ゲームはフラグの管理がキモです。

4つの棚の段に決まったアイテムを置くという謎を作るときは、以下のように4つ全ての段に同じアイテムを置いた画像を撮りました。

全ての段に薔薇を設置
全ての段に置かれたバラを切り取ります。

そして、何も置かれていない棚の画像の1番上の段をタップしたら、1番上に置かれたバラの画像を重ねて表示し、「1番上の棚にバラが置かれた」フラグをオンにします。
他の段でも同じですが、これが4種のアイテム、4つの棚分あるので、とても面倒くさいです。

(3)部屋の移動

部屋の画像を等間隔に並べて、カメラの座標を切り替えて移動する方式で作っている教材が多いです(以下のUdemyの講座もそうです)。

今作では、1080×1920の画像を、横に2000、縦に5000ずつずらして作成しました。

親の顔より見た地平線

左右ボタンを押すとX座標が2000増減し、奥に進むとY座標が5000増加します(本当はもう少し複雑ですが)。

今作では攻略対象の7フロア＋タイムライン再生時のみに使用するフロアの8フロアを作成しました。

2.タイムラインでの非連続的なオブジェクト移動

今作でもタイムラインを使用していますが、ドアが開くだけのシンプルなモノです。

タイムライン中はUIを非表示にする

このタイムラインではカメラをタイムライン再生用の部屋の座標に移動させて、扉が開くように画像をを切り替えているのですが、カメラの座標を普通に移動させると、一番短い間隔でやっても、カメラが移動している様子が映ってしまいました。
しかし、以下の記事をとおりに設定すると、非連続的なオブジェクト移動が可能になりました。

日本語表示だと、キーを右クリック→両接線→定数です。

なお、自分はポリシーがあって、Unityは絶対日本語表示にしています。

3.記号やフォントのスプライトシートを作成する

今作のパスワードギミックなどではTextやTextMeshProではなく、スプライトシートを使用しています。数字やアルファベットのスプライトシートはCLIP STUDIO PAINTで自作しました。
128×128か256×256のマスに、文字を打ち込んだり、記号を描いたり、貼ったりして、Unityに取り込んで、スライスして使用します。

スプライトシートのスライスについては、以下の記事が詳しいです。

4.CLIP STUDIO PAINTの境界効果

UnityではなくCLIP STUDIO PAINTのことなんですが、境界効果という機能がとにかく便利です。すぐに縁取りができますし、2重3重も余裕です。なぜ今まで使ってなかったんだろう…。タイトルロゴも存分に縁どらせていただきました。

5.その他

3Dのステージを撮影するという方法ですが、CLIP STUDIO PAINTでもできそうでした。CLIP STUDIO PAINT専用の3D素材がかなりありそうなので、ちょっと面白そうです。
でもCLIP STUDIO PAINTから出せないし、有料ならやっぱりUnityかな…。fbxとかならいいのにね。

今回、1年間放っておいたプロジェクトは、3D撮影用のプロジェクトとなったわけですが、以下の記事の方法なら3Dモデルのインポートも早そうです。

スプライトフォントなんて方法もあるんですね。これもギミックに使えるのでしょうか？

次回へ続く。

この記事が気に入ったらサポートをしてみませんか？