01. 着想の原点:2次元平面における定石パターンの限界

2014年に登場した『2048』って、ルールが極めてシンプルで誰でもハマる神ゲーですよね。ただ、ある程度やり込んだ人ならわかると思いますが、最終的には特定の角に最大数字を押し込む「角固定」の作業ゲーに行き着くわけです。この定石が身につくと、あとはルーチンの反復になりがちで、パズルとしてのワクワク感が薄れてしまう。

そこで思いついたのが、「X軸・Y軸の平面に、Z軸(奥行き)を足した立体にしたらどうなる?」という発想でした。上下左右の4方向から、奥・手前を加えた6方向へ。自由度が増えることで角固定の単調さが崩れ、外からは見えない中心マスや背面のブロックをどう管理するかという、新しいパズルが生まれるんじゃないかと思ったわけです。

3次元立体パズル2048×3Dの全体ビュー
▲ 3次元直交座標系(XYZ軸)で構成された立方体パズル盤面。各層の重なりにより奥行きが発生する。

02. 空間次元の設計:4×4×4から3×3×3への移行と計算量

最初の試作では、平面版の4×4をそのまま3Dにして「4×4×4」の立方体で作ってみました。ところが、これが見事に大失敗でした。4×4×4って全部で64マスもあるわけですよ。1手で湧いてくる新規タイルは1マスずつなのに、空間が広大すぎて、適当にガチャガチャ動かしているだけでも勝手に合体が連鎖して全然ゲームオーバーになりません。(シンプルに終わらんやん…と)。

4×4×4は64マスあり、3×3×3の27マスよりも空きに余裕があります。どちらが遊びやすいかは操作や目標で変わるため、現行のCLASSICとSPEEDRUNでは両方を選べるようにしています。

3×3×3は狭い盤面で空きと合体経路を管理する選択肢です。HARDは3×3×3固定、PARTYは4×4×4固定。プレイ時間や到達に必要な手数を一律には決められません。2048は1024+1024で作れますが、出現タイルには2だけでなく4などもあり、必要な入力回数は配置で変わります。

03. 操作系の統合:2次元タッチ面から3次元ベクトルへの投影

開発で一番頭を抱えたのが操作性でした。PCならキーボード(左右キー・A/D、W/S、奥手前の上下キー)で6方向を押し分ければ済みますが、スマホは平らなガラス板なわけです。画面上のスワイプは上下左右の2次元移動量(dx, dy)しか取れません。

この問題に対し、画面下のD-Padボタンで直接指定できるようにするだけでなく、「カメラの視点角度に合わせて、画面の右・上を3D空間の軸へ動的にマッピングする」仕組みを実装しました。カメラが斜めを向いていようが裏側を向いていようが、画面上のスワイプ方向と直交6軸の内積をリアルタイムに計算し、一番平行に近い軸へタイルを滑らせる設計です。

さらに、キューブを触ればスワイプ、背景を触ればカメラ回転という直感的なハイブリッド操作にまとめることで、スマホの画面1枚でストレスなく遊べるようにしました。

04. 描画負荷の抑制:Three.jsによるモバイル描画の軽量化

ブラウザ上でアプリのインストール不要でサクッと動かすため、描画基盤にはThree.js(WebGL)を採用しました。ただ、ここで問題になったのがスマホの発熱とバッテリー消費です。3Dグラフィックスを毎秒60fpsで無条件に回し続けると、スマホがカイロ化してしまうわけです。

現行実装は毎フレーム描画を更新しています。旧記事の「動きが止まったら描画も停止する」という説明は現在のコードと一致しないため訂正しました。消費電力の改善率や発熱を抑えたという数値はここでは保証できません。描画ループの確認記事に、処理と検証方法をまとめています。

05. まとめと今後のアップデート方針

「2048×3D」は、ただルールを3次元にしただけではなく、空間サイズの調整やスマホでの操作感、パフォーマンスの最適化を地道に重ねて今の形になりました。

今後も、スコア推移の可視化や実績機能など、遊んでいて楽しくなる仕掛けをぼちぼち追加していく予定です。ぜひブラウザからサクッと遊んで、立体の奥行きを体験してみてください。