Show Posts
1
Graphics / Re: Scrolling tilemap issue: black bars
« on: May 19, 2021, 04:21:42 am »
I had the exact same problem. Big, ugly, obvious black lines between tiles.
Rendering everything to a sf::RenderTexture got rid of it.
Below is my RenderTexture Initialization Function & Render Function from my GameState:
I'm still getting some weird less-noticeable artifacts and have come to the conclusion that rendering lots of little 32.f x 32.f sprite tiles is bad practice.
You essentially want to use larger sprites and fit as much as possible into the .png texture via GIMP or Photoshop.
I'm using this guy's RPG level Tileset for practice: https://pipoya.itch.io/pipoya-rpg-tileset-32x32.
For example, his trees are made up of 4 32.f x 32.f squares... You don't want to set trees like this... You actually want to grab the entire 64.f x 64.f tree... Or better yet, a larger bundle of trees... As large a possible to fit your needs.
The only thing you can do is make it less noticeable is by fitting as much as possible into the PNG texture and making the tile square as large as possible.
Even with this advice, you'll never get 100% avoidance of floating point artifact issues. You'll still get them on the edges of places where tiles are placed next to each other.
Overall... Less Environmental Tiles = Less Floating Point Tile Artifacts plain and simple...
Hope this helps people save some time searching for an answer to this problem
Rendering everything to a sf::RenderTexture got rid of it.
Below is my RenderTexture Initialization Function & Render Function from my GameState:
Code: [Select]
void GameState::initRenderTexture()
{
this->renderTexture.create(this->window->getSize().x, this->window->getSize().y);
this->renderTexture.setSmooth(true);
this->renderSprite.setTexture(this->renderTexture.getTexture());
this->renderSprite.setTextureRect(sf::IntRect(0, 0, this->window->getSize().x, this->window->getSize().y));
}
void GameState::render(sf::RenderTarget* target)
{
if (!target)
target = this->window;
/*Items Rendered to Render Texture*/
this->renderTexture.clear();
this->renderTexture.setView(this->view);
this->renderTileMap(this->renderTexture);
this->renderSprite.setTexture(this->renderTexture.getTexture());
this->renderPlayer(this->renderTexture);
this->renderTexture.display();
target->draw(this->renderSprite);
/*Items Rendered with Default Window View*/
this->window->setView(this->defaultWindowView);
if (this->isPaused)
this->renderPauseMenu(*target);
}
I'm still getting some weird less-noticeable artifacts and have come to the conclusion that rendering lots of little 32.f x 32.f sprite tiles is bad practice.
You essentially want to use larger sprites and fit as much as possible into the .png texture via GIMP or Photoshop.
I'm using this guy's RPG level Tileset for practice: https://pipoya.itch.io/pipoya-rpg-tileset-32x32.
For example, his trees are made up of 4 32.f x 32.f squares... You don't want to set trees like this... You actually want to grab the entire 64.f x 64.f tree... Or better yet, a larger bundle of trees... As large a possible to fit your needs.
The only thing you can do is make it less noticeable is by fitting as much as possible into the PNG texture and making the tile square as large as possible.
Even with this advice, you'll never get 100% avoidance of floating point artifact issues. You'll still get them on the edges of places where tiles are placed next to each other.
Overall... Less Environmental Tiles = Less Floating Point Tile Artifacts plain and simple...
Hope this helps people save some time searching for an answer to this problem
