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

Author Topic: Pixel Offset when drawing images  (Read 1783 times)

0 Members and 1 Guest are viewing this topic.

angiishere

  • Newbie
  • *
  • Posts: 3
    • View Profile
Pixel Offset when drawing images
« on: December 28, 2019, 11:09:38 pm »
Hello!

First time poster here (could not find an answer to my question).
I am working on a game and using sfml and c++.

I am working on an UI with basic textboxes an for the borders i draw and 8x8 image move it and draw it again (and so on). The image is Scaled by 2.
I have a system that changes my sf::View when i resize the window.

This is what it normally should look like:


But with some variations of sf::View i get this result:


i have looked for float to integer conversion or something but cant find anything.

its hard to see on these screenshots but when you zoom in, the image itself is kinda devided in half diagonally.

Does anyone have an idea?

Thanks
« Last Edit: December 28, 2019, 11:36:31 pm by angiishere »

fallahn

  • Sr. Member
  • ****
  • Posts: 492
  • Buns.
    • View Profile
    • Trederia
Re: Pixel Offset when drawing images
« Reply #1 on: January 05, 2020, 11:26:35 am »
Rather than draw the same sprite over and over, you could set the texture to repeated, then set the sprite texture rect to the size of the text box. The texture will automatically repeat to fill the sprite.

Alternatively there is the 9 patch method, used a lot in UIs: https://github.com/Hapaxia/SelbaWard/wiki/Nine-Patch which might do a better job for what you want

angiishere

  • Newbie
  • *
  • Posts: 3
    • View Profile
Re: Pixel Offset when drawing images
« Reply #2 on: January 06, 2020, 04:31:17 pm »
Hello and thank you for your answer!
I have tried out the repeated Textures and it seems to be working as expected (no more weird pixels!)

I am still hoping to find another solution because with repeated Textures i have to rewrite a lot of code.

But at least i have a working solution in case i don't. :D



Hapax

  • Hero Member
  • *****
  • Posts: 3351
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Re: Pixel Offset when drawing images
« Reply #3 on: January 06, 2020, 04:45:39 pm »
The repeat texture is great but remember that it only works with full textures; if you are using a texture rectangle within it, it won't repeat just that part.

Since your texture is the same horizontally for its entirety, you could just stretch the texture to which ever horizontal length you want. In fact, you could just use a single pixel width texture and stretch that.

Of course, Selba Ward's Nine Patch (as fallahn mentioned above) can do that too if you don't use any corners  ;D
Note that Selba Ward is designed for SFML.
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*

angiishere

  • Newbie
  • *
  • Posts: 3
    • View Profile
Re: Pixel Offset when drawing images
« Reply #4 on: January 06, 2020, 05:08:52 pm »
Yes i have noticed the problem with the texture rectangle! That's the part i meant with "rewrite a lot of code" :D

The stretching is also a good workaround but i was planing on having some borders with patterns, etc.

Nine Patch seems nice (and if i ever code a UI again i will use something like this) but at this point my UI is basically done so i don't want to change up my whole code that way :D

Thank you very much for your input!
« Last Edit: January 06, 2020, 05:12:05 pm by angiishere »

Hapax

  • Hero Member
  • *****
  • Posts: 3351
  • My number of posts is shown in hexadecimal.
    • View Profile
    • Links
Re: Pixel Offset when drawing images
« Reply #5 on: January 07, 2020, 09:17:16 pm »
You could draw the stretched texture and then draw the borders separately - or the 'unstretched' texture on the edges (reduces the number of artifacts)

As for Selba Ward's Nine Patch, after its simple initial texture set-up, you just use very much like a rectangle and the borders automatically stay the same thickness and the inside texture stretches. See this information for more information on the nine patch idea in general.
Selba Ward -SFML drawables
Cheese Map -Drawable Layered Tile Map
Kairos -Timing Library
Grambol
 *Hapaxia Links*