闇の中で、宝石だけが光る。ドット絵の採掘ローグライク「GEMDARK」を公開しました

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

新しいブラウザゲーム「GEMDARK（ジェムダーク）」を公開しました。ランプの灯りだけを頼りに坑道へ潜り、闇の中で光る宝石を掘り出す、ドット絵の採掘ローグライクです。

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

GEMDARKで遊ぶ →

どんなゲームか

坑道は真っ暗です。見えるのは、手元のランプが照らすまわりだけ。壁を掘り進めて、原石を探します。

• ランプの燃料が切れると、強制的に地上へ戻され、掘った原石を半分落としてしまう。燃料が残っているうちに、縄ばしごで帰るかどうかが悩みどころ
• 原石は重い。持てる量には限りがあり、体力も減っていく
• ていねいに掘ると、原石の品質が上がる。急ぐか、ていねいに掘るか
• 天井から落石も来る。ぱらぱらと砂がこぼれてきたら、離れたほうがいい

深い層ほど、ランプ油の小瓶が見つかりやすくなります。坑道のどこかには、古い坑夫の小屋もあって、遠くに灯りが見えたら、そこでランタンから燃料を満タンにしてもらえます。

持ち帰った宝石は、地上の村で売ります。村には宝石商、鍛冶屋、道具屋、酒場、坑道の入口があり、稼ぐほどにぎやかになっていきます。酒場では仲間を集められ、6人の中から最大2人を連れて潜れます。

メガドライブの色だけで、1ドットずつ

絵は、メガドライブの色だけで描いています。赤・緑・青をそれぞれ8段階から選ぶ、全部で512色の中の色です。段階の値は、実機の出力に近い0、52、87、116、144、172、206、255。プログラムの中では、色を「730」（赤7・緑3・青0）のような3けたで書いています。

主人公以外の絵は、画像のファイルではなく、プログラムで1ドットずつ描いて、起動したときに画像にしています。

地形は、斜め上から見下ろす視点です。壁の南側が通路なら、壁の下に崖の面を描いて奥行きを出します。壁の上は石が敷き詰まった塊で、石の形はセルのような模様を作る計算（ボロノイノイズ）で決め、左上から光が当たるように明暗をつけています。

坑道は5つの層に分かれていて、深くなるほど色と模様が変わります。粘土層には木の根、砂岩層には地層の縞、玄武岩層には柱のような割れ目、水晶洞には結晶、溶岩層には光る筋。

1フロア（768×544ドット）を描くのに、約45ミリ秒。掘ったときは、まわりのマスだけを描き直しています。

ランプの光と闇

このゲームでいちばん大事にしたのが、光です。

マスごとの明るさをなめらかにつなぎ、市松模様の間引き（ディザ）で、「よく見える」「暖かい色の影」「紺色の記憶」「真っ暗」の4段階に分けています。一度見た場所は、紺色で薄く残ります。そして、一度見つけた宝石は、闇の中でもうっすら自分の色で光り続ける。キャッチコピーの「闇の中で、宝石だけが光る」は、ここから来ています。

音も、ブラウザの中で

音のファイルは1つもありません。BGMも効果音も、ブラウザの音の機能で、メガドライブのFM音源風の音や、矩形波、ノイズをその場で作っています。

• BGM：タイトル、坑道の探検の曲（深い層ほど調が変わり、少しずつ速くなる）、村の曲、帰ってきたときのファンファーレ、強制帰還の短い曲
• 効果音：ツルハシ、岩が崩れる音、原石を掘り出す音、宝石のきらめき、落石、燃料の警告など18種類

曲は「コード進行と伴奏の型とメロディ」を書いて組み立てています。音割れや音量のつり合いは、耳で聞くだけでなく、一度ファイルに書き出して数値で測って確かめました。

どの画面でも、ドットを崩さない

ドット絵は、中途半端な倍率で拡大するとにじみます。そこで、拡大は必ず整数倍にして、そのかわりゲームの内側の解像度のほうを画面に合わせて伸び縮みさせています。スマホの縦なら、2倍で195×422ドット、といった具合です。村の建物の並べ方も4通り用意して、画面に収まるものを選んでいます。

スマホでは、画面の左下に十字キーを出しています。この十字キーには、いちばん手こずりました。その話は、あとで書きます。

昭和のカラーテレビの中で遊ぶ

PC版は、画面いっぱいに置いた昭和の家具調カラーテレビの中でゲームが動きます。木目の箱、枕のような形のブラウン管とクロームの縁、1〜12の数字のついたチャンネルダイヤル、布張りのスピーカー、うさぎの耳のようなアンテナ、そして70年代の壁紙。

ブラウン管らしさも足しています。走査線はゲームの1ドットの行にぴったり合わせ、蛍光体の赤・緑・青の縦じま、ざらつき、ゆっくり流れる明るい帯、電源を入れたときに横一本の線から映像が広がる演出。

つまみは本当に動きます。VOLUMEで音の入り切り、CHANNELでブラウン管らしさの強さ、電源ボタンで全画面に切り替わります。これらはすべてHTMLとCSSで作っていて、ゲームの絵はぼかしていません。

実は、最初に作ったテレビはきれいすぎて、今どきの薄型テレビのようでした。レトロ感がまったくない。木目、クローム、枕形の画面、数字のダイヤル、壁紙まで描き込んで、ようやく昭和のテレビになりました。

十字キーとの格闘

スマホの十字キーは、付けた直後に実機で遊んでみて、おかしなところがいくつも見つかりました。

• 上を押しているのに、下を押したことになることがある
• 急に暴走する
• 押しっぱなしのまま、止まらなくなる

