【第1回】超入門!Unityでパズルゲームを作ろう!「ゲームの設計編」

第1回ゲームの設計編
ゆくすぃ

ごきげんよう、Budding Lab.編集部のゆくすぃです!
「Sea of Thieves」という海賊ゲームをご存知ですか?幽霊船団との激闘を観戦したのですが、まさに手に汗握る展開でした!

ゲームが大好きな皆さんなら、一度は「自分でゲームを作ってみたい!」と、思ったことがあるのではないでしょうか?

本連載では、ゲーム開発初心者のゆくすぃが、基礎的なスクリプトだけを使って、超入門・パズルゲームの作り方を解説します!
この連載をすべて読んでいただくと、下図のようなパズルゲームが出来上がります!

サンプルゲーム:Drag and Snap

▶ サンプルゲームをプレイする

プログラミングの専門知識がなくたって、画像や音楽作成アプリが使えなくたって、案外、ゲームって作れるものです。興味が湧いたなら、ぜひ挑戦してみてください!

2D脱出ゲームの作り方も解説しています。ご興味があれば、ぜひご覧ください!

目次

まずは、ゲーム開発環境を揃える

ゆくすぃのゲーム開発環境は以下の通りです。

ゆくすぃのゲーム開発環境

インターネット接続できるパソコンとゲーム開発ツールだけ、というシンプルさ。
Unityには4つのプランが用意されていますが、個人開発者なら無料プランで十分です。

  • 年間の収益が20万米ドル未満の場合、Unity Personal(無料プラン)を利用できます(2026年1月現在)。

ゲーム内で使用する画像やオーディオ素材は、Unity Asset Store からダウンロードできるので、画像・音楽作成アプリは必須ではありません。無料素材もあるので、安心してください!

早速、ゲームの概要を考える

今回、制作するゲームの概要は以下の通りです。

ゲーム概要
  • パズルゲーム
  • ブラウザゲーム(Unity Web)
  • ゲーム画面サイズ:1080px * 1920px

今回は、ブラウザで遊べる診断ゲームを作ります。
ゲーム画面サイズは、モバイルブラウザ上でプレイされることを考慮して縦長にしています。

Unity6 の Unity Web から、モバイル端末にも正式対応しています。
※参考URL:モバイルも正式対応!Unity 6 の Web プラットフォームを徹底解説!

但し、古いモバイル端末では動作が難しい場合があるようです。
2026年1月現在、正式対応しているモバイル端末は以下の通り。
※参考URL:Web browser compatibility

  • iOS Safari 15 and newer(iOS)
  • Chrome 58 and newer(Android)
ゆくすぃ

今回は Unity(6000.2.7f2)で開発したので、モバイル端末にも正式対応しています!

ざっくりと、ゲーム全体の流れを考える

パズルゲームといえば「ピースを正しい場所に嵌めこむ」これに付きます。

ゲーム全体の流れ
  • タイトル画面で「Game Start」をクリック(タップ)するとゲームを開始する。
  • 画面内をクリック(タップ)して、ピースを5つ入手する。
  • 入手したピースをドラッグ操作して、それぞれを正しい場所(4ヶ所)にドロップする。
    ※ただし、5つのピースのうち1つはダミー。
  • 4つすべてのピースが正しい場所に置かれたら、ゲームクリア。

必要な仕掛けを考える

実際のプレイを想像しながら、どんな仕掛けが必要なのかを考えてみます。

必要な仕掛け
  • タイトル画面で「Game Start」をクリック(タップ)すると、ゲーム画面に移動する。
  • ゲーム画面上をタップすると、任意の場所からピースを入手する。
  • ピースをドラッグ操作して、置きたい場所にドロップする。
  • すべてのピースが正しい場所に置かれたら、クリア画面に移動する。
  • クリア画面で「Play Again」をクリック(タップ)すると、ゲーム画面に移動する。
  • SEを鳴らす、BGMを流す。

必要な素材を考える

プレイ画面を想像しながら、どんな素材が必要なのかを考えてみます。

パズルゲーム全体の画面イメージ

パズルゲーム全体の画面イメージ
※タイトル画面とクリア画面は、テキストとボタンを配置するだけなので、画像の準備は不要。
必要な素材

画像(ゲーム画面のみ)

  • 背景 * 1枚
  • ピース(クリックしてピース入手する用)* 2枚 ※これについては、後ほど説明します。
  • ピース(ドラッグ操作用)* 5枚
  • インベントリ * 1枚

それ以外

  • BGM(mp3)、効果音(mp3)

冒頭でお伝えしたように、ゲーム内で使用する画像やオーディオ素材は、Unity Asset Store からダウンロードできるので安心してください!

画像の準備

今回のゲームは・・・

  1. ゲーム画面内をクリック(タップ)して、隠されたピース(5枚)を入手する。
  2. 入手したピース(5枚)の中から、正しい4枚を選んで正しい位置に置く。

・・・という内容です。

まずは、ドラッグ操作用のピース(5枚)と、ピースをドロップすべき場所(4ヶ所)を明示した背景(1枚)を準備します。

また、入手するピース(5枚)のうち、2枚を最初から見えるように画面に配置したかったので、下図のようにクリック用のピース画像(2枚)を準備しました。

さらに、インベントリの背景(1枚)も準備しました。
※ベタ塗りで構わなければ、背景画像を準備する必要はありません。

画像データは「png形式」や「jpeg形式」で準備すると良いでしょう。

準備する画像のイメージ

ゲーム画面の背景、インベントリの背景、ピース、画面上に見せておくピース2枚

実際に準備した画像

準備した画像たち

完成画像の準備に手間取りそうなら、一旦、ダミー画像でゲーム制作を進めて、後から差し替えることも可能です。具体的な差し替え方法については、以下記事を参考にしてください。

BGM・SE(効果音)の準備

次に、BGMとSE(効果音)を準備します。

今回、準備するBGMとSE(効果音)
  • ゲームプレイ中のBGM
  • 「Game Start」・「Play Again」ボタンを押した音
  • アイテムを入手した音
  • ゲームをクリアした音

BGMの代わりに環境音を使っても良い雰囲気を出せますし、なしでも構いません。SEは、プレイヤーが行ったアクションに応答するものなので、あった方が親切でしょう。

今回は、DOVA-SYNDROME効果音ラボ などの素材サイトからダウンロードしました。素材をダウンロードする際は、必ず利用規約を読んで、使用上の注意を確認してください

ゆくすぃ

画像、BGM・SEの準備ができました!
次回からは、遂にUnityを触っていきます!

まとめ

今回の記事では、ゲームの設計について解説しました。
ゆくすぃは「5つのピースから正しい4つのピースを選ぶ(=ダミーを見破る)」という、ささやかな謎解き要素を取り入れてみましたが、たとえば、制限時間を設けたり、障害物を配置したりするのも刺激があって良いと思います。もちろん、追加要素なしのシンプルなパズルゲームにも、じっくり考える楽しさがありますね!

次回は、【第2回】超入門!Unityでパズルゲームを作ろう!「画面の作成編」です。

以上、最後まで読んでいただき有難うございました!

よかったらシェアしてね!
  • URLをコピーしました!
目次