Layering graphics with transparency

Question

Just making a little game and want to layer my pause menu over top.

A timer is responsible for the game loop. When it's paused, it calls a separate function that draws the pause menu. Right now I am drawing a small centred rectangle. The rectangle however isn't transparent, even though I clear it to be transparent.

Is there any way I can do that?

Here's the code for my game loop that updates the states and draws based on them. As you can see, when the game is paused, it calls a separate method.

    private void tmrGameLoop_Tick(object sender, EventArgs e)
    {

        if (Paused)
        {
            Pause();
            return;
        }

        using (Graphics gr = CreateGraphics())
        {
            using (BufferedGraphicsContext bgc = new BufferedGraphicsContext())
            {
                using (BufferedGraphics bg = bgc.Allocate(gr, DisplayRectangle))
                {
                    bg.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
                    bg.Graphics.Clear(Color.Transparent);
                    // draw the stuff
                    bg.Render();
                }
            }
        }
    }

This is Pause(). It draws over top as expected, but because it's a separate graphics object, it draws over and isn't transparent as I expected it to be.

    private void Pause()
    {
        using (Graphics gr = CreateGraphics())
        {
            using (BufferedGraphicsContext bgc = new BufferedGraphicsContext())
            {
                using (BufferedGraphics bg = bgc.Allocate(gr, m_menu))
                {
                    bg.Graphics.Clear(Color.Transparent);
                    // draw pause menu
                    bg.Render();
                }
            }
        }
    }

Is there any way to do this so that it is transparent?

I've added the code without all the bits of what I am actually drawing because that's irrelevant. I've tried passing off the graphic object in various ways, but with no luck. — MattyMatt, Mar 23 '17 at 17:39
So, are you only drawing onto the From? Are no other controls on it? You do know that you __never__ should use CreateGrpahics as the result it not valid then the grafics it draw are non-persistent!? — TaW, Mar 23 '17 at 17:47
I honestly have no idea what you are saying. I'm a total noob. — MattyMatt, Mar 24 '17 at 00:45
Well, answering my quastions would be a good start :-) - As for the other points: As long as you are drawing from a Tick persistency may actually be of no concern.. But without seeing the code that does the drawing how can we help? Show bg.Draw() at least. Note the Clear(transparent) makes the form black, as it tries to make the parent shine through but as there is none the result is black.. — TaW, Mar 24 '17 at 09:29

TaW · Accepted Answer · 2017-03-26T02:56:41.637

You seem to believe that Graphics.Clear(Color.Transparent) would create a transparent canvas.

Well, this only true if you apply it to a Bitmap. For controls it lets the BackColor of the Parent shine through and for Forms, which don't have a Parent it makes the Form look black.

It also resets the Graphics object, which may also not be what you want..

Here is how to draw a semi-transparent overlay over a Form:

using (SolidBrush br = new SolidBrush(Color.FromArgb(192, Color.Silver)))
    g.FillRectangle(br, ClientRectangle);

StringFormat fmt = new StringFormat()
    { Alignment = StringAlignment.Center,
      LineAlignment = StringAlignment.Center };

using (SolidBrush br = new SolidBrush(Color.FromArgb(128, Color.Tomato)))
using (Font f = new Font("Consolas", 40f))
    g.DrawString("PAUSED",f, br, ClientRectangle, fmt);

Result:

Use your numbers for the alpha values of the overlay and (maybe) the text!

Usually the Graphics object to use should be the e.Graphics from the Form's Paint event.

But since you seem to do all your drawing from a Timer.Tick you might get away with creating it using CreateGraphics, which is usually not recommended, as the result is non-persistent..

Layering graphics with transparency

1 Answers1