前言

最近一直在搜罗新奇的 Wallpaper 壁纸

这是我的壁纸列表

这些都是我比较喜欢的壁纸

如你所见，大部分都是二次元就是了（

本文将基于 https://steamcommunity.com/sharedfiles/filedetails/?id=2475742954 这一炮姐网页壁纸的素材，重构为场景类壁纸

使其性能消耗更少，打开速度更快！

建议有编程基础再尝试制作壁纸，会如同如鱼得水

言归正传

Wallpaper 是一个非常好的壁纸引擎

https://store.steampowered.com/app/431960/Wallpaper_Engine/

我是 19RMB 入手的，现在似乎涨到 22.9 了，不过依旧可以理解

据说 Wallpaper 的开发者只有俩人

毕竟也是要吃饭的嘛

为什么使用 Wallpaper

Wallpaper 得益于 steam 强大且丰富的创意工坊，拥有一大批精美优秀的壁纸

这也是为什么所有人都不推荐使用 WeGame 版本的原因

事实上，只要你 b 站视频刷的够多，你肯定见过 Wallpaper 的身影，绝大多数动态壁纸都是 Wallpaper 上来的

上手

类型

Wallpaper 将壁纸分为了

场景
视频
网页
应用程序

这四大类，下面就简要说明一下

场景

这是 Wallpaper 中最常见的类型，同时也是官方推荐使用的，因为它足够简单易用，功能繁多，广受好评

本文的上手也是基于这一类型制作的

场景类的编程语言是 SceneScript，可以先去看看 SceneScript Introduction | Wallpaper Engine - Designer Documentation 这篇官方文档

可以大致了解一下，其实和 js 非常像

视频

顾名思义视频

就是将普通视频作为壁纸而已，无需多言

网页

就是将网页作为壁纸使用

可以使用网页的 css 和 js

因此熟悉网页开发的朋友可以轻易地上手

但是如果你会 js 的话，其实倒不如直接做场景类壁纸

应用程序

最不推荐！！！

应用程序类壁纸具有相当大的安全隐患

这也是“赛博花柳”存在的原因！！！

就是直接运行一个应用程序并全屏以及无边框到你的桌面，因此，Wallpaper 并做不了任何限制，你电脑上的所有数据、密码之类任其读取

并且这类同样是创意工坊上存在的，千万不要下载！！！就算要下载也要选择信任的作者，多看评论区！

开始编写

Wallpaper 自带一个极其丰富的编辑器

在主界面的左下角就能找到

打开之后，你就可以看到上文提到的壁纸类型了，你可以先试试视频和网页，先摸清 Wallpaper 编辑器的基础使用

这里就以场景类壁纸做上手了

先从原壁纸那里提取出四个 webm 格式视频，转化为 mp4，加入素材

之后在页面下方的“用户属性”面板添加几个属性，这就是用户可以自定义的内容

可以看到出现了警告图标，鼠标放上面一看，没有绑定组件，我们在这里使用脚本对其进行检测和绑定，可以直接忽略

但是实际上做些简单的壁纸是可以直接绑定的，这样可以实现 0 代码自定义壁纸，详情可以看这篇官方文档，这里就不再赘述了

https://docs.wallpaperengine.io/en/scene/userproperties/overview.html

在图层详情的右上角可以看见一个齿轮图标，点击打开“绑定脚本”

然后按照 js 的语法写了一些简单的代码，大佬轻喷

'use strict';

/**
 * @param {Boolean} value - for property 'visible'
 * @return {Boolean} - update current property value
 */
export function update(value) {
	check(engine.userProperties);//每一刻都检查用户属性
	return value;
}
/**
 * @param {Object} changedUserProperties - only includes user properties that were recently changed!
//没错，only includes user properties that were recently changed!
//所以这是个麻烦事，还不如直接使用engine.userProperties来进行读取属性
 */
export function applyUserProperties(changedUserProperties) {
    check(changedUserProperties);//用户属性被更改时更需要检查
}
export function check(changedUserProperties){
    if (changedUserProperties.wallpaperetype !== undefined) {
        shared.chose = changedUserProperties.wallpaperetype;//拿到wallpaperetype组件用户选择的类型（默认是Auto）（没错，我多打了个e，只能将错就错）
    }
    
    //console.log("Current choice:", shared.chose);
    if (engine.userProperties.wallpaperetype === "Auto") {
        let date = new Date();
        let hour = date.getHours();//拿到小时
        //let hour = 1;
        //console.log(hour,shared.hour);
        //console.log(engine.userProperties.daystarts,engine.userProperties.eveningstarts);
        if (hour >= engine.userProperties.daystarts && hour < engine.userProperties.eveningstarts){
            //如果在指定的时间范围内
            thisLayer.visible = true;//图层可见
            
        }else{//否则
            thisLayer.visible = false;//不可见
        }
        
    } 
    else if (shared.chose === "Day") {
        //如果选择为Day，那么就始终可见
        thisLayer.visible = true;
        
    }else{
        thisLayer.visible = false;
    }
    
}

/**
 * @param {Boolean} value - for property 'visible'
 * @return {Boolean} - update current property value
 */
export function init(value) {
    engine.userProperties.wallpaperetype = "Auto";//阿巴阿巴我也不知道这是干嘛的，但是如果不加可能会导致拿不到属性值
    engine.userProperties.daystarts = 5;
	return value;
}

然后以此类推复制四份出来稍微改一下，尤其是 Night 的跨 24 点的策略


'use strict';

/**
 * @param {Boolean} value - for property 'visible'
 * @return {Boolean} - update current property value
 */
export function update(value) {
	check(engine.userProperties);
	return value;
}
/**
 * @param {Object} changedUserProperties - only includes user properties that were recently changed!
 */
export function applyUserProperties(changedUserProperties) {
    check(changedUserProperties);
}
export function check(changedUserProperties){
    if (changedUserProperties.wallpaperetype !== undefined) {
        shared.chose = changedUserProperties.wallpaperetype;
    }
    //console.log("Current choice:", shared.chose);
    if (shared.chose === "Auto") {
        const date = new Date();
        const hour = date.getHours();
        const nightStarts = engine.userProperties.nightstarts;
        const morningStarts = engine.userProperties.morningstarts;

        // 处理跨天逻辑
        if (nightStarts < morningStarts) {
            // 常规时间段（不跨天）
            thisLayer.visible = (hour >= nightStarts && hour < morningStarts);
        } else {
            // 跨天时间段（覆盖午夜）
            thisLayer.visible = (hour >= nightStarts || hour < morningStarts);
        }
    }
    else if (shared.chose === "Night") {
        thisLayer.visible = true;
    }
    else {
        thisLayer.visible = false;
    }
}

然后运行测试一下，完美！更改属性也能正常应用，只不过切换动画有点懒得做了 Qrz...，之后补上（画饼，毕竟涉及到太多，我才上手一下午）