Làm thế nào để cuộn gạch hex?

Tôi dường như không thể tìm thấy câu trả lời cho câu hỏi này. Tôi có một bản đồ gạch hex. Tôi muốn thực hiện cuộn.

Mã hiện tại:

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);
        }
    }
}

Mã tôi đã viết cho đến nay chỉ xử lý chuyển động X. Nó không hoạt động theo cách nó nên làm. Nếu bạn nhìn vào ví dụ của tôi trên jsfiddle.net bên dưới, bạn sẽ thấy rằng khi di chuyển sang phải, khi bạn đến ô lục giác tiếp theo, có một vấn đề với vị trí X và các tính toán đã xảy ra.

Có vẻ như đó là một chút đơn giản của toán học bị thiếu. Thật không may, tôi đã không thể tìm thấy một ví dụ bao gồm cuộn.

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

Đảm bảo không có thanh cuộn ngang sau đó thử di chuyển sang phải bằng cách sử dụng -> mũi tên phải trên bàn phím. Bạn sẽ thấy vấn đề khi bạn đạt đến cuối của ô đầu tiên.

Xin lỗi về mã khủng khiếp, tôi đang học!

Chúc mừng

Dù hex hay không, tôi khuyên bạn nên giữ các biến vị trí (x, y) của mình chỉ vào thế giới trò chơi và chỉ chuyển đổi sang / từ tọa độ màn hình khi cần. Khi bạn chuyển đổi từ màn hình sang thế giới, bạn thêm (cameraX, cameraY) rồi chia cho (brickStepX, brickStepY). Khi bạn chuyển đổi từ thế giới sang màn hình, bạn nhân với (brickStepX, brickStepY) rồi trừ (cameraX, cameraY). Lưu ý rằng có một sự phức tạp nhỏ với các hình lục giác mà bạn xử lý với cột Offerset.

Đây là phiên bản đơn giản hơn của mã của bạn, với x, y, FirstX, FirstY trong tọa độ thế giới:

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]);
            }
        }
    }
}

Tìm thấy câu trả lời! Xem tại đây: http://jsfiddle.net/ck6Vq/1/embedded/result/

Không chắc chắn nếu có ai có thể đưa ra bất cứ điều gì gọn gàng hơn mã dưới đây?

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]);
        }
    }
}