别丢了你的弹珠
5.00/5 (2投票s)
联想一体机创新游戏
引言
《别丢了你的弹珠》是一款供单人或双人游玩的物理益智游戏。玩家将在此游戏中控制一系列积木、力场和自动化装置，以防止弹珠从桌子上滚落。每个关卡都会有不同的固定和可变障碍物，以及被发射到桌子上的弹珠和钢球。玩家必须结合使用触摸屏、屏幕上的摇杆、推杆和骰子，将所有彩色球送入各自的终点。
这是在联想Horizon 27英寸一体机上运行的该项目的示例。请注意磁场的位置，该位置由推杆的位置决定。
背景
2013年最新的一轮计算机硬件为应用程序开启了一个全新的世界。最值得注意的是Haswell架构，它将为以前只能在平板电脑上看到的PC带来电池续航。但这并非唯一的创新，屏幕尺寸增大，触摸功能变得无处不在，新设备也层出不穷。
联想最近在一体机领域推出了一款革命性设备——联想Horizon 27英寸一体机。这款设备拥有许多使其成为独一无二的特性。
- 27英寸一体机和平板电脑二合一
- 屏幕摇杆
- 屏幕推杆
- 屏幕骰子
所有这些都为以更人性化的方式与计算机交互开辟了新的机制。只有编写能够利用这些新的人机界面设备（HID）的应用程序，才能完全实现其全部优势。
特性与优势
27英寸平板电脑
尽管平板电脑已普及了大约五年，但它们一直被设计为个人设备。也就是说，它们可以共享，但只能通过传递设备来共享。凭借这款设备的大屏幕，两人可以轻松地同时在桌子对面与设备互动。它甚至足够大，可以让四个人围坐在一张小桌子旁。社交网络的需求是不可否认的，而这为与计算机进行社交提供了一种新方式。
屏幕摇杆
有许多游戏和控制系统使用摇杆界面会更自然。虽然触摸功能开启了大量的基于手势的输入，但对于某些应用程序来说，使用摇杆进行输入仍然是有意义的。这一点在许多游戏标题中都有体现，例如《Max and the Magic Marker》，该游戏实现了一个虚拟方向键；这是屏幕触摸版的摇杆。
然而，这项技术不止于拥有一个摇杆。摇杆控件也可以放置在屏幕的不同位置。这使得摇杆的输入可以根据屏幕位置进行上下文敏感处理。
屏幕推杆
谁没有享受过手中空气曲棍球推杆的触感？虽然它类似于鼠标的指针设备，但触感却截然不同。鼠标鼓励手指进行精细的移动，而推杆则由手握住，鼓励更用力、更快的操作。难怪这个基本乐趣以“联想空气曲棍球”的形式随着设备一起发布。
电子骰子
在许多电脑游戏中，骰子早已被电子替代品取代。然而，骰子仍然提供了回合所有权的感觉，尽管骰子生成的随机数字可能不如好的计算机算法，但人们天生就相信骰子是真实的。有些游戏，比如《大富翁》，用骰子掷起来感觉才对。
方法
我几年前就有一个基于弹珠的物理游戏的想法。这一切始于我在丹佛儿童医院看到他们大厅里的一个弹珠跑道式雕塑（YouTube上的视频）。
我曾试图将它变成一个2D游戏，并有很多好主意。但作为游戏概念，它存在人机交互不足的问题。它基本上成为了《疯狂机械》这类鲁布·戈德堡式游戏的子集。
然而，联想Horizon 27英寸一体机提供的与棋盘进行多种交互的能力，重新激发了我创造这一领域游戏的灵感。游戏的关键元素是：
- 俯视装满弹珠的桌子
- 离开屏幕的弹珠会滚落桌子（并发出令人满意的“噗通”声）
- 能够用触摸直接操作棋盘上的对象
- 能够通过可移动的摇杆驱动棋盘机制
- 能够通过推杆给棋盘施加力，例如吸引钢球的磁铁
- 能够通过骰子随机改变推杆的增益
- 单人和合作多人模式
游戏将构建在一个专有的 C#、XAML 基础的 WPF 游戏引擎之上，该引擎是为《‘Roid Rage》（链接）开发的，使用了 Farseer 物理引擎。由于这款游戏的主要目标是展示使用这些控件的能力，因此许多游戏机制将不会实现，例如高分、成就、经验值、漫游配置文件、共享、网络多人游戏等。如果整体游戏玩法成功，游戏可能会扩展到所有这些领域。
为了满足比赛时间的要求，需要专注于最小可行产品，预计将包括：
- 单个大厅屏幕，提供音量控制以及单人关卡或合作多人关卡选项。
- 关卡选择屏幕，用于选择特定关卡。
- 十个单人关卡，每个关卡都设计为使用多种控件。
- 十个合作多人关卡，设计为需要同时操作三个或更多游戏区域。
游戏引擎是一个基于 XAML 的引擎，它使用 Sprite 控件内的 Ellipses 和 Rectangles 来进行物理和碰撞检测。物理引擎的实体都是基于 XAML 的用户控件。因此，每个关卡都是使用 Expression Blend 设计的。这使得关卡成为设计任务而非编程任务，从而缩短了开发时间。
主要的开发工作将集中在扩展引擎以识别Horizon的独特新输入设备上。
游戏机制
游戏机制旨在模拟一个简单的挑战：防止弹珠和钢球从桌子上滚落。桌子上有积木，可以将它们放在球的路径上，使其弹向目标。在高级关卡中，需要将球分类到多个区域，这需要根据球的类型以不同方式工作的控件。例如，磁铁会影响钢球的路径，但不会影响玻璃球。与游戏的互动结合了传统的平板电脑触摸和为Horizon独特功能优化的输入。
触摸
桌子上会有木块，可以用触摸移动它们。它们在被击中时会移动。当用一个手指握住时，它们会围绕该点枢轴转动。当用两个手指握住时，它们将成为固定对象。这将出现在早期关卡中，并且随着玩家过渡到其他输入机制而变得不那么重要。
摇杆
摇杆控件将用于操作随着摇杆同步移动的固定障碍物。第一种控件将用摇杆操纵到位，然后保持静止，也就是说，摇杆控制速度。这种运动类似于《玩具总动员》中“抓娃娃机”的吊臂。后来的关卡将拥有摇杆和物体之间的直接反馈，也就是说，摇杆控制位置。这就像方向盘和汽车之间的控制。
推杆
推杆将控制每关可用的能力。这可能是一个吸引球的引力井，一个只吸引金属球的磁铁，或者其他几种机制。例如，这将允许将金属球与玻璃球分开。推杆可用的控件将在桌子上的特殊区域列出。这将与骰子结合。
骰子
游戏中的骰子允许随机选择推杆。
在上面的游戏模型中可以看到摇杆和推杆，其中摇杆控制着弹珠的进入，推杆在棋盘上产生磁场来分离钢球。
关于代码
虽然本文是关于我打算为这个平台编写的游戏，但没有代码就不像 Code Project 了。因此，我开发的引擎使用 XAML 作为精灵控件，这比典型的游戏引擎精灵带来了一些显著的好处。虽然它不如 XNA 或 Unity 那样高效，但它允许使用 Expression Blend 来设计精灵和关卡。它的设计与Physics Helper XAML项目类似，但它是独立开发的。
此引擎中的精灵是 XAML 控件，这使得精灵可以拥有不断变化的视觉效果和动画，只要精灵的物理实体不改变。例如，《‘Roid Rage》中的飞船精灵由以下图层组成：
 |
