Bug when setting image UV Wrapping mode to repeat, a phantom border appears around edges

Author

Message

xCept

21

Years of Service

User Offline

Joined: 15th Dec 2002

Location:

Posted: 12th May 2016 22:38 Edited at: 12th May 2016 23:20

Link

If I load an image that includes non-transparent pixels around any of the edges, and then set the UV wrapping to "repeat", the image will display phantom borders around the sprite. This happens more or less, depending on the resolution or device.

Example: Three 64x64 sprites to form a 'border'. They are positioned directly adjacent to one another.

The first screenshot is with default settings, SetImageWrapU(img, 0) and SetImageWrapV(img, 0).

The next screenshot depicts what happens with SetImageWrapU(img, 1) and SetImageWrapV(img, 1) on an iPad.

I have created a demo, attached, that exhibits this behavior in Windows as well by toying with the Window Size and Virtual Resolution.

// Project: ImageUVTest

// Window Properties
SetWindowTitle( "ImageUVTest" )
SetWindowSize( 1024, 768, 0 )
SetClearColor(255, 255, 255)
SetVirtualResolution( 512, 512 )
SetPrintColor(0, 0, 0)
SetPrintSize(18)
SetGenerateMipmaps(1)

// Image and Sprite Containers
img As Integer[2]
spr As Integer[2]

// Load Images
img[0] = LoadImage("tl.png")
img[1] = LoadImage("tc.png")
img[2] = LoadImage("tr.png")

// Create Sprites
For i = 0 To 2
	spr[i] = CreateSprite(img[i])
Next i

// Base Position
posX = 128
posY = 128

// Position Sprites
SetSpritePosition(img[0], posX, posY)
SetSpritePosition(img[1], GetSpriteX(img[0]) + GetSpriteWidth(img[0]) + 5, posY)
SetSpritePosition(img[2], GetSpriteX(img[1]) + GetSpriteWidth(img[1]) + 5, posY)

// UV Mode Flag
UVMode As Integer
UVMode = 0

// Main Loop
Do

// Change UV Wrap Mode on Pointer Press
	If GetPointerPressed()

// Update UV Wrap Mode
		UVMode = 1 - UVMode
		For i = 0 To 2
			SetImageWrapU(img[i], UVMode)
			SetImageWrapV(img[i], UVMode)
			SetSpriteUVScale(spr[i], 1.0, 1.0)
		Next i

Endif
    
    Print("Click/Touch to Change UV Mode")
    Print("UV Wrap Mode: " + Str(UVMode))

Sync()

loop

+ Code Snippet

// Project: ImageUVTest 

// Window Properties
SetWindowTitle( "ImageUVTest" )
SetWindowSize( 1024, 768, 0 )
SetClearColor(255, 255, 255)
SetVirtualResolution( 512, 512 )
SetPrintColor(0, 0, 0)
SetPrintSize(18)
SetGenerateMipmaps(1)


// Image and Sprite Containers
img As Integer[2]
spr As Integer[2]

// Load Images
img[0] = LoadImage("tl.png")
img[1] = LoadImage("tc.png")
img[2] = LoadImage("tr.png")

// Create Sprites
For i = 0 To 2
	spr[i] = CreateSprite(img[i])
Next i

// Base Position
posX = 128
posY = 128

// Position Sprites
SetSpritePosition(img[0], posX, posY)
SetSpritePosition(img[1], GetSpriteX(img[0]) + GetSpriteWidth(img[0]) + 5, posY)
SetSpritePosition(img[2], GetSpriteX(img[1]) + GetSpriteWidth(img[1]) + 5, posY)

// UV Mode Flag
UVMode As Integer
UVMode = 0

// Main Loop
Do

	// Change UV Wrap Mode on Pointer Press
	If GetPointerPressed()

		// Update UV Wrap Mode
		UVMode = 1 - UVMode
		For i = 0 To 2
			SetImageWrapU(img[i], UVMode)
			SetImageWrapV(img[i], UVMode)
			SetSpriteUVScale(spr[i], 1.0, 1.0)
		Next i

	Endif
    
    Print("Click/Touch to Change UV Mode")
    Print("UV Wrap Mode: " + Str(UVMode))

    Sync()

loop

https://www.dropbox.com/s/b3bdscs781wruo7/ImageUVTest.zip?dl=0

Attachments

Login to view attachments

Back to top

Profile PM Email Website

Jack

19

Years of Service

User Offline

Joined: 4th Oct 2004

Location: [Germany]

Posted: 12th May 2016 23:11

Link

