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 即可，隨後你就能在自己的創意工坊主頁看到了。
