パズルゲーム制作記

■はじめに
はじプロで映像作品をメインに作っている“うろしど”と申します。

5月に行われたはじプロユーザーコンテスト「きゃべつ杯feat.トロ」にパズルアクションゲーム『Subject #373』を出品しました。

https://twitter.com/uroshido/status/1655024302650163206?t=DUHbsTyXgqVhzHd8w1rz4A&s=19

本記事はその『Subject #373』のメイキングとなります。はじプロならではの技術的な内容は薄めとなっておりますこと、ご了承下さい。

■はじまり
次のコンテストのお題は「パズル」らしい。そんな噂がチラホラ聞こえてきた頃、我が家には親戚の子がお泊りに来ており、子供たちによるマリオカート対戦が熱く繰り広げられていた。

https://twitter.com/uroshido/status/1636998645504679936?t=PxtMuZ_5IcHQ-sCf_ZaGvQ&s=19

Switchを奪われた私は手持ち無沙汰にレゴでテトリスミノを作り始めてしまう。

https://twitter.com/uroshido/status/1637011885899014145?t=Ux-dFodw5lzIkfkD-sGxyw&s=19

テトリスと言っても「横一列揃ったら消える」とかの処理は自分の技術力では無理っぽい。テトリスミノを使ったもっと単純な別の遊びを考案する必要がありました。

とりあえずテトリスミノをカチャカチャ組み合わせて、色んなモノの形を再現できないか検証してみる。
![Screenshot_20230703-080043~2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033060/8dd5de5c-3492-e3ab-6136-743a9a88ee6d.png)
親戚の子の「この人何やってるんだろう」という目は今でも忘れられない。


■自分探し
コンテストのお題が正式に「パズル」と発表されたので、自分の中のパズルゲームを今一度振り返ってみることにしました。

https://twitter.com/uroshido/status/1637984606573166592?t=tuZrbdYolZkr9PyaCkg_ag&s=19

私はパズルが得意な方…ではありません。頭の回転が鈍く、特に長考型パズルは高確率で挫折しています。どちらかというとパズルそのものより、ストーリーや雰囲気の魅力に惹かれたものをプレイする傾向があります。アクション要素があると気分転換になってなお良し。
『Portal2』『LIMBO』あたりを今回のパズルゲーム作りの指針としました。

■迷路
レゴでカチャカチャすること数日、テトリスミノを迷路の壁にする案を思いつきました。
![DSC_1272.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033060/b081d523-42ad-3f1f-ea32-f453a554066f.jpeg)
ミノ壁を９０度ずつ回転させることで道を切り開いていくイメージ。
早速はじプロでステージを組んでみたのですが、そのイメージとはちょっと異なることが分かりました。
Aボタンでミノ壁が一斉に回転する様を見ると「道を切り開く」という前向きな感じより「巻き込まれ事故が多発しそう…」というおっかなさが勝ってました。現場猫のゲームかな？

■フラつきと連結千切れ
各ミノ壁は 立方体を複数個連結して作られているのですが、回転軸がミノの中心からズレていると回転後にフラついたり連結が千切れたりしました。

https://twitter.com/uroshido/status/1639046321586970624?t=osjfGP4-uVqAnRnLJxWndg&s=19

今回の場合 フラつきは誤接触を引き起こし、連結千切れはステージの崩壊を意味します。
これらの問題を解決するためには“ワープ連結”を使わざるを得ない。ワープ連結とは、あるモノを他のモノの位置に常時ワープさせ続けることで擬似的に連結しているように見せる技です。これにより多連結構造体もキビキビ回せるようになりました。
ただ、ワープ連結を使うことで新たに"ワープノードンの使用数制限"の問題が発生しました。ワープノードンの使用はA〜Hまでのグループに限られるため、ミノ壁を最大でも８個しか置けないことになります。ワープは他でも使うだろうから多分もっと減る。
ステージ後半は画面いっぱいにミノ壁を敷き詰めた巨大迷路とかを妄想してたのですが、早々に断念することになりました。(後のテストプレイの苦労を考えると巨大迷路にならなくて本当に良かった…)

