Wallpaper壁纸制作学习记录08

音频可视化

专辑封面集成

Wallpaper Engine 允许您将Windows Media 数据（如专辑、歌曲名称、当前播放时间等）集成到您的壁纸中。

专辑封面分辨率

建议将专辑封面集成的分辨率限制为256*256像素或更低。专辑封面的质量和分辨率通常取决于相应的媒体播放器和音频文件。但是，建议使用大小介于100x100像素和256x256像素之间的分辨率。

创建占位符

壁纸的用户不会始终播放媒体内容，因此确保在没有音频播放处于活动状态时，放置专辑封面的空间具有某种占位符非常重要。

如果没有音频播放，而您只想使用纯色（或完全隐藏专辑封面），则应使用纯色占位符图层，因为它可为此用例提供最佳性能。要添加纯色占位符图层，请点击左侧的添加组件，然后从底层的列表选择纯色占位符类型。为影集封面图层选择首选大小和默认颜色。

如果您想显示占位符图像，只需将其导入编辑器并继续操作，而无需使用纯色占位符图层。重要的是您的图像是方形的，并且理想情况下具有您以后想要用于专辑封面的确切分辨率。

指定相册封面

（注意：使用非windows自带的播放器，并不会显示）

创建占位符后，您现在可以继续执行此功能的最基本实现，主要是在专辑封面可用时显示专辑封面。为此，请选择您的占位符图层，然后点击属性列表底部右侧的高级纹理设置。

单击纹理旁边的齿轮图标，然后选择绑定专辑封面。

您将看到两个选项：当前专辑封面和上一张专辑封面。在这种情况下，先选择当前专辑封面。确认您的选择，然后按编辑器中的运行预览按钮，一旦您开始使用与Windows媒体功能集成的媒体播放器播放音乐，您现在应该会在壁纸中看到您的专辑封面。

高级：在专辑封面之间创建过渡

首先，选择您之前创建的专辑封面图层。点击右侧效果列表中的添加按钮，然后选择混合效果或混合渐变效果。

接下来，选择您创建的混合效果，然后点击纹理旁边的齿轮图标，选择绑定专辑封面，在出现的弹出窗口中，选择上一张专辑封面选项并确认您的修改。

创建时间轴动画 

现在您已经配置了纹理，您需要创建一个简短的时间轴动画，以便您在两个专辑封面之间平滑过渡。

选择混合效果并导航到其属性列表的底部。在混合量值旁边，单击齿轮图标，然后选择绑定时间轴动画。

 您将看到动画选项，您需要在此处进行一些更改：

• 模式：将此选项设置为 单张，因为我们只希望过渡在需要时播放一次。
• 秒：这是在专辑封面之间过渡所需的时间，请根据自己的喜好进行设置，例如 2 秒。
• 框架：您可以将此值保留为 60。
• 开始暂停：确保已启用此选项。

完成此操作后，您将在底部看到混合量值的时间轴。抓住时间轴选择器并将其一直移动到最后一帧，然后，将混合量值向下拖动到右侧。现在，您应该在时间轴动画中看到一条平滑的曲线。

使用SceneScript启动动画

使专辑封面过渡正常工作的最后一步是利用每当Wallpaper Engine收到新专辑封面时触发的事件。返回您之前创建的混合动画，然后再次点击效果的混合量属性旁边的齿轮图标。这一次，选择绑定场景脚本。

您将看到一个占位符脚本，将脚本窗口的内容替换为如下代码：mediaThumbnailChanged

'use strict';

/**
 * @param {MediaThumbnailEvent} event
 */
export function mediaThumbnailChanged(event) {
	thisObject.getAnimation().play();
}

这将在有新缩略图可用时开始播放您刚刚创建的时间轴动画。动画将在旧专辑封面和新专辑封面之间平滑过渡。

使用媒体播放数据

显示歌曲标题、专辑标题和艺术家姓名

请注意，如果某些数据不是由相应的媒体播放器传输的，或者如果音频文件不包含某些信息，则可能无法使用。例如，不能保证歌曲文件包含专辑标题。

创建文本元素

首先，我们需要为要显示的每个元素创建文本层，点击左侧的添加组件，然后将新的文本图层添加到您的壁纸中。

对于具有动态内容的文本图层，您需要记住一点的是，它们可能会变得很长。这就是为什么为媒体信息正确配置文本层很重要的原因：

1.调整点大小值以更改文本图层的大小，不要改变文本图层的比例，它会不必要地降低文本地质量。

2.将水平对齐设置为左对齐。

3.启用限制宽度选项，并使用编辑器中显示的紫色虚线调整最大宽度。这在处理动态文本（如歌曲标题）时尤其重要，因为它们可能很长。

4.启用限制行选项并将限制设置为1（或选择的其他值）。

5.最后，您可能希望启用溢出省略号选项，这将截断太长的文本，并将结尾替换为三个点“...”，以明确文本已被截断。

通过脚本集成相册数据

为要添加的每种类型的音乐数据创建一个文本元素。最简单的方法是创建一个文本层，设置您选择的字体和字体大小。现在，在文本图层上使用副本功能（右键点击文本图层，然后选择副本），重复此操作，直到每个数据都有一个文本层。

在实例中，我将创建三个最常见的层：

