一、Protopie介绍
1、Protopie是将交互设计创意转变为高保真原型的最简单的工具。ProtoPie可以创造全新的数字体验，并在智能手机和电脑，以及电视和汽车控制屏幕等真实的屏幕里进行测试。它使交互设计成为工作流程的中心。其中包含三个工具，Protopie Studio，Protopie Player, Protopie Connet。
2、三者的作用
- ProtoPie Studio是一个桌面端应用程序，用来制作真实的交互原型。Protopie Player用来在智能设备（智能手机和平板）中测试原型。
- ProtoPie Player可在iOS、iPadOS以及安卓设备上使用。ProtoPie Connect作为行业解决方案中的一部分，是ProtoPie Studio的一个扩展应用程序。
- 当原型需要跨多个设备、显示器、硬件同时运行时，ProtoPie Connect充当桥梁一样的角色使其它设备之间得以相互连接并维持运行。
二、交互准备
1、Protopie端，简单制作一个pie交互原型。核心点在于制作一个发送控件，一个接收控件。
-
发送控件制作，可以对一个按钮添加一个反应，反应类型为发送。渠道设置为或Connet。信息栏里写消息Key值，然后同事勾选“同时发送数据”，注意内容要加上英文格式的双引号，表示这是一个字符串信息。
1.png -
接收控件制作。在中间控件响应与触发窗口，添加一个接收类型的触发。渠道设置为或Connet。信息栏写unity消息的Key值，勾选赋值给变量，目的是为了将收到的消息显示到Text组件上。注意这里需要在Studio的左下角的变量哪里，新建一个变量，然后这里选择这个变量。然后，想要显示消息的Text控件哪里内容选项选择表达式，表达式内容就写刚才的变量名称。
2.png
到此，pie文件制作好了。
2、打开Protopie Connet。导入刚才的Pie文件。记录下窗口左下角的ip地址。点击这个pie文件的电脑屏幕按钮可以直接打开web浏览器看到原型效果界面，或者复制旁边的链接到浏览器地址也可以。窗口的右边是消息数据记录。最上边的Message和Value就是用来发送给其他端的key和Value值，刚才第一步的发送也可以用这里做发送演示。
3、Unity准备。Unity工程需要集成Socket.io功能。可以直接使用GitHub上的一个插件。下载下来后直接拖到Unity工程就可以使用。地址如下：
https://github.com/itisnajim/SocketIOUnity
集成后如果提示没有using Newtonsoft.Json，可以通过在Unity PackageManager里去下载集成进去。
4、Unity代码示例
using System;
using System.Net.Sockets;
using Newtonsoft.Json;
using SocketIOClient;
using SocketIOClient.Newtonsoft.Json;
//using UnityEditor.VersionControl;
using UnityEngine;
using UnityEngine.UI;
using static UnityEngine.Rendering.DebugUI;
using static UnityToPie;
public class UnityToPie : MonoBehaviour
{
public SocketIOUnity socket;
//private Rigidbody rigidBody;
private int throttling = 0;
public Transform MsgRoot;
public GameObject TextPrefab;
void Start()
{
//rigidBody = GetComponent<Rigidbody>(); // Load rigidBody to get car's speed
Debug.Log("Init Socket");
//var uri = new Uri("<http://你自己的地址>"); // 该地址可在ProtoPie Connect界面的左下角找到。或者从com打ipconfig命令得知
//var uri = new Uri("<https://你自己的地址>");
var uri = new Uri("http://你自己的地址"); //注意这里是http不是https
socket = new SocketIOUnity(uri);
socket.JsonSerializer = new NewtonsoftJsonSerializer();
socket.OnConnected += (sender, e) => // this function is called when socketIO is connected
{
Debug.Log("socket.OnConnected");
};
socket.OnDisconnected += (sender, e) => // this function is called when socketIO is disconnected
{
Debug.Log("disconnect: " + e);
};
socket.OnReconnectAttempt += (sender, e) => // this function is called when socketIO retries to connect to server
{
Debug.Log($"{DateTime.Now} Reconnecting: attempt = {e}");
};
Debug.Log("Connecting...");
socket.Connect();
//这里的ppMessage是固定的，Protopie发送那边的key值就是这个
socket.OnUnityThread("ppMessage", (data) => // 该部分用来接收来自ProtoPie的讯号
{
Debug.Log(data.ToString());
Message[] messages = JsonConvert.DeserializeObject<Message[]>(data.ToString());
//foreach (Message message in messages)
//{
// Debug.Log("Message ID: " + message.messageId);
// Debug.Log("Message Value: " + message.value);
//}
MsgTextDisplay(messages[0].value);
});
}
void Update()
{
if (Input.GetKeyDown(KeyCode.Alpha1))
{
Debug.Log("ppMessage :" + throttling);
//注意这里要有messageId和value这两个key，messageId的value值要和Protopie里保持一致。
socket.EmitStringAsJSON("ppMessage", "{\"messageId\": \"SendMsg\", \"value\": \"Hello World From Unity.\"}");
throttling += 1;
}
}
void OnDestroy()
{
Debug.Log("DESTROY!!!");
socket.Dispose();
}
void MsgTextDisplay(string msg)
{
GameObject go = GameObject.Instantiate(TextPrefab);
go.GetComponent<Text>().text = msg;
go.transform.SetParent(MsgRoot);
go.transform.localPosition = Vector3.zero;
Destroy(go, 1.2f);
}
public class Message
{
public string messageId { get; set; }
public string value { get; set; }
}
}
三、测试
1、如果遇到Unity失去焦点就没办法收到消息问题，需要在Unity编辑器设置勾选Run In Background选项。
2、消息没接收到之类问题，检查key，value是否对应，json解析是否正确等。