■回転の自動化
よく考えてから、プレイヤーのタイミングでミノ壁を回転させて、着実に進む。そういう方向性の遊びもアリなんですが、悲しいかな私はパズルゲームにアクション要素を求めてしまう男。カウントダウン後にミノ壁が左右いずれかの方向に自動回転するように改変しました。
「3、2、1、ガチャン！3、2、1、ガチャン！…」
完全に殺人マシーンと化したミノ壁。逃げ惑うプレイヤーキャラ。私好みのハラハラなアクション要素が追加されました。満足。

■音楽との連動
「3、2、1、ガチャン！3、2、1、ガチャン！…」
…お気付きだろうか。４拍子のリズムが刻まれていることにッ…！
この思いがけない幸運を逃す手はなく、ピアノやオケヒットを重ねてミニマルなBGMに仕立てました。
音の増減で展開をつくるスタイルは好みが分かれるところですが、省ノードンの観点ではループミュージックは実にはじプロ向きと言えます。
後半はそれまでの曲展開にプラスしてパッド(曲のバックで鳴る持続音)を重ねることで雰囲気を盛り上げてます。ビブラートをかけたり、奇数回と偶数回で旋律のタイミングを変えたり、フェードアウトで音を抜いたりと色々手間をかけてるのですが、そもそもが死にやすいゲームなので、そこまで聴けた人は少ないかもしれません。

ミノ壁の回転とBGMを連動させた効果は強力で、ゲームの全ての要素がミノ壁の回転に集束してるかのように錯覚するほど作品にまとまりが生まれました。またミノ壁の存在感、回転の重みが増したことでプレイヤーの緊張感も高められたのではないかと思います。
開発後半はノードン不足でまず削られがちなBGMですが、今回ばかりはそうはいかんぞ。

https://twitter.com/uroshido/status/1647345904637321217?t=f_Nu66huU6I3qL2hFTmP1g&s=19

ちなみにタイトルBGMはピアノの旋律を引き継ぎ、物悲しく静かな印象にアレンジ。アタックを弱めたピアノの音色が欲しかったので音量制御で僅かにフェードインさせています。

■立ち往生問題
ミノ壁はステージ毎にランダムに配置されます。配置プログラムは、東北きりたんのランダムノードン解説で紹介されていた「重複しないランダム数値」の仕組みを使わせてもらってます。

https://youtu.be/SynFPIgfndo

回転方向についてもランダムに決めているのですが、右→左→右→左→右…と行ったり来たりを繰り返すケースがそこそこの頻度で発生してしまい、ミノ壁の状態によっては閉じ込められ前にも後ろにも進めない状況を生んでしまいます。プレイ体験が損なわれる上、プログラムの稚拙さも浮き彫りになってしまいます。どうしよう。
良い解決策は浮かびませんが、きっと未来の自分が何とかしてくれるはず…

■やたら死ぬ問題
自分で自動回転にしといて何ですが、なんか超難しい。ミノ壁にすぐ押し潰される。身内からも言われる。

https://twitter.com/uroshido/status/1642384059178565632?t=d8mK-WyAaW8qa7YLax6FXQ&s=19

理由をあれこれ考え、１つの仮説を導き出しました。
ミノ壁の回転方向を予告する矢印はプレイヤーが見やすいように各ミノ壁の回転軸に表示していたのですが、そのことがプレイヤーの視線を最寄のミノ壁に固定させることになり、その先のミノ壁の状態まで意識がいかない＝先の安全地帯を予測できないからではないか…？と考えました。
(↓うろ覚えで当時の画面を再現)
![2023070709082900-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033060/91e12cc4-a8c8-003b-48fd-e0f0dfc470f2.jpeg)
そこで矢印の表示位置を画面上部に移動。表示サイズをメチャ大きくして、左右に移動アピールさせることで、プレイヤーの視界外でも矢印の状態を感じ取れるようにしました。
これで プレイヤーの意識が画面全体に広がり、幾らか死ににくくなったのではないかと思います。多分。

https://twitter.com/uroshido/status/1650963916233789440?t=r5q1kIuZPO8cRwJ7BqaK3A&s=19

■すぐクリアできちゃう問題
これもランダムによる弊害ですが、ミノ壁の状態によっては障害物無く一直線に進めてしまう状況が発生してしまいます。
プログラムの稚拙さ浮き彫りどうしようとなる一方、プレイ体験はというと中々悪くない。いや、むしろ良い。
束の間に現れる直線通路を急いで駆け抜ける気持ち良さは、テトリス棒を隙間に突き刺す快感に似ている…とは言い過ぎですが、これは長所と捉えてそのまま残すことにしました。

