Unity で 2D パズルゲーム作成を始めてみた
僕は元々パズルゲームが好きだ。パズドラのような、パズル外のキャラクター要素なんかが色々出てくるようなゲームには興味がないんだけど、テトリスとかナンプレとか、「2048」とか「ツムツム」とかみたいな、純粋にパズルゲーム部分だけで遊べるようなゲームが好きである。
最近は「Number Tiles」というマージパズルゲームをちょっとプレイしている。コレ。↓
iOS App Store には似て非なるゲームが乱立していて、広告表示されないタイプのヤツを見つけてプレイしているのだが、もっと柔軟に難易度調整したいなーと思ったりする。
他にも「Merge Puzzle」とか呼ばれるゲームもやってた。こんな感じのヤツ。↓
Number Tiles よりももっと柔軟にブロック移動が出来るのだが、コレもプレイしていたアプリは広告表示がうるさすぎて、すぐにやる気がなくなった。
そうこうしている内に、
- 自分の思いどおりに難易度調整ができて、
- 広告表示が一切ない
ゲームアプリを作りたい思いが強くなってきた。
かねてよりゲームづくりはやってみたいと思っていたので、この機会に Unity を始めてみた。
ライツアウトを作ってみた
Unity は GUI 操作の他、C# でプログラミングすることになる。画面の雰囲気は、Xcode で iOS アプリを作る時のように、GUI 上のパーツをドラッグしてクラスのプロパティに割り当てたりして処理を書いていく感じだ。
自分は今までゲームプログラミングというモノをしたことがなく、「RPG ツクール」みたいなモノも触ったことがない。Web アプリを作ってきた感覚だけでは概念的に全然通用しないことが多くて、また C# も Unity のライブラリも知らない状態だったので、まずは、「Number Tiles」や「Merge Puzzle」をいきなり作ろうとはせず、Unity に慣れるための習作を作っていくことにした。
Unity 自体は、以前 UnityHub をインストールしていたので、UnityHub から 2020.3.19f1 をインストールして環境を準備した。
ちょうど良い日本語のチュートリアルがあったので、まずは以下のページを元に写経して、「Lights Out (ライツアウト)」と呼ばれるゲームを作ってみた。
写経したコードは GitHub にアップした。コレでうまく共有できているのか分からないけど…。ｗ
Unity 用の .gitignore は以下をそのまま利用。
Unity はクロスプラットフォームでビルドでき、WebGL でビルドすれば Web ページ上で遊べるので、今回は WebGL でビルドして GitHub Pages に公開することにした。実際に作成したゲームは以下で遊んでいただける。
↑ ライツアウトというのは、電気を点灯・消灯させると、隣り合う電気が反転するので、全部のライトを消灯させようーというゲームだ。スーファミの「スーパーマリオ RPG」にも、「カルディ」という敵が出題する「マジカルスイッチ」というゲームとして登場していたので、触ってみれば「あーコレか」と思う人は多いはずだ。
ライトをクリックして全て消灯できれば「Clear!」と表示される。下部の「New Game」ボタンを押せばリセットできる。
C# 実装しようとすると、自分の環境では Visual Studio ではなく VSCode が勝手に開いてしまった。設定で変更できるっぽいけど、VSCode でやってみた。もう少し Unity 向けに自動 Import とかサジェストとかが柔軟に効いたら嬉しいな。良いやり方があるんだろうか。
VSCode でファイルを保存した後、Unity のウィンドウに戻ると構文チェックをしてくれて、エラーがあると Unity 画面の下部に表示された。C# 特有の「ケース」に慣れていなくて、大文字小文字を間違えることが多かったので、このエラーメッセージは助かった。
Unity で作ったゲームを WebGL ビルドで GitHub Pages に公開する時のハマりポイント
Unity で作ったゲームを WebGL ビルドして、GitHub Pages に公開するところで、少しハマったポイントがあったので紹介する。
プロジェクト名が全角文字を含む場合、WebGLでビルドしようとすると次のようなエラーが表示されビルド出来ません。
↑ コレは大丈夫だった。自分はディレクトリ名を小文字のみハイフンケースでしか命名しないので。
Platform項目のWebGLを選択して、Switch Platformボタンをクリックします。
Switch Platform はプロジェクト作成直後にやった。
ビルド前にPlayer Settings… をクリック
「Player Settings」内で設定したのは以下。
- Company Name : とりあえず自分のサイトのドメインにした
- Product Name : ブラウザに表示されるゲーム名。そのままにしてある
- Default Canvas Width・Default Canvas Height : ブラウザ表示するゲーム画面のサイズ
それから Publish Settings (公開設定) → Decompression Fallback (解凍フォールバック) にチェックを付けること。
このあと「Build And Run」して、sirv-cli なんかでローカルサーバを立てて動作確認する限りではちゃんと動作するのだが、GitHub Pages にデプロイすると、なぜかロード画面から先に進まず、
Uncaught ReferenceError: unityFramework is not defined
というエラーがコンソールに表示されていた。コレを解消するために、「Decompression Fallback」にチェックを入れる必要があった。
Build And Runをクリックする
「Build And Run」ボタンをクリックすると、ビルド資産の格納先を選択することになる。格納先ディレクトリは、Unity プロジェクト内にすると上手くビルドできなかったので、別のディレクトリを選択すること。自分は C:\Neos21\practice-unity\ みたいなディレクトリパスに出力できた (Documents フォルダ配下じゃないとダメ、みたいな文献もあったけど特に大丈夫だった)。
GitHub Pages への公開は gh-pages ブランチを手動で作成し、ビルドしたフォルダを丸ごとコミット・Push した。
- 参考 : 【Unity】WebGLをGithub pagesでネットに公開する - はなちるのマイノート
- 参考 : UnityプロジェクトをGitHubで管理するためのシンプルな初期設定 - Qiita
難しいなゲームプログラミング…
GTA シリーズの Mod を扱ったりはしたことがあるし、ゲームプログラミングへの興味はあったので、「フレーム」とか「コリジョン」とかいう概念感覚は何となく分かるけど、それを自分で実装するのは中々難しいな。「自オブジェクトからレーザーを発信して、衝突したオブジェクトを捕まえて処理」なんていう発想、普通に Web アプリを実装してきた感覚では思い付かなかった。何となく「2次元配列で隣り合う Index を…」みたいなことかと考えていたので、パラダイムシフトが必要だ。
ちょっと見栄えのするゲームを作ろうと思うとグラフィックの準備も必要になってくるので、考えることが多いね。とても労力が多いけど、動いた時の嬉しさは、Flash アニメに ActionScript を組み込んでいた時のような懐かしさがあった。ボタンを押すと何かが動く、それだけでこんなに楽しいとは。ｗ
目標とする「オレオレ Number Tiles」作りに到達できるのはまだまだ先になりそうだが、Unity でのゲーム作りはなかなか面白い。もう少し頑張ってみようと思う。