推进器：当飞船飞行时，会显示推进器的图像。要显示此图像，推进器的不透明度设置为 1.0，并且所有适当的变换都会自动处理以将其显示在飞船附近。 |
 |
飞船：飞船本身一直显示，它叠加在推进器之上。 |
 |
护盾：当护盾激活时，会显示护盾。这是一个路径而不是图像，并且该路径的渐变填充会进行动画处理，使护盾看起来处于活动状态。 |
 |
物理实体：飞船的物理特性由一组椭圆定义，这些椭圆定义了碰撞边界并用于计算飞船的旋转中心。这些在运行时不显示，除非在特殊的调试模式下。游戏引擎在初始化时会解析控件的逻辑树来确定此位置。 |
 |
叠加：叠加图像显示所有元素在一起。 |
此解决方案的好处是可以使用 Expression Blend 来创建精灵的视觉效果，叠加物理实体，并根据视图状态或通过动画动态更改可视化。
飞船控件的 XAML 定义如下。上述所有视觉元素都可以在 Canvas 布局根目录中找到。
<UserControl x:Class="MeteorMadness.Controls.Ship"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Width="100" Height="54">
<UserControl.Resources>
<Storyboard x:Name="AnimateShield">
<DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="(Shape.Fill).(Brush.RelativeTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="Shield" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="360"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Canvas x:Name="LayoutRoot" Background="Transparent" >
<Image x:Name="ThrustImage" Source="ms-appx:///Controls/Ship/Thrust.png" Opacity="0.0" Width="100" Height="54" />
<Image x:Name="ShipImage" Source="ms-appx:///Controls/Ship/Ship.png" Width="100" Height="54" />
<Ellipse Height="23" Canvas.Left="34" Stroke="Green" Width="23" Canvas.Top="3" />
<Ellipse Height="23" Canvas.Left="34" Stroke="Green" Width="23" Canvas.Top="28" />
<Ellipse Height="23" Canvas.Left="28" Stroke="Green" Width="23" Canvas.Top="15" />
<Ellipse Height="13.5" Canvas.Left="75" Stroke="Green" Width="13.5" Canvas.Top="20" />
<Ellipse Height="23" Canvas.Left="50" Stroke="Green" Width="23" Canvas.Top="15" />
<Ellipse Height="15" Canvas.Left="65" Stroke="Green" Width="15" Canvas.Top="19" />
<Path x:Name="Shield" Data="M38.1255,51.5381 37.0005,38.789 27.2504,35.0393 27.3754,18.6655 37.2505,14.2907 38.2505,0.916666 54.3756,1.66661 57.7506,13.0408 69.3757,14.2907 71.0007,17.0405 82.0008,19.7904 90.1259,23.7901 90.1259,28.7897 81.8758,33.1644 71.1258,35.9142 69.8757,39.164 58.2506,39.789 54.5006,51.5381 z" Height="51.625" Canvas.Left="26.75" Stretch="Fill" Stroke="Transparent" Canvas.Top="0.75" UseLayoutRounding="False" Width="63.875" Opacity="1.0">
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<LinearGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="36.87"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#7F0A4F17" Offset="0.328"/>
<GradientStop Color="#BF67E47E" Offset="1"/>
<GradientStop Color="#BF67E47E" Offset="0.009"/>
<GradientStop Color="#7F0A4F17" Offset="0.668"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
</Canvas>
</UserControl>
一个特别好的地方是护盾的创建。将飞船的图像添加到控件后，使用 Expression Blend 的路径控件（钢笔图标）沿着图像描绘路径非常简单。填充同样在 Blend 中实现，因此所有 Path 标签内的详细信息都使用设计器创建。
然后，精灵控件具有一些关联的属性，用于启用对这些可视化的抽象访问。特别是，Thrust 和 Shields 属性使推进器和护盾可见，在护盾的情况下还会播放相应的动画。
public partial class Ship {
public Ship() {
InitializeComponent();
}
public bool Thrust {
get {
return thrust;
}
set {
thrust = value;
ThrustImage.Opacity = thrust ? 1.0 : 0.0;
}
}
private bool thrust;
public bool Shields {
get {
return shield;
}
set {
shield = value;
if(value) {
Shield.Opacity = 1.0;
AnimateShield.Begin();
}
else {
Shield.Opacity = 0.0;
AnimateShield.Stop();
}
}
}
private bool shield;
}
未来
目前，游戏引擎已经完成，并在 Windows 应用程序《‘Roid Rage》中运行。需要对其进行扩展以支持联想 Horizon 的 HID 增强功能，并且需要创建关卡。游戏的风格经过了有意识的选择，旨在最大限度地减少在现有源代码控制之上所需的工作量，同时仍然能够制作出视觉上吸引人的游戏。将发布一个具有最小功能集的版本。
在比赛之外，有空间可以创建包含十五个关卡的多个世界，以及进一步的游戏化，如经验值和成就。对于没有 Horizon 的 HID 改进的设备，可以在适当的位置添加虚拟方向键等视觉元素。
历史
2013-08-19 2013 年英特尔应用创新大赛提交