Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / Glitches around sprites - help!

Author
Message
Jambo B
14
Years of Service
User Offline
Joined: 17th Sep 2009
Location: The Pit
Posted: 1st Mar 2015 14:36
Hello all,

Try as I might, I cannot get rid of the glitches which appear around pasted sprites, and it’s driving me INSANE! I am half the man I was.

I’m writing a piece of code which produces a box of any size by building it up from blocks.

The code works, but as you can see in this pic:



There are glitches which appear around some of the pasted sprites – glitches which are not part of the image in the atlas. And to confound me more, these appear when the app is displayed at different sizes, and not others.

The app above looks fine in windowed mode, but if you click maximise, or set it to full screen, the glitches appear. Sometimes on the left or right-hand side, too.

I’ve tried messing with loads of different commands, and I am getting balder by the second. Would anyone mind having a look at this for me to see what I’m doing wrong? Media is attached.




Thanks in advance,

James

Attachments

Login to view attachments
Jambo B
14
Years of Service
User Offline
Joined: 17th Sep 2009
Location: The Pit
Posted: 1st Mar 2015 14:38
You can see my desperate and futile attempts to get rid of the glitches using SetSpriteUVBorder, SetImageMagFilter... nothing works!

- J
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 1st Mar 2015 20:53
Firstly, nice code, this is something on my to-do list!

I think the issue may be the image size. The corner pieces are only 30 pixels square. Are you scaling them up too much, or by an obscure percentage?

Quidquid latine dictum sit, altum sonatur
Jambo B
14
Years of Service
User Offline
Joined: 17th Sep 2009
Location: The Pit
Posted: 1st Mar 2015 22:18
Hi BatVink!

Thanks for the reply - and the complement

I'm pretty sure that all the blocks are 32x32 - that's what they are listed as in the atlas subimages file anyway.

I wonder whether AppGameKit is doing some scaling up behind the scenes when the window is maximised or the app in full screen, and causing weird artifacts.

Could this an AppGameKit issue and not mine?

James
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 2nd Mar 2015 09:50
My 30px was just a rough estimate

I would suggest trying them at 64x64 and see if it makes a difference. It's always better to have images too large than too small.

Quidquid latine dictum sit, altum sonatur
Jambo B
14
Years of Service
User Offline
Joined: 17th Sep 2009
Location: The Pit
Posted: 2nd Mar 2015 19:41
A good thought, BatVink, but just tried it and the effect is still the same!

Thanks,

James
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 3rd Mar 2015 11:37
This is not good, my requirements are the same as yours.
I won't be looking at it for a while yet, but I'll certainly report back here when I do.

Quidquid latine dictum sit, altum sonatur
Conjured Entertainment
AGK Developer
18
Years of Service
User Offline
Joined: 12th Sep 2005
Location: Nirvana
Posted: 3rd Mar 2015 14:17 Edited at: 3rd Mar 2015 14:19
I notice use are using DrawSprite()

Quote: "
DrawSprite
Description

Immediately draws the sprite to the backbuffer at its current position, size, and rotation. This is useful if you want to setup a scene for GetImage to capture. Remember to use ClearScreen to clear any of your own drawing before calling Sync or Render for the actual frame otherwise your drawing may appear twice in the final render. "


Shouldn't you be using the ClearScreen before the Sync() call???


If that doesn't work then...
Have you tried using separate images instead of using a sprite sheet???

I am just curious as to whether it may be happening when slicing the images.
I think the ClearScreen may be the answer though, as a double image may cause an unwanted border glitch.


