Wallpaper Engine Wiki
Advertisement

This tutorial will show you how to change parts of your wallpaper depending on the time of day using SceneScript. It is a bit more advanced than other tutorials but if you get stuck, just ask for help on our Steam Discussion boards and we'll be happy to help.

Changing individual details depending on time of day

SceneScript allows you to change virtually all properties with your own logic - which includes any logic related to the current time..

Bind SceneScript to visibility

This example will show how you can enable assets for a specific time of day and and how to change certain details of the asset also depending on the current time. The given example is relatively simple, you can change the complexity as you see fit. This section will use the shooting star asset and show how you can enable it only during night and also shows how to change the number of shooting stars for a given time during the night. However, keep in mind you can do this with any asset and any property in Wallpaper Engine!

First, add a shooting star to your wallpaper via "Add Asset" on the left by using the "Stars" asset - make sure to select "Shooting star" from the selection that is shown to you in that menu.

Next, configure the shooting star the way you seem find but ignore the "Count" property for now - we will talk more about it later in this guide. like. Bind a SceneScript script to the visibility option of the shooting stars as seen in the screenshot on the side.

You will be presented with a sample SceneScript snippet which practically does nothing except to return the current value of the visiblity (which is either "true" or "false", meaning visible or invisible).

We now want to change the visiblity depending on the time of day with a bit of code. The code will return "true" between 9 pm and 7 am (so from 10:00:00 pm until 06:59:59 am) and otherwise will return "false". This means the "visibility" of the shooting stars will be turned off during the day and it will turned on during the specified night time. You can change this to your liking by fiddling with the numbers. You can test this by running your script via the "Run Scripts" button and changing the time of your Windows manually.

'use strict';

/**
 * @param {Boolean} value (for property 'visible')
 */
export function update(value) {
	let dateTime = new Date();
	// If it is past 9 pm or before 7 am, show this asset
	if (dateTime.getHours() > 21 || dateTime.getHours() < 7) {
		return true;
	}
	return false;
}


Bind SceneScript to visibility

Next up, we want to take this one step further and introduce a shooting star shower at midnight. In the case of the shooting star asset, the number of shooting stars is determined by the "Count" property. By default, this is 1 and a static value, we now want to change this so that the number of shooting stars is defined by our own logic. Click on the cogwheel next to the "Count" property of the shooting star asset and select "Bind Script".

As per usual, you are initially presented with a sample script which does nothing. What we want, however, is to change the "Count" depending on the time of day.

A simple script which defines special behavior for two hours of the day may look like this:

'use strict';

/**
 * @param {Number} value (for property 'count')
 */
export function update(value) {
	let date = new Date();
	// Start shooting star shower with 25 shooting stars at midnight and at 1 am, reduce it to 10.
	if (date.getHours() == 0) {
		return 25;
	} else if (date.getHours() == 1) {
		return 10;
	}
	// For any other time of day, render 1 shooting star at a time
	return 1;
}

This way whenever is exactly 0 hours, the value of the "Count" property will be 25. At 1 am, this reduces to 10 and for all other times "Count" will be exactly 1. In effect, this means that users will start seeing 25 shooting stars rather than just 1 in its regular intervals. You can do this for any type of property, allowing you tweak any detail of your wallpaper for each time of the day.

Alt text

Count of the shooting star asset increases at exactly midnight due to the previous script

Changing complete background image depending on time of day

If you have an image that you want to change completely during certain hours of the day, you can utilize the Blend Effect for this.

In this example, we will work under the assumption that you have an alternative background image that is a "night" representation of the original image which is only supposed to be shown between 7 am and 8 pm.

You can achieve this by first adding your background image as you normally would. Once the image is in place, add the "Blend" effect to your image and drag and drop your night image into the "texture" block:

Alt text

Drag and drop your alternative image into the blend texture

Afterwards, make sure to change the "Blend Mode" to "Normal". Afterwards, change the value of the "Multiply" property to 0 and click on the cogwheel icon next to "Multiply" and select "Bind Script":

This will allow us to change the value of the "Multiply" property with our own logic. The alternative image will be visible when "Multiply" is exactly "1.00" and it will be completely invisible when "Multiply" is "0.00".

We now want to manually change the value from 0.00 to 1.00 and later back from 1.00 to 0.00 which will essentially fade between the two images. You will be presented with a sample SceneScript code snipped that does nothing. Change it to the following script and change the START_HOUR and END_HOUR constants to the hours of the day that you want to use for this effect:

'use strict';

import * as WEMath from 'WEMath';

const START_HOUR = 7;

const END_HOUR = 20;

/**
 * @param {Number} value (for property 'multiply')
 */
export function update(value) {

    return Math.max(
        WEMath.smoothStep( START_HOUR / 24, ( START_HOUR - 0.004 ) / 24, engine.timeOfDay),
        WEMath.smoothStep( ( END_HOUR - 0.004 ) / 24, END_HOUR / 24, engine.timeOfDay)

    );
}

In case you want a more elaborate explanation of what's going on here:

This snippet makes use of two Wallpaper Engine SceneScript code snippets:

  • engine.timeOfDay which represents the current day from 0.00 - 1.00 (so instead of seconds it works with percent where 0.00 is exactly midnight at 00:00:00 and 1.00 is 23:59:59.
  • WEMath.smoothStep() is a function which smoothly calculates a value between two values which we use too somewhat smoothly blend over from one image to the next.

( START_HOUR - 0.004 ) / 24 and ( END_HOUR - 0.004 ) / 24 essentially deduct about 10 seconds from the start and end hour so that the blending time starts 10 seconds before the START_HOUR or END_HOUR is reached. You can change this number to either increase or decrease the blend time.

Multiple blend effects can be stacked to show multiple different images per time of day.

The end result of this example looks like this:

Alt text

Blending from one background to another at a specific time of day

Advertisement