How do I make a semi-transparent piece with a gradual blend?

Is it possible to create a piece that is semi-transparent? Is it possible for that transparency to gradually blend from fully transparent at the bottom to fully opaque at the top?

I’m trying to make a close air support counter that will show the combat factors of the unit it is stacked on top of (attacking). What I have now is on the left. What I want is on the right. (ZunTzu)

I know I can use the Non-Rectangular trait to block out the whole bottom, but I’d rather have the gradual blend. I tried using a gradient fill but Vassal showed the shape as all black, which would give me no transparency at all.

Is this possible with Vassal?

Frank

You have to make the counter how you wish it to look (Transparency) as a PNG in whatever graphics program you use.then load it as a vassal counter.

1 Like

Hi Frank,

First, make sure you use PNGs for your images - or possibly SVGs but that can be harder to get right. Then, make sure the PNGs truly does have transparency (or an Alpha channel). if the PNG isn’t exactly as the Java rendered expects it to be, it can cause weird issues.

It can be, for example, that you need full 4 byte (32bit) encoding of the PNGs. That will make the on-disk images larger, but in-memory it will be the same no matter what.

Generally, I find that using Gimp quite good at doing these things. If you don’t mind fiddling around with the command line, then ImageMagick can also do - well - some magic for you :slight_smile: What you probably need to do is to make a black’n’white gradient image, then compose that with your image using the b’n’w image as the alpha channel.

Note that Vassal renders Layer images on top of the BasicPiece image, so you may want to have no BasicPiece image.

Yours,
Christian

1 Like

Jardic and Christian, thank you for you quick replies.

Christian, you always talk way over my head, (woody = carpenter, remember?), but you’ve never let me down. I appreciate it.

I was using png files and Gimp and (I thought anyway) an alpha channel (whatever that is) but kept getting an all black square when I put it into Vassal’s non rectangular trait.

But if you say that that’s the way to go–that Vassal will recognize a gradient fill–then, clearly, I’m doing something wrong.

I will try again–now that I know it’s possible–and let you know.

Thanks,

Frank

Pixel data in the RGBA colorspace has four components, called channels, which are Red, Green, Blue, and Alpha, each of which will be one byte wide for typical images. Byte values range from 0 to 255, so each of the four channels can have 256 distinct values. The Alpha channel is not a color, but the level of transparency, with 0 being entirely transparent and 255 being fully opaque.

Thank you Joel,

I had seen the RGBA and figured out the first three letters, never made the connection that A was Alpha. (Smacks forehead with heel of hand.)

Things and terminology that are obvious to you guys are mysterious to fellows like me. I appreciate the explanations.

Frank

Here is a short example from YouTube of how to use GIMP to create a gradient transparency effect on an image.

https://www.youtube.com/watch?v=dALkimy3-9M

Disclaimer: I have never done much with gradients but should work the same.

Here is an example. I just made this for a new module. Trade Goods can be used Flipped to the “spent” side. I could have made 2 images for each good. I made a transparent “Spent” image. I use Corel PaintShop Pro 2022 (Just because I started using the original program back in 1998, so I know the shortcuts. Adobe is much better But I refuse to rent software. I “can” and have used GIMP I just have not wanted to invest time in the learning curve.
Any of the more powerful PAINT programs will have the ability to use (box on the right) layers.Usually with some proprietary format. I like making a master of all the fifferent pieces/layers I will use, this makes aligning the final image up. The other 3 images shown are:

  1. the transparent Spent Image (upper Left), the grey/white checkerboard will not show in the PNG, it is your transparent part.
  2. . the round black circle (Lower Left) is to use vassals ‘Non-Rectangular’ feature (I personally find a completely black image works best) however just linking the regular image also works.
  3. the Base counter image (Lower Right) I have one of these for each trade good. Other than the master image they are all saved as PNG’s.

BTW I find usually I find that I personally spend almost as much time in a paint program as I do in vassal to make a module.

Then we go to Vassal.

I personally like to keep as much code in prototypes as possible. It makes fixing my inevitable mistakes So much easier.So to use the Thaler as an example:

  1. other than location data that only applies to the Thaler counter (each good is different) everything is in the prototype.
  2. Line 10 of the prototype, has the layer. I just saw I cut off the right side of the layer command oops.
  3. So the layer is always active, layer 1 is empty, to show the base image.
  4. layer 2 is the transparent “Spent” Image.
  5. ‘Mark as Spent Y/N’ command cycles the spent into and out of view.

Finally in game, both sides of counter shown on different pieces.

This is just 1 way to do this.

Kevin

(edit) P.S. doing all the aligning in paint means I don’t have to use the vassal layer offset and figure out the numbers.

image

Same here and just as enjoyable except when the repetition goes a little long.

Rob

Kevin, Christian, Joel, and Rob:
THANK YOU GENTLEMEN!

I could not have done it without you. The support you give to this forum is as impressive as it is invaluable.

And Kevin, I use PhotoPaint from CorelDraw 9. I’m not about to rent a drawing program either. I’m very (well kinda actually) comfortable with PhotoPaint and learning Gimp is slow going.

Rob, that video was VERY helpful. I’m just getting my feet wet with Gimp and it’s daunting.

Kevin and Rob: Yup, I easily spend as much time fighting in the drawing program as I do fighting in Vassal.

Again, thanks to all of you.

Frank