Isometric tiles, far apart

[Oliver]

I am trying to create a diamond shaped isometric tile map. I have managed to do it but not with vertex arrays. I always seem to get something wrong in my head.

Worth mentioning i have tried many different stuff, including trying to figure it out myself. But this solution is from a post from Paul in this link https://en.sfml-dev.org/forums/index.php?topic=27361.0

[Switchboy]

I use this to determine the coordinates:

//To draw from most left and top
int mapOffsetX = (MAP_WIDTH/2);
int mapOffsetY = 0

//Get the top left pixel of a isometric texture tile of W64 H32
int X = mapOffsetX * 64 + (pos.x - pos.y) * (64 / 2);
int Y = mapOffsetY * 32 + (pos.x + pos.y) * (32 / 2);
 

[Oliver]

Do you use vertexarray to draw the tiles? Because I get it to work when i don't use vertexarrays which is weird. I can't seem to figure it out.

[Switchboy]

 sf::Vector2f miniMapSpace(int i, int j) {
    //To draw from most left and top
    int mapOffsetX = (MAP_WIDTH / 2);
    int mapOffsetY = 0;

    //Get the top left pixel of a isometric texture tile of W64 H32
    int X = mapOffsetX * 64 + (i - j) * (64 / 2);
    int Y = mapOffsetY * 64 + (i + j) * (64 / 2);
 return {X, Y};
}


void setQuadPosition(sf::Vertex* Quad, int i, int j) {
    Quad[0].position = sf::Vector2f(miniMapSpace( i, j ).x, miniMapSpace( i, j ).y);                  // 0 , 0 = 0 , 0
    Quad[1].position = sf::Vector2f(miniMapSpace( i, j ).x + 64.f, miniMapSpace(i, j ).y);           // 1 , 0 = 20 , 0
    Quad[2].position = sf::Vector2f(miniMapSpace( i, j ).x + 64.f, miniMapSpace( i, j ).y + 64.f);    // 1 , 1 = 20 , 10
    Quad[3].position = sf::Vector2f(miniMapSpace( i, j ).x, miniMapSpace( i, j ).y + 64.f);           // 0 , 1 = 0 , 10
}

void drawMap() {
    sf::VertexArray miniMapBackGroundPoints(sf::Quads, x + y * 16 * 4);
    for (int j = 0; j < 16; j++)
    {
        for (int i = 0; i < 16; i++)
        {
            setQuadPosition(&miniMapBackGroundPoints[((i * 16) + j) * 4], i, j);
        }
    }
}

Maybe this might help. Looking at your image. But for an isometric projection you probaly want to use a tile that is wider than it is high. This will result in this:

sf::Vector2f miniMapSpace(int i, int j) {
    //To draw from most left and top
    int mapOffsetX = (MAP_WIDTH / 2);
    int mapOffsetY = 0;

    //Get the top left pixel of a isometric texture tile of W64 H32
    int X = mapOffsetX * 64 + (i - j) * (64 / 2);
    int Y = mapOffsetY * 32 + (i + j) * (32 / 2);
    return { X, Y };
}


void setQuadPosition(sf::Vertex* Quad, int i, int j) {
    Quad[0].position = sf::Vector2f(miniMapSpace( i, j ).x, miniMapSpace( i, j ).y);                  // 0 , 0 = 0 , 0
    Quad[1].position = sf::Vector2f(miniMapSpace( i, j ).x) + 64.f, miniMapSpace( i, j ).y);           // 1 , 0 = 20 , 0
    Quad[2].position = sf::Vector2f(miniMapSpace( i, j ).x + 64.f, miniMapSpace( i, j ).y + 32.f);    // 1 , 1 = 20 , 10
    Quad[3].position = sf::Vector2f(miniMapSpace( i, j ).x, miniMapSpace( i, j ).y + 32.f);           // 0 , 1 = 0 , 10
}

void drawMap() {
    sf::VertexArray miniMapBackGroundPoints(sf::Quads, x + y * 16 * 4);
    for (int j = 0; j < 16; j++)
    {
        for (int i = 0; i < 16; i++)
        {
            setQuadPosition(&miniMapBackGroundPoints[((i * 16) + j) * 4], i, j);
        }
    }
}

Will make more sense. I added my grass tile sprite as an example of an isometric tile.

[Oliver]

All this is my bad. I have checked the texture coordinates 100 times but that was the problem.
At one time i thought it was something wrong with my compiler or sfml. But ofc that is never the case.

The problem was caused due to texture coordinated being rotated wrong and therefor it didn't line up.

[Switchboy]

All this is my bad. I have checked the texture coordinates 100 times but that was the problem.
At one time i thought it was something wrong with my compiler or sfml. But ofc that is never the case.

The problem was caused due to texture coordinated being rotated wrong and therefor it didn't line up.

Ah that explains it! I did not use textures since I am only using a vertex array for drawing my minimap, which uses solid colors. Good to know of this issue if I ever decide to convert my drawMap() function to use a vertex array instead of only a limit on draw calls to cells visible on screen.