■責任の押し付け
ランダムが引き起こすイタズラ問題について、ナイスな閃きが舞い降りました。プログラムから解決するのではなく、設定側で対応してしまおう！という諦めにも似た解決法です。

こう考えました。
悪意を持ったキャラが裏でミノ壁を操作しているという設定にすれば、ミノ壁がおかしな挙動をしようとも、それは「そのキャラがプレイヤーを殺すため必死にやっていることだから仕方ない」となり、稚拙なプログラムをカモフラージュできるのでは…！？

Q.閉じ込められて先に進めません。バグですか？
A.いいえ、仕様です。回転壁のオペレーターがあなたを足止めしようとしているだけです。

Q.一直線にクリアできちゃったんですけど…これってバグですよね？
A.勿論いいえ。彼も人間です。焦って回転壁の操作を誤ったのでしょう。仕様です。

いける…いけるぞ……
ゲームキャラに責任を押し付けることに大変心を傷めつつ、大喜びでダークな設定と意味深なセリフを用意。ゲームに組み込んでみたところ、ストーリーや雰囲気で引っ張る、私の理想のパズルゲームにかなり近づきました。やった！第三部完！

■変化に乏しい問題
「ランダム回転するミノ壁の安全地帯を見極めながら、左から右へと移動するゲーム」
パズルゲームとしての骨組みはできたのですが、毎ステージ繰り返すにはちょっと淡白です。ゲームプレイに変化をつけるため以下の要素を追加しました。

【鍵を入手してドアロックを解除する要素を追加】
適度に寄り道してもらうためのギミック。鍵は通路の中央の列以外の場所にランダムで出現するようにしています。これは鍵がミノ壁の回転軸の位置に出現して詰んでしまうことを防ぐための大雑把な措置です。

【最初の２ステージはミノ壁の数を半分に】
家族にテストプレイしてもらったところ、ステージ1すらクリアしてもらえなかったのでチュートリアルとして簡単なステージを用意。ストーリー導入はセリフが多いため、それを読ませるという意味でも必要でした。
なおチュートリアルを実装後にまた家族にテストプレイしてもらったところステージ3で投げ出されました。

【後半ステージで追跡型爆弾を登場させる】
殺伐としたストーリー設定から生まれたギミック。プレイヤーを追跡してくる動きには脅威を感じますが、結局はミノ壁と同様BGMと連動させているため、ほどよい難度上昇に感じられるかと思います。BGMと連動する上で４拍目まで爆発しないマをどう埋めようかという問題を、効果音『ピピピッ…』が"プレイヤーを焦らせる"というオマケつきで解決してくれました。

【最終ステージは爆弾の機動力を2倍に】
最後にちょっとした驚きが欲しくて「ミノ壁の機動力2倍」か「爆弾の機動力2倍」かを検討していましたが、前者を試したところ鬼難度になってしまったので後者を採用しました。これでも人によっては難し過ぎるかもしれませんが、限られた空間での爆弾とのチェイスは熱いハラハラ感があって結構気に入ってます。

■テストプレイ
ミノ壁の配置で理不尽な詰みパターンが発生しないかが気がかりでテストプレイをひたすら繰り返す日々。
設計時に潰しておくべき課題を先送りにした末路。それは地獄。
死ぬほどテストプレイした結論は
「二手先を読んで行動を選択すれば詰みは回避できそう」でした。
予測行動はパズル的思考の範疇ということにしてテストプレイをクローズしました。
お疲れさっしたー！(ドサァッ…)

■想像させるセリフ
ことばつきノードンの最大使用数8つ、64文字以内という厳しい制限の中、どうやってゲーム説明とストーリーを語るのか―。
今回は 意味深なセリフ回しでプレイヤーの想像力を刺激し、欠落した情報を脳内補完してもらう手法が最大の効果を得られると判断しました。
抵抗なく想像へ導くため一字一句に気をつかいました。

①『被験者ナンバー○○○　入室してください』
![2023070708464700-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033060/2a351c82-553a-e844-d961-4f762f915109.jpeg)
数字部分「373」「374」をテクスチャで用意することでオープニングとエンディングで共用しています。最後に最初の場面に戻る演出は ことばつきノードンの削減をきっかけとして生まれたものです。