Oh, I heard about this problem recently when I wrote an animation shader, but it didn't occur, seems to be a filtering problem.
Don't get crazy about this problem, there is a solution.

Please add your source code to the demo next time, so we could start working on there

As far as I can tell, your images are correct.

First things first (maybe you won't get forced to write a shader):
- Mippmapping on or off?
- Have you tried:
- SetImageMagFilter( iImageIndex, mode )
- SetImageMinFilter( iImageIndex, mode )
- maybe this: SetImageSavePixels
- Uniform scale? I mean, no scaled resolution, no scaled sprites? 1:1?

If nothing helps, there is a solution in GLSL shader where you can define, that the edges wont go into the next shift.
But I would recommend you to try it with basic commands first.

Greetings, and good luck, Jack

[/url]

Back to top

Profile PM Email Website

xCept

21

Years of Service

User Offline

Joined: 15th Dec 2002

Location:

Posted: 12th May 2016 23:24 Edited at: 12th May 2016 23:25

Link

Hi Jack, oops I thought I included the source code in the attachment but it is there now, and in my post. I have tried all of the suggestions you recommended to no affect. In this example everything is uniform scale, multiples of two and the original size that matches the images. It still exhibits this behavior. I make sure that the UVScale is 1.0, 1.0 so nothing should be wrapping to the other edge of the sprite but a pixel still leaks over.

It is dependent on screen resolution. It happens on 4/5 of my devices including iPad and iPhone 6+, and on PC if the Window Size is different from the Virtual Resolution it shows up there as well. Shaders seem like overkill when these built-in commands should be able to solve the issue or else they aren't particularly useful in many cases like what I'm trying to work with.

Back to top

Profile PM Email Website

Jack

19

Years of Service

User Offline

Joined: 4th Oct 2004

Location: [Germany]

Posted: 13th May 2016 01:15 Edited at: 13th May 2016 01:17

Link

As you already mentioned

SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )

worked. This should be a proportion error. Does this error still occur, if you have
the same resolution in your app as the screen resolution of the device?

[/url]

Back to top

Profile PM Email Website

xCept

21

Years of Service

User Offline

Joined: 15th Dec 2002

Location:

Posted: 13th May 2016 05:26

Link

In my app I actually use GetDeviceWidth() and GetDeviceHeight() for SetVirtualResolution so it uses the native resolution. And yes at least on my iPad and iPhone it still shows this problem.

Back to top

Profile PM Email Website

Markus

Valued Member

20

Years of Service

User Offline

Joined: 10th Apr 2004

Location: Germany

Posted: 13th May 2016 08:47

Link

try this command
SetSpriteUVBorder(spr[i],1)

AGK (Steam) V2.0.18 : Windows 10 Pro 64 Bit : AMD (15.30.1025) Radeon R7 265 : Mac mini OS X 10.10 (Yosemite)

Back to top

Profile PM Email

CJB

Valued Member

20

Years of Service

User Offline

Joined: 10th Feb 2004

Location: Essex, UK

Posted: 13th May 2016 09:07

Link

My money is on filtering...

Yep! Fixed:

// Project: ImageUVTest 
 
// Window Properties
SetWindowTitle( "ImageUVTest" )
SetWindowSize( 1024, 768, 0 )
SetClearColor(255, 255, 255)
SetVirtualResolution( 512, 512 )
SetPrintColor(0, 0, 0)
SetPrintSize(18)
SetGenerateMipmaps(1)
 
 
// Image and Sprite Containers
img As Integer[2]
spr As Integer[2]
 
// Load Images
img[0] = LoadImage("tl.png")
img[1] = LoadImage("tc.png")
img[2] = LoadImage("tr.png")
 
for t = 0 to 2
	SetImageMagFilter(img[t],0)
next t

// Create Sprites
For i = 0 To 2
    spr[i] = CreateSprite(img[i])
Next i
 
// Base Position
posX = 128
posY = 128
 
// Position Sprites
SetSpritePosition(img[0], posX, posY)
SetSpritePosition(img[1], GetSpriteX(img[0]) + GetSpriteWidth(img[0]) + 5, posY)
SetSpritePosition(img[2], GetSpriteX(img[1]) + GetSpriteWidth(img[1]) + 5, posY)
 
// UV Mode Flag
UVMode As Integer
UVMode = 0
 
