How To Customize Boot Screen

[silent]

Other videos available in the playlist: https://www.youtube.com/playlist?list=PLgeSUiT3pydEobvCoVI7BWbHM-Cb16CbE

[Lales.Charles]

Hi,

Nice feature.

For newbies, could you add simple procedure to generate proper png from a picture we'd like to use.
I don't get alpha properly setup and picture transition not working.

Another point, editing the file as follow:

		<text>
			<![CDATA[
				<p align="center">
					<font color="#ffffff" size="64">
						<xy x="%10" y="%60"/>AH UNG DEV - UNIGINE_VERSION
					</font>
				</p>
			]]>
		</text>

I get after first run:

		<text>
				&lt;p align=&quot;center&quot;&gt;
					&lt;font color=&quot;#ffffff&quot; size=&quot;64&quot;&gt;
						&lt;xy x=&quot;%10&quot; y=&quot;%60&quot;/&gt;AH UNG DEV - UNIGINE_VERSION
					&lt;/font&gt;
				&lt;/p&gt;
			</text>

It is bit less readable.. is there a way to avoid it?

Kind regards,
Charles

[Lales.Charles]

Hi,

Let's add the picture I'd like to use:

With here the related config section:

	<screen>
		<width>1600</width>
		<height>792</height>
		<transform>1 1 0 0</transform>
		<threshold>32</threshold>
		<texture>boot_screen.png</texture>
		<font/>
		<text>
			<![CDATA[
				<p align="center">
					<font color="#ffffff" size="64">
						<xy x="%10" y="%60"/>AH UNG DEV - UNIGINE_VERSION
					</font>
				</p>
			]]>
		</text>
		<messages>
			<file_system_init>
				<![CDATA[
					<p>
						<font color="#ffffff" size="18">
							<xy x="%10" y="%70"/>Initializing file system...
						</font>
					</p>
				]]>
			</file_system_init>
			<engine_init>
				<![CDATA[
					<p>
						<font color="#ffffff" size="18">
							<xy x="%10" y="%70"/>Initializing file system, engine...
						</font>
					</p>
				]]>
			</engine_init>
			<materials_init>
				<![CDATA[
					<p>
						<font color="#ffffff" size="18">
							<xy x="%10" y="%70"/>Initializing file system, engine, materials...
						</font>
					</p>
				]]>
			</materials_init>
			<properties_init>
				<![CDATA[
					<p>
						<font color="#ffffff" size="18">
							<xy x="%10" y="%70"/>Initializing file system, engine, materials, properties...
						</font>
					</p>
				]]>
			</properties_init>
			<plugins_init>
				<![CDATA[
					<p>
						<font color="#ffffff" size="18">
							<xy x="%10" y="%70"/>Initializing file system, engine, materials, properties, plugins...
						</font>
					</p>
				]]>
			</plugins_init>
			<shaders_compilation>
				<![CDATA[
					<p>
						<font color="#ffffff" size="18">
							<xy x="%60" y="%70"/>Compiling shaders... (just once)
						</font>
					</p>
				]]>
			</shaders_compilation>
		</messages>
	</screen>

You get a nice continuous effect for Initializing steps ;-)
Just little indication -> file system are init before engine, listing order in doc could be slightly changed:
https://developer.unigine.com/en/docs/2.12/code/gui/screens/?rlang=cpp#boot

So the effect would be from grey level (or at least alpha on brown color) -> original color picture.
Not really what we get now:

And one more time, no asking you to proceed, just want to learn it e.g. with GIMP or another tool.

Kind regards,
Charles

[silent]

Hi Charles,

It's hard to say what's wrong with your picture, could you please zip your png and attach? Alpha-blend animation is mostly visible on the 'shaders compilation' stage.

We've also failed to reproduce the boot.config file change after the engine start. Maybe that was your text editor that modified this file?

In attachment you can find the boot screen that was used in the tutorial, you can check how alpha is being used here. Hope that helps a bit.