②『その回転壁は100%安全です
どうぞ安心してお進みください』
![2023070708465600-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033060/030a47d0-0273-2cf6-551e-1880098321a8.jpeg)
今回の設定的に、ナビゲーションを鵜呑みにすると死ぬ…つまり死なせることで回転壁の危険性を理解してもらう"悪意のあるチュートリアル"を試してみました。
決して気持ちの良い体験ではないので不安は残りましたが、それよりも声の主が悪意を持っていることを伝えられる方を優先しました。救済措置として胡散臭さを出そうと「100％」と言わせています。

③『チッ　賢いやつだな』
![2023070708524700-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033060/3fc0b623-285e-c374-015b-88e4865f837e.jpeg)
それまでの丁寧な口調から一変させることで、プレイヤーへの悪意を決定的なものにするとともに、一応はプレイヤーを褒めてもいます。


④『さあて どっちに回そうかね
左か？ いや やっぱり右かぁ？』
![2023070708472500-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033060/ca6c162c-bbd2-f00f-7f1b-79f44f82dfea.jpeg)
この男がミノ壁を操作しているらしいことを伝えるためのセリフ。これを言わせたいがために本作は現在のストーリー設定になったと言えますが、ちょっと説明臭すぎたかも。
ゲームキャラへの責任の押し付けがうまく機能したかは分かりませんが、そこから生まれたストーリー設定は好評だったのでヨシッ!


⑤『爆発は好きか？』
![2023070708492000-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033060/1f7f2281-3953-9724-9e8e-8d0189cddc5a.jpeg)
新要素として登場する追跡型爆弾の説明セリフ。殺意のある人間にこう言わせれば、何かしらの爆発物でプレイヤーを殺そうとしていることが伝わると考えました。
情報としては「爆発する何かが近づいてくる」だけで十分で、それ以上は伝えません。人は得体の知れないものに対して勝手に恐怖を増幅してくれます。

⑥『くそっ くそっ！　くるな！
嫌だ嫌だ嫌だ　死にたくない』
![2023070708510400-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033060/e7bf6481-5830-eb64-33d9-771a2760d925.jpeg)
今まで余裕ぶっこいてた敵が焦りだす姿(?)を見せて、プレイヤーにゲームの進行を実感してもらうとともに「結末を見たい」と思わせるためのセリフ。「死にたくない」という言葉から、相手の置かれている状況を想像してもらう狙いもあります。

⑦『おしまいだ　おめで……』
![2023070708515800-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033060/63a0373b-402a-1eaf-a54b-93943022f74e.jpeg)
ゲームの“おしまい”と、この男の人生の“おしまい”の2つの意味を込めています。「おめでとう」が途切れているのは、この男の身に“何か”が起こったのでしょう…

⑧《オペレーター カキカエ_#024カラ#373へ:カンリョウ/　#024シンゾクへ ソウキン:カンリョウ/　スタンバイ》
![2023070708520300-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033060/9de34574-1265-1063-0ab0-5e9bc0e34c95.jpeg)
文字色を変えてカタカナにしている理由は 声の主が変ったことを伝えるためと、機械語感を出して世界観への想像が膨らみやすくするためです。
被験者024がどうなったかは明言せず、あくまで「死にたくない」「書き換え」「親族へ送金」というワードの組み合わせから想像してもらうようにしています。

被験者が次の被験者を襲うシステムは、以前体験したお化け屋敷の展示イベントが元ネタです。

https://www.miraikan.jst.go.jp/exhibitions/spexhibition/hauntedhouse.html

先に入った入場者が、後から来た入場者をモニター越しに脅かせるエリアがあり「なんて経済的なシステムなんだ」と感心したのを思い出し 今回のストーリー設定に取り入れました。
ことばつきノードンの使用制限で実現できませんでしたが、構想段階ではオペレーター業務内容が読めるとおもしろいな〜と考えてました。「フロア清掃について」とか「禁止事項」とか…

■テクスチャ
![2023070708464100-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033060/18ed341f-a62c-e88a-d33d-c5e39d4dbf95.jpeg)
プレイヤーキャラクターは「ダイバー」をベースとして、頭部を宇宙服のヘルメットのようなデザインにアレンジしました。
座っている人を複数人描くのは骨が折れるので、“コピペ＋薄暗くもう一人”という表現にしています。

