GDI+ DPI Issue

[TheDewd]

I'm using GDI+ to draw rectangles. I'm going to use the rectangles as buttons in a menu system.

I'm layering a total of 3 rectangles to give the effect of a gradient border, each a different color.

The button draws perfectly at 100% scale (96 DPI)

I've attempted to add corrections for higher DPI scaling, however the rectangles are not drawing perfectly.

At 125% scale (120 DPI), the rectangles don't have the correct sizing.

See the attached images. ZOOM in to the first blue button, and notice how the "border" heights are not consistent in the higher scaled DPI version.

https://imgur.com/a/A09J76I

Any ideas how to make this work correctly? Does Windows not accurately display pixels at higher DPI scaling? I'm trying to make the appearance look identical at all DPI options. Please let me know if this will not be possible. Thanks!

Partial code below showing how I've calculated DPI and used in the GDI+ DllCalls.

Code: Select all

; Calculate DPI scaling
DPI := (A_ScreenDPI / 96)

; Button Layer 1
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFF618B98, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (224 * DPI), "Float", (128 * DPI), "Float", (192 * DPI), "Float", (32 * DPI))

; Button Layer 2
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFFA2E8FE, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (226 * DPI), "Float", (130 * DPI), "Float", (188 * DPI), "Float", (28 * DPI))

; Button Layer 3
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFF98D9ED, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (228 * DPI), "Float", (132 * DPI), "Float", (184 * DPI), "Float", (24 * DPI))

[iseahound]

I can't really see the issue you're describing. Are you talking about the heights being 1 px off? That's probably a rounding error. In my opinion, you should be rounding the values yourself by using GdipFillRectangleI.

Your math is also kinda messed up, width and height are not "real" values. It's hard to explain, but what's "real" are coordinates on a plane. So (X,Y) refer to an actual point on the plane. To draw a rectangle, you need two sets of coordinates, (x1,y1) and (x2,y2). So in other words, you can't just scale the "width", you have to scale x2. Because width and height are abstractions.

Code: Select all

; Calculate DPI scaling
DPI := (A_ScreenDPI / 96)

; Button Layer 1
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFF618B98, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangleI", "Ptr", pGraphics, "Ptr", pBrushMenu, "Int", Round(224 * DPI), "Int", Round(128 * DPI), "Int", Round(224 * DPI + 192 * DPI) - Round(224 * DPI), "Int", (32 * DPI + 128 * DPI) -  Round(128 * DPI))

; Button Layer 2
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFFA2E8FE, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangleI", "Ptr", pGraphics, "Ptr", pBrushMenu, "Int", Round(226 * DPI), "Int", Round(130 * DPI), "Int", Round(188 * DPI + 226 * DPI) - Round(226 * DPI + 28 * DPI), "Int", Round(28 * DPI + 130 * DPI) - Round(130 * DPI))

; Button Layer 3
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFF98D9ED, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangleI", "Ptr", pGraphics, "Ptr", pBrushMenu, "Int", Round(228 * DPI), "Int", Round(132 * DPI), "Int", Round(184 * DPI + 228 * DPI) - Round(228 * DPI), "Int", Round(24 * DPI + 132 * DPI) - Round(132 * DPI))

TL;DR Round(w) != Round(x2) - Round(x1)

[TheDewd]

Thank you! I'm still experiencing the same issue at 125% scaling with incorrect pixel height.

The "borders" do not have a consistent width and height.

I'm still wondering if it's an issue with Windows rather than the DllCall parameters.

EDIT: I created a PNG image file of the button, and then I drew it to the Graphic from the image file. At 125% DPI, the image's borders are still inconsistent. Strange.

By the way, I'm also using GdipSetSmoothingMode = None, GdipSetInterpolationMode = NearestNeighbor

Code: Select all

; Button Layer 1
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFF618B98, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangleI", "Ptr", pGraphics, "Ptr", pBrushMenu, "Int", Round(224 * DPI), "Int", Round(128 * DPI), "Int", Round((224 * DPI) + (192 * DPI)) - Round(224 * DPI), "Int", Round((32 * DPI) + (128 * DPI)) - Round(128 * DPI))

; Button Layer 2
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFFA2E8FE, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangleI", "Ptr", pGraphics, "Ptr", pBrushMenu, "Int", Round(226 * DPI), "Int", Round(130 * DPI), "Int", Round((226 * DPI) + (188 * DPI)) - Round(226 * DPI), "Int", Round((28 * DPI) + (130 * DPI)) - Round(130 * DPI))

