Why isn't this transparent?

1

I’m sorry, but I could really use another pair of eyes on this.

This is what is happening on the screen:

total opacity blue
total opacity blue1161×353 213 KB

The blue lines should be 50% opacity but they aren’t. It’s a texture:
SmallBlueCircle

And here’s the code (inside of a loop):

  r = new Rectangle(node.X + LeftMapOffset, node.Y + TopMapOffset, 11, 11);
  spriteBatch.Draw(SmallBlueCircle, r, Color.White * 0.5f);

I’ve tried a bunch of options in the Begin including both of these:

             spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.AlphaBlend);
             spriteBatch.Begin(SpriteSortMode.Immediate, BlendState.NonPremultiplied);

Nothing’s working! Help! Thanks!

2

Ah I run into this every time I take long breaks between making a project haha. What’s your SpriteBatch.Begin call look like? Are you using BlendState.NonPremultiplied? That’s usually the culprit.

1 Like
3

I switched it to BlendState.NonPremultiplied, but no difference. I’m stumped.

4

Here’s something else to consider. Look closely at this image:

Sometimes opacikty

Look real closely at the drop shadow on the box. I’ve set the opacity for the drop shadow at 50% and it works fine. Here’s the code:

 spriteBatch.Draw(EnemyObservedBoxDropShadow, r, Color.White * 0.5f);

But, using the exact same code

  spriteBatch.Draw(SmallBlueCircle, r, Color.White * 0.5f);

the blue circle is opaque. I’m completely stumped.

5

Is it possible that you are drawing multiple SmallBlueCircles in the same location?

Color.White * 0.25f works for me with spriteBatch.Begin() (i.e. no specific blendState supplied).

Maybe change your 0.5f value to 0.1f to see if it makes any difference.
Or draw only 1 circle to see if it works with one Draw();

2 Likes
6

Oh, great minds think alike! That’s exactly what I figured out, and came to post and you had come to the same conclusion! I am drawing paths, the circle is being drawn ever pixel and the opacity is ‘building up’ along the path. I reduced opacity to 0.2f and look:

semitranspaths

You can see when the same path is ‘run twice’ the line is darker. I’m not sure what the solution to this is… hmmm.

7

Ended up by reducing the diameter of the circle, not caring about opacity and going with this:
small line
I think this shows that ‘General Sumner’ controls these units. Not exactly the effect I wanted, but it will work. The only other way, that I can think of, is to plot all these paths in memory, copy memory to a PNG and then draw that. More work than I want for an effect, so I’m going with this.

Thanks for all the help! It got me thinking in the right direction!

8

Oh, I didn’t notice from your code above that you were drawing a circle over and over again to fill out a line. Good spot, @jonathanmcc! :slight_smile:

@Ezra_Sidran, I’m glad you found something you like! That said, if you wanted to achieve the semi-opaque lines you originally wanted, I think you might need to change things up a bit.

You can draw lines with a SpriteBatch by stretching/rotating a pixel into a line. That would significantly cut down on your overlap (and draws!) but you would still get it on the edges where the line segments met. I think this might not look so great.

I’m not sure how well it would integrate with the SpriteBatch drawing, but alternatively you could draw the lines as geometry, calculating their bounds and rendering them as polygons. I did some work with this years ago and it’s relatively straight-forward, even to cleanly join two thick line segments, but you need to render it with GraphicsDevice.DrawUserIndexedPrimitives and so layering with your SpriteBatch might be more of a challenge. I think there are also libraries that will handle the geometry generation for you, and even add nice rounded end-caps to your lines.

If you’re happy with what you have and your performance is good, I wouldn’t change it, but if you do run into any performance issues than you might want to look at this. Drawing several hundred circles sprites per line might add up. I’m a big believer in optimize when you need to though. Just something to keep in mind.

1 Like
9

My big problem now is the clarity of the fonts (check out my other post): link to poor quality fonts with MonoGame

You seem to know you way around MonoGame. Is there a solution to the font problem?

10

That’s fine, I just wanted to leave that there as a follow up in case you, or anybody else, comes back to a problem like this :slight_smile:

11

Another option is to draw your circles onto an empty transparent render target.

The circles dont need any transparency for this render target

Then draw the rendertarget with the circles over the top off your main drawing with transparency. This will give a consistent transparency

2 Likes
12

Alternatively you can try my shape library to draw lines.