Steam重度用户都应该知道Wallpaper Engine这个神器，我们可以把自己的网页发布到创意工坊，供全球网友们作为壁纸下载，是不是成就感瞬间up。那就来看看如何做到吧~
_______oBBBBB8o______oBBBBBBB
_____o8BBBBBBBBBBB__BBBBBBBBB8________o88o,
___o8BBBBBB**8BBBB__BBBBBBBBBB_____oBBBBBBBo,
__oBBBBBBB*___***___BBBBBBBBBB_____BBBBBBBBBBo,
_8BBBBBBBBBBooooo___*BBBBBBB8______*BB*_8BBBBBBo,
_8BBBBBBBBBBBBBBBB8ooBBBBBBB8___________8BBBBBBB8,
__*BBBBBBBBBBBBBBBBBBBBBBBBBB8_o88BB88BBBBBBBBBBBB,
____*BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB8,
______**8BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB*,
___________*BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB8*,
____________*BBBBBBBBBBBBBBBBBBBBBBBB8888**,
_____________BBBBBBBBBBBBBBBBBBBBBBB*,
_____________*BBBBBBBBBBBBBBBBBBBBB*,
______________*BBBBBBBBBBBBBBBBBB8,
_______________*BBBBBBBBBBBBBBBB*,
________________8BBBBBBBBBBBBBBB8,
_________________8BBBBBBBBBBBBBBBo,
__________________BBBBBBBBBBBBBBB8,
__________________BBBBBBBBBBBBBBBB,
开发之前要明确我们需要抽出那些自定义功能，就以上一篇文章的css字画符为例吧。
我们需要给用户提供自定义文本内容、背景颜色、内容缩放、布局方式、字体大小、字体家族，以及一些已配置好的预设，最终发布后的效果如下图。
第一步，去steam购买Wallpaper Engine并下载安装，就十几块钱，还是很值的~
第二步，创建我们的工程。点击 编辑按钮 进入编辑器，再点击 创建壁纸 按钮，选择项目目录。这时软件会把资源拷贝到， {软件目录}\projects\myprojects\{项目目录} ，可以通过编辑器左上角的 Edit -> Open in Explorer 打开该目录。
第三步，配置工程。点击 Edit -> Change Project Settings ，设置标题和主题颜色（方便用户搜索），以及用户自定义配置。
点击 Add Property 添加项目的自定义选项，其中Type表示组件类型，有Color（颜色选择器）、Slider（滑块）、CheckBox（选择框）、Combo（下拉框）、Text（文本框）、Directory（目录选择器）、File（文件选择器），点击 OK 会在项目目录生成一个 project.json 文件，保存配置信息。比如我的工程配置如下：
生成的 project.json 如下：
{
"contentrating" : "Everyone",
"description" : "include 4 presets and support local image",
"file" : "ascii_art_css.html",
"general" :
{
"properties" :
{
"background_image" :
{
"condition" : "preset.value=='0'",
"order" : 106,
"text" : "background image",
"type" : "file",
"value" : ""
},
"custom_font_family" :
{
"condition" : "font_family=='0'",
"order" : 104,
"text" : "custom font family",
"type" : "textinput",
"value" : ""
},
"font_family" :
{
"options" :
[
{
"label" : "自定义(Custom)",
"value" : "0"
},
{
"label" : "黑体(SimHei)",
"value" : "SimHei"
},
{
"label" : "微软雅黑(Microsoft Yahei)",
"value" : "Microsoft Yahei"
},
{
"label" : "微软正黑(Microsoft JhengHei)",
"value" : "Microsoft JhengHei"
},
{
"label" : "楷体(KaiTi)",
"value" : "KaiTi"
},
{
"label" : "宋体(SimSun)",
"value" : "SimSun"
},
{
"label" : "苹方(PingFang SC)",
"value" : "PingFang SC"
},
{
"label" : "华文黑体(STHeiti)",
"value" : "STHeiti"
},
{
"label" : "华文新魏(STXinwei)",
"value" : "STXinwei"
},
{
"label" : "华文楷体(STKaiti)",
"value" : "STKaiti"
},
{
"label" : "幼圆(YouYuan)",
"value" : "YouYuan"
}
],
"order" : 103,
"text" : "font family",
"type" : "combo",
"value" : "Microsoft Yahei"
},
"font_size" :
{
"order" : 102,
"text" : "font size",
"type" : "textinput",
"value" : "12"
},
"mode" :
{
"condition" : "preset.value=='0'",
"options" :
[
{
"label" : "contain",
"value" : "contain"
},
{
"label" : "cover",
"value" : "cover"
},
{
"label" : "fill",
"value" : "fill"
},
{
"label" : "origin",
"value" : "origin"
}
],
"order" : 107,
"text" : "mode",
"type" : "combo",
"value" : "contain"
},
"preset" :
{
"options" :
[
{
"label" : "ME!ME!ME!",
"value" : "mememe"
},
{
"label" : "Rikka",
"value" : "rikka"
},
{
"label" : "Rikka2",
"value" : "rikka2"
},
{
"label" : "Mato",
"value" : "mato"
},
{
"label" : "自定义(Custom)",
"value" : "0"
}
],
"order" : 105,
"text" : "preset",
"type" : "combo",
"value" : "mememe"
},
"scale" :
{
"fraction" : true,
"max" : 1,
"min" : 0,
"order" : 101,
"precision" : 2,
"step" : 0.05,
"text" : "scale",
"type" : "slider",
"value" : 1
},
"schemecolor" :
{
"order" : 0,
"text" : "ui_browse_properties_scheme_color",
"type" : "color",
"value" : "0 0 0"
},
"text" :
{
"order" : 100,
"text" : "text",
"type" : "textinput",
"value" : "色欲壹事,乃举世人之通病不特中下之人,被色所迷.即上根之人,若不战兢自持,干惕在念,则亦难免不被所迷.试观古今来多少出格豪杰,固足为圣为贤. 祗由打不破此关,反为下愚不肖.兼复永堕恶道者,盖难胜数.楞严经云,若诸世界六道众生,其心不淫,则不随其生死相续.汝修三昧,本出尘劳.淫心不除,尘不可出. 学道之人,本为出离生死.茍不痛除此病,则生死断难出离,即念佛门,虽则带业往生.然若淫习固结,则便与佛隔,难于感应道交矣.欲绝此祸,莫如见壹切女人,皆作亲想,怨想,不净想.亲想者. 见老者作母想淘宝特卖眼线润肤乳排行榜好左旋肉堿哪个牌子好去黑头化妆水哪个牌子好有效的哪个保健补品好,长者作姊想,少者作妹想,幼者作女想,欲心纵盛,断不敢于母姊妹女边起不正念. 视壹切女人,总是吾之毋姊妹女.则理制于欲,欲无由发矣.怨想者,凡见美女,便起爱心.由此爱心,便堕恶道.长劫受苦,不能出离.如是则所谓美丽娇媚者,比劫贼虎狼、毒蛇恶蝎,砒霜鸩毒,烈百千倍. 于此极大怨家,尚犹恋恋著念,岂非迷中倍人.不净者,美貌动人,只外面壹层薄皮耳.若揭去此皮,则不忍见矣.骨肉脓血,屎尿毛发,淋漓狼藉,了无壹物可令人爱.但以薄皮所蒙.则妄生爱恋. 华瓶盛粪,人不把玩.今此美人之薄皮,不异华瓶.皮内所容,比粪更秽.何得爱其外皮,而忘其里之种种秽物,漫起妄想乎哉.茍不战兢干惕,痛除此习.则唯见其姿质美丽,致爱箭入骨,不能自拔. 平素如此,致其没后不入女腹,不可得也.入人女腹犹可.入畜女腹,则将奈何.试壹思及,心神惊怖. 然欲于见境不染心,须于未见境时,常作上三种想,则见境自可不随境转.否则纵不见境,意地仍复缠绵,终被淫欲习气所缚.固宜认真涤除恶业习气,方可有自由分."
}
}
},
"preview" : "mememe-ascii.gif",
"tags" : [ "Anime" ],
"title" : "ASCII Art",
"type" : "web",
"version" : 2,
"visibility" : "public",
"workshopid" : "2177282046"
}
第四步，在js中获取用户的配置内容并初始化项目。在脚本中重写监听对象 window.wallpaperPropertyListener ，用户每次对配置信息作出修改就会触发window.wallpaperPropertyListener.applyUserProperties 回调，该函数接受一个 properties 参数，包含了所有被修改的对象，因为properties只包含当前被修改的属性，所以需要有全局变量将前面的修改缓存起来（ps：第一次初始化时properties会包含所有的配置）。
第五步，实现业务逻辑。没啥好说的，和平时开发web项目没什么区别。
第六步，发布项目。点击左上角的 Steam -> Share Wallpaper on Workshop ，填写描述，标题，预览图以及分级（开车太狠可过不了审），点击 Pubilsh 即可，随后你就能在自己的创意工坊主页看到了。
