Help understanding the Tile Map Example in SFML Tutorials 2.1

[chaos407]

Is there a tutorial that is similar to this tile map example that can help make it easier to understand?

I am a beginner C++ programmer and I understand the basics of for loops as it is written here but I don't understand how each vertex is drawn to the vertex array m_verticies. Thanks.

http://www.sfml-dev.org/tutorials/2.1/graphics-vertex-array.php#example-tile-map

 
// get the current tile number
                int tileNumber = tiles[i + j * width];

                // find its position in the tileset texture
                int tu = tileNumber % (m_tileset.getSize().x / tileSize.x);
                int tv = tileNumber / (m_tileset.getSize().x / tileSize.x);

                // get a pointer to the current tile's quad
                sf::Vertex* quad = &m_vertices[(i + j * width) * 4];
            }
 

[Nexus]

If you're a beginner in C++, you should probably learn the language at an intermediate level before starting with SFML. The library requires a solid understanding of C++, see also FAQ.

[chaos407]

I have looked in the FAQ and I understand all of the basic concepts listed there and most of the advanced concepts like operator overloading or templates. I understand all the SFML tutorials so far except for this one particular example.

In particular, why the math equations are written the way they are. For example, why is tu set to tileNumber % (m_tileset.getSize().x / tileSize.x);? Why is it (i+j*width)*4?

[Ixrec]

The expressions (not equations!) you're referring to are part of how you implement a 2D array using a 1D array.

Say you have a 100x200 texture stored as a 1D array of 20000 texels (as opposed to 100 separate arrays of 200 texels, which would be terrible).  If you want to get texel (50,30), then assuming the texels are stored in row major format, that means we want element (50*200)+29 of the array.  In other words, (j*width)+i.  Then there's a *4 because the array elements are all 4 bytes large.

The tileNumber % (m_tileset.getSize().x / tileSize.x); is doing something similar, though it's assuming the texture is broken up into tiles and trying to get the coordinates of one corner of a given tile, rather than a single texel.

Keep in mind that there are two sets of coordinates involved here: the x/y coordinates where we want to draw the tile, and the u/v coordinates where the tile is located in the tilemap.

I probably made a few silly mistakes but that should at least get the idea across.