Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: Isometric tiles, far apart  (Read 4823 times)

0 Members and 1 Guest are viewing this topic.

Oliver

  • Newbie
  • *
  • Posts: 3
    • View Profile
Isometric tiles, far apart
« on: August 20, 2021, 06:15:54 pm »
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
« Last Edit: August 20, 2021, 06:18:31 pm by Oliver »

Switchboy

  • Newbie
  • *
  • Posts: 19
    • View Profile
Re: Isometric tiles, far apart
« Reply #1 on: August 23, 2021, 12:05:25 pm »
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

  • Newbie
  • *
  • Posts: 3
    • View Profile
Re: Isometric tiles, far apart
« Reply #2 on: August 23, 2021, 01:55:24 pm »
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

  • Newbie
  • *
  • Posts: 19
    • View Profile
Re: Isometric tiles, far apart
« Reply #3 on: August 23, 2021, 05:24:13 pm »
 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.
« Last Edit: August 23, 2021, 05:39:48 pm by Switchboy »

Oliver

  • Newbie
  • *
  • Posts: 3
    • View Profile
Re: Isometric tiles, far apart
« Reply #4 on: August 23, 2021, 05:36:34 pm »
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

  • Newbie
  • *
  • Posts: 19
    • View Profile
Re: Isometric tiles, far apart
« Reply #5 on: August 23, 2021, 05:44:02 pm »
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.