16進タイルをスクロールする方法は？

これに対する答えを見つけることができないようです。ヘックスタイルのマップがあります。スクロールを実装したい。

現在のコード：

drawTilemap = function() {
    actualX = Math.floor(viewportX / hexWidth);
    actualY = Math.floor(viewportY / hexHeight);
    offsetX = -(viewportX - (actualX * hexWidth));
    offsetY = -(viewportY - (actualY * hexHeight));

    for(i = 0; i < (10); i++)
    {
        for(j = 0; j < 10; j++)
        {
            if(i % 2 == 0) {
                x = (hexOffsetX * i) + offsetX;
                y = j * sourceHeight;
            } else {
                x = (hexOffsetX * i) + offsetX;
                y = hexOffsetY + (j * sourceHeight);
            }

            var tileselected = mapone[actualX + i][j];

            drawTile(x, y, tileselected);
        }
    }
}

これまでに作成したコードは、Xの動きのみを処理します。それはまだそれがすべき方法で動作しません。下のjsfiddle.netで私の例を見ると、右に移動したときに次の16進タイルに到達すると、X位置と実行された計算に問題があることがわかります。

不足しているのは単純な数学のようです。残念ながら、まだスクロールを含む例を見つけることができませんでした。

http://jsfiddle.net/hd87E/1/

水平スクロールバーがないことを確認してから、キーボードの->右矢印を使用して右に移動してみてください。最初のタイルの最後に到達すると、問題が発生します。

恐ろしいコードの謝罪、私は学んでいます！

乾杯

16進数かどうかにかかわらず、位置変数（x、y）をゲームの世界に向けたままにし、必要な場合にのみ画面座標との間で変換することをお勧めします。画面から世界に変換するときは、（cameraX、cameraY）を追加し、（tileStepX、tileStepY）で除算します。ワールドからスクリーンに変換するときは、（tileStepX、tileStepY）を掛け、次に（cameraX、cameraY）を引きます。columnOffsetで処理するヘクスには若干の複雑さがあることに注意してください。

これは、世界座標でx、y、firstX、firstYを使用したコードのより単純なバージョンです。

drawTilemap = function() {
    // Convert top left of the screen (0, 0) to world coordinates
    firstX = Math.floor(cameraX / 45);
    firstY = Math.floor(cameraY / 50);

    for( x = firstX; x < firstX + 10; x++ )  // world coordinates
    {
        var columnOffset = oddRowOffset * (x % 2);

        for( y = firstY; y < firstY + 10; y++ )  // world coordinates
        {
            // Make sure this world coordinate is part of the map
            if ( 0 <= y && y < mapone.length && 0 <= x && x < mapone[y].length )
            {
                // Convert world coordinates to screen coordinates
                drawTile((x * tileStepX) - cameraX,
                         (y * tileStepY + columnOffset) - cameraY,
                         mapone[y][x]);
            }
        }
    }
}

答えが見つかりました！ここを表示：http : //jsfiddle.net/ck6Vq/1/embedded/result/

誰かが以下のコードよりも気の利いた何かを思いつくことができるかどうかわかりませんか？

drawTilemap = function() {
    firstX = Math.floor(cameraX / 45);
    offsetX = cameraX % 45;
    if(firstX > 0) {
        firstX = firstX - 1;
        offsetX = offsetX + 45;
    }

    console.log(offsetX);

    firstY = Math.floor(cameraY / 50);
    offsetY = cameraY % 50;

    for(x = 0; x < 10; x++)
    {
        var rowOffset = 0;
        var columnOffset = 0;

        if((firstX + x) % 2 == 1)
        {
            columnOffset = oddRowOffset;
        }

        for(y = 0; y < 10; y++)
        {
            drawTile((x * tileStepX) - offsetX,
                     (y * tileStepY) - offsetY + columnOffset,
                     mapone[y+firstY][x+firstX]);
        }
    }
}