Creating the Pard Engine's Splash Screen
Let's see how the Pard Engine's Splash Screen is made!
Wednesday 10th May 2023

Splash Screen

 

What is a Splash Screen?


When we run a desktop or mobile application, a window appears to show us the logo and other info related to the application,
We can see an example in the image below.

Pard Engine Editor Splash Screen

 

This type of window is called Splash Screen.

Splash screen is used to notify the user that the program is in the process of loading. It provides feedback that a lengthy process is underway.

 

How a Splash Screen is made


The splash screen is usually featured by a borderless window, in which we can find:

- a background image or color, that can be related to a specific aspect or feature of the application
- the title, logo and /or other info of the application
- eventual copyright information

In addition, we can find a UI control that notifies the user about the loading process.
It can be a simple label that shows the loading percentage in a text format, a progress bar, or a small wheel image or something similar that rotates continuosly.


A splash screen can be also designed in various forms, from a simple rectangle to a very complex curved form, like the one we have found many years ago in Visual Studio 2010.

Visual Studio 2010 Splash Screen


For the Pard Engine Editor, we want a splash screen that contains

- a simple rectangle form, with at least rounded corners,
- a linear gradient background color, we will change it in the future, maybe with a cool 3d scene image
- some images and labels that show information about the editor.
- another label, used to show the modules and systems names that are in the process of loading.

 

Splash Screen Implementation



In order to implement a Splash Screen, we have to find the fastest and most efficient method possible to render the various UI elements in the window.

This because the splash window/screen must be shown and hidden immediately without slowdowns (otherwise we could even launch the editor without it)

In Windows, we can render graphics elements like images and labels in a really fast and efficient way by using the Windows GDI API.
GDI allows to access graphics hardware directly to perform the rendering of simple but yet cool UI elements like lines, curves, shapes, images, labels and so on.

Here is a snippet code used to draw a text in GDI

 

SelectObject(hdc, hf);
SetBkMode(hdc, TRANSPARENT);
SetTextColor(hdc, RGB(text_color.red, text_color.green, text_color.blue));
TextOutW(hdc, size.left, size.top, text, wcslen(text));

 

GDI also supports Alpha Blending, allowing us to render our so much desired transparent rounded rectangle form. This can be done by using the following method:

 

SetLayeredWindowAttributes((HWND)this->getHandle(), 0, transparency, LWA_ALPHA);

 
Thanks to illuxUI, the GUI Framework used to make the Pard Engine Editor, all these ugly things are handled under the hood.

That's all for now, folks!

If you have questions or doubts about this topic, please don't esitate to leave them in the Discord Server: https://discord.gg/6TF2d9pcpX .

If you enjoyed this article, you can subscribe to our newsletter to be always up to date with the latest news and articles.

Also if this work is helpful to you, please consider to support it through Patreon.
Every single contribution makes the difference, regardless the amount.

Thank you!