• 歌曲名称
• 专辑标题
• 作者姓名

（提示：这三个分别跟标题、参与创作的艺术家，唱片集相对应。）

 为它们中的每一个创建一个图层后，您可以利用脚本中的MediaPropertiesEvent来检索所需的数据。为此，请选择您的第一个图层，然后点击图层文本属性旁边的齿轮图标，并选择绑定脚本。

您将看到一个示例代码片段，您可以将其替换为下面的示例代码。

将相应的 SceneScript 代码复制到您的图层中，然后对所有文本图层重复该过程：

歌曲标题代码

'use strict';

var mediaData = "";

/**
 * @param {String} value - for property 'text'
 * @return {String} - update current property value
 */
export function update(value) {
	return mediaData;
}

/**
 * @param {MediaPropertiesEvent} event
 */
export function mediaPropertiesChanged(event) {
	mediaData = event.title;
}

专辑标题代码

'use strict';

var mediaData = "";

/**
 * @param {String} value - for property 'text'
 * @return {String} - update current property value
 */
export function update(value) {
	return mediaData;
}

/**
 * @param {MediaPropertiesEvent} event
 */
export function mediaPropertiesChanged(event) {
	mediaData = event.albumTitle;
}

 作者姓名

(提示：如果albumArtist不显示，可以换成artist再试一下）。

'use strict';

var mediaData = "";

/**
 * @param {String} value - for property 'text'
 * @return {String} - update current property value
 */
export function update(value) {
	return mediaData;
}

/**
 * @param {MediaPropertiesEvent} event
 */
export function mediaPropertiesChanged(event) {
	mediaData = event.albumArtist;
}

将代码复制到每个相应的文本层并使用编辑器顶部的运行预览功能后，即可开始使用兼容的媒体播放器播放音乐。现在，只要音乐播放器实际将数据发送到Windows，您现在应该会看到所有的数据点都出现。

通过脚本使用专辑封面颜色

您还可以通过mediaThumbnailChanged事件访问专辑封面颜色，特别是作为函数参数提供的MediaThumbnailEvent类。

请注意

在此示例中，我们将更改背景颜色。只有当您的整个壁纸没有背景图像时，这才有意义。

此处展示的代码适用于编辑器中的任何 color 属性。您还可以将其应用于编辑器中的任何文本图层颜色或任何其他颜色属性。

 首先，导航到编辑器中任何元素上您选择的color属性。我们将更改壁纸的整体背景颜色，因此我们再编辑器的左上角选择场景选项。

然后，我们点击背景颜色属性旁边的齿轮图标，并选择绑定脚本。把脚本替换为以下脚本。

'use strict';

// Set a default color here: "0, 0, 0" (RGB) means black by default
let color = new Vec3(0, 0, 0);

/**
 * @param {Vec3} value - for property 'clearcolor'
 * @return {Vec3} - update current property value
 */
export function update() {
	return color;
}

/**
 * @param {MediaThumbnailEvent} event
 */
export function mediaThumbnailChanged(event) {
	color = event.primaryColor;
}

代码分配给属性的颜色。该值是Wallpaper Engine在MediaThumbnailEvent中提供的众多颜色值之一。请务必注意，该值将始终包含一个值，该值使文本在值之上易于阅读。如果在动态着色的背景上添加文本（如此处），则可以使用文本的属性来确保它始终易于阅读。

添加简单的颜色过渡

您还可以使用简单的颜色过渡动画来扩展前面的代码示例。使用以下代码片段，其中新颜色和旧颜色在函数期间不断相互过渡：update()

'use strict';

// Adjust this constant to change the duration of the transition
const DURATION = 1;

let newColor = new Vec3(0, 0, 0);
let oldColor = new Vec3(0, 0, 0);
let timer = DURATION;

/**
 * @param {Vec3} value - for property 'clearcolor'
 * @return {Vec3} - update current property value
 */
export function update() {
	var color = newColor;
	if (timer < DURATION) {
		color = newColor.subtract(oldColor).multiply(timer / DURATION).add(oldColor);
		timer += engine.frametime;
	}
	return color;
}

/**
 * @param {MediaThumbnailEvent} event
 */
export function mediaThumbnailChanged(event) {
	timer = 0;
	oldColor = newColor;
	newColor = event.primaryColor;
}

停止播放时隐藏媒体播放元素

如果用户没有主动播放任何音频，则隐藏专辑封面和其他媒体相关的元素可能是有意义的。为此，请选择要在媒体播放停止时隐藏的元素，然后点击右上角眼睛旁边的齿轮图标。然后选择绑定脚本并使用以下代码段：

'use strict';

/**
 * @param {MediaPlaybackEvent} event
 */
export function mediaPlaybackChanged(event) {
	thisLayer.visible = event.state !== MediaPlaybackEvent.PLAYBACK_STOPPED;
}

此代码段将确保用户停止媒体播放或从未开始媒体播放时，该元素被隐藏。请注意，Wallpaper会区分停止播放和暂停播放：如果用户只是暂停媒体播放，则元素将保持可见。

举例：

以纯色占位符为例：

之后给脚本粘贴上述的代码，应用壁纸后即可。

（提示，需要先运行一次歌曲再关闭，才能隐藏）。