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

什么是ProtoPie?

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

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

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

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

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

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

ProtoPie的使用: 

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

软件界面如图:

1. 支持的触发事件:

2. 支持的交互类型:

 

 3. 支持变量,变量赋值、变量使用。条件判断等基础逻辑;

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

 预览效果:

 

ProtoPie网页与Unity交互:

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

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

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

 [渠道]:如果是跨端通讯需要选择[ProtoPie Studio或Connect];

 [信息]:即messageId,信息头,通常用来标记区分以做不同的事;

 [数据]:即value对应的值;

ProtoPie Connect和跨端通讯:

 使用Unity代码交互:

ProtectPie依托于Socket进行跨端交互,可以使用插件SocketIOUnity:GitHub - itisnajim/SocketIOUnity: A Wrapper for socket.io-client-csharp to work with Unity.

其中Socket通讯服务器地址显示在ProtoPie Connect界面左下角;

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数据,格式为:

{"messageId":"Your Message Head Name", "value":"Your Message Content"}

从Unity向ProtoPie Web端发送消息:

socketIO.EmitStringAsJSON("ppMessage", "{\"messageId\": \"SendMsg\", \"value\": \"Hello World From Unity.\"}");

最终效果如上图类似。当然,如果Unity端使用WebView插件就可以把ProtoPie制作的内容以网页形式嵌入Unity游戏中,以实现Unity逻辑与网页逻辑的交互。对于哪些如游戏活动、应付游戏过审等,将内容放到Web端是一个不错的方案,将网页背景设置为透明,直接覆盖到Unity UI界面上,甚至可以达到以假乱真的效果。

通过Unity与网页交互,相互通讯可以实现很多功能,总之它的应用价值取决去设计师的想象力。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/137111.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Redis】掌握篇--Redis与SSM进行整合

🥳🥳Welcome Huihuis Code World ! !🥳🥳 接下来看看由辉辉所写的关于Redis的相关操作吧 目录 🥳🥳Welcome Huihuis Code World ! !🥳🥳 一.Redis与SSM的整合 1.添加Redis依赖 …

Scala爬虫实战:采集网易云音乐热门歌单数据

导言 网易云音乐是一个备受欢迎的音乐平台,汇集了丰富的音乐资源和热门歌单。这些歌单涵盖了各种音乐风格和主题,为音乐爱好者提供了一个探索和分享音乐的平台。然而,有时我们可能需要从网易云音乐上获取歌单数据,以进行音乐推荐…

vscode文件跳转(vue项目)

在 .vue 文件中,点击组件名打开 方式1: 在 vue 组件名上,桉住ctrl 鼠标左键 // 重新打开一个tab 方式2: 在 vue 组件名上,桉住ctrl shift 鼠标左键 // 在右侧拆分,并打开一个tab .vue文件的跳转 按住 …

Python TCP服务端多线程接收RFID网络读卡器上传数据

本示例使用设备介绍:WIFI/TCP/UDP/HTTP协议RFID液显网络读卡器可二次开发语音播报POE-淘宝网 (taobao.com) #python通过缩进来表示代码块,不可以随意更改每行前面的空白,否则程序会运行错误!!!如果缩进不…

MATLAB|风玫瑰图

目录 扫一扫关注公众号 效果图 粉丝给的图: 复刻的图: 其他样式效果: 数据 绘图教程 绘制左边Y轴 绘制主、次网格和主、次刻度的极坐标区域。 添加刮风数据,添加数据和颜色、图列大小映射关系。 颜色条绘制​​​​​​…

虹科示波器 | 汽车免拆检测 | 2017款路虎发现车行驶中发动机抖动且加速无力

一、故障现象 一辆2017款路虎发现车,搭载3.0L发动机,累计行驶里程约为3.8万km。车主反映,车辆在行驶过程中突然出现发动机抖动且加速无力的现象,于是请求拖车救援。 二、故障诊断 拖车到店后首先试车,发动机怠速轻微抖…

【学习笔记】MySQL死锁及热点行问题

目录 案例优化思路死锁的一些记录笔记热点行问题 本文记录下关于MySQL优化的学习和一点点思考。 案例 一个并发比较大的下单接口; 包括 step1 扣减商品库存step2 生成订单数据step3 记录操作记录 伪代码如下,底层使用的是MySQL数据库,单体服务…