; Button Layer 3
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFF98D9ED, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangleI", "Ptr", pGraphics, "Ptr", pBrushMenu, "Int", Round(228 * DPI), "Int", Round(132 * DPI), "Int", Round((228 * DPI) + (184 * DPI)) - Round(228 * DPI), "Int", Round((24 * DPI) + (132 * DPI)) - Round(132 * DPI))

[teadrinker]

Try changing the SmoothingMode to HighQuality or AntiAlias.

[Hellbent]

Try creating different coord sets for each dpi value instead of scaling one set of values. If you have quick access to viewing in different dpi values it should be rather quick to find out the different values needed to get the results you want.

*Edit.
It should also be possible to find the rule to when it adds an extra pixel or not by going through a range of values and note the threshold between it adding a extra pixel and not adding one (Like a electron jumping between orbits). That should give you enough to create some simple if statements. So perhaps values between 0-51 | 100-151 | 200-251 it doesn't add the extra pixel and the others it does. Just an idea.

[just me]

Code: Select all

 Y     SF            Distance    Distance Rounded
128 * 1.25 = 160
130 * 1.25 = 162.5   2.5         3
132 * 1.25 = 165     2.5         2

You must not round the results to give GDI+ a chance to draw with consistent distances. Use the Float version of the function and try to change what teadrinker proposed.

[TheDewd]

Thanks, everyone!

I took a screenshot of the button at 100% scaling, put that into an image editor, and resized to 125%. The pixels were distorted the same way.

I think 125% scaling just isn't going to produce pixel-perfect results.

I keep Interpolation Mode set to "NearestNeighbor" because the menu needs to be pixelated as it's for a pixelated-style game and I'm trying to keep the theme the same.

I think I'll need to find a *different* style for the menu.

After reading forums dedicated to pixelated games, it seems that only distances with WHOLE NUMBERS will not be distorted. 2.5 is not a whole number so will always be distorted.

Code: Select all

X 125% (Distance 2.5)
224 * 1.25 = 280
226 * 1.25 = 282.5
228 * 1.25 = 285

Y 125% (Distance 2.5)
128 * 1.25 = 160
130 * 1.25 = 162.5
132 * 1.25 = 165
------------------------
X 100% (Distance 2)
224 * 1 = 224
226 * 1 = 226
228 * 1 = 228

Y 100% (Distance 2)
128 * 1 = 128
130 * 1 = 130
132 * 1 = 132

[Xtra]

Code: Select all

Gdip_SetPixelOffsetMode(pGraphics,PixelOffsetMode)
{
	; CONSTANTS
	; 0 PixelOffsetModeDefault	    Equivalent to PixelOffsetModeNone.
	; 1 PixelOffsetModeHighSpeed    Equivalent to PixelOffsetModeNone.
	; 2 PixelOffsetModeHighQuality	Equivalent to PixelOffsetModeHalf.
	; 3 PixelOffsetModeNone	        Indicates that pixel centers have integer coordinates.
	; 4 PixelOffsetModeHalf	        Indicates that pixel centers have coordinates that are half way between integer values.	
	DllCall("gdiplus\GdipSetPixelOffsetMode", "UPtr", pGraphics, "int", PixelOffsetMode)
}

Set to 4

HTH

[TheDewd]

@Xtra,

Unfortunately, that still did not make the pixels perfectly scaled.

I've extracted the menu code from my project script and pasted below... Please run the script at 125% scaling (or change the DPI calculation to DPI := (120 / 96) to test at 100% scaling), take a screenshot, paste into an image editor, and then zoom into the pixels. You will see the sizes are not consistent.

The image looks perfect at 100% scale, but I'm trying to ensure that it will look the same at different DPI scaling. Hopefully this is possible. Maybe I'm doing something wrong?

Scaling: 125%
Resolution: 1360x768

Code: Select all

#SingleInstance, Force

; Calculate DPI scaling
DPI := (A_ScreenDPI / 96)

; GDI+ Startup
hGdip := DllCall("Kernel32.dll\LoadLibrary", "Str", "Gdiplus.dll") ; Load module
VarSetCapacity(GdiplusStartupInput, (A_PtrSize = 8 ? 24 : 16), 0) ; GdiplusStartupInput structure
NumPut(1, GdiplusStartupInput, 0, "UInt") ; GdiplusVersion
DllCall("Gdiplus.dll\GdiplusStartup", "PtrP", pToken, "Ptr", &GdiplusStartupInput, "Ptr", 0) ; Initialize GDI+

