Update

Previous topic - Next topic

Kitty Hello

It's inside your PNG!!!
Here's the RGB information for that image with alpha forced to 1.0:


So, when you create images, please be sure to specify the transparent colour's RGB values as well. In Corel Draw that's:

Wampus

You're totally right! Thanks so much.  :)

Photoshop sucks when it comes to this. I couldn't find any suggestions that worked when it comes to changing the background colour for transparency. I had to use the free IrfanView to do it. After that I saw my grey edges go away.

Cheers. How can I buy you a beer?  :booze:

MrTAToad

Yes - that was the problem...  :nw:

Obviously the artist was using it as a mask, which my PhotoImpact didn't detect/cope with...

Normally I use BMP files and then convert to PNG, but I didn't this time as I had assumed they were just normal graphics...  :whistle:

Wampus

Oh! But there is still a difference in how the edges are handled. Gernot, have a look at this:-



You can see that in the left image there is a black edge. The background PNG colour was set to black so that is why it is there and GLBasic is anti-aliasing to that colour. However, in the right image, which is output from GLBasic version 10.118, the edge is antialiased to transparency. The older version is more visually preferable since it blends in right angle edges with a smoother finish.

The same texture atlas was used for both images and that image had black as the background PNG colour. The only difference was the version of GLBasic used to compile.

I have attached the routine I used to get this output to this post. If you compile with difference versions of GLBasic, 10.118 and later, you should see the difference.

You see, I'm not crazy. There really was a difference :)

[attachment deleted by admin]

MrTAToad

#124
Thats odd - my Windows mine are anti-aliased to a white border.  Anti-aliasing to the transparency would be better though as most of the time you dont want borders (it usually doesn't look good).  However using ALPHAMODE -1.0 does deal with that...

By the way, anti-aliasing on my android machine decreases the FPS by half :)

[attachment deleted by admin]

Crivens

QuoteYou can see that in the left image there is a black edge
Are you using DRAWSPRITE or ROTOZOOMSPRITE/STRETCHSPRITE? I noticed in the latest version DRAWSPRITE does not have a black outline (unless you give it one obviously) but ROTOZOOMSPRITE/STRETCHSPRITE does. At least on a PC.

I use PSP9, mainly because I bought it for like £10 years ago, but also because PSP8 cocks up the transparency and anything newer than PSP9 is bloatwaretastic.

Cheers
Current fave quote: Cause you like musicians and I like people with boobs.

MrTAToad

I think using ALPHAMODE -1.0 should sort it...

I do see that ALPMODE with a value > 0.0 works fine now :)

Wampus

Quote from: MrTAToad on 2011-Nov-30
By the way, anti-aliasing on my android machine decreases the FPS by half :)

Jeez. So, turning off smoothshading would make a big performance difference for your Android device then. Hmm.

I guess its worth allowing smoothshading to be turned off by a user for a performance boost, if they needed it.

Quote from: Crivens on 2011-Nov-30
Are you using DRAWSPRITE or ROTOZOOMSPRITE/STRETCHSPRITE? I noticed in the latest version DRAWSPRITE does not have a black outline (unless you give it one obviously) but ROTOZOOMSPRITE/STRETCHSPRITE does. At least on a PC.

*nods* Anything involving rotation or stretching where the original sprite isn't a 1:1 copy of its source image will have the anti-aliasing coloured edges. It doesn't matter if its ROTOZOOMSPRITE/STRETCHSPRITE or POLYVECTOR. The same effect is visible for both.

Crivens

Actually I noticed using ROTOZOOMSPRITE/STRETCHSPRITE without any changes (ie. so sprite is outputted 1:1 identical to the original) also causes a black outline.

Cheers
Current fave quote: Cause you like musicians and I like people with boobs.

MrTAToad

It should be noted that my  Android phone is a generic Chinese piece of rubbish - it is slow all the time :)

ampos

#130
I think the problem is really because you are using sprites with magenta as background/transparent color.

Instead, use PNGs files with alpha channel. It is easier as it sounds. There is 2 methods:

1.- If you have layers in PSD, and the background is magenta, just disable it. You will get your sprite over the checker-background. Then, save as PNG. Photoshop will merge all visible layers as a single layer with alpha mask.

2.- If you have the image yet as a single image/layer, just select menu "selection/mask" (sorry, my PS is in spanish) -> color range -> tolerance 0 -> pick on magenta color -> OK. Then, reverse mask (mask -> reverse). Now, layer -> new layer -> using copy.  You will end with a new layer that has your picture. Disable the background layer and save as png.

The best is the first method, as you have the borders aliased  and the layer effects (as shadows) are saves also as part of the image. Also, you can have different parts of your image as semi-transparents, that is great with alphamode -1.

Here is a sample image I have.

This works great with font pngs, as you can have your fonts with real smooths borders.




[attachment deleted by admin]
check my web and/or my blog :D
http://diniplay.blogspot.com (devblog)
http://www.ampostata.org
http://ampostata.blogspot.com
I own PC-Win, MacBook 13", iPhone 3G/3GS/4G and iPAC-WinCE

Wampus

Nope Ampos, not in this case. The sprite background was black. I drew a magenta rectangle as a background as a test to see if the edge colour would blend. It didn't. Check the code and see the difference from GLBasic version 10.118 and upwards.

MrTAToad

This is a blow-up from your test program - as far as I can see it is alpha blending to transparency.

[attachment deleted by admin]

