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


7

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

現在のコード:

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/

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

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

乾杯


私はなんとかこれを見つけました。xnaresources.com/default.asp?page=Tutorial:TileEngineSeries:3残念ながら、正しく表示されますが、正しくない座標が使用されています。あなたが絵を見るならば、私はこれらが16進の数学でうまくいくとは思いません。
Chris Evans、

私はコードをさらに調整しましたが、重要なビットでよりクリーンで理解しやすくなっています。完全な例はここにあります:jsfiddle.net/wg45T/2/embedded/resultとコードはここにあります:jsfiddle.net/wg45T/2これでスクロールが正常に行われ、マップなどが再作成されます。問題は、古いタイルが削除されたときに次のタイルの位置を維持しないことです。右にスクロールして確認してください。
Chris Evans

答えは見つかりましたが、まだ投稿できません。制限時間が終了するとアップロードされます。
Chris Evans、

回答:


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

なんて素晴らしい単純化でしょう!乾杯:)
クリス・エヴァンス

0

答えが見つかりました!ここを表示: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]);
        }
    }
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.