Linux应用开发基础知识——文件IO操作(三)

前言: 在 Linux 系统中,一切都是“文件”:普通文件、驱动程序、网络通信等等。 所有的操作,都是通过“文件 IO”来操作的。所以,很有必要掌握文件操作的常用接口。 目录 一、文件IO 1.什么是文件: 2.怎么…

【Android】画面卡顿优化列表流畅度一

卡顿渲染耗时如图: 卡顿表现有如下几个方面: 网络图片渲染耗时大上下滑动反应慢,甚至画面不动新增一页数据加载渲染时耗时比较大,上下滑动几乎没有反应,画面停止没有交互响应 背景 实际上这套数据加载逻辑已经运行…

绝对力作:解锁string的所有关键接口,万字深度解析!

W...Y的主页 😊 🍔前言: 通过博主的上篇文章,我相信大家已经认识了STL并且已经迫不及待想学习了,现在我们就走近STL的第一种类——string。 目录 为什么学习string类? C语言中的字符串 标准库中的str…

【机器学习】梯度下降预测波士顿房价

文章目录 前言一、数据集介绍二、预测房价代码1.引入库2.数据3.梯度下降 总结 前言 梯度下降算法学习。 一、数据集介绍 波士顿房价数据集:波士顿房价数据集,用于线性回归预测 二、预测房价代码 1.引入库 from sklearn.linear_model import Linear…

筹码穿透率指标选股公式,衡量筹码抛压

在前面的文章中,介绍了博弈K线,它是根据筹码分布的原理结合普通K线的方法绘制出来的。当博弈K线的实体部分比较长的时候,说明当天穿越筹码密集区,有大量的筹码解套。通过引入换手率,可以衡量套牢盘的抛压程度。如果穿越…

Xcode 最好用的 11 个快捷键

今天来分享一下我觉得很好用的 Xcode 12 个快捷键 1. Command Shift O 快速打开,可让你快速导航到项目中的任何文件、函数、变量 2. Command Shift J 快速定位到当前代码所在的文件夹位置,并切换到项目导航器中显示 3. Command Shift Y 快速…

2011年03月31日 Go生态洞察:Godoc —— Go代码的文档化

🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…

list部分接口模拟实现(c++)

List list简介list基本框架list构造函数list_node结构体的默认构造list类的默认构造 push_back()iteartor迭代器迭代器里面的其他接口const迭代器通过模板参数实现复用operator->() insert()erase()clear()析构函数迭代器区间构造拷贝构造operator() list简介 - list可以在…

【Java】本地开发环境正常、测试或生产环境获取的文件路径不对的问题

引 Java 中经常获取本地文件或者resource下的文件,要获取文件,首先要获得本地路径。 Java 本身或一些开源工具包都提供了很多获取路径的方法。但使用时经常遇到本地开发环境正常、测试或生产环境获取的文件路径不对的问题。 本文将列出几种常见的获取…

python开发过程中注意编码规范~

文章目录 一、 代码编排二、 文档编排三、 空格的使用四、 注释五、 文档描述六、 命名规范总体原则,新编代码必须按下面命名风格进行,现有库的编码尽量保持风格。七 编码建议关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、…

【三维重建】摄像机几何

针孔相机模型 为了方便我们对针孔相机模型进行数学建模,我们往往对虚拟像平面进行研究,因为虚拟像平面的方向与我们实际物体的方向一致。 通过相似三角形法可以得到三维坐标到二维坐标映射 将像平面原点坐标移动到左下角: 加上现实世界单位&a…

【神经网络】【GoogleNet】

1、引言 卷积神经网络是当前最热门的技术,我想深入地学习这门技术,从他的发展历史开始,了解神经网络算法的兴衰起伏;同时了解他在发展过程中的**里程碑式算法**,能更好的把握神经网络发展的未来趋势,了解神…

【Linux笔记】Linux环境变量与地址空间

【Linux笔记】Linux环境变量与地址空间 一、命令行参数1.1、main函数的参数1.2、main函数的第三个参数 二、环境变量的概念与内容2.1、环境变量的概念2.2、环境变量的分类2.3、环境变量的组织形式2.4、常见的环境变量 三、设置环境变量3.1、通过命令获取或设置环境变量3.2、通过…