; Create Bitmap object
DllCall("Gdiplus.dll\GdipCreateBitmapFromScan0", "Int", (640 * DPI), "Int", (512 * DPI), "Int", 0, "Int", 0x26200A, "Ptr", 0, "PtrP", pBitmap)

; Create Graphics object associated with Bitmap object
DllCall("Gdiplus.dll\GdipGetImageGraphicsContext", "Ptr", pBitmap, "PtrP", pGraphics)

; Indicates that pixel centers have coordinates that are half way between integer values.
DllCall("Gdiplus.dll\GdipSetPixelOffsetMode", "Ptr", pGraphics, "Int", 4) ; PixelOffsetModeHalf

; Set rendering quality of Graphics object
DllCall("Gdiplus.dll\GdipSetSmoothingMode", "Ptr", pGraphics, "Int", 3) ; None

; Set interpolation mode of Graphics object
DllCall("Gdiplus.dll\GdipSetInterpolationMode", "Ptr", pGraphics, "Int", 5) ; NearestNeighbor

; Menu Background
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFFFFCC00, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (0 * DPI), "Float", (0 * DPI), "Float", (640 * DPI), "Float", (512 * DPI))

; Menu Layer 1
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFF999999, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (192 * DPI), "Float", (96 * DPI), "Float", (256 * DPI), "Float", (288 * DPI))

; Menu Layer 2
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFFFFFFFF, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (194 * DPI), "Float", (98 * DPI), "Float", (252 * DPI), "Float", (284 * DPI))

; Menu Layer 3
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFFEEEEEE, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (196 * DPI), "Float", (100 * DPI), "Float", (248 * DPI), "Float", (280 * DPI))

; Button Layer 1
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFF618B98, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (224 * DPI), "Float", (128 * DPI), "Float", (192 * DPI), "Float", (32 * DPI))

; Button Layer 2
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFFA2E8FE, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (226 * DPI), "Float", (130 * DPI), "Float", (188 * DPI), "Float", (28 * DPI))

; Button Layer 3
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFF98D9ED, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (228 * DPI), "Float", (132 * DPI), "Float", (184 * DPI), "Float", (24 * DPI))

; Button Layer 1
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFF618B98, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (224 * DPI), "Float", (192 * DPI), "Float", (192 * DPI), "Float", (32 * DPI))

; Button Layer 2
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFFA2E8FE, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (226 * DPI), "Float", (194 * DPI), "Float", (188 * DPI), "Float", (28 * DPI))

; Button Layer 3
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFF98D9ED, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (228 * DPI), "Float", (196 * DPI), "Float", (184 * DPI), "Float", (24 * DPI))

; Button Layer 1
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFF618B98, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (224 * DPI), "Float", (256 * DPI), "Float", (192 * DPI), "Float", (32 * DPI))

; Button Layer 2
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFFA2E8FE, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (226 * DPI), "Float", (258 * DPI), "Float", (188 * DPI), "Float", (28 * DPI))

; Button Layer 3
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFF98D9ED, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (228 * DPI), "Float", (260 * DPI), "Float", (184 * DPI), "Float", (24 * DPI))

; Button Layer 1
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFF618B98, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (224 * DPI), "Float", (320 * DPI), "Float", (192 * DPI), "Float", (32 * DPI))

; Button Layer 2
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFFA2E8FE, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (226 * DPI), "Float", (322 * DPI), "Float", (188 * DPI), "Float", (28 * DPI))

; Button Layer 3
DllCall("Gdiplus.dll\GdipCreateSolidFill", "UInt", 0xFF98D9ED, "PtrP", pBrushMenu)
DllCall("Gdiplus.dll\GdipFillRectangle", "Ptr", pGraphics, "Ptr", pBrushMenu, "Float", (228 * DPI), "Float", (324 * DPI), "Float", (184 * DPI), "Float", (24 * DPI))

; Delete Brush object
DllCall("Gdiplus.dll\GdipDeleteBrush", "Ptr", pBrushMenu)

; Creates GDI bitmap from Bitmap object
DllCall("Gdiplus.dll\GdipCreateHBITMAPFromBitmap", "UInt", pBitmap, "UInt*", hBitmap, "Int", 0XFFFFFFFF)

