原型制作神器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.hqwc.cn/news/176428.html

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

相关文章

hash算法

一、Hash散列算法介绍 1.引言 每个人在这个社会上生存,都会有一个属于自己的标记,用于区分不同的个体。通常使用名字就可以了。但是一个名字也并不能完全表示一个人,因为重名的人很多。所以我们可以使用一个身份证号或者指纹来表示独一无二…

力扣每日一道系列 --- LeetCode 160. 相交链表

📷 江池俊: 个人主页 🔥个人专栏: ✅数据结构探索 ✅LeetCode每日一道 🌅 有航道的人,再渺小也不会迷途。 LeetCode 160. 相交链表 思路: 首先计算两个链表的长度,然后判断两个链…

Open X-Embodiment 超大规模开源真实机器人数据集分享

近期,Google旗下的前沿人工智能企业DeepMind汇集了来自 22 种不同机器人类型的数据,创建了 Open X-Embodiment 数据集并开源了出来。该数据集让他们研发的RT-2 机器人在制造和编程方式上有了重大飞跃。 有分析称,在上述数据集上训练的 RT-2-…

gpt-4-turbo、gpt-4v、dall-e-3 api实测!

上周GPT大更新,不仅开放了GPT-4-Turbo、GPT-4-Vision等模型api,还发布了GPTs,使得用户能够根据需要定义自己的GPT应用,OpenAI在这波AI革命上又一次震撼世人。 笔者也在上周拿到了几个新模型的api资格,一直盼着可以测试…

专业的SRM系统全流程管理服务

一、什么是SRM系统 SRM系统,即供应商关系管理,是供应链管理中的重要组成部分,帮助企业与供应商建立、维护和改善业务关系,以实现双方共赢。本文将从供应商寻源到合同签订、订单履行、到付款及供应商评价等环节,阐述SR…

【MybatisPlus】条件构造器、自定义SQL、Service接口

🐌个人主页: 🐌 叶落闲庭 💨我的专栏:💨 c语言 数据结构 javaEE 操作系统 Redis 石可破也,而不可夺坚;丹可磨也,而不可夺赤。 MybatisPlus 一、条件构造器1.1 基于QueryW…

Python如何使用Matplotlib模块的pie()函数绘制饼形图?

Python如何使用Matplotlib模块的pie函数绘制饼形图? 1 模块安装2 实现思路3 pie()函数说明4 实现过程4.1 导入包4.2 定义一个类4.3 读取数据并处理4.4 定义饼图绘制方法 5 完整源码 1 模块安装 先安装matplotlib: pip install matplotlib安装numpy模块…

算不上最全,但都是必备——MySQL这些不会不行啊

MySQL篇 update 没加索引会锁全表? 说个前提,接下来说的案例都是基于 InnoDB 存储引擎,且事务的隔离级别是可重复读。 假设有两个事务的执行顺序如下: 可以看到,事务 A 的 update 语句中 where 是等值查询&#xff…

简洁高效的微信小程序分页器封装实践

前言 在现今的移动应用开发中,微信小程序已经成为了一个备受欢迎的平台。然而,随着应用的复杂性增加,数据的管理和加载成为了一个问题。本文将探讨微信小程序中的一个关键概念:封装分页器,它是提升小程序性能和用户体验…

NOIR脑机接口机器人——让脑机接口通过少样本学习实现做家务的能力

一、概述 大脑与机器人接口(BRI)是人类艺术、科学和工程的集大成之作,其影响已经贯穿于无数科幻作品和创意艺术之中,如《黑客帝国》和《西部世界》等。然而,要真正实现BRI并创造出能够与人类完美协同运作的机器人系统…

傅里叶分析(1)

​本文介绍了傅里叶分析及其在CFD的应用。由于篇幅原因,将其拆分为系列化文章: 连续信号的傅里叶分析离散信号的傅里叶分析傅里叶分析在CFD的一些应用在Fluent进行傅里叶分析的操作 1 概述 傅里叶分析是信号分析中常用方法之一。傅里叶分析可将信号在时…

如何从 iCloud 恢复永久删除的照片?答案在这里!

在数字时代,丢失珍贵的照片可能会令人痛苦。然而,了解如何从 iCloud 恢复永久删除的照片可以带来一线希望。无论是意外删除还是技术故障,本指南都提供了 2023 年的最新方法来找回您的珍贵记忆。发现分步解决方案并轻松重新访问您的照片库。不…