零時の鐘が鳴るまでに、店を出ろ。ドット絵の脱出ゲーム「零時の時計店」を公開しました

こんにちは、北海道のWEB屋です。

新しいブラウザゲーム「零時の時計店」を公開しました。16ビット風のドット絵で描いた脱出ゲームです。英語のタイトルは「The Midnight Clockshop」。

スマホでもPCでも、ブラウザで登録なしに無料で遊べます。日本語と英語に対応しています。

零時の時計店で遊ぶ →

どんなゲームか

閉店後の時計店で居眠りしていた見習い職人が目を覚ますと、店は真っ暗。扉には閂（かんぬき）が下りています。カウンターには、師匠の書き置きが一枚。「零時までに店を出ろ」。

• 店の中を調べ、店じゅうの時計を「正しい時刻」に合わせていくと、仕掛けがカチリと動く
• 鍵や数字錠の代わりに、歯車、振り子、裏蓋、チャイムといった時計の部品が仕掛けになっている。時計店でしか成り立たない謎
• 奥の柱時計が、残り時間そのもの。11時15分から零時までの45分。11時30分と45分には鐘が1回鳴り、残り5分になると秒針の音が大きくなる
• 困ったら、カウンターの呼び鈴。鳩時計の鳩が「ポッポー」と出てきて、どこを見るか、何を使うか、答え、の3段階でヒントをくれる。ただし、使うたびに柱時計が3分進む
• クリアすると、ヒントの回数と残り時間で「一人前」「職人」「名匠」の称号がもらえる。名前を刻んで、クリア記録のランキングに残せる
• 時間切れでも罰はない。師匠の一言のあと、またやり直せる

最後には、あたたかい結末が待っています。中身は、遊んでのお楽しみに。

光と闇

店は最初、真っ暗です。作業台のランプをつけると、店の中が見えるようになります。これが、最初の操作の練習も兼ねています。

ランプの光は、中心から離れるほどなめらかに暗くなり、境目は昔のゲーム機のような網目（ディザ）でぼかしています。暗いところは夜の紺色に沈みます。色は、赤・緑・青をそれぞれ8段階から選んだ512色の中からしか使っていません。

最初は、光の段階の境目がくっきりした輪に見えたり、月の光が縞模様になったりしていました。画面写真を見ながら、何度か直しています。

12台の掛け時計

陳列壁には、12台の掛け時計が並んでいます。形も色も飾りも、全部違います。真鍮の丸型、青い文字盤、鳥の飾り、振り子付き、目覚まし、鳩時計。

修理伝票には「丸い真鍮の掛け時計」「鳥の飾りの掛け時計」のように、見て分かる言葉で時計の特徴が書いてあり、それを頼りに壁から探します。

針は、絵として描いておくのではなく、文字盤の真ん中から角度を計算して、1ドットずつ線を引いています。文字盤は、真ん中がちょうど1ドットになるように奇数の幅で描いてあるので、どの時刻でも針がきれいに見えます。

12台のうち1台だけ、秒針が逆に回っています。よく見ると気づける違和感が、最初の謎の入口です。

謎はすべて「データ」に書いてある

謎の中身は、プログラムではなく、1つのデータのファイルに書いてあります。「この持ち物を持ってここを押すと、この印が立ち、この文が出る」という形です。画面5つ、調べられる場所、持ち物9個、針を回せる文字盤4つ、金庫、書類3枚、ヒント10段階。文はすべて、日本語と英語の組で書いてあります。

謎を直したくなっても、プログラムは触らずにデータだけ直せばすみます。データを直したら、「最初から最後まで解けるか」と「答えのない謎や、使い道のない持ち物がないか」を自動で確かめるテストが走ります。脱出ゲームでいちばん怖いのは、どこかで詰んで先へ進めなくなることなので、ここは機械に毎回確かめてもらうことにしました。

ゲームエンジンを使わなかった

最初はゲームエンジン（Phaser 3）を使うつもりでしたが、最終的には使わず、画面の描画、入力、場面の切り替えを、自前の小さな仕組みで書きました。

脱出ゲームは「止まった絵を見て、押す」ゲームなので、物理演算や大量のキャラクターの管理はいりません。その代わりに、ドットを1つもにじませずに整数倍で拡大することと、画面の大きさに合わせて並べ方を変えることを、細かく自分で決めたかったからです。公開しているファイルは、全部で300KBほどです。

赤いルーペで「見えないもの」が見える

作業台のルーペに、ある場所から出てくる赤いガラス片を組み合わせると「赤いルーペ」になります。これで陳列壁をのぞくと、ふだんは見えない赤い印が文字盤に浮かびます。何が見えるかは、遊んで確かめてください。

