title: Tiled: Why do my tiles flip incorrectly when their diagonal-flip bit is set?
body: <p>I'm trying to use a geometry shader to display a tile map created in <em>Tiled</em>. I'm having some trouble implementing how Tiled handles rotation and flipping, though.</p>
  <p>Tiled reserves the highest four bits of a tile ID for specifying how the tile should be oriented (as described <a href="https://doc.mapeditor.org/en/stable/reference/global-tile-ids/" rel="nofollow noreferrer">here</a>), with each bit specifying which axis to flip the tile across.  My geometry shader starts by creating four vertices and then swapping their positions based on how each flag is set:</p>
  <pre><code>void createVertices(bool flipDiagonal, bool flipVertical, bool flipHorizontal, out vec4 vertices[4])
  {
      vec4 verts[4];
      verts[0] = gl_in[0].gl_Position + vec4( 0.0,  0.0,  0.0,  1.0);
      verts[1] = gl_in[0].gl_Position + vec4( 1.0,  0.0,  0.0,  1.0);
      verts[2] = gl_in[0].gl_Position + vec4( 0.0, -1.0,  0.0,  1.0);
      verts[3] = gl_in[0].gl_Position + vec4( 1.0, -1.0,  0.0,  1.0);
      vec4 swap;
  
      if(flipDiagonal)
      {
          swap = verts[1];
          verts[1] = verts[2];
          verts[2] = swap;
      }
      
      if(flipHorizontal)
      {
          swap = verts[0];
          verts[0] = verts[1];
          verts[1] = swap;
          
          swap = verts[2];
          verts[2] = verts[3];
          verts[3] = swap;
      }
      
      if(flipVertical)
      {
          swap = verts[0];
          verts[0] = verts[2];
          verts[2] = swap;
          
          swap = verts[1];
          verts[1] = verts[3];
          verts[3] = swap;
      }
      
      for(int i = 0; i &lt; vertices.length(); i++)
      {
          vertices[i] = u_projection * u_camera * u_transform * verts[i];
      }
  }
  </code></pre>
  <p>The problem is that when the diagonal bit is set and either the horizontal bit or the vertical bit is set, it flips in the opposite direction of what I expect it to.  Tiles that should be flipped horizontally are flipped vertically, and tiles that should be flipped vertically appear horizontally flipped.  Tiles in which all three flags are set render correctly, however.</p>
  <p>Here are some images for reference.  The one on the left was exported directly from <em>Tiled</em> and is what should be displayed.  The one on the right is what my program is rendering, with the incorrect tiles circled:</p>
  <p><a href="https://i.stack.imgur.com/csvWV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/csvWV.png" alt="Example of what a tile map should look like (exported directly from Tiled)." /></a>  <a href="https://i.stack.imgur.com/vyIoC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vyIoC.png" alt="Example of what my program renders.  Note how the second and fourth tiles of the top and bottom row are rotated 180 degrees." /></a></p>
  <p>Now, I could easily work around this with a couple of if-statements, but I want to know <em>why</em> this is happening.  I've tried working through this on paper, but to no avail.  What am I missing?</p>