利用UE4和ARKit装扮逼真的AR圣诞树

为迎接2017年的圣诞节, 我们尝试用ARKit + UE4 制作了一款游戏应用”AR ChristTree”,目前已上架苹果AppStore,可以免费下载。


这款游戏应用由一名程序和一名技术美术共同完成,从构思到开发完成只花了约一周时间,借助UE4的强大工具支持,我们得以快速迭代达到理想的效果。现在这里做一些开发的回顾和经验分享。
准备阶段
通过学习UE4.18提供的ARSample,我们了解到UE4已经为ARkit封装了便于使用的蓝图节点,在开发过程中不需要再像Ios提供的原生Sample那样进行一些初始化设定和事件处理,这一点非常友好。 12.png

使用HitTestatScreenPositionTrackingSpace节点,就可以方便实现把手指点击的屏幕位置 投射到所识别的真实平面,再把真实平面中的坐标转换到UE的虚拟世界坐标,而这些都在C++插件中完成了计算。美中不足的是,目前无法获取Anchor平面的长度和宽度信息,但是通过修改插件,调用IOS的ArkitSDK方法可以获取到。
为了确定在实机上最终能达到的效果,接着我们将美术素材导入引擎然后打包ios,可以发现美术效果在IPhone的AR中还是相对比较满意的。 2.png

开发阶段
在程序和美术流程跑通后,我们经过讨论,确定了装扮圣诞树这一个主题。在操控方面,我们设计了以手指触控为主,传统UI为辅的输入方式。在光照方面,我们提供了天光和方向光的调整,以实现玩家根据环境光照来达到理想的效果。
通过编辑器的触控模拟和自定义UMG控件,我们可以迅速迭代,改变灯光颜色和方向,以及物件的材质,预览视觉效果。UI设计方面,UMG编辑器中可以方便预览iphone和ipad上的布局,只需要设置好对齐锚点即可。
5.png

完成基本功能之后,我们的圣诞树比AppStore已有的AR圣诞树效果要更真实,但是还是略显单调。我们的技术美术在UE材质方面有着丰富的从业经验,立刻有了改善方案。
在制作当中为了快速做出一些效果,我们在实现效果时使用了一些材质特效。比如刚开始时树的生长:树干是通过曲线修改模型本身属性SCALE来达到缩放效果;而树支则是通过曲线修改材质的世界偏移坐标实现生长。
12.png
91816aeca119f58f3fe09138405ac0a0edc0e151.png
一般圣诞树是在稍远距离观察的。所以装饰圣诞树的时候,大一点的发光装饰我们采取了在模型上赋予发光材质来实现,而在远处看不清实体的小灯泡则是通过材质节点来在树叶间产生规律性光点实现类似的效果。这样能省下灯泡的模型实体,最大限度减少时间消耗。
d4ed57d274402217072356e332f458d04d66624b.png
为了保证场景中雪花远观近看都能保证贴图不产生噪点、锯齿、变形和色偏。我们直接用公式计算出了一个圆。重要的是我们不用安装PS。
64246c71f4d5e59585ce8db614c91aaf428ec682.png
经过改善之后,通过这样一个面板,我们的ARChristTree 可以调整出丰富的光点效果。 12.png

为了便于玩家分享,我们接入了IOS原生的分享功能,以及提供一键装扮功能,还提供了几首不同风格的背景音乐,另外我们还开发了保存和读取功能。由于时间仓促,UI和功能设计方面还有优化和改善空间。