音の主役は「時計の音」

音のファイルは1つもなく、すべてブラウザの中で、FM音源風の音を合成しています。オルゴールの音色と、低く重い鐘の音も作りました。

• 店の中には、何台もの時計が少しずつずれて刻む「チッ、タッ」が鳴り続けている
• 針を回すと、1目盛ごとに小さくカチリ。正しい時刻に合うと、チーン
• BGMは静かなオルゴールの曲。残り時間が減ると、少しずつテンポが上がる
• 鳩のヒントは「ポッポー」
• 最後の零時の鐘だけは、12回すべて鳴らす

ヒントが少なく、速いほど上位

クリア記録のランキングは、ヒントの回数が少ない順、同じなら速い順に並びます。点数は「(99 − ヒントの回数) × 10000 + (9999 − 秒数)」という形にしてあって、この1つの数字を大きい順に並べるだけで、その順位になります。

サーバーではゲームを動かし直せないので、送られてきた記録が「ありえるか」だけを確かめています。かかった時間が短すぎないか、零時より前に出られているか、称号がヒントの回数と残り時間に合っているか、遊び始めの証明を使い回していないか、などです。

スマホで遊ぶと、画面が小さかった

公開してすぐ、縦持ちのiPhoneで遊んでみると、絵が画面の真ん中に小さく出ていました。

ゲームの画面は横長の320×224ドットです。ドットをにじませないために拡大は必ず整数倍にしているのですが、縦持ちのiPhone（横幅1170ピクセル）だと、320ドットは3倍までしか入りません。しかも、絵の下の文の欄と持ち物の欄も同じ倍率なので、全部が小さく、上下に黒い余白が大きく残っていました。

1回目は、縦持ちのときだけ、文の欄と持ち物の欄を大きく描くようにしました。文字と持ち物は読みやすくなりましたが、肝心の絵はまだ3倍のままでした。

2回目は、絵の左右の端を少しだけ隠すことにしました。320ドットのうち、壁の飾りしかない左右14ドットずつを隠すと292ドットになり、これなら4倍で画面の幅にぴったり入ります。端にあったボタン（針を回すボタン、名前を入れる文字の表など）は内側に寄せ、押した場所の計算にも隠した分を足しました。iPhone、Android、小さいiPhoneの大きさで、ボタンが正しく押せることを確かめています。

あわせて、タイトル画面に「スマホを横にすると、画面が大きくなります」と出すようにしました。画面写真では収まっていても、手のひらの上での大きさは、実際に持って見ないと分からないと改めて思いました。

つまずいたこと

• 刻印の数字が入れ替わって見える：ある部品に刻まれた4けたの数字を小さな絵として描いていたら、形が崩れて、真ん中の2けたが入れ替わったように読めてしまった。謎の答えにかかわる数字なので致命的。ゲームの文字と同じ書体で描くように直した
• 柱時計に顔がない：奥の壁の大きな柱時計に、文字盤が描かれていなかった
• 赤いルーペで画面が真っ白：赤い印を目立たせようとして、明るくしすぎて絵が飛んでいた
• 文字盤のボタンの文字が隠れる：「時」「分」の文字がボタンの下に潜っていたので、ボタンの上に出した
• メニューを開いても時間が進む：一時停止の判定が、実際には使っていない窓の種類を見ていたため、メニューや遊び方を開いている間も柱時計が進んでいた
• 自動のテストが速すぎてランキングに弾かれる：通しのテストは1分もかからずにクリアしてしまうので、サーバーの「45秒より速いクリアはありえない」という確かめに引っかかった。テストのほうで時間を足して確かめている
• 「©」が書体にない：ドットの書体に「©」の字がなく、変な形で出ていたので「(C)」と書くことにした

数字で見る「零時の時計店」

これから

• 実際に遊んでもらって、45分という時間と謎の難しさがちょうどいいか確かめる（詰まる場所が1か所に偏っていないか）
• iPhoneの実機で、音のつり合いを確かめる
• 2部屋目（師匠の工房）を、続編として作るかどうか

ぜひ遊んでみてください。名匠の称号、待っています。

零時の時計店で遊ぶ →　ほかのゲームはゲームの一覧から。ブラウン管テレビの中で遊ぶPC版は、採掘ローグライク「GEMDARK」から始めた見た目です。

出典とクレジット

• 書体：k8x12L（8×12ドットの日本語フォント）。使う文字だけを取り出して、ゲームの中に組み込んでいる
• 作り：TypeScript と Vite（描画はブラウザの Canvas、音は Web Audio API）
• 絵・音：すべてプログラムで作成（画像のファイル、音のファイルなし）
• 開発：北海道のWEB屋