Notifications
Article
用Unity开发AR创意礼物:会动的照片
Published a month ago
198
3
用Unity开发AR创意礼物:会动的照片
小新:“想想我给女神一个相册,每个照片背后都有一段我们美好的记忆,那女神不得老感动了,哈哈哈。”
大智:“不给你拉黑就是万幸了。我已经将撩妹绝学传授给你,你可不能吃独食。”
小新:“那必须的,我得立马分享出去,造福广大同胞。”
大智:“这才像话。”
洪流学堂公众号回复会动的照片可获取视频教程。 如果你来不及动手亲自做出来,可以在洪流学堂公众号回复私人定制
最终效果如下:
开发需要用到的工具如下:
  • Unity
  • EasyAR SDK(https://www.easyar.cn/view/download.html#download-nav2)
  • 发布需要使用的:安卓(Android SDK+JDK) / iOS(XCode)
开发的简要流程如下:
  1. 创建Unity工程,导入EasyAR SDK
  2. 申请EasyAR的liscense key,并配置到Unity中
  3. 在HelloAR_ImageTarget_Video的场景基础上进行改造,实现多图片的跟踪
  4. 测试、发布

1. 创建Unity工程,导入EasyAR SDK

建议使用Unity2017以上的版本,我使用的是2019.1版本,开发过程中不会有太大差别。
下载EasyAR的Unity SDK:https://www.easyar.cn/view/download.html#download-nav2
下载完成后解压出来是一个.unitypackage文件,可以直接导入到Unity工程中。

2. 申请EasyAR的liscense key,并配置到Unity中

注册EasyAR账号,https://www.easyar.cn/
登陆后创建一个key:https://www.easyar.cn/view/developCenter.html#license
类型选择免费的EasyAR SDK Basic即可,免费版包含的功能可以满足我们的需要。
配置好之后,就可以看到一个license key:
这个key需要配置到什么地方呢?看下图中的位置:
到这配置就完成了。

3. 在HelloAR_ImageTarget_Video的场景基础上进行改造,实现多图片的跟踪

现在你可以看一下HelloAR_ImageTarget_Video场景,这个场景实现的功能是跟踪图片,识别出图片后在图片上显示并播放视频,是不是和我们的需求很相近了呢?
我们要实现的功能可以在这个场景的基础上来加以改造以下几点:
  • 实现多图片、多视频的自动配置管理
  • 自动根据图片的比例设置识别图和视频的显示比例
就可以基本实现我们的需求啦。
1、先把场景中的ImageTarget_argame_video拖成一个prefab


2、编辑这个Prefab,在Quad物体上添加如下脚本:

using System; using System.Collections; using UnityEngine; using UnityEngine.Video; using UnityEngine.Networking; [RequireComponent(typeof(VideoPlayer))] public class StreamingAssetsPathVideo : MonoBehaviour { public string Image; public string Path; // Start is called before the first frame update IEnumerator Start() { if (string.IsNullOrEmpty(Path)) yield break; var path = System.IO.Path.Combine(Application.streamingAssetsPath, Path); var uri = new Uri(path); // 设置视频的路径 GetComponent<VideoPlayer>().url = uri.AbsoluteUri; // 获取跟踪图 var www = UnityWebRequestTexture.GetTexture(new Uri(System.IO.Path.Combine(Application.streamingAssetsPath, Image))); yield return www.SendWebRequest(); Texture2D tex2D = DownloadHandlerTexture.GetContent(www); var ratio = (float)tex2D.height / tex2D.width; // 设置跟踪图的比例 transform.localScale = new Vector3(1, ratio, 1); GetComponent<Renderer>().material.mainTexture = tex2D; } }
3、在场景中添加一个空物体Manager,添加以下脚本:
using System; using easyar; using UnityEngine; [Serializable] public class Unit{ public string ImageFile; public string VideoFile; } public class Manager : MonoBehaviour { public Unit[] Units; public GameObject Prefab; public ImageTrackerBehaviour Tracker; // Start is called before the first frame update void Start() { foreach (var unit in Units) { var target = Instantiate(Prefab); var targetController = target.GetComponent<ImageTargetController>(); targetController.ImageTracker = Tracker; targetController.TargetName = unit.ImageFile; targetController.TargetPath = unit.ImageFile; var video = target.GetComponentInChildren<StreamingAssetsPathVideo>(); video.Image = unit.ImageFile; video.Path = unit.VideoFile; } } }
将识别图和视频放到StreamingAssets目录下。
配置Manager物体上的Manager脚本: Prefab选择我们刚才创建的那个Prefab。

4.发布

发布前记得先设置Unity工程中Player Settings中的Package Name,需要和之前申请license时设置的Package Name一致才行。然后根据需要发布到Android或者iOS平台即可大功告成~
洪流学堂公众号回复会动的照片可获取视频教程。 如果你来不及动手亲自做出来,可以在洪流学堂公众号回复私人定制
郑洪智
技术探路者/创业者/效率达人/终身学习者 - Student
6
Comments
郑洪智
a month ago
技术探路者/创业者/效率达人/终身学习者
Abel会动的照片其实是AR识别照片 然后播放某个视频?
是的,最好是从视频中取第一帧,这样看起来效果更好
0
Abel
a month ago
前端开发工程师
Abel会动的照片其实是AR识别照片 然后播放某个视频?
0
Abel
a month ago
前端开发工程师
会动的照片其实是AR识别照片 然后播放某个视频?
0