パズルゲームの画面は、思考の邪魔にならないように情報を整理/抑える必要があるという気付きがありました。白い床の上のカラフルなミノ壁に集中させるため、ステージの壁は機械っぽいパターン柄に留めて、色数も黒と赤に限定しています。
![2023070708493600-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033060/db1ed4ae-722f-99bd-8a42-2ad8ba1cd450.jpeg)
床はミノ壁の回転タイミングに合わせて赤に切り替えています。これは死を連想させるための施策ですが、音楽との連動感を視覚的にも感じられる効果としても機能しました。
どうでもいい話として、床のタイルのラインが赤いのは「掃除しきれなかった血の汚れが溝に残ってるんだろうな…」というアブナイ妄想によるものです。

ミノ壁には当初6色分のテクスチャを使っていましたが、モノノードン側で色分け設定すればテクスチャは黒１色だけで良いと気付きました。発想の転換は大事ですね！

ドアロック解除のアイテムをどんなビジュアルにするか最後まで悩みました。カードキーでは効果が伝わり難く、ボタンやスイッチでは取得後もその場に残ってしまうためゲームプレイのノイズになってしまう…。
結局は分かり易さ優先で鍵のデザインとなりました。深く考えてはいけない。

ドアロックエリアでは疑似半透明処理を用いて赤いホログラム的な表現を試しています。「閉」という漢字の成り立ちを調べていたら、門構えに十字架というスタイルを発見したので、ホログラム部分のデザインに取り入れています。
![Screenshot_20230625-202201~2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033060/ab562a29-ffdb-3fe9-3f4f-f0fcffa90b7c.png)
画面左上に被験者情報が表示されているのは、この画面が被験者#024が見ているモニター画面だからです。書かれている内容は超テキトーです。(CLASSの「hzPR」は「はじプロ」の意)

操作説明UIはストーリーの没入感を損ねないよう最低限の表示としました。操作が移動とAボタンだけというシンプルな作りなので、実際に触って覚えろという強気な作りでも許されるかと。省エネだし最高です。
![2023070708521100-1DC473CEFCA17AB42EE8681FFF996D70.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3033060/d87af142-7a33-d531-de73-b439273d7ef0.jpeg)
ミノ壁の回転方向を決めるだけの簡単なお仕事、なオペレーターデスク。モニターには今までのゲーム画面を模した映像が映されています。ミノ壁が操作されていたことを分かりやすく伝えるため 操作デバイスにもデカい回転矢印を置きましたが、冷静に見たらウケる。


■予告映像
twitterで作品発表前にいつもやってる予告活動ですが、今回ははじプロで主観視点バージョンを作ってみました。

https://twitter.com/uroshido/status/1654770571283140608?t=vkrTlwvTKmvPzEn01matlw&s=19

回転壁の激しい動作音、回転壁の隙間からチラ見えする血溜まりから、本作が”ダークな死にゲー”であることを伝えています。タイトルは黒文字にして回転壁に溶け込ませておいて、カメラが近づくとライトで浮かび上がるようにしています。

■おわりに
『Subject #373』はユーザーコンテスト「きゃべつ杯feat.トロ」で１位を獲得することができました。
ボロクソからの逆転劇に我が目を疑いました。人生わからないものですね… いや、分かったことが１つあります。自分の考えたパズルゲームの仕組みを把握しないまま作り始めると死ぬ。

『Subject #373』は多くの人に遊んでいただき、たくさんクリア報告をいただきました。ノーミスクリアまでしてくれる方もいて感無量です。twitterのはじプログラマーの皆さん、ありがとうございます。

また 人生で初めて英語ローカライズにも挑戦しました。うまく翻訳できたかは非常に怪しいですが、海外の動画配信者に遊んでいただき 最高のリアクションを拝むことができました。

https://www.youtube.com/live/371Wu2L5LyY?feature=share

ゲーム作品の公開は、映像作品の公開時とはまた違う ゲームクリエイターしか味わえないドキドキと喜びを味わえました。
この作品を作る機会をくれた『はじプロ』と きゃべトロ杯に感謝しつつ、このメイキングを終わろうと思います。最後まで読んでいただきありがとうございました！