使用Unreal4和Wallpaper Engine制作一个桌面娘

一、简介

基于油管一个老哥的教程做的教程，由于这个教程比较老，所以现在重新实现一遍会踩一些坑。实际上我更想用Windows的API去做一个这样的桌面，现在先用WallPaper Engine爽爽吧。

最终效果：

原理是用虚幻四导出的HTML5资源来启动一个Web服务，然后用WallPaper Engine来使用这个服务就可以了，缺点就是要使用这个壁纸的话，Web服务也要自启动。

二、项目搭建

2.1 环境

unreal4.24之后的版本不支持HTML5的项目，所以得安装一个unreal4.24前的版本，我选了个4.22.3，理论上只要是4.24之前应该都没问题。人物模型可以自己找，或者和动作一起在mixamo获得

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可以全屏