White image gets black borders when scaling down height

[John Smith]

Hello. I've run into an issue where I'm having a big white button image and when i draw it smaller than it's original dimensions, it gets black borders.

On these links below you can notice difference where first link is picture drawn in original image dimensions while second link is same width of image but with reduced height.

original - http://prntscr.com/hvosi8
scaled down - http://prntscr.com/hvos3y

Now i do understand that when bigger images get scaled unproperly that it can lead to stretching and those sorts of problems but this image is 99.9% white pixels with just a little bit of white-ish bits on left and right side where button is being rounded (made circular)
I've also attempted to scale the image properly, by just using width / 2, height / 2 of original image dimensions, so that it's scaled down correctly, but the issue always happens when image gets scaled down, it gets these annoying black borders.
 

I'm wondering, is that normal thing to happen or it shouldn't happen? Because the image is 99.9% white, I'm gonna show you below how it looks like in pixels when fully zoomed in 
http://prntscr.com/hvoy5a

I hope you understood my words in this topic, as I've rushed them a bit. Thanks for reading.

Edit: tried making the image even smaller, same thing happens, unless i do it in exactly the same dimensions which are needed in game, but if i wanna scale it, then rip

Edited January 3, 2018 by John Smith

[IIYAMA]

To prevent the gray borders, save the image as >png8<.

 

Quote

PNG‑8 efficiently compresses areas of solid color while preserving sharp detail like those in line art, logos, or type.

https://helpx.adobe.com/photoshop-elements/using/optimizing-images-gif-or-png.html

As you have only white, you will not have problems with the color limitations of png8.

 

 

 

 

[John Smith]

6 hours ago, IIYAMA said:

To prevent the gray borders, save the image as >png8<.

 

https://helpx.adobe.com/photoshop-elements/using/optimizing-images-gif-or-png.html

As you have only white, you will not have problems with the color limitations of png8.

 

 

 

 

Thank you that has solved it.
However, what about images which have more colors? For instance, I can reproduce same issue I had with a rectangle which has glowing effect in a different color (when it's not PNG-8). However PNG-8 has 256 color limit, plus I need to convert all of them to that format which is a bit time wasting and reduces quality (of some) elements


Why does this occur anyway? Does the color mode (8 bit, 16 bit, 32 bit) affect this? I've just noticed that all of those images were made in 8-bit Color Mode with Photoshop, haven't noticed that before, it must be the default setting or something, I'm guessing that if i rework the images in 16 bit color mode or in 32 bit color mode that this issue should go away?

Edit: tried 32 bit color mode, still appears with black bordes when scaled...

Edited January 4, 2018 by John Smith

[IIYAMA]

To be honest, I have no idea why this is happening. It might be because of the complexity, but at the end the reader and converter is resonsible for it.

 

 

There is one last format you can try. It is called: dds

Which is a format that can be used directly in to the memory of your video card. https://en.m.wikipedia.org/wiki/DirectDraw_Surface

The biggest down side of this format is the filesize

It also has the option to pre-compress them with dxt 1, 3 or 5.(quality will drop of course) (Must be a power of two. e.g. 128, 256) .

Read this page for more information:

https://wiki.multitheftauto.com/wiki/DxCreateTexture

 

Converter to dds: https://nightly.multitheftauto.com/files/shaders/DxTex.zip

 

 

Edited January 4, 2018 by IIYAMA

[IIYAMA]

P.s. a week ago I did a test with loading images in to textures, these are the test results:

Converted 1000x images to textures.

Converted to: dxt5 and mipmap

 

---

Format: png (uncompressed)

Load time: 2262ms
Filesize: 64,2kB

---

Format: dds
Load time: 2093ms
Filesize: 64,1kB

---

Format: dds + mipmap
Load time: 2000ms
Filesize: 85,4kB

---

Format: dds + dxt5
Load time: 1024ms
Filesize: 16,1kB

---

Format: dds + dxt5 + mipmap
Load time: 470ms
Filesize: 21,4kB

 

Compressed dds textures files with embedded mipmap, can be converted 4 times faster to optimised render images(with mipmap) than the default png files.

Load time: 470ms VS Load time: 2262ms (1000x loading)

 

Test image(png): 128 x 128

 

 

---

While loading the textures in to the memory.

 

Converted to: dxt5 (and mipmap)

Format: dds + dxt5 + mipmap
Filesize: 21,4kB

 

 

VS

 

Converted to: (mipmap)

Format: png (uncompressed)

Filesize: 64,2kB

 

 

 

Edited January 4, 2018 by IIYAMA

[John Smith]

Thank you man for replies. Didn't even know how these formats performed before. It's just making me sad that my designs can't be loaded correctly and scaled, they are very simple shapes made in Photoshop and they can be done in literally 30 seconds so there's no complexity in it whatsoever. The solutions of different formats such as dds with compressions like dxt5 are very useful and I'll take a good look on using them for images that don't require too much quality and images that would fit the power of two type of dimensions, however this one would look weird with power of two so I'll just look at the format how it operates but it won't fix my issue due to it needed power of two dimensions and not using them will lead to blurring i suppose?

I've been scripting from 2013 and honestly I haven't seen such an issue like mine at any time. Could this be a bug in MTA's DirectX? I could give you a simple resource for reproducing this with my exact image if you'd like, I don't know would that help any of this because frankly I have 0 ideas why this is happening in first place and all I know is that images are definitely good, and even when i zoom them in right to the pixels the program which is zooming them doesn't have any distortions and shows the image correctly, unlike MTA.

Edited January 4, 2018 by John Smith