Jump to content
  • Advertisement
Grumn Gaming

2D Tiled SDL 2D Tilemap Glitch

Recommended Posts

I have a simple openGL engine using SDL working. I'm not using any SDL_Image stuff, its all just openGL. I've made 2d tilemap levels with a .txt file before by reading in the characters and using a switch statement to assign them to various textures and using their position in the file to render them. This method works fine and produces no graphical glitches.

Then I made a .tmx map in Tiled and used TmxParser to read the file into my program, and I'm able to render the map properly to the screen, but when I move up and down these black lines start to appear between the tiles.

The map loads in fine at first, its only once I start moving the camera around that it happens, and its only when the camera moves up or down.

I made a video to show exactly what I'm seeing, I see a lot of these type of issues when searching google but nothing that matches whats happening to me.

" rel="external">

I'm not even sure if this is a problem with the code or what it could be so I don't know of any code to include.

This problem also happened to me when I was using Unity and importing a Tiled map with Tiled2Unity. In unity there were long horizontal line glitches on the tilemap, and now its happening to me again in c++, is this something to do with Tiled?

Has anyone encountered this before or know a solution?

Any help would be greatly appreciated, I feel stuck on this issue.


Share this post

Link to post
Share on other sites

  // Iterate through the tile layers.

    for (int i = 0; i < map->GetNumTileLayers(); ++i)
        printf("                                    \n");
        printf("Layer : %02d/%s \n", i, map->GetTileLayer(i)->GetName().c_str());


        // Get a layer.
        const Tmx::TileLayer *tileLayer = map->GetTileLayer(i);

        for (int y = 0; y < tileLayer->GetHeight(); ++y)
            for (int x = 0; x < tileLayer->GetWidth(); ++x)
                //Flip y axis to convert from tiled format, tiled starts top left, we start bottom left
                glm::vec4 destRect(x * tileWidth, (tileLayer->GetHeight() * tileHeight) - (y * tileHeight)/* + (y * 1)*/, tileWidth, tileHeight);

                if (tileLayer->GetTileTilesetIndex(x, y) == -1)
                    //printf("........    \n");
                    // Get the tile's id and gid.
                    int tileId = tileLayer->GetTileId(x, y);
                    int tileGid = tileLayer->GetTileGid(x, y);
                    //printf("tileId:%d id:%03d gid:(%03d) firstGid:%03d", tileId, tileLayer->GetTileId(x, y), tileLayer->GetTileGid(x, y), map->FindTileset(tileGid)->GetFirstGid());
                    //int tileGid = tileLayer->GetTileGid(x, y);

                    // Find a tileset for that id.
                    const Tmx::Tileset *tileset = map->FindTileset(tileGid);

                    std::string imagePath = "x";

                    if (tileset->GetImage() != nullptr) {
                        imagePath = tileset->GetImage()->GetSource();
                    else {
                        SPH::fatalError("Could not find tileset source image.");

                    SPH::GLTexture texture = SPH::ResourceManager::getTexture(imagePath);

                    //printf("%s\n", tileset->GetImage()->GetSource().c_str());

                    SPH::TileSheet tileSheet;
                    tileSheet.init(texture, glm::ivec4(tileset->GetImage()->GetWidth() / tileWidth,
                        tileset->GetImage()->GetHeight() / tileHeight,
                        tileWidth, tileHeight));

                    m_spriteBatches[0].render(destRect, tileSheet.getUVs(tileId), texture.id, 1.0f, whiteColor);







I think what you're saying is I'm using floating point numbers in my tileSheet.getUVs, is that correct? If I changed them to ints it would be fine? Or floating point numbers in my destRect?

Edited by Grumn Gaming

Share this post

Link to post
Share on other sites

Yep, that's exactly it. You should "floor" (i.e. round toward negative infinity; note that this is not quite the same as truncation) every position before drawing there. Otherwise some go to the right and some go to the left, and what you end up with is a mess.

Edited by JulieMaru-chan

Share this post

Link to post
Share on other sites

Floor doesn't change anything.


glm::vec4 destRect(x * tileWidth, (tileLayer->GetHeight() * tileHeight) - (y * tileHeight), tileWidth, tileHeight);

printf("Dest Rect: x: %f, y: %f, width: %.5f, height: %.5f\n", destRect.x, destRect.y, destRect.z, destRect.w);

x and y are already ints, tileWidth and tileHeight are ints, and tileLayer->GetHeight() returns an int.

There are no floats anywhere in my destRect coords, I did a printf on the destRect to confirm nothing changed when I added floor.

The printf result looks like this:

Dest Rect: x: 736.000000, y: 32.000000, width: 32.000000, height: 32.000000

Where does floating point precision come in here?

Share this post

Link to post
Share on other sites

that may be the case, however, you are using some kind of camera somewhere that has floating points as its position.  what framework are you using?  SDL?  SFML?

ultimately underneath that framework is OpenGL.  And you may be giving the tile positions in "ints" (although it is a float hence the xxx.00000), but the transform done by the camera the location on screen ends up being in floats with actual values past the decimal.

I used SFML before in my life.  Look into using a sf::VertexArray (or whatever it is called) to do a mass tilemap drawing.  It is more efficient and will clean up those problems.  If you are using SDL then someone else may be able to help you.


Share this post

Link to post
Share on other sites

Yes I’m using sdl but not for the rendering code, that is all OpenGL, but this gives me a place to start messing around with it, thank you. Maybe I need to make the tranform that holds my camera position from a glm::vec4 to a glm::ivec4 Or floor() the x and y positions in the camera class

Edited by Grumn

Share this post

Link to post
Share on other sites

Thank you djsteffey and juliemaru! The problem was 100% floating point precision and it was fixed by adding floor to the camera update code!


glm::vec3 translate(std::floor(-_position.x + _screenWidth/2), std::floor(-_position.y + _screenHeight/2), 0.0f);
_cameraMatrix = glm::translate(_orthoMatrix, translate);


Works perfectly now, I can't believe it, thank you so much!


Here is the end result:

Ive never thought something so bad looked so good,


Edited by Grumn Gaming

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Advertisement
  • Advertisement
  • Popular Tags

  • Popular Now

  • Advertisement
  • Similar Content

    • By LukasBanana
      Hi all,
      I'm trying to generate MIP-maps of a 2D-array texture, but only a limited amount of array layers and MIP-levels.
      For instance, to generate only the first 3 MIP-maps of a single array layer of a large 2D-array.
      After experimenting with glBlitFramebuffer to generate the MIP-maps manually but still with some sort of hardware acceleration,
      I ended up with glTextureView which already works with the limited amount of array layers (I can also verify the result in RenderDoc).
      However, glGenerateMipmap (or glGenerateTextureMipmap) always generates the entire MIP-chain for the specified array layer.
      Thus, the <numlevels> parameter of glTextureView seems to be ignored in the MIP-map generation process.
      I also tried to use glTexParameteri(..., GL_TEXTURE_MAX_LEVEL, 3), but this has the same result.
      Can anyone explain me how to solve this?
      Here is an example code, how I do it:
      void GenerateSubMips( GLuint texID, GLenum texTarget, GLenum internalFormat, GLuint baseMipLevel, GLuint numMipLevels, GLuint baseArrayLayer, GLuint numArrayLayers) { GLuint texViewID = 0; glGenTextures(1, &texViewID); glTextureView( texViewID, texTarget, texID, internalFormat, baseMipLevel, numMipLevels, baseArrayLayer, numArrayLayers ); glGenerateTextureMipmap(texViewID); glDeleteTextures(1, &texViewID); } GenerateSubMips( myTex, GL_TEXTURE_2D_ARRAY, GL_RGBA8, 0, 3, // only the first 3 MIP-maps 4, 1 // only one array layer with index 4 );  
      Thanks and kind regards,
    • By davejones
      I am having an issue with touch inputs on an iPad. I have a UI widget item on screen that I am trying to drag. When I test the game on a PC the widget item works correctly. When I try to drag the widget item on a touch screen (iPad) the position of the item is nowhere near my finger. So as I am dragging the item it doesn't follow my finger, however when I drag the item using a mouse on a PC the widget moves in the correct position. In project settings I have enabled the use mouse for touch option but the issue still persists. This has been set up in unreal engine 4 and I am trying to get the correct functionality for a tablet device. Any help would be much appreciated on how I would get the UI widget to follow my finger when I drag it. 

    • By Wraithe
      I am wondering how many DirectSound buffers I should maintain to find a good balance between constant reading of sound files and hanging on to upwards of 30-50 sound effects at once?
      I am making a small 2D game engine using OpenGL, DirectSound and Win32 APIs. I am thinking I would only need two buffers for music so that I can fade them in and out, maybe adding a third for those instances where there is competing music (think of a character walking past someone's radio).
      As for sound, I originally thought I could allow myself to set the number of sound buffers at the audio classes' initialization, storing them in an array for faster access, and then keeping a queue of audio requests that take up the first free buffer. Then I worried about a string of the same sound playing and thought maybe I should keep two buffers for every currently loaded sound effect, and whenever that sound effect is called while it is already playing I could do an extremely fast fade between the two buffers set aside for that sound effect.
      I am sure I am just over-thinking this. I would imagine having three streaming buffers for music and a sound effects queue with 8 buffers is more than enough, but I have never really dealt with low-level sound before. What would people who have worked with lower-level audio recommend?
      Thank you for your time.
    • By vvvvv
      oh boy howdy howdy
      i know little to nothing about game design and programming but i am a seasoned artist and am a huge gamer always have been
      i recently got a very small taste of the industry if you can even call it that from the last UE4 game jam i helped with voice acting concept art writing and vector art
      i absolutely loved it and am already itching to learn and do more but??? i have no idea how to go about it
      the person i was working with during the game jam is years ahead of me and is already looking into getting me into some contract work and teaching me 3d modeling/painting/sculpting but at the moment hes currently busy with making a game for RTX!
      while hes busy i thought id delve into some forums and get my feet wet 
      any info or tips on how or where to get started would be amazing thanks!
    • By kirito
      hey guys i wanna know how much of everything it costs to make a game kind of aberoth
      if u haven't heared about it take a fast look here:http://aberoth.com
    • By Armaan Gupta
      Hey There,
      I am a developer and Im working on a blockchain based infinite runner type game. Right now, I am working on releasing the beta version with a couple other game developers, but would love to expand the team and have other talented and bright people contributing. The game portion of the project isnt very complicated, and wouldnt require anyone to pull thier hair out for it.
      If you are interested in joining a project, interested in the idea, or would like some more information, please don't hesitate to ask either by commenting, discord (username: Guppy#7625), or by email (armaangupta01@gmail.com).
      Thank you!
    • By Joydeep Mani
      I am trying to build a particle system for unity based on "Destiny particle architecture " released in Siggraph.
      I encounter a problem in trying to understand how they iterated this:

      Converted to spline function and the result is

      i wanted to know how did they converted the function in the editor to represent the graph ??
    • By sausagejohnson
      Welcome to the 2D UFO game guide using the Orx Portable Game Engine. My aim for this tutorial is to take you through all the steps to build a UFO game from scratch.
      The aim of our game is to allow the player to control a UFO by applying physical forces to move it around. The player must collect pickups to increase their score to win.
      I should openly acknowledge that this series is cheekily inspired by the 2D UFO tutorial written for Unity.
      It makes an excellent comparison of the approaches between Orx and Unity. It is also a perfect way to highlight one of the major parts that makes Orx unique among other game engines, its Data Driven Configuration System.
      You'll get very familiar with this system very soon. It's at the very heart of just about every game written using Orx.
      If you are very new to game development, don't worry. We'll take it nice and slow and try to explain everything in very simple terms. The only knowledge you will need is some simple C++.
      I'd like say a huge thank you to FullyBugged for providing the graphics for this series of articles.
      What are we making?
      Visit the video below to see the look and gameplay of the final game:
      Getting Orx
      The latest up to date version of Orx can be cloned from github and set up with:
      git clone https://github.com/orx/orx.git Once cloning has completed, the setup script in the root of the files will start automatically for you. This script creates an $ORX environment variable for your system. The variable will point to the code subfolder where you cloned Orx.
      Why? I'll get to the in a moment, but it'll make your life easier.
      The setup script also creates several projects for various IDEs and operating system: Visual Studio, Codelite, Code::Blocks, and gmake. You can pick one of these projects to build the Orx library.
      Building the Orx Library
      While the Orx headers are provided, you need to compile the Orx library so that your own games can link to it. Because the setup script has already created a suitable a project for you (using premake), you can simply open one for your chosen OS/IDE and compile the Orx library yourself.
      There are three configurations to compile: Debug, Profile and Release. You will need to compile all three.
      For more details on compiling the Orx lbrary at: http://orx-project.org/wiki/en/tutorials/cloning_orx_from_github at the Orx learning wiki.
      The $ORX Environment Variable
      I promised I would explain what this is for. Once you have compiled all three orx library files, you will find them in the code/lib/dynamic folder:
      orx.dll orxd.dll orxp.dll Also, link libraries will be available in the same folder:
      orx.lib orxd.lib orxp.lib When it comes time to create our own game project, we would normally be forced to copy these library files and includes into every project.
      A better way is to have our projects point to the libraries and includes located at the folder that the $ORX environment variable points to (for example: C:\Dev\orx\code).
      This means that your projects will always know where to find the Orx library. And should you ever clone and re-compile a new version of Orx, your game projects can make immediate use of the newer version.
      Setting up a 2D UFO Project
      Now the you have the Orx libraries cloned and compiled, you will need a blank project for your game. Supported options are: Visual Studio, CodeLite, Code::Blocks, XCode or gmake, depending on your operating system.
      Once you have a game project, you can use it to work through the steps in this tutorial.
      Orx provides a very nice system for auto creating game projects for you. In the root of the Orx repo, you will find either the init.bat (for Windows) or init.sh (Mac/Linux) command.
      Create a project for our 2D game from the command line in the Orx folder and running:
      init c:\temp\ufo or
      init.sh ~/ufo Orx will create a project for each IDE supported by your OS at the specified location. You can copy this folder anywhere, and your project will always compile and link due to the $ORX environment variable. It knows where the libraries and includes are for Orx.
      Open your project using your favourite IDE from within the ufo/build folder.
      When the blank template loads, there are two main folders to note in your solution:
      config src Firstly, the src folder contains a single source file, ufo.cpp. This is where we will add the c++ code for the game. The config folder contains configuration files for our game.
        What is config?
      Orx is a data driven 2D game engine. Many of the elements in your game, like objects, spawners, music etc, do not need to be defined in code. They can be defined (or configured) using config files.
      You can make a range of complex multi-part objects with special behaviours and effects in Orx, and bring them into your game with a single line of code. You'll see this in the following chapters of this guide.
      There are three ufo config files in the config folder but for this guide, only one will actually be used in our game. This is:
      ufo.ini All our game configuration will be done there.
      Over in the Orx library repo folder under orx/code/bin, there are two other config files:
      CreationTemplate.ini SettingsTemplate.ini These are example configs and they list all the properties and values that are available to you. We will mainly concentrate on referring to the CreationTemplate.ini, which is for objects, sounds, etc. It's good idea to include these two files into your project for easy reference.
      Alternatively you can view these online at https://github.com/orx/orx/blob/master/code/bin/CreationTemplate.ini and here: https://github.com/orx/orx/blob/master/code/bin/SettingsTemplate.ini
      The code template
      Now to take a look at the basic ufo.cpp and see what is contained there.
      The first function is the Init() function.
      This function will execute when the game starts up. Here you can create objects have been defined in the config, or perform other set up tasks like handlers. We'll do both of these soon.
      The Run() function is executed every main clock cycle. This is a good place to continually perform a task. Though there are better alternatives for this, and we will cover those later. This is mainly used to check for the quit key.
      The Exit() function is where memory is cleaned up when your game quits. Orx cleans up nicely after itself. We won't use this function as part of this guide.
      The Bootstrap() function is an optional function to use. This is used to tell Orx where to find the first config file for use in our game (ufo.ini). There is another way to do this, but for now, we'll use this function to inform Orx of the config.
      Then of course, the main() function. We do not need to use this function in this guide.
      Now that we have everything we need to get start, you should be able to compile successfully. Run the program and an Orx logo will appear slowly rotating.

      Great. So now you have everything you need to start building the UFO game.
      If you experience an issue compiling, check the troubleshooting article for Orx projects    for help.
      Setting up the game assets
      Our game will have a background, a UFO which the player will control, and some pickups that the player can collect.
      The UFO will be controlled by the player using the cursor keys.
      First you'll need the assets to make the game. You can download the file  assets-for-orx-ufo-game.zip which contains:
      The background file (background.png😞

      The UFO and Pickup sprite images (ufo.png and pickup.png😞
      And a pickup sound effect (pickup.ogg😞
      Copy the .png files into your data/texture folder
      Copy the .ogg file into your data/sound folder.
      Now these files can be accessed by your project and included in the game.
      Setting up the Playfield
      We will start by setting up the background object. This is done using config.
      Open the ufo.ini config file in your editor and add the following:
      [BackgroundGraphic] Texture = background.png Pivot = center  
      The BackgroundGraphic defined here is called a Graphic Section. It has two properties defined. The first is Texture which has been set as background.png.
      The Orx library knows where to find this image, due to the properties set in the Resource section:
      [Resource] Texture = ../../data/texture  
      So any texture files that are required (just like in our BackgroundGraphic section) will be located in the ../../data/texture folder.
      The second parameter is Pivot. A pivot is the handle (or sometimes “hotspot” in other frameworks). This is set to be center. The position is 0,0 by default, just like the camera. The effect is to ensure the background sits in the center of our game window.
      There are other values available for Pivot. To see the list of values, open the CreationTemplate.ini file in your editor. Scroll to the GraphicTemplate section and find Pivot in the list. There you can see all the possible values that could be used.
      top left is also a typical value.
      We need to define an object that will make use of this graphic. This will be the actual entity that is used in the game:
      [BackgroundObject] Graphic = BackgroundGraphic Position = (0, 0, 0)  
      The Graphic property is the section BackgroundGraphic that we defined earlier. Our object will use that graphic.
      The second property is the Position. In our world, this object will be created at (0, 0, 0). In Orx, the coordinates are (x, y, z). It may seem strange that Orx, being a 2D game engine has a Z axis. Actually Orx is 2.5D. It respects the Z axis for objects, and can use this for layering above or below other objects in the game.
      To make the object appear in our game, we will add a line of code in our source file to create it.
      In the Init() function of ufo.cpp, remove the default line:
      orxObject_CreateFromConfig("Object"); and replace it with:
      orxObject_CreateFromConfig("BackgroundObject"); Compile and run.
      The old spinning logo is now replaced with a nice tiled background object.

      Next, the ufo object is required. This is what the player will control. This will be covered in Part 2.
  • Forum Statistics

    • Total Topics
    • Total Posts

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!