マイクラのスライムチャンクファインダー（正式版）を作った

はじめに

少し前に似た記事を書いたのですが、そこでの主要な観点は、ランダムっぽいあのスライムチャンクを決定しているロジックの再現でした。

そしてその時に作ったのがこちら（α版）

我ながら何度見てもしょぼいですが、機能はこれで確認できました。

今回はその続きで、技術的にはほぼ最終版のつもりです。
今回作ったのがこちら（正式版）

え、大して変わらない？うーん、そうかも？
今回の主要な観点は、動かす部分です。まさにフロントエンド。そして↓こんな感じになりました。

ソースはこちら

技術概要

Reactでcanvasを使っています。
マウス操作でcanvasを動かすことは、こちらで試行した内容を書きました。主にドラッグについて。

今回は、そのとき試行したものから表示部を発展させていますが、根本的にはあまり変わらないので割愛します。

あれ、そしたらこの記事では何を説明するの？というあなた、お待ちください。

この１マス１マスについて、isSlimeChunk()と聞きまくっていくと、全部のマスを聞いたらパフォーマンス的にヤバイことにならないか？と思いますよね。なるんです。その対応について、ちょっと書こうと思います。

パフォーマンスチューニング

isSlilmeChunk()は、こんな関数です。

isSlimeChunk()

import { JavaRandom } from "./JavaRandom";

export function isSlimeChunk(seed: bigint, x: number, z: number): boolean {
    const randomSeed = BigInt(seed) +
                       BigInt(x * x * 0x4c1906) +
                       BigInt(x * 0x5ac0db) +
                       BigInt(z * z * 0x4307a7) +
                       BigInt(z * 0x5f24f) ^
                       BigInt("0x3ad8025f");
    const rnd = new JavaRandom(randomSeed);
    return rnd.nextInt(10) === 0;
}

重いのか軽いのかよくわからないですが、castを多用し、大きめの数値（少し大きめなメモリ領域）を使って計算してます。JavaRandom()の中はそうでもないですが。

そうして、一番縮小した場合は、こうなります。大体、1,000 x 1,000なので、チャンクサイズの16で割ると、62x62=3,844マス くらい。

3,844回回るループなんて大したことないと思うかもしれませんが、これをドラッグすると、ドラッグで動くたびに再描画が走ります。

下記はmousemoveイベントのハンドラ関数です。

handleMouseMove()

function handleMouseMove(event: MouseEvent){
    //console.log("mouseMove");
    //if (!isDragging) return;
    if (!canvas) return;

    // マウスの位置を取得（ブラウザの左上が原点）
    const mousePos: Point = {
        x: event.clientX,
        y: event.clientY
    };

    // 今のoriginBを取得
    const movingOriginB = getOriginBDragging(mousePos); 
    //if (!movingOriginB) return;

    // マウスの位置を、canvasの座標系に変換
    const rect = canvas.getBoundingClientRect();
    const canvasMousePos: Point = {
        x: mousePos.x - rect.left,
        y: mousePos.y - rect.top
    };

    // 描画
    draw(movingOriginB, canvasMousePos);
}

今のマウス位置やドラッグ操作に必要な簡単な計算をしたのちに、draw()するという処理です。draw()は言うまでもなく、マスの判断を含め、線１本１本、すべてを描画する処理です。

draw()の中で表示処理の前に、１マスごとに計算します。

// チャンクごとのisSlimeChunkの計算
for(let chunkX=chunkXMin; chunkX<=chunkXMax; chunkX++) {
    for(let chunkZ=chunkZMin; chunkZ<=chunkZMax; chunkZ++) {
        setIsSlimeChunkIfNotExists(chunkX, chunkZ);
    }
}

setIsSlimeChunkIfNotExists()の部分で、無邪気にresult = isSlimeChunk(chunkX, chunkZ)みたいに計算すると重い、という話です。

実際、カクカクしました。どういう操作をしていたか忘れるほどに。。ということで、毎回 isSlimeChunk()を呼び出していられないので、一度計算したら再利用する方法を検討しました。

１度計算したisSlimeChunk値を保存する変数の型はこちら。
x座標とz座標でアクセスしたかったので、Mapを使いました。マイナス方向にもプラス方向にもあり、大きな座標値へジャンプもできるので、単純な配列は難しいです。

// x,zの順に指定するマップ
type IsSlimeChunkMapZ = Map<number, boolean>;
type IsSlimeChunkMap = Map<number, IsSlimeChunkMapZ>;

IsSlimeChunkMapZは、チャンクのz座標をキーに、スライムチャンクか違うかのbooleanを持つMap。そのMapを、チャンクのx座標をキーに持つMap。Mapの入れ子です。

値をセットするsetIsSlimeChunkIfNotExists()では下記のようにしています。

// isSlimeChunkMapRefの操作
function ensureZMap(x: number): IsSlimeChunkMapZ {
    let zMap = isSlimeChunkMapRef.current.get(x);
    if (!zMap) {
        zMap = new Map();
        isSlimeChunkMapRef.current.set(x, zMap);
    }
    return zMap;
}
function setIsSlimeChunkIfNotExists(x: number, z: number) {
    const zMap = ensureZMap(x);
    if (!zMap.has(z)) {
        if (version === 0) {
            zMap.set(z, isSlimeChunk(seed, x, z));
        } else {
            zMap.set(z, isSlimeChunkBedrock(x, z));
        }
    }
}

setIsSlimeChunkIfNotExists()は、チャンクのx座標とz座標を渡し、その結果をisSlimeChunkMapRef.currentにセットします。

まずx座標に対応するz座標群を入れるMapを、あれば取得、なければ作ります。
z座標に対する値がなければ、isSlimeChunk()の結果をMapへ設定します。

isSlimeChunk()がMinecraftのJava版、isSlimeChunkBedrock()はBedrock版というもので計算方法が違うので２パターンあります。そこは大事な話ではないので割愛。

つまり言いたかったことは、このMapの入れ子を使って、計算済みなら値を取得し、まだなら計算するようにしてあります。
これによって、特に問題なく動くようになりました。

おわりに

急に終わり？という感じですが、パフォーマンスチューニング以外は、雑用的なものでこまごましているので書くほどじゃないです。

スライムチャンクファインダーというシステムとしては、技術的な構築はほぼ終了だと思っていますが、例えば、Java EditionとBedrock Edtion、どっちを選んだらいいの？とか、Seedって何？といった、使い方の部分の説明を加えようと思っています。

ではよいマイクラライフを。