// Main Loop
Do
 
    // Change UV Wrap Mode on Pointer Press
    If GetPointerPressed()
 
        // Update UV Wrap Mode
        UVMode = 1 - UVMode
        For i = 0 To 2
            SetImageWrapU(img[i], UVMode)
            SetImageWrapV(img[i], UVMode)
            SetSpriteUVScale(spr[i], 1.0, 1.0)
        Next i
 
    Endif
     
    Print("Click/Touch to Change UV Mode")
    Print("UV Wrap Mode: " + Str(UVMode))
 
    Sync()
 
loop

+ Code Snippet

// Project: ImageUVTest 
 
// Window Properties
SetWindowTitle( "ImageUVTest" )
SetWindowSize( 1024, 768, 0 )
SetClearColor(255, 255, 255)
SetVirtualResolution( 512, 512 )
SetPrintColor(0, 0, 0)
SetPrintSize(18)
SetGenerateMipmaps(1)
 
 
// Image and Sprite Containers
img As Integer[2]
spr As Integer[2]
 
// Load Images
img[0] = LoadImage("tl.png")
img[1] = LoadImage("tc.png")
img[2] = LoadImage("tr.png")
 
for t = 0 to 2
	SetImageMagFilter(img[t],0)
next t

 
// Create Sprites
For i = 0 To 2
    spr[i] = CreateSprite(img[i])
Next i
 
// Base Position
posX = 128
posY = 128
 
// Position Sprites
SetSpritePosition(img[0], posX, posY)
SetSpritePosition(img[1], GetSpriteX(img[0]) + GetSpriteWidth(img[0]) + 5, posY)
SetSpritePosition(img[2], GetSpriteX(img[1]) + GetSpriteWidth(img[1]) + 5, posY)
 
// UV Mode Flag
UVMode As Integer
UVMode = 0
 
// Main Loop
Do
 
    // Change UV Wrap Mode on Pointer Press
    If GetPointerPressed()
 
        // Update UV Wrap Mode
        UVMode = 1 - UVMode
        For i = 0 To 2
            SetImageWrapU(img[i], UVMode)
            SetImageWrapV(img[i], UVMode)
            SetSpriteUVScale(spr[i], 1.0, 1.0)
        Next i
 
    Endif
     
    Print("Click/Touch to Change UV Mode")
    Print("UV Wrap Mode: " + Str(UVMode))
 
    Sync()
 
loop

V2 T1 (Mostly)
Phone Tap!
Uzmadesign

Back to top

Profile PM Email Website

xCept

21

Years of Service

User Offline

Joined: 15th Dec 2002

Location:

Posted: 13th May 2016 18:05

Link

Quote: " SetSpriteUVBorder(spr[i],1)"

Awesome, this looks to be the most reliable way of solving the border issue. Setting that to 1 made the borders go away in all the tests I performed, including when the sprites were scaled up or down and across different resolutions.

Quote: " My money is on filtering..."

I did play around with SetImageMagFilter() and SetImageMinFilter() and, although it does solve it in some instances like my example above, I have found that when the sprites are scaled to particular values these borders can still appear depending on the resolution and such. But perhaps a combination of this and SetSpriteUVBorder() are the safest bet.

Back to top

Profile PM Email Website

Paul Johnston

TGC Developer

21

Years of Service

User Offline

Joined: 16th Nov 2002

Location: United Kingdom

Posted: 14th May 2016 17:27

Link

Does SetSpriteSnap(ID,1) have any affect in this situation? Applying a border may hide the problem but I suspect it is caused by half pixels at the sprite's edge, which SetSpriteSnap attempts to avoid.

Back to top

Profile PM Email

xCept

21

Years of Service

User Offline

Joined: 15th Dec 2002

Location:

Posted: 14th May 2016 22:40

Link

@Paul, it sounds like that is the cause but SetSpriteSnap(id, 1) has no affect in resolving it. Attached is the code and media if you wish to reproduce it or experiment with the cause.

Attachments

Login to view attachments

Back to top

Profile PM Email Website

Paul Johnston

TGC Developer

21

Years of Service

User Offline

Joined: 16th Nov 2002

Location: United Kingdom

Posted: 14th May 2016 23:46

Link

Ah, thanks for the example, I misunderstood what was going on. When you set the image mode to repeat, the red from the right side is wrapping round next to the white pixels on the left, and the red pixels on the left are wrapping round to the white pixels on the right. That makes it very likely that the red will get sampled into the final pixel color. As others have suggested SetSpriteUVBorder is probably the best way to hide this.

Back to top

Profile PM Email

Sorry your browser is not supported!

AppGameKit Classic Chat / Bug when setting image UV Wrapping mode to repeat, a phantom border appears around edges

Attachments

Attachments