Gvr Unity SDK (七) —— Unity 添加图片

上一篇讲了《Gvr Unity SDK (六) —— Unity调用Android接口》,打包好的Android代码,作为plugin放到Unity中,调用其接口,实现数据交互。本节学习如何为Unity3d添加图片

本节讲解其中的Texture2D图片的加载,前面添加全景图片SkyBox,也算是添加图片中的一种类型。

手动添加图片

准备一张需要显示的图片

Daydream.png

新建项目,导入gvr-unity-sdk,拖拽GvrViewerMain和GvrReticle到Hierarchy下相应的位置,在Assets下新建Resource文件夹,将图片拖进Assets/Resource

gvr7-1.png

修改Textrue Type 为 Sprite (2D and UI),然后Apply

gvr7-2.png

gvr7-3.png

在Hierarchy下右键create==>UI===>Image,创建一个Image

gvr7-4.png

此时的Image位置大小还需要调整,选中Canvas/Image,Image右边的Pos XPos YPos Z都设置到0的位置,这里我将显示原图的大小,图片的大小是(1920x1080),就设置Width为1920,Hight为1080,然后将Assets下的Daydream.png拖拽到source Image后面的参数栏里

gvr7-5.png

这样,图片就加载到了Image里面了,然后对UI进行微调一下。选中Canvas,将右边的Image右边的Pos XPos YPos Z都设置到0的位置,Width也为1920,Hight也为1080,Render Mode 设置为World Space

gvr7-6.png

此时,双击选中Main Camera,可以看到Main Camera已经和Canvas重叠了

gvr7-7.png

最后,再次选中Canvas 缩放为0.05,并将Pos z 值设置大一点,再次,选中相机查看效果(这步需要多次重复进行微调,直到合适为止)

gvr7-8.png

gvr7-9.png

点击播放按钮,播放一下预览效果

gvr7-10.png

代码添加图片

将上面Image配置里面的Source Image设置为None(sprite)

gvr7-11.png

Resource下面新建一个C# Script,定义一个名称AddPic.cs,然后双击用VS或者Mono打开

gvr7-12.png

加载服务器图片

比如我需要下载这张图片:https://developers.google.cn/vr/images/daydream-logo.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using System.IO;

public class AddPic : MonoBehaviour
{
//定义一个Image,在后面属性栏调用该脚本的时候进行捆绑到对应的Image对象上
public Image image;

// Use this for initialization
void Start ()
{
//格式:StartCoroutine(方法名),
StartCoroutine ("DownloadPic");

}

IEnumerator DownloadPic ()
{
//加载网络资源格式:WWW www = new WWW ((http://)或者(https://))域名地址);
WWW www = new WWW ("https://developers.google.cn/vr/images/daydream-logo.png");
yield return www;
Debug.Log (www);
//判断是否为空,并且没有Error
if (www != null && string.IsNullOrEmpty (www.error)) {
//得到纹理
Texture2D txt2d = www.texture;
//将2D纹理编码转换成PNG
byte[] pngData = txt2d.EncodeToPNG ();
//将字节数组写入到本地路径下
File.WriteAllBytes ("C:\\Users\\shoewann\\Desktop\\daydream-logo", pngData);
//创建一个Sprite
Sprite sprite = Sprite.Create (txt2d, new Rect (0, 0, txt2d.width, txt2d.height), new Vector2 (0, 0)); //将Sprite添加到image上
image.sprite = sprite;
}
}

}

回到Unity界面,选中Image,将AddPic.cs长按拖拽到右边的属性栏底部

gvr7-13.png

gvr7-14.png

点击添加过去的Add Pic (Script)脚本下面Image后面的小齿轮,选择Image,表示需要讲该Image对象捆绑,作为参数传给AddPic.cs脚本,去执行里面的下载图片完成后的赋值。

gvr7-15.png

gvr7-16.png

点击播放按钮,查看效果

gvr7-17.png

查看本地保存图片位置,图片也是存在的,这样,就是Unity加载网络图片的方法。

加载资源图片

加载资源文件里面的图片,就必须要放到Assets/Resources下(注意:一定要是Resources,不是Resource,不要忘记加s)

Resources下面需要加载的图片可以不用手动转换成Sprite (2D and UI),直接将需要的图片放到该目录下即可(下面的图片中的Daydream.png是前面示例转换过的,没有进行重新添加图片)。

gvr7-18.png

然后修改一下上面的AddPic.cs脚本文件,加载Assets/Resources/Daydream.png这张图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class AddPic : MonoBehaviour
{

public Image image;

// Use this for initialization
void Start ()
{
//格式:Texture2D txt2d = (Texture2D)Resources.Load(文件名);
Texture2D txt2d = (Texture2D)Resources.Load("Daydream");
Sprite sprite = Sprite.Create (txt2d, new Rect (0, 0, txt2d.width, txt2d.height), new Vector2 (0, 0));
image.sprite = sprite;
//==================华丽的分割线,以下为补充内容=============================
//这里,说一说Texture2D的LoadImage(byte[] byte)方法
//举个例子,比如在这个地方需要加载Android端Launcher上所有已安装应用的Icon图标
//那么首先要在Android端从AppInfo里面读出Drawable类型的图标,转换成Bitmap,最后转换成byte[]数组
//-----------------------------------
//在Unity端,通过如下方式加载获取并加载:
//byte[] icon = jo.call<byte[]>("方法名",参数);
//Texture2D txt2d = new Texture2D(宽度,高度);
//txt2d.LoadImage(icon);
//Sprite sprite = Sprite.Create (txt2d, new Rect (0, 0, txt2d.width, txt2d.height), new Vector2 (0, 0));
//image.sprite = sprite;
//==================华丽的分割线,以上为补充内容=============================
}
}

回到Unity,确认Image右边AddPic.cs脚本的地方有绑定Image对象作为了参数

点击播放按钮,查看效果

gvr7-19.png

加载本地图片

这里以PC平台为示例,加载PC本地磁盘上的资源图片(以下为本节测试图片)

android_n.jpg

然后修改一下上面的AddPic.cs脚本文件,加载图片文件的路径为C:\Users\shoewann\Desktop\android_n.jpg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using System.IO;

public class AddPic : MonoBehaviour
{

public Image image;

// Use this for initialization
void Start ()
{
//格式:StartCoroutine(方法名),
StartCoroutine ("LocalLoadPic");
}

IEnumerator LocalLoadPic ()
{
//加载本地文件资源格式: WWW www = new WWW ("file://"+@"路径")
WWW www = new WWW ("file://"+@"C:\Users\shoewann\Desktop\android_n.jpg");
yield return www;
Debug.Log (www);
if (www != null && string.IsNullOrEmpty (www.error)) {
Texture2D txt2d = www.texture;
Sprite sprite = Sprite.Create (txt2d, new Rect (0, 0, txt2d.width, txt2d.height), new Vector2 (0, 0));
image.sprite = sprite;
}
}

}

点击播放按钮,查看效果

gvr7-20.png

本节gvr-unity-sdk之Unity添加图片相关内容到此结束,更多功能需要自行扩展,未完待续。

if (本文对您有用) { Pay (请随意¥打赏) } else { Commit feedback (底部评论区提交建议、反馈) } 感谢支持!