katatedake

開発ブログ

ブラウザだけで3Dの箱庭を動かすしくみ

公開日：　文：katatedake

ポケット箱庭は、アプリストアからインストールしなくても、ブラウザでアドレスを開くだけで3Dの箱庭が動きます。この記事では、それを支えているしくみを、なるべくかみくだいて紹介します。

使っている技術

箱庭は「13万マスの箱」

箱庭は、横64×奥行き64×高さ32、全部で131,072マスの箱です。1マスは1バイトで、その中に「どの素材か」と「どの形か（ブロック・ハーフ・階段の向き）」を詰めています。ブロックを置く・壊すとは、このどれかのマスの値を書き換えることです。

描くときは、すべてのマスの6面をそのまま描くと重くなりすぎるので、空気や透けるブロックと接している面だけを集めて形にしています。箱庭を小さなかたまりに分けて、ブロックを置いたかたまりだけを作り直すので、大きな作品でも1個置くたびに全体を計算し直すことはありません。

保存は端末の中だけ

作品は、ブラウザの保存領域（localStorage）に自動で保存しています。サーバーには送らないので、アカウントもログインもいりません。そのぶん、ブラウザのデータが消えると作品も消えてしまうので、ファイルとして書き出す「バックアップ」も用意しています（「作品の保存とバックアップ」）。

ブロックの手持ちとレベルは、保存データを書き換えて増やす手軽な改ざんを防ぐため、読みにくくして署名をつけて保存しています。いっぽうで作品そのものにはこのしるしをつけていません。もし手持ちやレベルの保存が壊れても、作品だけは必ず読めるようにするためです。

作品をリンクにする

13万マスの箱庭も、実際にはほとんどが空気と地面です。作品を送るときは、マスの並びを圧縮（deflate）してから、URLに使える文字に変えています。最初は同じ値の連続を数える単純な方法でしたが、10月22日から圧縮の方法を変えて、リンクの長さがおよそ3分の1になりました。

それでも大きな作品は数千文字になり、チャットアプリなどで途中で切れてしまうことがありました。そこで今は、作品のデータだけをサーバーに預けて、8文字ほどの短いリンクを作っています。写真は預けません。

回る動画の作り方

回る動画は、ブラウザの録画機能（MediaRecorder）で、画面の描画をそのまま録画しています。録画している約7秒の間、カメラを少しずつ回しながら、2秒で夕日、4.4秒で夜に切り替えています。SNSにそのまま載せやすい MP4 を優先し、対応していないブラウザでは WebM で書き出します。

電波がなくても開ける

一度開いたことがあれば、アプリの本体を端末に控えておき、電波のない場所でも開けるようにしています（Service Worker）。新しい版が出ているときは、ネットにつながったときに入れかわります。

空の飾りは「別のレイヤー」

昼の雲・夕日のカラス・夜の星は、ブロックとは別のレイヤーに描いています。こうすると、水面への映り込みや、タップしたときのブロックの当たり判定に入らず、作品のデータにも影響しません。いつ開いても同じ空になるよう、決まった並びの乱数で配置しています。

おわりに

「インストールなしで、片手で、すぐ遊べる」を守りながら、できることを少しずつ増やしています。しくみについて気になることがあれば、お問い合わせからどうぞ。

ポケット箱庭で遊ぶ無料・登録不要・スマホのブラウザで遊べます