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

news2024/11/25 0:41:26

什么是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.coloradmin.cn/o/1194638.html

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

相关文章

OpenWRT配置SFTP远程文件传输,让数据分享更安全

文章目录 前言 1. openssh-sftp-server 安装2. 安装cpolar工具3.配置SFTP远程访问4.固定远程连接地址 前言 本次教程我们将在OpenWRT上安装SFTP服务,并结合cpolar内网穿透,创建安全隧道映射22端口,实现在公网环境下远程OpenWRT SFTP&#xf…

网络的相关概念介绍

客户端和服务器通常运行在不同的主机上,通过计算机网络的硬件和软件资源来通信。网络是个复杂的系统,这里我们从程序员的角度来介绍一下网络相关的概念。 对主机而言,网络只是一种I/O设备,是数据源和数据接收方。 一个插到I/O总线…

【Linux奇遇记】我和Linux的初次相遇

🌈个人主页: Aileen_0v0 🔥系列专栏:Linux奇遇记系列专栏💫"没有罗马,那就自己创造罗马~" 目录 前端和后端的介绍 1.前端 2.后端 3.前后端区别 Linux在前后端开发中的角色 如何学习Linux 去进行程序开发 Linux的常见根目…

Windows 安装 JDK 8 和 JDK 17 和多版本JDK切换

下载 JDK JDK 8 下载地址:https://www.aliyundrive.com/s/koYe1SVRg76 JDK 17 下载地址: https://www.aliyundrive.com/s/tBcbUtAHTbg 安装 JDK 点击可执行文件 jdk-8u291-windows-x64.exe 进行安装 如果需要更改JDK安装目录,根据个人偏好…

海康Visionmaster-通讯管理:使用 Modbus TCP 通讯 协议与流程交互

使用 Modbus TCP 通讯协议与视觉通讯,当地址为 0000 的保持型寄存器(4x 寄存器)变为 1 时,触发视觉流程执行一次,同时视觉将地址为 0000 的寄存器复位(也即写为 0),视觉流程执行完成后,将结果数…

Wix使用velo添加Google ads tag并在form表单提交时向谷歌发送事件

往head里加代码时,不能看谷歌的代码,要看wix的代码,不然必定踩坑 https://support.wix.com/en/article/tracking-google-ads-conversions-using-wix-custom-code 这里的代码才对,因为wix搞了个velo,这个velo很傻x&am…

使用LLama和ChatGPT为多聊天后端构建微服务

微服务架构便于创建边界明确定义的灵活独立服务。这种可扩展的方法使开发人员能够在不影响整个应用程序的情况下单独维护和完善服务。然而,若要充分发挥微服务架构的潜力、特别是针对基于人工智能的聊天应用程序,需要与最新的大语言模型(LLM&…

机器学习——实践

目录 一、数据集划分 1、交叉验证 2、不平衡数据的处理 代价敏感学习 二、评价指标 三、正则化、偏差和方差 为什么要标准化/归一化? 过拟合的处理——Dropout 过拟合的处理——Early stopping 过拟合的处理——数据增强 偏差和方差 ​编辑 一、数据集划分…

【Git】gui图形化界面的使用、ssh协议以及idea集成Git

目录 gui图形化界面的使用 介绍 特点 gui图形的使用 ssh协议 介绍 步骤及概念 ssh协议的使用 配置公钥 idea集成Git idea配置git IDEA安装gitee IDEA中登入Git ​编辑 项目分享 克隆分享的项目 ​编辑 ​编辑 idea上传远程 gui图形化界面的使用 介绍 GUI&#xff08…

单链表按位序插入

按位序插入(带头结点) #define NULL 0typedef struct LNode {int data;struct LNode *next; }LNode,*LinkList;//在第i个位置插入数据e&#xff08;带头结点&#xff09; bool ListInsert(LinkList &L, int i, int e){if (i<1)return false;LNode *p L; //指…

canvas 曲线图 双数值轴 山峰图

下面的代码本人亲自撰写&#xff0c;原生不易啊。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>D…

从单体到微服务:使用Spring Boot构建事件驱动的Java应用程序

Spring Boot是Pivotal团队设计的一种微服务框架&#xff0c; 基于Spring开发&#xff0c;用于简化新Spring应用的初始搭建及开发过程&#xff0c;提升Spring 开发者的体验。它秉持“约定大于配置”的思想&#xff0c;集成了大量开箱即用的第三方库&#xff0c;支持绝大多数开源…

HCIP---VRRP

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 一. VRRP概述 VRRP---虚拟路由器冗余协议 VRRP&#xff08;Virtual Router Redundancy Protocol&#xff09;是一种用于在多个路由器之间创建虚拟路由器的协议。 VRRP使用了一系列协议来实现路…

win11 idea 错误: 找不到或无法加载主类

买了新电脑win11系统&#xff0c;配置环境之后运行项目&#xff0c;始终运行不起来&#xff0c;一直报 刚开始以为是环境没装好&#xff0c;但是我创建其他项目运行时是正常的 纠结了好久突然发现&#xff0c;是不是因为项目路径中有中文造成的找不到编译文件 最后把项目改为…

【Python】AppUI自动化—appium自动化元素定位、元素事件操作(17)下

文章目录 前言一.Appium 元素定位1.定位方式种类2.如何定位2.1 id定位2.2 className定位2.3 content-desc 定位2.4 Android Uiautomator定位4.1 text定位4.2 text模糊定位4.3 text正则匹配定位4.4 resourceId定位4.5 resourceId正则匹配定位4.6 className定位4.7 className正则…

P6入门:项目初始化2-项目详情之日期Date

前言 使用项目详细信息查看和编辑有关所选项目的详细信息&#xff0c;在项目创建完成后&#xff0c;初始化项目是一项非常重要的工作&#xff0c;涉及需要设置的内容包括项目名&#xff0c;ID,责任人&#xff0c;日历&#xff0c;预算&#xff0c;资金&#xff0c;分类码等等&…

RPC 框架 openfeign 介绍和学习使用总结

一、基本概念 RPC 远程过程调用&#xff08;Remote Procedure Call&#xff09;的缩写形式 Birrell 和 Nelson 在 1984 发表于 ACM Transactions on Computer Systems 的论文《Implementing remote procedure calls》对 RPC 做了经典的诠释。 RPC 是指计算机 A 上的进程&am…

元核云亮相金博会,智能质检助力金融合规

11月初&#xff0c;第五届中新&#xff08;苏州&#xff09;数字金融应用博览会&#xff5c;2023金融科技大会在苏州国际博览中心举办&#xff0c;围绕金融科技发展热点领域及金融行业信息科技领域重点工作&#xff0c;分享优秀实践经验&#xff0c;探讨数字化转型路径与未来发…

C# OpenCvSharp DNN HybridNets 同时处理车辆检测、可驾驶区域分割、车道线分割

效果 项目 代码 using OpenCvSharp; using OpenCvSharp.Dnn; using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System.Linq; using System.Numerics; using System.Text; using System.Windows.Forms;namespace OpenCvSharp_D…

设备零部件更换ar远程指导系统加强培训效果

随着科技的发展&#xff0c;AR技术已经成为了一种广泛应用的新型技术。AR远程指导系统作为AR技术的一种应用&#xff0c;具有非常广泛的应用前景。 一、应用场景 气象监测AR教学软件适用于多个领域&#xff0c;包括气象、环境、地理等。在教学过程中&#xff0c;软件可以帮助学…