Modern way to create splash screen from transparent png with edges that blend with the background

[CyberPeter 14]

My app has a splash screen, but it was created at least 16 years ago (BCB5 I think) and I'm really ready for something else.

It's based on two BMP's.  One is used as a mask to tell the code what should be transparent.

 

Instead of hurting my (currently covid impaired) head trying to figure out the old code and ancient methods of then, surely VCL Forms and graphic support has evolved to something where this is a lot easier to do ?

I recently upgraded to C++ Builder 11 (coming from Builder 2009)

 

I was thinking of finding a graphical artist who can make me a nice *.png that I then use as splash screen.  It's far easier to ask someone to make a nice PNG than to describe the need for two BMPs, one of which acts purely as a mask etc.

 

I tried a few things with a free test.png found on the net (artist unknown), but I'm not having the easy success I hoped I'd have.

 

Are there good and easy ways to do this using Builder / Delphi 11 ?

I looked around but wasn't very successful in finding documentation.  I see Anders has a couple blog posts about it, but that too seems outdated (correct me if I'm wrong).

 

The easy:

 

- I created a Windows VCL test app

- Set Form BorderStyle = bsNone

- Plonked a TImage on the form (Align = allClient)

- Loaded the test.png in Image1's Picture at design time

- Compiled.   Works nicely but of course the form color shows where the PNG is transparent

- I then set the Form background to MoneyGreen, TransparentColor = true, TransparentColorValue = clMoneyGreen

- Compiled.  Nice result but the PNG half transparent regions blend with the green color, and are hence not blending with the background.

- The net result is sadly not perfect.  It was simply too easy 😉  I made this screenshot on a white background.

 

 

If I set AlphaBlend = true and give it an AlphaBlendValue = 100 (for instance) there are certainly very nice additional features to play with:

 

 

Now, this doesn't need to be total failure. 

- I could experiment with different Form background colors and see how they interact with the half transparent fields of the PNG.  Perhaps the net result is pleasing.

- I could ask the artist to make me a transparent PNG but with well defined edges that don't blend, that are not half transparent.

 

In conclusion, as far as super easy methods go, this certainly is not a bad start if a good color compromise can be found for the blending issues and/or depending on the PNG.

 

But ... perhaps I'm missing quite a few things that can be done to achieve a perfect result ?

Please let me know.

 

Thanks.

The test.png also attached:

 

Edited March 18, 2022 by CyberPeter

[Lajos Juhász 323]

Another thing you should consider is support for High-DPI. You would have to make several version of the picture in order to have good results in every possible combination of DPI settings.

 

That's the reason I've retired the old login screen with fancy graphics and went back to the classic rectangular one with svg images.

[Anders Melander 2047]

 

Source attached.

 

I use this code in most of my open source/freeware tools.

 

Features:

• Fades image in/out on show/hide.
• Can be moved with the mouse.
• Automatically hidden when deactivated.
• A text can be displayed on top of the image.
• Text can be scrolled to create vertical banner.
• Can play a audio resource while visible.
• Can also be used as an "About box".

Things to note:

• Splash does not "stay on top" when running in the debugger. This is by design.
• Doesn't handle HighDPI scaling well (image isn't scaled).

SplashDemo.zip

[CyberPeter 14]

16 hours ago, Lajos Juhász said:

You would have to make several version of the picture in order to have good results in every possible combination of DPI settings.

Oh cr@p, good point.  Not doing that though 😉

 

15 hours ago, Anders Melander said:

Source attached.

Oh wow, thank you very much Anders.

I'm not good with Delphi (at all), so I will need some time to digest this.

[CyberPeter 14]

On 3/18/2022 at 8:05 PM, Anders Melander said:

 

Source attached.

I built and played a bit with your code Anders and it works nicely.

 

