当ブログにお越しいただき ありがとうございます。ひさよろ です。
私は上記のような夢を持ち、会社員ながら完全未経験の『ゲーム制作』と『コーチング』を掛け合わせた活動を行っています。
3作目（2025年2作目）として、Coin Slot Adventureを公開しました。ここでは、どのように作ったのか、苦労や工夫したことを紹介いたします（こうやってぐブログに書くことで私自身の備忘録がわりにも）。
今回紹介するゲームは、「パチンコ風 複数の横並びに配置されたスロットを狙ってコインを弾き ゴールに進むロールプレイングゲーム」です。言葉で説明するのは難しいので、よろしければ↓から遊んでみてください。
webブラウザ用ですが、こんな感じでスマホでもプレイできます↓（皆さんもできるはず⁉）
なぜこの題材を選んだのか？
前作で昔駄菓子屋にあったコインゲームみたいなものを作りましたが、その発展形を考えていたときに思いついたのがこのゲームです。皆さんは↓のような機械をゲームセンターで見たことがありますか？
私は子どもの頃にこのゲームに夢中になりました。状況に応じてスロットの狙いを変える。運要素もありますが、練習すれば結構狙い通りにボールを運べる。通過したスロットによって画面中央の表示が変わる。このシステムを自分で作りたい！なんなら、画面中央の演出でRPG（私がつくりたいジャンル）にできないか！？
という感じで題材を決めました。
ゲームプロジェクトの構成
私はUnityを使ってゲームをつくっています。そのプロジェクトの構成を簡単に紹介します。
Sceneについて
まずはSceneです。
TitleScene
タイトル画面です。これは生成AI（Copilot）に描いてもらいました。どのようなプロンプトで指示したのか履歴がなくなってしまいましたが、「Coin Slot Adventureという名前のスマホゲームのタイトル画面を描いてください。イメージは………、」という感じだったかと。
最近のAIは本当にいい仕事をしてくれますね。でも、注意書きにもあるように完全に仮の（詐欺）画像なのです。ごめんなさい。
GameScene
ゲーム本編の画面です。全体像は↓な感じ。この程度のゲームでも私にとっては複雑になってしまいました。
スプライトについて
ゲームで使った絵です。自分で描いたもの（パワポで）もありますが、キャラクターなどはフリー素材を使わせていただきました。本当に感謝です。
スクリプトについて
ゲームを動かすプログラムです。今回は9個スクリプトを書きました。
- OpeningManager.cs
- Shooter.cs
- RandomTrigger.cs
- SlotManager.cs
- SlotDetector.cs
- MapController.cs
- BattleManager.cs
- ParameterManager.cs
これまでつくったゲームと比べ、コードそのものが難しくなり（ほとんど生成AIに教えてもらった）、スクリプト間の関連性も複雑になりました。おかげで頭の中がWWM（わけワカメ）に…。
なので、後で書きます構成図を作り、ひとつずつ理解をしながら完成させました。この作業はマジで時間がかかるので、やる価値あるのか？と思いながらやっていましたが、どうしても作りたくなる性分なんですよね。仕事の方でもそうです。他の人が見ても分かるように、というレベルまで図解を作りこもうとしてしまうのは、自分の大いなる強みであると解釈します。
苦労・工夫したこと
簡単なゲームですが、行き詰まって悩むことがたくさんありました。その苦労と工夫したことの一部を紹介します。解決した時は喜びもひとしおです。
- RPGのバトルシステムは『スタジオしまづ』さんのYoutubeを参考
- オブジェクト表示の重なりをSorting Layerで解決
- UIのサイズ・位置ズレを設定で解決
- 各スクリプトの関連付けは構想図を描くことで理解
RPGのバトルシステムは『スタジオしまづ』さんのYoutubeを参考
そもそも、RPGってどうやって作るの？という状態だったので、取っ掛かりが必要でした。その時にお世話になったのが、スタジオしまづ さんのYoutubeチャンネル。
『ドラクエ風シンプル2DRPGの作り方！』というシリーズを見て勉強しました↓
大変お世話になりました。
途中の回から、有料メンバーシップ（月額1,190円）に入らないと観れないので即入会！時間ほど貴重なものはないです。悩んでいる時間がもったいない。
オブジェクト表示の重なりをSorting Layerで解決
パチンコ台みたいな機械の中でコインが動いて、それをプレイヤーに見える部分もあれば見せない部分もある。ディスプレイはコインの後ろだけど、釘の頭はコインよりも手前。というようにオブジェクトの前後関係を設定するのに最初は「どうしたらいいんだ？」となりました。
テックアカデミーのレッスンでは、各オブジェクトの『Order in Layer』の数値を変えることで前後関係（0から数字が大きくなるほど手前）を表せることを学びましたが、それだと不十分。
そこで調べたところ、『Sorting Layer』なる設定があることを知りました。
（親）Sorting Layer → （子）Order in Layerのような関係で、初期はDefaultという親Layerが決まっているのですが、それよりも手前のLayerを作ってあげることで上手いことオブジェクトの前後関係を設定できました。
私の場合、Defaultが一番奥で、Layer1、2、3、4、5という名前と順番（数字が大きい方が手前）のLayerでオブジェクトをグループ分けして、その中でさらにオブジェクトの順番をOrder in Layerで決めたわけです。
オブジェクトの順番を示すレイヤー構成は↓のような感じ。
Sorting Layerの設定方法は↓です。こうやって書いておかないと自分が忘れてしまう。
UIのサイズ・位置ズレを設定で解決
このゲームはスマホで遊べるようにしたかったのですが、私の制作環境ではスマホ向けに公開することができません。というよりも実力的にまだ早い。
なので、PCで遊ぶことが前提のWebブラウザ向けにゲームをビルドして、スマホの縦長画面にうまいこと収まって遊べるようにできないかなぁと考えました。
その方法として、、、PC横長用に1980×1020の画面サイズにしたうえで、ゲームの中身自体はスマホ用の縦長にする。両脇が余ってしまうので背景用のオブジェクトで埋めておく。です。
これならいける！と思っていたのですが、いいところまで作って遊んでみたら、、、
あれ？ UIの位置がズレてる！！
これを解決するのに時間がかかりました。というか、しばらく放っておいて少しずつ可能性を書き出し、一つずつ調べて解決するに至りました。何をしたのかは↓にまとめます。
知っていれば何てことはない設定ですが、こういうことに つまづくと気持ちが下がってしまいますよね…。普段からUnity操作方法を多方面に学んでおくことが必要だなと思いました。スタジオしまづ さんのYoutubeは一通り観ておこう。
各スクリプトの関連付けは構想図を描くことで理解
このゲームを今の状態まで作りこむにあたり後半で苦労したのは、前半に作ったスクリプトの内容を理解することでした。ほとんどが生成AIに教えてもらったコードなので意味を何となくでしか理解しておらず、スクリプト間の関連付け（別スクリプトの関数実行など）がWWM（わけワカメ）に…。
なので↓のようにスクリプト内でやっていることと、他のスクリプトとの関連付けをExcelでまとめるようにしました。めちゃめちゃ時間がかかりますが、最初からやっておけばよかったです。
解像度の都合で見えないと思うので↓も貼っておきます。
いつかアップデートしたいこと
今のところは基本システムがだいたいできていればOK、として制作は区切りをつけましたが、いつかエンディングまで作りたいとも思っています。基本システムの完成度は70%くらい？なので、まずはそこを年内に完成させようかなぁ（そんな暇あるか？）。とにかく、2025年に簡単なゲームを5個つくるノルマ（あと３つ）を達成してからです。
今の時点で、基本システムで追加したいのは以下。
- 道具を使えるようにする（マップ時と戦闘時の両方で）
- 戦闘以外のイベントをつくる（道具の入手など）
- 違う種類のマップへの切り替え
- テキストを左から右へ流れるように表示させる
- 攻撃を与える、受けるときにメインディスプレイの絵を揺らす
- BGM、SEの追加
というわけで
2025年の2作目をテスト版状態ですが公開しました！制作をしていたのが3月で、本業の有給休暇ストックを消化するために会社を休んでゲーム制作に集中できたのが良かったです。しかしながら、４月からの新年度で忙しくなるのが見えてきたので（この記事を書いている４月は、ほぼ制作できていません）、この先どうなることやら…。
というわけで最後にいつもの、
みんなだんばれ！！
頑なに張るの「がんばる」ではなく、
弾むように張るの「だんばる」で、
一緒に人生を楽しみませんか？
最後までご覧になってくださったあなた、ぜひぜひX（旧Twitter）で交流しましょう！ゲーム制作をしていない方もウェルカムです。人生や働くことを楽しむために、日々くだらないことをつぶやいています。
以上です。
コメント