Thanks!

boot_screen.zip

[thomalex]

Hello Charles,

Glad you've managed to configure the messages. Nice continuous loading trick!

On 10/8/2020 at 8:54 PM, Lales.Charles said:

Just little indication -> file system are init before engine, listing order in doc could be slightly changed:
https://developer.unigine.com/en/docs/2.12/code/gui/screens/?rlang=cpp#boot

The list in that article doesn't represent the actual loading order, a more proper one is listed in the Engine Initialization section. These are just an example of configuration file content for messages configs.

On 10/8/2020 at 8:54 PM, Lales.Charles said:

And one more time, no asking you to proceed, just want to learn it e.g. with GIMP or another tool.

Well, this is a content task for an artist. The texture needs to be split vertically and contain both initial and final image and the Alpha channel of the final part should represent the gradual change between them, just like in the example @silent shared (thanks!). Final pixels alpha of which corresponds to the current loading progress (1-100% mapped to 0-1 alpha value) will be rendered covering the initial pixels. The Threshold enables to control the range of alpha values affected (i.e. get a sharper/smoother transition).

For example, in Adobe Photoshop, you'll need to duplicate your image, desaturate it and place at the top, create an Alpha channel and paint over the bottom part by creating black-to-white gradients for the pixels to achieve a smooth artistical blending. Save the picture to one of formats that support alpha channels, e.g. png, tga, psd.

It isn't required, you can make a full screen transition just by increasing the Threshold to 100. That'll make a fade effect.

And it has been stated already, nevertheless: Apha-blended boot screen texture will show the progress at each loading stage, some of them are really quick and the longest stage is the Shaders Compilation, at which the whole beauty of the customized boot screen will be perceptible.

Thanks!

[Amerio.Stephane]

Hello, back on this topic, I tried to edit our boot screen as explained above, but we still don't see any animation. At all.

Here is an updated version of our boot screen. The bottom part is never seen, although there is definitively an alpha channel here. Also tried with threshold set to 100: no transition at all. What did we missed?

(sidenote: the tutorial also uses background_color but this tag is always removed when the default.boot file is automatically saved)

[thomalex]

Hello @Amerio.Stephane!

I've checked your boot screen texture on a default project, it works as just intended.

I used the following configuration (spoiler):

Spoiler

<boot version="2.13.0.0" autosave="0">
    <!-- ... -->
	<console>
        <!-- ... -->
        <!-- in order to copmile shaders at startup -->
		<materials_loading_mode>2</materials_loading_mode>
        <!-- ... -->
	</console>
	<screen>
		<texture>boot_screen.png</texture>
		<width>1600</width>
		<height>790</height>
		<font/>
		<messages/>
	</screen>
</boot>

 

The reason you see no transition might lie behind the quick loading of your project, so all engine initialization stages come and go too fast to see the bottom part of the texture. It should be much more noticeable on heavier projects.

To check your boot screen righ now, you can delete the shader cache and use the second materials loading mode.

Regarding the sidenote, thanks a lot for noticing, we'll check this behaviour. If you don't want the boot screen to auto-save, you can definitely turn it off in the .boot file.

Thanks!

[Amerio.Stephane]

Thanks, now I see the transition, but only during the materials cache generation.

I guess the "issue" is due to the fact the boot screen is "restarted" on every stage of the boot phase, and each stage is indeed too fast. Would it be possible to have the boot screen used for all stages (so say if there are 4 stages during boot, each would account for 25%?) Or is this just not possible? (maybe a future enhancement)

11 hours ago, thomalex said:

you can definitely turn it off in the .boot file

How do I do that?

Thanks!

[silent]

Autosave is define in the second line:

<boot version="2.13.0.0" autosave="0">

 

Quote

 Would it be possible to have the boot screen used for all stages (so say if there are 4 stages during boot, each would account for 25%?) Or is this just not possible?

That will not work, we tried. Maybe a proper solution will suddenly come in the future, but that's unlikely :(