使用Unreal4和Wallpaper Engine製作一個桌面娘（前篇）
一、簡介
基於油管一個老哥的教程做的教程，由於這個教程比較老，所以現在重新實現一邊會踩一些坑。實際上我更想用Windows的API去做一個這樣的桌面，現在先用WallPaper Engine爽爽吧。
最終效果：
原理是用虛幻四匯出的HTML5資源來啟動一個Web服務，然後用WallPaper Engine來使用這個服務就可以了，缺點就是要使用這個桌布的話，Web服務也要自啟動。
二、專案搭建
2.1 環境
unreal4.24之後的版本不支援HTML5的專案，所以得安裝一個unreal4.24前的版本，我選了個4.22.3，理論上只要是4.24之前應該都沒問題。人物模型可以自己找，或者和動作一起在
2.2 搭建專案
- 建立個移動平臺的空專案，不管是藍圖還是c++都行。注意不要引入新手包(Starter Content)
- 修改專案的預覽方式為HTML5
- 按Ctrl + S儲存Level，然後Setting->ProjectSettings->Maps&Modes，把Editor Startup Map和Game Default Map設定成剛剛儲存的Level
- 測試，匯出專案為HTML5
- 啟動Web服務，在匯出來的資料夾裡有一個
HTML5LaunchHelper.exe, 啟動, 出現這個黑框框說明服務啟動了。使用的是本機的8000埠，如果服務起不來可能是這個埠被佔用了。
- 使用WallPaper Engine, 在WallPaper Engine中點選開啟桌布，從URL開啟，輸入我們生成的html檔案的路徑
http://localhost:8000/WallPaperTest.html，確認。
2.3 踩坑，jquery連結過期
上面的步驟現在的話應該是跑不通的了，跑到最後大概率是先黑屏，然後變成這樣
下面是解釋出問題原因的，如果不想看的話，直接編輯匯出來的專案中的WallPaperTest.html檔案，把head中的<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.3/jquery.min.js"></script>就可以了。儲存，重新啟動服務，然後用WallPaper Engine開啟就行。
踩坑經歷：
這種情況就只能用瀏覽器來除錯了。在瀏覽器開啟剛剛的連結http://localhost:8000/WallPaperTest.html，按F12開啟控制檯，稍等一下，等到出現幾個藍色按鈕之後，發現有報錯，主要看前兩個報錯，分別是jquery-2.1.3.min.js:1 Failed to load resource: net::ERR_CONNECTION_CLOSED和bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery，有點前端知識就知道，這是jquery載入失敗，編輯匯出的內容裡的WallPaperTest.html檔案。
看head就行了
<head>
<title>Touhou</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="Touhou.css" rel="stylesheet">
</head>
很明顯，https://code.jquery.com/jquery-2.1.3.min.js這條連結訪問不到，要麼就是我的網路環境不好，要麼就是這個資源真的掛了，那怎麼辦呢，找一個能用的資源，或者說拉到本地用相對路徑訪問，我個人喜歡後者啦，但是懶得折騰的話就直接貼一條新連結吧，把程式碼改成這樣
<head>
<title>Touhou</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://apps.bdimg.com/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="WallPaperTest.css" rel="stylesheet">
</head>
關掉之前的服務，重新啟動服務。用WallPaperEngine開啟http://localhost:8000/WallPaperTest.html。
終於跑通了，可喜可賀，點選FullScreen可以全屏，啊好睏啊= =，模型匯入放在第二篇吧，或者寫完了整合進來。