Recommend
1 
 Thumb up
 Hide
22 Posts

BoardGameGeek» Forums » Board Game Design » Board Game Design

Subject: NanDeck and transparency in images rss

Your Tags: Add tags
Popular Tags: [View All]
Filip W.
Sweden
Linköping
flag msg tools
designer
Euros are better with dice!
mbmbmbmbmb
Is there a way to get NanDeck to accept transparency in images? That is, if I've got two PNG-images with transparency in them and stack them on top of one another NanDeck translates the transparency as white/background and one images erases the other even though the non-transparent parts don't overlap.

Any solutions?
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
William Collins
United States
San Diego
California
flag msg tools
mbmbmbmbmb
Which version are you using?
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Lee Smith

Cedar Rapids
Iowa
msg tools
designer
mbmbmbmbmb
Haven't done it myself, but have you tried the alpha-channel setting?


IMAGE = "range", "image file", pos_x, pos_y, width, height, angle, "flag", alpha-channel, texture_width, texture_height


alpha-channel: level of transparency of image, from 0 (full transparent) to 100 (full solid). If omitted, the level is set to 100 (full solid)

And it looks like "flag" affects it as well:

"flag": in this parameter you can specify a special behavior for images, possible values are:

T = Transparent
A = Antialiasing
P = Proportional
G = Grayscale
X = Texture

If the "T" flag is used, the transparent color is assumed to be the first pixel's (top left pixel).

2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
SawHat wrote:
If the "T" flag is used, the transparent color is assumed to be the first pixel's (top left pixel).


This is the only method I know for nanDECK. I've had to edit the top-left pixel on some images to get it to work.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Andrea Nini
Italy
Modena
flag msg tools
Best. Game. Ever.
badge
I wrote nanDECK, BGG2nanDECK & BGG2Graph.
mbmbmbmbmb
Actually, the native transparency channel of png images isn't accounted for when loaded. You can use two approach:

1) The "T" flag treats one color as transparent. The standard color is picked from top-left pixel, but you can change this behaviour with a CHROMAKEY directive before the IMAGE, for example:

CHROMAKEY=TOPLEFT
CHROMAKEY=TOPRIGHT
CHROMAKEY=BOTTOMLEFT
CHROMAKEY=BOTTOMRIGHT
CHROMAKEY=#FFFFFF (or another color)

In this post you can see an example of CHROMAKEY used to load a mask (a hollow circle in a white rectangle) over an image:
http://www.boardgamegeek.com/article/3842766#3842766

2) You can use the alpha-channel parameter to set a % of transparency for the entire image, and, by the way, you can also use a transparency gradient, for example:

100@90 (linear, starting from 100%, left to right)
50@0 (radial, starting from 50%, from center)