; Create Gui
Gui, +E0x02000000 +E0x00080000 ; WS_EX_COMPOSITED & WS_EX_LAYERED (Double Buffer)
Gui, +LastFound -Resize +DPIScale +HWNDhExample
Gui, Margin, 0, 0
Gui, Color, FFFFFF
Gui, Add, Picture, % "x0 y0 w" (640 * DPI) " h" (512 * DPI) " +HWNDhCanvas +0xE"
Gui, Show, w640 h512, Example

; Associate image with static control
SM := DllCall("User32.dll\SendMessage", "Ptr", hCanvas, "UInt", 0x172, "Ptr", 0x0, "Ptr", hBitmap) ; STM_SETIMAGE

; Delete Bitmap object previously assigned
DllCall("Gdi32.dll\DeleteObject", "Ptr", SM)

; Delete Bitmap object
DllCall("Gdi32.dll\DeleteObject", "Ptr", hBitmap)

; Delete Graphics object
DllCall("Gdiplus.dll\GdipDeleteGraphics", "Ptr", pGraphics)

; Clean up resources used by GDI+
DllCall("Gdiplus.dll\GdiplusShutdown", "Ptr", pToken)

; Free module from memory
DllCall("Kernel32.dll\FreeLibrary", "Ptr", hGdip)

[teadrinker]

Why don't you want to change the smoothing mode?

[TheDewd]

Why don't you want to change the smoothing mode?

I'm building a menu for a game which uses 32x32 pixelated sprite images.

I'm trying to make the menu in the same style, having clean pixelated edges, and also fitting in the 32x32 grid. Notice the button is 32px height, and everything is spaced in 32px increments (except for the button layers).

I plan to use pixelated bitmap font characters on the buttons too. Maybe 16x16 character letters.

I might end up just using 1 layer instead of layering 3 of them. Will have more of a "flat" look to it, but maybe I won't have this issue then.

Using Anti-aliasing makes the borders appear blurred which goes against the style I'm trying to achieve. I'll have to add the pixel characters to the button and see how it looks using Anti-aliasing.

If I still can't figure out a solution, I might forget about buttons completely, and just write text to the screen with some kind of indicator showing which menu option is selected. Make it retro like a title screen from a Nintendo Entertainment System game. White text on a black background.

[Xtra]

I dont think you are doing anything wrong. Just for fun try removing the smoothing mode call and see what happens. (dont set it at all)

You can read about window scaling here:
https://docs.microsoft.com/en-us/windows/win32/hidpi/high-dpi-desktop-application-development-on-windows?redirectedfrom=MSDN

[TheDewd]

Just for fun try removing the smoothing mode call and see what happens. (dont set it at all)

Haha -- It looks the same without GdipSetSmoothingMode. I guess I didn't actually need that.

I'm getting the pixel look by using GdipSetInterpolationMode, actually. I suppose that's all I really needed.

Anyway, no matter what I do, 125% scaling is not going to produce pixel-perfect results. The game sprites don't even scale nicely at 125%. Oh well!

Thanks!

[Xtra]

It probably wont have the look you want but for fun see if this makes any difference on the scaling.
(while also setting Gdip_SetPixelOffsetMode to 4)

Code: Select all

DllCall("gdiplus\GdipSetInterpolationMode", "UPtr", pGraphics, "int", 2)    ; HighQuality = 2

Make it retro like a title screen from a Nintendo Entertainment System game

That might be cool vs buttons.

[boiler]

Anyway, no matter what I do, 125% scaling is not going to produce pixel-perfect results. The game sprites don't even scale nicely at 125%. Oh well!

If you draw something that is a certain number of pixels wide, Windows stretches that image when rendering it for a scaling greather than 100%, so you can't force things to be a an exact number of pixels of the pure color. Even if you try to take that into account and, for example, draw a line 4 pixels wide with the expectation it will come out 6 pixels wide at 150% scaling, you can't count on that to happen because depending on exactly where the pixels fall, the edges of the line and whatever is next to it could have an in-between color as it blends things as they're stretched (similar to anti-aliasing). So it could be 5 or 6 pixels of the solid color with a pixel or so on either side of the blended color, making the line possibly 7 or 8 pixels wide if you count all the blended pixels as well. This is also why using ImageSearch doesn't really work when used with non-100% scaling factors (unless used only with solid blocks of color with plenty of margin around them). The image is no longer represented as its original, both in the number of pixels and their colors. It is only meant to look "correct" to the naked eye at the higher scaling.