Coding things my way since 1981 -- Currently using AppGameKit V2 Tier 1
Mike Archer
9
Years of Service
User Offline
Joined: 19th Feb 2015
Location: Wales
Posted: 3rd Mar 2015 19:01 Edited at: 4th Mar 2015 01:26
Quote: "// Have we pasted the last column?
if (fXPosToPaste# >= fBoxWidth#)"


The code here (& 3 other places) means you are drawing beyond the bounds of the image you are creating, changing this will stop the horizontal / vertical lines at the picture edge. I haven't found what is causing the curved bit on the top left though.

EDIT: I think I should add more information here to make it 100% clear what I am saying...

When you create an image, the image size will be a power of 2 (1,2,4,8,16,32,64,128,256,512,1024,2048...), so if you create an image of a different size than that, a larger image will be created. So, for example if you create an image that is 1000x500, then the actual image created will be 1024x512 and a section that is 1000x500 will be used from that image whenever that image is drawn, this works okay unless you accidentally draw beyond the bounds of your image and then scale the image to a different size, at that point any data that exists in the larger image that was created will possibly show in the edges of the re-scaled image.
Jambo B
14
Years of Service
User Offline
Joined: 17th Sep 2009
Location: The Pit
Posted: 3rd Mar 2015 19:07
@Conjured Entertainment: Thanks for the suggestions! Tried the clear screen thing and saving the images for the box separately rather than using the atlas. Neither worked! :-( Same effect.

@BatVink: seems quite a large problem to me - anyone trying to build up images from a series of other ones is going to run into this problem.

Does anyone have any other thoughts?

Thanks,

James
Mike Archer
9
Years of Service
User Offline
Joined: 19th Feb 2015
Location: Wales
Posted: 3rd Mar 2015 20:20
The glitches on the curved pieces are being caused by the anti-aliasing on the original image, we are loosing the transparency when it pasted into the rendered image. If you use SetClearColor() before the ClearScreen(), you will see the colour of the glitched pixels change accordingly.
blastar
10
Years of Service
User Offline
Joined: 4th Nov 2013
Location:
Posted: 4th Mar 2015 01:57 Edited at: 4th Mar 2015 02:14
your images needs a special fix, it's not an AGK-bug.
Jambo B
14
Years of Service
User Offline
Joined: 17th Sep 2009
Location: The Pit
Posted: 4th Mar 2015 18:48
Thanks for your responses.

@Mike Archer - I think you're right. But why would the transparency be affected when pasted onto a rendered image? I'm using ClearScreen() before the paste, which does produce a completely transparent image for me to render onto (I've checked). But when the sprites are pasted, their transparent areas seem to glitch. I might be wrong, but I didn't think I needed to use SetClearColor() because the images were pngs with an alpha channel anyway.

@blastar - What do you think could be wrong with the images? You might be right! Although I've produced them in the same way as other images which don't glitch - they're just pngs with an alpha channel.

Cheers again,

James
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 4th Mar 2015 19:07
I wonder if it is in any way connected to an old problem I had...

http://forum.thegamecreators.com/?m=forum_view&t=196575&b=41

Quidquid latine dictum sit, altum sonatur
Mike Archer
9
Years of Service
User Offline
Joined: 19th Feb 2015
Location: Wales
Posted: 5th Mar 2015 16:26
Sorry for the confusion, I wasn't suggesting using SetClearColor() would fix the problem, but that it would highlight what was going on by adding it in and changing the values a few times.

I'm pretty sure ClearScreen() will produce a black screen, not a transparent screen. You can use SetClearColor() to change the colour and the corners will still be transparent, as the transparency is being copied into the alpha channel of the rendered image when it is 0. However, changing the colour will affect the glitched pixels, changing their colour also. So it looks to me like the pixels with an alpha value that isn't 0 or 255 are being merged with what is already there in the rendered image.
Van B
Moderator
21
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 5th Mar 2015 17:06
I've seen issues like this with weird alpha transparency data - as you can see, the glitch is around a corner and along the bottom, it's not like there is a distinct border around the sprite, so I don't think messing with UV coordinates would do nothing to help.

Personally, I would load the image into PSP9 and split the channels to show RGB and A separately, then I'd set the actual alpha colour to match that peach colour, and adjust the alpha layer to be exact - like no rogue lines, no rogue >0 alpha pixels.

One issue that causes this is that completely transparent alpha pixels still have colour data, and often you have to set this colour data to suit - like making it the same colour as a background for example - otherwise you might be trying to display partially transparent pixels and blending those irregular colours, which is why I think the dark lines are showing - those are alpha transparent pixels that (maybe) black is being blended into. Having an art package that can break channels apart is very handy for getting rid.

The pro's out there simply don't use alpha transparency in the same way as we do. Like, they'd keep the alpha transparency as a distinctly separate layer. For example, in Farcry3/4 the foliage textures are mostly solid green with the alpha layer being stored as a separate image, or layer. This means that the edges of foliage is still green, and so don't end up with the same artifacts that we often have to deal with.... kinda a weird question to ask, but what colour do you need those invisible pixels to be!

If you like, you can email me the original PNG and I'll check out the alpha channel for you.

I am the one who knocks...
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 5th Mar 2015 18:46
Quote: "transparent alpha pixels still have colour data, and often you have to set this colour data to suit"


Good point. If the boxes and borders are always coloured in a similar fashion as above (different shades of the same colour), then it might be better to use greyscale for the base image, and then colour it once the image is built (SetSpriteColor()). Then you can set the alpha layer to white and possibly eliminate the artefacts.

Quidquid latine dictum sit, altum sonatur
Jambo B
14
Years of Service
User Offline
Joined: 17th Sep 2009
Location: The Pit
Posted: 5th Mar 2015 18:51
Mike and Van B - many thanks for your helpful posts.

I'm attaching the pngs to this image - I'd really appreciate you having a look, Van B. What you're saying makes sense. I use PSP X3 for my graphics needs, and tried highlighting the glitchy transparent bits and deleting them, but I must admit to being pretty useless with gfx!

I've attached the png which I'm using as an atlas image, and two which I used when trying to load the images in separately.

Thanks again,

James

Attachments

Login to view attachments
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 5th Mar 2015 20:55
Attached is a version with the colour of the transparent pixels set to the same as the box borders (I hope). I did this by creating a layer of the same colour, then setting to to 100% transparent. See if it makes a difference.

My software wouldn't tell me the current colour.

Quidquid latine dictum sit, altum sonatur

Attachments

Login to view attachments
Jambo B
14
Years of Service
User Offline
Joined: 17th Sep 2009
Location: The Pit
Posted: 5th Mar 2015 22:35
Hi BatVink,

Tried your image with the current code (as in the first post) and the background did become transparent, but the glitches still remain:



The glitches around the corners seem less pronounced, though.

Cheers,

James
Jambo B
14
Years of Service
User Offline
Joined: 17th Sep 2009
Location: The Pit
Posted: 5th Mar 2015 22:37
... although just noticed that there now seems to be a grey bar down the right-hand side of the box! What's that all about?

- J
Mike Archer
9
Years of Service
User Offline
Joined: 19th Feb 2015
Location: Wales
Posted: 5th Mar 2015 23:11
I made a post on 3rd Mar 2015 18:01 about that, I think you may have missed due to a delay in my post appearing.
Jambo B
14
Years of Service
User Offline
Joined: 17th Sep 2009
Location: The Pit
Posted: 5th Mar 2015 23:30
Hi Mike,

Is this the post you were talking about:

Quote: "The code here (& 3 other places) means you are drawing beyond the bounds of the image you are creating, changing this will stop the horizontal / vertical lines at the picture edge. I haven't found what is causing the curved bit on the top left though."


If so, then yes - I did miss it, sorry! I see your point and will try your suggestion tomorrow then report back.

As you say, the curved bit along the edges is also perplexing!

Thanks for the reply,

James
Zolarius
16
Years of Service
User Offline
Joined: 8th Jul 2007
Location: Vancouver, WA USA
Posted: 6th Mar 2015 07:49
Hey Jambo,

New to AppGameKit - Didn't master DBPro, But pretty good at graphics.
I cleaned up your pictures by removing all of the anti-Alaising
around the outside edges. On the rounded 9 square patch I made
sure it was exactly 32*32 not including the space between. I did
not check the rectangle for accuracy, but did clean its edges too.

Hope this helps your problem. I am currently trying to learn how
to cut up 1 image into many sprites. if you know how or can direct
me to an example that would be great.

Zolarius

Full time contractor -- Struggling programmer since 1985!
Many ideas and no completions yet! Hoping AppGameKit will solve that for me. Thanks TGC and members for your support.

Attachments

Login to view attachments
blastar
10
Years of Service
User Offline
Joined: 4th Nov 2013
Location:
Posted: 6th Mar 2015 15:09 Edited at: 6th Mar 2015 16:18
Jambo B,
there are two problems:

1. download this fixed image (round edges glitch)
2. change your code (straight lines glitch)

fix:


I hope this solves your problems.

Attachments

Login to view attachments
Jambo B
14
Years of Service
User Offline
Joined: 17th Sep 2009
Location: The Pit
Posted: 6th Mar 2015 18:13


It works!!!

@Zolarius: Thanks for looking at the image. The way to cut them up is to use an image 'atlas' - an image which contains all the graphics, and a subimages text file that goes with it. The subimages file contains the co-ordinates of all the individual images in the atlas. I'm happy for you to use/modify/adjust my code from the first post to start you off.

@blastar: Cheers VERY much! I owe you a pint. Just for reference, what was wrong with the round edges on my image? Why did they glitch like that, and how did you fix them? This information will help me keep what little hair I have next time. I see what you did with the UV, too - thanks.

James
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 6th Mar 2015 18:54
So the rule is, no anti-aliasing around the images?

On white or other light colours it looks ok. On black, it looks a little pixelated - although I understand the reasons why.

Quidquid latine dictum sit, altum sonatur
Jambo B
14
Years of Service
User Offline
Joined: 17th Sep 2009
Location: The Pit
Posted: 6th Mar 2015 19:00 Edited at: 6th Mar 2015 19:24
Well the outside of blastar's fixed images still look anti-aliased and partially transparent:



That's a zoom-in of the images that now don't have the glitch around the rounded corners.

It seems that blastar has performed some electrickery on them to make them work and not glitch!

- J
blastar
10
Years of Service
User Offline
Joined: 4th Nov 2013
Location:
Posted: 6th Mar 2015 20:12 Edited at: 13th Mar 2015 12:58
it's magic and a big secret, i may not share because of a NDA!
just kidding..

it's because of the non-visible pixels (100% transparent) - most programs save these pixels with color black, if this image is stretched these (black) pixels interpolates with visible pixels and cause this (grey) glitch - it's better to fill this pixel with a matching color.

i wrote a small utility to do this.
Jambo B
14
Years of Service
User Offline
Joined: 17th Sep 2009
Location: The Pit
Posted: 6th Mar 2015 20:25
Hi blastar.

Great utility.

I've just run my original image through your program and it outputted (if that's a word) a fixed file which works as you described.

This will save me hours of messing around. BatVink - you should try this out.

Thanks again

James
blastar
10
Years of Service
User Offline
Joined: 4th Nov 2013
Location:
Posted: 6th Mar 2015 20:45 Edited at: 13th Mar 2015 12:57
i wrote a lot of (private) utilities, maybe you like that too.

UO ImageJoiner: it\'s like the AppGameKit one but enhanced with builtin halo-fix
UO ImageSplit: splits an atlas image into single images, also with builtin halo-fix
Jambo B
14
Years of Service
User Offline
Joined: 17th Sep 2009
Location: The Pit
Posted: 6th Mar 2015 20:58
Thanks blastar.

I think your utilities should be included on the AppGameKit Community Toolkit thread:

http://forum.thegamecreators.com/?m=forum_view&t=212975&b=41

I'm sure there are lots of coders here who would find them very useful.

Incidentally, I've just run my text sprite-sheet through your program and now my white text appears beautifully clear on full screen (previously, it had some grey edges which I thought I'd have to live with).

Cheers!

James

p.s. If anyone here wants to use my 'box maker' code from my first post, you are welcome to. This seems like a proper community effort!
BatVink
Moderator
21
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 7th Mar 2015 12:04
Good result! Downloaded the Halo Fix, many thanks for sharing
Will be checking out the box maker code, thanks for sharing

Quidquid latine dictum sit, altum sonatur

Login to post a reply

Server time is: 2024-04-20 01:52:14
Your offset time is: 2024-04-20 01:52:14