Stubborn as I am I created a smaller class with only a splash, highly inspired by your code (also my old code so it seems, there is certainly overlap - but now I'm able to ignore a lot of old crap and rely on PNG).  Sadly my today's implementation doesn't work fully.  I must be missing something, but I cannot spot it.  Perhaps it's obvious ?

Anybody any idea as to why UpdateLayeredWindow() always fails with error 87 ( ERROR_INVALID_PARAMETER ). I can't seem to find where the problem lies
 

//---------------------------------------------------------------------------
void __fastcall TForm1::Button3Click(TObject *Sender)
{
String ResourceName(L"SPLASH2") ;

TSplashScreen *Splash = new TSplashScreen(3000, 100, ResourceName) ;

Splash->Show() ;

}
//---------------------------------------------------------------------------

 

//---------------------------------------------------------------------------
__fastcall TSplashScreen::TSplashScreen(int TimeToDisplay, int Alpha, const String &ResourceName)
    : TForm((TComponent*)NULL), FBitmap(NULL), Alpha(Alpha)
{

    Timer->Interval = TimeToDisplay ;
    Timer->Enabled  = false ;

    // Set Layered
    if (SetWindowLong(Handle, GWL_EXSTYLE, (GetWindowLong(Handle, GWL_EXSTYLE) | WS_EX_LAYERED)))
        {

        // Background covers whole form
        ControlStyle << csOpaque ;

        // Create BitMap
        FBitmap = new TBitmap ;

        // Load the PNG from resource
        LoadPNG(ResourceName) ;

        // Resize form to fit bitmap
        ClientWidth  = FBitmap->Width ;
        ClientHeight = FBitmap->Height ;
        }
}
//---------------------------------------------------------------------------
__fastcall TSplashScreen::~TSplashScreen()
{
delete FBitmap ;
}
//---------------------------------------------------------------------------
void __fastcall TSplashScreen::TimerTimer(TObject *Sender)
{
Timer->Enabled = false ; // This event only once

Hide() ;

Application->ProcessMessages() ;

delete this ; // Self destruct when time is up
}
//---------------------------------------------------------------------------
void __fastcall TSplashScreen::FormShow(TObject *Sender)
{
Display(Alpha) ;

if (Timer->Interval)
    Timer->Enabled = true ;
}
//---------------------------------------------------------------------------
void TSplashScreen::LoadPNG(const String &ResourceName)
{
TStream *Stream = NULL ;

__try // Load PNG from resource (which must be added to the project)
    {
    wchar_t Type[] = L"PNG" ;
    Stream = new TResourceStream((NativeUInt)HInstance, ResourceName, Type) ;

    TPngImage *PNG = NULL ;
    __try
        {
        PNG = new TPngImage ;
        PNG->LoadFromStream(Stream) ;
        FBitmap->Assign(PNG) ;
        FBitmap->PixelFormat = pf32bit ;
        FBitmap->AlphaFormat = afPremultiplied ;
        }
    __finally
        {
        delete PNG ;
        }
    }
__finally
    {
    delete Stream ;
    }
}
//---------------------------------------------------------------------------
void TSplashScreen::Display(int Alpha)
{
// Position bitmap on form
POINT BitmapPos = {0, 0} ;
SIZE BitmapSize = {FBitmap->Width, FBitmap->Height} ;

// Setup alpha blending parameters
BLENDFUNCTION BlendFunction ;
BlendFunction.BlendOp = AC_SRC_OVER ;
BlendFunction.BlendFlags = 0 ;
BlendFunction.SourceConstantAlpha = Alpha ; // Transparency Value (255 is not transparent, 0 is fully transparent)
BlendFunction.AlphaFormat = AC_SRC_ALPHA ;

// Display
if (!UpdateLayeredWindow(Handle, 0, NULL, &BitmapSize, FBitmap->Canvas->Handle, &BitmapPos, 0, &BlendFunction, ULW_ALPHA))
    {
    DWORD Error = GetLastError() ;
    }

Application->ProcessMessages() ;
}
//---------------------------------------------------------------------------

 

[CyberPeter 14]

And the morning brings clarity .. 🙂
Turns out I still had the form's 'TransparentColor' property set to 'true' (Left over from my first attempt, see start of conversation).

I reset it to 'false' and now above code works beautifully.

 

This window cannot be moved with the mouse.

Frankly, I'm not sure what code or setting is responsible for this difference in behavior

Edited March 23, 2022 by CyberPeter

[Grohlfer 0]

This looks good, but it as far as I could guess from the code, it would run on Windows only...

[shineworld 86]

Amazing Anders, works perfectly also in Linux with Wine.

Edited March 27, 2024 by shineworld

[phqsoft 2]

Thank you Anders for this demo, would you mind to help me to make the display text in DisplayBanner to white instead of black? sadly i have my background image black so the black color is invisible, thank you!

[Anders Melander 2047]

22 minutes ago, phqsoft said:

would you mind to help me to make the display text in DisplayBanner to white instead of black?

In TFormSplash.UpdateBannerImage:

      if (Scale = 255) then
        PixDst^ := PixSrc^
      else
      if (Scale = 0) then
        PixDst^ := PixSrc^ or $00FFFFFF // *** Change this ***
      else
      begin
        RGB := PixSrc^ and $00FFFFFF;
        RGB := RGB xor $00FFFFFF; // *** Add this ***
        PixDst^ := (PixSrc^ and $FF000000) or
          (Div255((RGB shr 16) * Scale) shl 16) or
          (Div255((RGB shr 8 and $FF) * Scale) shl 8) or
          (Div255((RGB and $FF) * Scale));
        PixDst^ := PixDst^ xor $00FFFFFF; // *** Add this ***
      end;

This isn't the most elegant solution but since the original code was a bit of a hack (which is also why the solution isn't obvious at all) I guess it doesn't matter.

 

Anyway, what it does is invert the color of the source pixel, blend it with the (black) text, and then invert the result again.

[phqsoft 2]

3 hours ago, Anders Melander said:

This isn't the most elegant solution but since the original code was a bit of a hack (which is also why the solution isn't obvious at all) I guess it doesn't matter.

 

Anyway, what it does is invert the color of the source pixel, blend it with the (black) text, and then invert the result again.

It works brilliantly, even better than I thought! 😉 When I finish my project, I'll include your name in the credits.

[Anders Melander 2047]

Nice!

[Brno 1]

On 2/2/2025 at 2:01 AM, Anders Melander said:

Nice!

HI Anders,

I tried to download your source file but it isn't available anymore. It's been a long time since you posted it 🙂
Could you send it back ? I'd like to modernize my app's splashscreen and it would be useful to me !
Best regards !

[Anders Melander 2047]

Just now, Brno said:

I tried to download your source file but it isn't available anymore.

Works for me, Did you get it from this post:

 

Otherwise, here's the original articles about it (OMG, I really need to get that old site updated):

http://melander.dk/articles/alphasplash

http://melander.dk/articles/alphasplash2/

and the source for that is here: http://melander.dk/download/

That source was written for Delphi 2007 so it probably won't work as-is in modern Delphi versions.

[CyberPeter 14]

On 3/18/2022 at 8:05 PM, Anders Melander said:

SplashDemo.zip

 

The link still works for me too

[Brno 1]

You're  both right, it works indeed. Maybe I hadn't fully created my account before trying to download it. Sorry!

@Anders Melander The examples are great, and they both compile in D12 very easily, I don't know which one I'll use at this time 

Your site is old, but it still works ! Thanks a lot for this nice piece of code! 

Edited March 18 by Brno