These methods work with all type of images (bmp, jpg, gif, png), the 2nd method works also with the TEXT directive.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Brian Sturk
United States
Hudson
New Hampshire
flag msg tools
mbmbmbmbmb
This method works for me (I'm intentionally making the transparent parts of my image a fixed color). However, I'm noticing that where the boundary ends there is a 1 pixel line of the color I've asked to be transparent. I'll try and post a pic.

Any ideas why this might be happening?
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Brian Sturk
United States
Hudson
New Hampshire
flag msg tools
mbmbmbmbmb
Here's an example of what I'm referring to. I fill the areas I want to be transparent with pure green (#00FF00). There ends up being a 1 pixel think line at the edge of the color #00FF00 for some reason.

1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Josh Taylor
United States
flag msg tools
mbmbmbmb
What file format and image software are you using? (I don't remember what nandeck accepts.) I can think of two reasons that might happen.

First, if you're using JPG, it doesn't save things precisely, so those pixels wouldn't necessarily be the right color any more.

Second, if you're using layers when making the images, the layers above the green layer may be slightly blurry, again causing those pixels to be not exactly the right color.

Just my thoughts though.
2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Brian Sturk
United States
Hudson
New Hampshire
flag msg tools
mbmbmbmbmb
MagiMaster wrote:
What file format and image software are you using? (I don't remember what nandeck accepts.) I can think of two reasons that might happen.

First, if you're using JPG, it doesn't save things precisely, so those pixels wouldn't necessarily be the right color any more.

Second, if you're using layers when making the images, the layers above the green layer may be slightly blurry, again causing those pixels to be not exactly the right color.

Just my thoughts though.


Thanks for the ideas... I'm not using layers at all and I believe I've seen this with both jpg and png, I'll double check that though.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Josh Taylor
United States
flag msg tools
mbmbmbmb
If you saved it as a JPG and tried to convert that to a PNG, the damage would already be done. You can open it up in an image editor and use the color picker tool to sample those border pixels and make sure they are exactly #00FF00, or (0, 255, 0) depending on the software you use.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Andrea Nini
Italy
Modena
flag msg tools
Best. Game. Ever.
badge
I wrote nanDECK, BGG2nanDECK & BGG2Graph.
mbmbmbmbmb
The problem may be this...

Let suppose we have a large image, a red disk on a green background 10 x 10 cm at 300 dpi = 1181 x 1181 pixel:



If I load it into nanDECK, paste it in a smaller card (4 x 4 cm) with the T flag, it treats the green as transparent (top-left pixel):

cardsize=4,4
image=1,c:\test.bmp,0,0,100%,100%,0,T


Result:



No problem. But if before loading into nanDECK, I resize the larger image into a smaller one, 200 x 200 pixel, using a dithering algorythm (Lanczos, for example) the border will be composed with red/green dithered pixels:



The same (dithered) result can be obtained if you save a bmp/png/gif image in jpg format.

When I use the "dithered" image in the same script as above, the result will be that:



If you zoom it, you'll notice a green border (not really #00FF00, but a green/red color).

Solutions? First, don't use jpg images (or didn't resize them).

And some time ago I was thinking about reading the alpha channel in png images, or introducing a range color for chromakey directive (a threshold, but I must find a valid algorithm for determining two colors' distance). Stay tuned...
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Brian Sturk
United States
Hudson
New Hampshire
flag msg tools
mbmbmbmbmb
MagiMaster wrote:
If you saved it as a JPG and tried to convert that to a PNG, the damage would already be done. You can open it up in an image editor and use the color picker tool to sample those border pixels and make sure they are exactly #00FF00, or (0, 255, 0) depending on the software you use.


I did that earlier tonight. Tried 3 different image formats (jpg, png, and bmp) and 2 different image editors (PSP and Gimp). I zoomed into the ext rat line where the transition happens and the pixels are 0,255,0. It's strange that it happens all along the border where the transition happened, on both sides. All 3 formats showed the same behavior.

thanks for the ideas,
I'm going to keep tinkering
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Brian Sturk
United States
Hudson
New Hampshire
flag msg tools
mbmbmbmbmb
n_and wrote:
The problem may be this...

Let suppose we have a large image, a red disk on a green background 10 x 10 cm at 300 dpi = 1181 x 1181 pixel:



If I load it into nanDECK, paste it in a smaller card (4 x 4 cm) with the T flag, it treats the green as transparent (top-left pixel):

cardsize=4,4
image=1,c:\test.bmp,0,0,100%,100%,0,T


Result:



No problem. But if before loading into nanDECK, I resize the larger image into a smaller one, 200 x 200 pixel, using a dithering algorythm (Lanczos, for example) the border will be composed with red/green dithered pixels:



The same (dithered) result can be obtained if you save a bmp/png/gif image in jpg format.

When I use the "dithered" image in the same script as above, the result will be that:



If you zoom it, you'll notice a green border (not really #00FF00, but a green/red color).

Solutions? First, don't use jpg images (or didn't resize them).

And some time ago I was thinking about reading the alpha channel in png images, or introducing a range color for chromakey directive (a threshold, but I must find a valid algorithm for determining two colors' distance). Stay tuned...


Great explanation, thanks. I had been running into similar type issues when doing "fills" when the image was not flattened (i.e. there was true transparency). I've since gone to a flattened file since I cannot use png transparency. I just fill in the transparent area(s) with the green.

Ok, I'll stay away from jpgs.

However, I did check the border pixels, and they are 0,255,0. I must be doing something wrong in my nandeck script or something.

Any other ideas for things to try?
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Andrea Nini
Italy
Modena
flag msg tools
Best. Game. Ever.
badge
I wrote nanDECK, BGG2nanDECK & BGG2Graph.
mbmbmbmbmb
telengard wrote:
Any other ideas for things to try?

Can you send me the image you're using?
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Brian Sturk
United States
Hudson
New Hampshire
flag msg tools
mbmbmbmbmb
n_and wrote:
telengard wrote:
Any other ideas for things to try?

Can you send me the image you're using?


I've uploaded it, and can also email it if you'd like, this was a "flattened" png:

 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Josh Taylor
United States
flag msg tools
mbmbmbmb
Your green color is #01FF00. I don't know why that'd cause a border though.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Brian Sturk
United States
Hudson
New Hampshire
flag msg tools
mbmbmbmbmb
MagiMaster wrote:
Your green color is #01FF00. I don't know why that'd cause a border though.


Interesting, what program are you using to determine that? I've used the color picker in both Gimp and PSP and it shows up as #00FF00 (on the border that is showing up). I'm going to have to go spot check it a little better.

EDIT: Went and checked again, couldn't find any pixels w/ #01FF00. So confused. soblue
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Josh Taylor
United States
flag msg tools
mbmbmbmb
Huh. That was using Paint.net, though it could just be that I loaded the file from the browser.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Brian Sturk
United States
Hudson
New Hampshire
flag msg tools
mbmbmbmbmb
MagiMaster wrote:
Huh. That was using Paint.net, though it could just be that I loaded the file from the browser.


Possibly, but I still think the issue is on my end, I just can't figure it out. I'm hoping Andrea has some ideas of things to try out after looking at the image.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Andrea Nini
Italy
Modena
flag msg tools
Best. Game. Ever.
badge
I wrote nanDECK, BGG2nanDECK & BGG2Graph.
mbmbmbmbmb
telengard wrote:
I'm hoping Andrea has some ideas of things to try out after looking at the image.

Sorry, but it's a bug: with the first writing of the IMAGE directive (some years ago) I've added a "blending", so a low-res imaged didn't appear scaled in the resulting card.

But now, thanks to your example, I've realized that a transparent image is scaled (and blended) before being mixed with the background (and then the green pixels are blended before being rendered as transparent).

I've removed the blending with transparent images, and you can test the result with this beta version:
http://www.nand.it/nandeck/nandeck1_13a_beta8.zip

Edit: Please let me know if it works for you.
1 
 Thumb up
0.50
 tip
 Hide
  • [+] Dice rolls
Brian Sturk
United States
Hudson
New Hampshire
flag msg tools
mbmbmbmbmb
n_and wrote:
telengard wrote:
I'm hoping Andrea has some ideas of things to try out after looking at the image.

Sorry, but it's a bug: with the first writing of the IMAGE directive (some years ago) I've added a "blending", so a low-res imaged didn't appear scaled in the resulting card.

But now, thanks to your example, I've realized that a transparent image is scaled (and blended) before being mixed with the background (and then the green pixels are blended before being rendered as transparent).

I've removed the blending with transparent images, and you can test the result with this beta version:
http://www.nand.it/nandeck/nandeck1_13a_beta8.zip

Edit: Please let me know if it works for you.


No problem! Thanks for tracking it down. I'll try this out tonight.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Brian Sturk
United States
Hudson
New Hampshire
flag msg tools
mbmbmbmbmb
Just a note to say that fixed the issue! I also went back and re-rendered some other cards I had made and it seems in some cases (depending on what I was doing) the blending functionality made things look better. Any chance it could be an option? I can always keep the older exe around I guess.

thanks again for you help!
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Front Page | Welcome | Contact | Privacy Policy | Terms of Service | Advertise | Support BGG | Feeds RSS
Geekdo, BoardGameGeek, the Geekdo logo, and the BoardGameGeek logo are trademarks of BoardGameGeek, LLC.