見出し画像

unity1week　「つたえる」　パズルで愛を伝えよう　開発記録

四次元ベクトル

2023/3/20～26のUnity 1週間ゲームジャム（unity1week、お題：「つたえる」）に参加した四次元ベクトルです。

ゲームはこちらからプレイできます。

前回の制作記録・振り返り記事はこちら

「パズルで愛を伝えよう」について

マウスクリックや方向キーでパネルを操作し、パネル上の斜め45°の白い線をつなげて（2つのハートを結んで）愛を伝えるスライドパズル（15パズル）だ！

ゲーム画面（右下の数字はアニメーション中なので裏返っている）

制限時間以内に解いた問題数を競うモードと、指定の問題数を全部解いた時間を競うモードがあり、それぞれ2種類の難易度があります。

モード選択画面。ランキングの表示も可能

ランキングや画像付きツイート機能もあります。

今回のゲームは、次の日程で開発しました。

開発記録

1日目（3/20 月）

この1週間の平日はゲーム作りのため午後に有給休暇をもらいました。

今回のテーマが「つたえる」ということで、「つたえる」ものとは何か考えました。

愛、熱、声、言葉、……

今回も気軽に遊べるシンプルなパズルゲームを作ろうと思っていたので、「つたえる」ためには「つなぐ」→線をつなぐパズルを朝に思いつきました。
線をつなぐ方法として、15パズル（スライドパズル）の要領でパネルを動かし、盤面の端にある2つの点をパネル上の斜め45°の線で結ぶものをまず思いつき、それをそのまま採用しました。
線でつないで具体的に何を伝えるのか考え、「愛」ではどうかな、と思い、それならキャラクターのイラストや声を使えて楽しい感じにできて面白そう、ということで、愛を伝えるゲームにしました。

Unityの2DURPプロジェクトを作成しました。
ゲームの基本システムは、ネット上の汎用アセットを以前自分なりに改造したものをインポートして作りました。
線が描かれたパネルを盤面上に、ハートを盤面外側に生成する仕組みを作りました。

パネルとハートを生成したところ

これらの画像は、Adobe Illustratorで作成しました。

2日目（3/21 火）

この日からずっと深夜に目が覚めてそこから寝付くことができなくなってしまいました。

盤面外側の2つのハートの位置を決め、その間を線で結ぶ処理を考えました。
斜め45°の線で結ぶ関係上絶対に結べない位置関係（外周に沿って2つのハートの間をたどったときのマス数が奇数）や、互いに近すぎる位置にハートを生成しないようにし、迷路を作る要領でハートの間の線を生成するシステムを作成しました。

盤面ができ上がったら、ハート間の経路上にないマス（パネル）をランダムに1つ抜き（空白マスにし）、ハートを結ぶ線が切れるまでシャッフルを行うようにしました。このとき、線が切れたらすぐにシャッフルをやめてしまうと1手詰の問題になってしまうので、1手詰の問題が生成されにくいように、複数回シャッフルしてから線が切れているかの判定を行い、線がつながっているならまた複数回シャッフルするようにしました。

線がつながっているかの判定、及び後述の最短経路の探索は、以下のツイートの動画を参考にしました。

方向キーやマウスによる操作を実装し、線がつながったら、探索した最短経路の一つを赤で示して正解判定を行うようにしました。
正解したら、赤い線（最短経路）に沿ってハートを動かすようにしました。

ハートを線で結ぶだけだと寂しいので、ハートのそばにキャラクター（フリー素材）を配置しました。

3日目（3/22 水）

制限時間（2分）モード、問題数（15問）モードをそれぞれ実装しました。

2種類の難易度（初級・上級）を定め、上級には移動不能な氷パネルを生成するようにしました。
氷パネルは盤面の分断ができてシャッフルや操作の妨げにならないように、複数個生成する場合は縦・横・斜めに隣接させないようにしました。
氷パネルは、見た目が氷らしく、かつ通常のピンクのパネルとすぐに見分けがつき、さらに白い線が見にくくならないよう色やデザインを考えるのがやや大変でした。

左上にあるのが氷パネル

UIのボタンなどの画像は、以前私がAdobe Illustratorで作りためていたものを使用しました。
背景は、フリー素材を用いました。

その後、BGM、効果音、声を入れました。

背景を追加、一部フォントを変更

制限時間や問題数の数字は、値が変わってもガクガクしないように、TextMesh Pro用のフォントアセットのパラメーターを編集することで等幅にしました。

4日目（3/23 木）

タイトルシーンでのモード選択、ランキングを実装しました。
ランキングは、naichilabさんのアセットを私が以前改造した（TextMesh Proへの対応、現在順位の表示、スコアを送信せずランキングの表示のみを行うタイトル画面用のメソッドの追加など）ものを使用しました。

背景は1枚の画像だとちょっと寂しかったので、白いハートのパーティクルを飛ばすようにしました。
画像付きツイートも実装しました。

5日目（3/24 金）

アニメーションや遊び方説明の追加など一部調整を加えました。

WebGLビルドをしてunityroomへ投稿しました。

シーンチェンジをかっこよくするためにShader Graphも使いましたが、どうやってもうまくいかないので不採用となりました。

6日目（3/25 土）

UIやゲーム内容を微調整し、操作性を上げるためにマウス操作でパネルを複数枚同時に動かすことができるようにしました。

7日目（3/26 日）

最終調整（バグ修正、UI調整など）を行いました。

制作中の気づき

UnityやC#の機能

  • foreach文で扱うコレクション（ListやDictionaryなど）は、foreachの内部で要素の追加・削除などを行えない

  • Shader Graphのマテリアルを用いたUIはScreen Space - Overlay（最前面）で表示するキャンバスにおいて透明が反映されない

本ゲームの内容

  • スライドパズルはマウスのほうが直感的に操作できるので、方向キー操作は不要？

没要素

今回実装しようと思ってできなかったものは以下の通りです。

  • 複数組のハート：実装やプレイが困難

  • 経路上必須のパネル（このパネル（線）を通って2つのハートを結ばなければいけない）：実装しにくい

  • 問題正解時の男の声：いい感じの素材が見つからなかった

  • BGMのきれいなループ：MP3→WAVファイルに変換したのに、なぜ？（元ファイルは問題ない）

  • かっこいいシーンチェンジ：上記の通り、Shader Graphのマテリアルは一部条件において透明が反映されない

  • スマホ対応：評価期間中にやろうと思ったが、画面の縦横比を固定する方法がよく分からない（縦横比固定の方法は分かったが、ゲームの基本システムを変えなければいけないので難しい。次回以降はやりたい）。またスマホでプレイしたときの挙動が変で、無理に修正すると不具合を起こして本末転倒になりそうなので、とりあえず却下

最後に

今回で9連続無遅刻参加となりました。
今回も有給休暇をうまく利用できました。
ゲーム自体は5日で完成・投稿できたので、その後は機能の改善やバグ修正、UIなどの微調整に使うことができました（評価期間中も微調整を入れています）。

今回の、自分として初めての試みは、声素材を入れたことでした。これがあると楽しい雰囲気になり、かわいらしいBGMと相まってサウンドや雰囲気の評価が上がりそうです。

期間中深夜に目が覚めるようになって睡眠時間が半減してしまったのはこのイベントのせいでしょうか？（制作期間が終わった2023/3/30現在も元の睡眠時間に戻っていない）

unityroomでのプレイ・評価をよろしくお願いします！

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