原因1：すき間を押すと「画面のタップ」になっていた

このゲームは、画面のどこかをタップすると、主人公から見てその方向へ歩きます。十字キーは4つのキーを別々に置いていたので、キーとキーのすき間やふちを押すと、十字キーではなく「画面のタップ」として扱われていました。

十字キーは、主人公より左下にあります。だから、上のキーを押したつもりでも、主人公から見れば「下」や「左」のタップになっていたんです。

そこで、十字キー全体と、そのまわりの少しの余白を、ひとつの押せる場所にまとめました。向きは「十字キーの真ん中から見て、どちら側を押したか」で決めます。真ん中だけは、押しても動かない場所にしました。

原因2：指を離したことが届かないことがあった

押しっぱなしで歩き続けられるようにしていましたが、指を十字キーの外へすべらせて離したときや、タッチが途中で切れたときに、「指を離した」という知らせが届かないことがありました。すると、歩き続けてしまう。これが暴走と押しっぱなしの正体でした。

いまは、どこで指を離しても止まります。タッチが途中で切れたとき、別のアプリに切り替えたとき、画面が裏へ回ったときも止まります。さらに、1歩進むたびに「まだ指が触れているか」を確かめるので、知らせが届かなくても次の1歩で止まります。

通しで、実際の画面で確かめる

直したあとは、iPhoneと同じ大きさのタッチ画面をパソコンの中に用意し、指の操作をまねて、最初の画面から結果画面、ランキングの登録まで通しで遊んで確かめました。確かめたのは45項目です。

• 真ん中、すき間、角、外側のふちを押したとき、正しい向きに動くか
• 長押ししてから、キーの上で離す、画面の上まで指をすべらせて離す、タッチが途中で切れる、別の画面に切り替える。どの場合でも止まるか
• 指をすべらせると、向きが変わるか
• 店の窓を開いたまま画面を回転させても、エラーが出ないか（ここで実際にエラーが1つ見つかった）

メガドライブの十字キーを、そのままに

動きが直ったところで、見た目も作り直しました。最初の十字キーは、ゲームのメッセージ窓と同じ紺色の四角いボタンを4つ並べたものでした。これを、メガドライブのコントローラーの十字キーのように描き直しています。黒い樹脂の丸いくぼみの中に丸い台座があり、そこに十字が浮き出している形です。腕の先には三角が彫り込まれ、真ん中には小さなくぼみがあります。

あの十字キーは1枚の板なので、押すと板ごと傾きます。そこで、押した向きの腕は沈んで暗く、反対側の腕は持ち上がって明るくなるようにし、十字全体も押した向きへ1ドットずれるようにしました。光らせなくても、押している感じが出ます。

最後に、ひと回り小さく（2割ほど）しました。それでも、1つのキーは指で押しやすい大きさ（44 CSS px）を保っています。

同じシードなら、同じ坑道

ゲームの結果に関わる乱数は、すべてシード（種）つきにしています。同じシードで同じ操作をすれば、必ず同じ結果になります。1手ごとの判定は画面と切り離した関数にまとめていて、自動のテストも82件書きました。

ランキングもあります

このサイトのほかのゲームと同じしくみのランキングがあり、1回の探検で持ち帰った宝石の価値で順位がつきます。探検を始めるときにサーバーから「開始の証明」を受け取り、帰ってきたら記録と一緒に送ります。サーバーでは、潜ったフロアで出る宝石の最高額を超えていないか、手数に対して時間が短すぎないか、証明の使い回しではないかを確かめています。

つまずいたこと

• ボタンが押せない：画面に固定したボタンが、カメラが動くと押せなくなった。入れ物に付けた「画面に固定」の設定が、中身の「押せる範囲」には伝わっていなかった
• 店を閉じたら、また開く：「とじる」を押した指を離した瞬間、その下にある建物が反応して店が開き直していた。押し始めと離したところが同じ建物のときだけ開くようにした
• 店の窓の上に建物が出る：建物の重なりの順を足元の高さで決めていたので、画面の下のほうの建物が窓より手前に来ていた
• フォントだけ403：サーバーに上げたフォントのファイルに、読む権限がなかった
• 1280×720の画面だけドットが細かい：テレビの画面が小さく、拡大が1倍に落ちていた。テレビを少し大きくして2倍にした
• ダイヤルが楕円：操作盤を縦に並べる指定のせいで、丸いダイヤルが縦につぶれていた
• 題名の候補が、もうあった：最初の候補「Glimmerdeep」は、同じ名前のボードゲームがあった。それで「GEMDARK」に

数字で見る

これから

• iPhone、Android、iPadの実機でもっと遊んでもらい、操作の感じと音のつり合いを直す
• 燃料、落石の起こりやすさ、小瓶の出やすさ、強化と仲間の費用などの数字を調整する
• 持ち帰った原石を磨いて、大きな絵で眺められる「研磨」と「図鑑」を足す

いちばん確かめたいのは、「ランプで照らして宝石を見つけるのが楽しいか」です。遊んでみて、感想をいただけたらうれしいです。

ランキングで待っています。

GEMDARKで遊ぶ →　ほかのゲームはゲームの一覧から。

出典とクレジット

• ゲームの土台：Phaser 3（MIT License）
• 宝石を掘り出したときの演出：pixelfx（MIT License）。色をメガドライブの色に丸め直して使用
• 見出しの書体：DotGothic16（SIL Open Font License）
• 本文の書体：k8x12（8×12ドットの日本語フォント）
• 主人公のスプライト：北海道のWEB屋
• 開発：北海道のWEB屋

この記事は2026年11月10日に、スマホの十字キーを作り直したことに合わせて書き足しました。