行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

教程

7

阅读时间

如何在 ProtoPie 中使用倾斜传感器

使用 ProtoPie,游戏原型制作可以变得轻而易举。了解如何为你的手机游戏添加酷炫的倾斜运动控制。

伯恩·埃斯皮诺, 客户学习经理

准备好为你的原型加入一个令人兴奋的变化——倾斜动作控制!如果你是想突破游戏 UX 设计边界的游戏爱好者,那么你来对地方了。

在本教程中,我们将指导你把基于设备的倾斜操作无缝集成到一个Shoot 'em Up游戏原型中。结果呢?在超休闲游戏品类中,打造一种打破传统限制的沉浸式玩法体验。

真正让ProtoPie脱颖而出的是其卓越的原生传感器支持功能,它为丰富的创意机会打开了大门。那么,直接进入实操步骤,看看这个动态功能如何真正革新你的游戏项目吧。

视频

概览

  • 你将学到什么

  • 开始之前

  • 如何创建倾斜交互

  • 添加倾斜触发器

  • 理解倾斜传感器

  • 实现移动响应

  • 添加垂直倾斜控制

  • 测试组合控制

  • 就是这样!Easy as Pie

  • 加入游戏原型设计大师课

  • 用高级原型设计提升你的设计

你将学到什么

完成本教程后,你将知道如何:

  • 使用 ProtoPie 为移动游戏原型添加倾斜控制。

  • 理解设备倾斜传感器的工作原理。

  • 将倾斜动作连接到游戏内操作,打造动态体验。

完成时间:≤5 分钟

开始之前

在开始之前,请确保你已在智能手机上安装 ProtoPie Player 应用。该应用对于测试和验证你将要实现的倾斜动作控制至关重要。

下载下方的起始 Pie 文件,并在 ProtoPie Studio 中打开我们的Shoot 'em up游戏原型。

起始 Pie 文件完成版 Pie 文件

如何创建倾斜交互

1. 添加一个倾斜触发器

让我们先从引入 Tilt(倾斜)触发器开始。它充当设备倾斜与游戏内动作之间的桥梁。本质上,它让我们可以选择要处理的具体方向——X、Y 或 Z 轴。随后 ProtoPie 会将这些细微的倾斜动作解析为输入指令。

注册以获取最新的原型设计资讯。

2. 理解倾斜传感器

继续之前,理解设备中倾斜传感器的技术工作机制非常关键。这些传感器利用微机电系统(MEMS)和惯性测量单元(IMU)来测量设备在 X、Y、Z 轴上的姿态。

X用于让设备朝远离你或朝向你的方向倾斜。

Y用于像转动手腕一样向左和向右倾斜。

然后Z用于像转动方向盘一样左右旋转。也就是说,手机平面始终与你平行,但你会像转方向盘那样左右旋动它。

  • 选择 Y 轴方向:该做选择了!在本教程中,我们将主要聚焦 Y 轴,它支持横向倾斜动作。回到 Tilt 触发器并选择 Y 轴作为方向。这样我们就能在游戏中实现直观的左右倾斜控制。


Set tilt direction to Y-Axis in studio


将倾斜方向设置为 Y 轴

3. 实现移动响应

让我们通过添加 Move(移动)响应让飞船动起来。这将把设备中的倾斜动作与飞船的响应无缝连接起来。

接下来,定义 Tilt 的范围参数:向左倾斜 -10 度时,将飞船移动到 X 坐标 63 像素;同样,向右倾斜 10 度时,将飞船移动到 X 坐标 312 像素。


Implement move responses in ProtoPie Studio


实现 Move 响应

💡 专业提示!请记住,ProtoPie 会自动补全中间数值,从而实现平滑、连续的移动。

因此,在 0 度的中立倾斜状态下,飞船会位于 63 和 312 像素之间的中间位置。


rocket tilt in studio


ProtoPie 会自动补全中间数值

  • **使用 ProtoPie Player 试试看:测试时间!运行原型后,你就能观察飞船如何响应设备姿态。拿起你的智能手机,在 ProtoPie Player 应用中亲自体验这个原型。 重要:**这里你需要记住的是,设备的初始倾斜位置会作为参考点。所以,当你点击“运行”按钮时手机所处的位置,就被视为中立点。


phone prototype in initial tilt position


设备初始倾斜位置会成为“参考点”

4. A添加垂直倾斜控制

让我们加入更多维度!这一次,我们添加前后方向的动作控制。

为此,我们再添加一个 Tilt 触发器,这次选择 X 轴作为方向。然后再次在飞船上添加 Move 响应。将前倾(即远离你的方向)设置为 -5 度,此时飞船的 Y 位置应为 550 像素。

当你向后倾向自己时,可以把飞船底部位置作为中立点,即 0 度。此时飞船将位于 650 像素。


mobile prototype with vertical tilt control


添加垂直倾斜控制

5. 测试组合控制

准备好来点真格的吗?再次在 ProtoPie Player 应用中运行原型,然后朝任意方向倾斜手机——左、右、前或后。观察它们如何协同工作。

由于每个触发器只在飞船的一个方向上生效,因此 X 和 Y 可以同时发生。ProtoPie 强大的原生传感器支持让飞船能够将设备倾斜流畅地转化为引人入胜的游戏动作。


gif of prototype in tilting motion


运行原型并测试所有倾斜动作

就是这样!Easy as Pie

你做到了!你已成功将倾斜动作控制融入到你的Shoot 'em Up游戏原型中。借助 ProtoPie 的原生传感器支持功能,你的游戏获得了更具动态性和响应性的交互体验,从而与其他作品区别开来。

加入游戏原型设计大师课

为什么止步于此?加入我们的 **ProtoPie School 免费 **移动游戏原型设计大师课,释放你的游戏潜力,并用 ProtoPie 探索更多可能。不到两小时,你就能学会所需的一切,让游戏开发变得不再那么复杂和困难。

用高级原型设计提升你的设计

到这里就告一段落了!你已经掌握了倾斜动作控制的力量,现在舞台交给你去创造激动人心、沉浸感十足的游戏体验。继续关注更多精彩教程,踏上打造下一个爆款游戏的旅程。

[下载 ProtoPie] {获取新闻与原型设计技巧}