Wampus

No, there is a white/grey outline. It is not anti-aliasing to transparency. Look carefully.

When the DRAWSPRITE (or similar) functions are being used there is a white/grey outline because I didn't change the background alpha colour to black with the images used for that. The POLYSPRITE textureatlas has a black outline.

Qube

#134
Here you go, a working of example of the issue in action (download the two attached files and place them in the same folder as the code).

If you look carefully you will see the outline of the sprite is not right as it rotates (the square part gets lighted edges). When it passes the rotating cube you can see the effect get better and worse. Setting smoothshading to false will correct this but bring in jaggies.

If you run this on 10.118 it will run perfect. Run it on a version greater than 10.118 and it is not.

Code (glbasic) Select

SETSCREEN 1024,768,1
CLEARSCREEN -1

LOADBMP "../background.png"
LOADSPRITE "../testSprite.png", 1
CreateCube(2, 30, RGB(200,200,0))

LOCAL phi% = 0
LOCAL x#, y#, z%, sx#, sy#, sz#
LOCAL sx1#, sx2#, sx3#, sy1#, sy2#, sy3#, sw%, sh%
LOCAL x1%, y1%, x2%, y2%, x3%, y3%, x4%, y4%, xcos#, ysin#

x = 0
y = 768 / 2
sw = 32
sh = 32

WHILE TRUE
X_MAKE3D 1, 2500, 45
X_CAMERA 0,0,120, 0,0,0
X_CULLMODE 1
X_AMBIENT_LT 0, RGB(255,255,255)
X_SPOT_LT 1, RGB(80,80,80), 0, 1, -1, 0, -1, 1, 180

X_MOVEMENT 0, 0, 0
X_ROTATION phi, 0, 1, 1
X_DRAWOBJ 2, 0

INC phi,1

X_MAKE2D
SMOOTHSHADING TRUE
ALPHAMODE -1.0
DRAWSPRITE 1, 50, 50

INC x, .5
IF x > 1023 THEN x = 0

STARTPOLY 1, 2
x1 = x
y1 = y
x2 = x
y2 = (y + sh)
x3 = (x + sw)
y3 = y
x4 = (x + sw)
y4 = (y + sh)

xcos = COS(phi / 4)
ysin = SIN(phi / 4)

x1 = x - xcos * sw - ysin * sh
y1 = y - xcos * sh + ysin * sw

x2 = x - xcos * sw + ysin * sh
y2 = y + xcos * sh + ysin * sw

x3 = x + xcos * sw - ysin * sh
y3 = y - xcos * sh - ysin * sw

x4 = x + xcos * sw + ysin * sh
y4 = y + xcos * sh - ysin * sw

POLYVECTOR x1, y1, 0, 0
POLYVECTOR x2, y2, 0, 0 + 64
POLYVECTOR x3, y3, 0 + 64, 0
POLYVECTOR x4, y4, 0 + 64, 0 + 64
POLYNEWSTRIP
ENDPOLY

SHOWSCREEN
WEND

FUNCTION CreateCube: num, sz, col
X_AUTONORMALS 1
sz = sz / 2

X_OBJSTART num
// Front Face
X_OBJADDVERTEX  sz, -sz,  sz, 1, 0, col
X_OBJADDVERTEX -sz, -sz,  sz, 0, 0, col
X_OBJADDVERTEX  sz,  sz,  sz, 1, 1, col
X_OBJADDVERTEX -sz,  sz,  sz, 0, 1, col
X_OBJNEWGROUP
// Back Face
X_OBJADDVERTEX -sz,  sz, -sz, 1, 1, col
X_OBJADDVERTEX -sz, -sz, -sz, 1, 0, col
X_OBJADDVERTEX  sz,  sz, -sz, 0, 1, col
X_OBJADDVERTEX  sz, -sz, -sz, 0, 0, col
X_OBJNEWGROUP
// Top Face
X_OBJADDVERTEX -sz,  sz,  sz, 0, 0, col
X_OBJADDVERTEX -sz,  sz, -sz, 0, 1, col
X_OBJADDVERTEX  sz,  sz,  sz, 1, 0, col
X_OBJADDVERTEX  sz,  sz, -sz, 1, 1, col
X_OBJNEWGROUP
// Bottom Face
X_OBJADDVERTEX  sz, -sz, -sz, 0, 1, col
X_OBJADDVERTEX -sz, -sz, -sz, 1, 1, col
X_OBJADDVERTEX  sz, -sz,  sz, 0, 0, col
X_OBJADDVERTEX -sz, -sz,  sz, 1, 0, col
X_OBJNEWGROUP
// Right face
X_OBJADDVERTEX  sz,  sz, -sz, 1, 1, col
X_OBJADDVERTEX  sz, -sz, -sz, 1, 0, col
X_OBJADDVERTEX  sz,  sz,  sz, 0, 1, col
X_OBJADDVERTEX  sz, -sz,  sz, 0, 0, col
X_OBJNEWGROUP
// Left Face
X_OBJADDVERTEX -sz, -sz,  sz, 1, 0, col
X_OBJADDVERTEX -sz, -sz, -sz, 0, 0, col
X_OBJADDVERTEX -sz,  sz,  sz, 1, 1, col
X_OBJADDVERTEX -sz,  sz, -sz, 0, 1, col
X_OBJNEWGROUP
X_OBJEND
ENDFUNCTION


[attachment deleted by admin]