原型制作神器ProtoPie的使用&Unity与网页跨端交互

什么是ProtoPie?

ProtoPie是一款面向设计师的软件原型设计工具,例如制作App界面交互展示,制作好的原型可以一键发布到Web服务器,就可以浏览器访问。由于其内置了大量常用交互类型,以及"程序化"模块,甚至可以用来制作游戏的互动广告,或者直接用于无代码开发简单的应用。

从游戏行业角度来看,ProtoPie可用于:

  1. 设计师制作游戏UI界面交互、跳转等流程原型;

  2. 制作可交互的、直观的展示PPT;

  3. 制作简单的网页试玩广告、游戏CPI测试广告;

  4. 制作游戏活动网页、以及其它以网页形式提供的功能;

ProtoPie的使用:

至于如何下载安装我就不说了,ProtoPie目前还比较小众,年费五六千的价格估计也只有企业用户在用。

软件界面如图:

  1. 支持的触发事件:
  1. 支持的交互类型:
  1. 支持变量,变量赋值、变量使用。条件判断等基础逻辑;

以上内置交互方式对于基础功能可以说覆盖面很广了。但是,还缺乏封装,粒度过小。比如可以封装各种基础的UI类型,比如Button,Button点击后应该具有基本的动效和事件。但目前,这些都需要用户自己实现。

预览效果:

ProtoPie网页与Unity交互:

ProtoPie Connect:需要在官网下载ProtoPie Connect客户端

使用ProtoPie做完原型后,还需要ProtoPie Connect打开制作好的原型文件(.pie)并建立Web服务器,和跨端Socket服务。

首先要在ProtoPie提供了[发送]和[接收]两个触发事件,顾名思义用于发送和接收其它设备发来的数据:

渠道\]:如果是跨端通讯需要选择\[ProtoPie Studio或Connect\]; \[信息\]:即messageId,信息头,通常用来标记区分以做不同的事; \[数据\]:即value对应的值; ProtoPie Connect和跨端通讯: ![](https://file.jishuzhan.net/article/1723331104632475650/d820b5e01d85d81ebf87042d48bbd8f8.webp) 使用Unity代码交互: ProtectPie依托于Socket进行跨端交互,可以使用插件SocketIOUnity:[GitHub - itisnajim/SocketIOUnity: A Wrapper for socket.io-client-csharp to work with Unity.](https://github.com/itisnajim/SocketIOUnity "GitHub - itisnajim/SocketIOUnity: A Wrapper for socket.io-client-csharp to work with Unity.") 其中Socket通讯服务器地址显示在ProtoPie Connect界面左下角; ```cs socketIO = new SocketIOUnity(socketAddress); socketIO.JsonSerializer = new NewtonsoftJsonSerializer(); socketIO.OnConnected += SocketIO_OnConnected;//成功连接时回调 socketIO.OnDisconnected += SocketIO_OnDisconnected;//断开连接时回调 socketIO.OnError += SocketIO_OnError; socketIO.Connect(); //连接服务器 socketIO.OnUnityThread("ppMessage", OnMsgReceived); //监听ProtoPie Web端发来的消息 ``` ProtoPie交互统一的消息事件名为"ppMessage",消息内容为json数据,格式为: ```cs {"messageId":"Your Message Head Name", "value":"Your Message Content"} ``` 从Unity向ProtoPie Web端发送消息: ```cs socketIO.EmitStringAsJSON("ppMessage", "{\"messageId\": \"SendMsg\", \"value\": \"Hello World From Unity.\"}"); ``` 最终效果如上图类似。当然,如果Unity端使用WebView插件就可以把ProtoPie制作的内容以网页形式嵌入Unity游戏中,以实现Unity逻辑与网页逻辑的交互。对于哪些如游戏活动、应付游戏过审等,将内容放到Web端是一个不错的方案,将网页背景设置为透明,直接覆盖到Unity UI界面上,甚至可以达到以假乱真的效果。 通过Unity与网页交互,相互通讯可以实现很多功能,总之它的应用价值取决去设计师的想象力。

相关推荐
孤蓬&听雨1 个月前
Axure常用变量及使用方法详解
产品经理·axure·设计·产品设计·原型设计
孤蓬&听雨1 个月前
Axure高保真Element框架元件库
产品经理·axure·element·设计·产品设计·原型设计·元件库
我码玄黄4 个月前
Figma入门-实战列表页
产品经理·figma·设计·原型设计
我码玄黄4 个月前
Figma入门-原型交互
产品经理·figma·交互设计·原型设计·原型图
我码玄黄4 个月前
Figma入门-自动布局
产品经理·figma·交互设计·原型设计·原型图
我码玄黄4 个月前
Figma入门-约束与对齐
产品经理·figma·交互设计·原型设计·原型图
我码玄黄4 个月前
Figma入门-组件变体
产品经理·figma·交互设计·原型设计
我码玄黄4 个月前
Figma入门-初识组件
产品经理·figma·交互设计·原型设计
我码玄黄5 个月前
设计一致性的关键:掌握 Axure 母版使用技巧
产品经理·axure·原型设计
不秃头的UI设计师5 个月前
跨越地域限制:在线原型设计软件的自由与便捷
ui·原型设计·原型设计软件·在线设计