a-frame_使用A-Frame，PubNub和WebVR构建基于浏览器的多人VR游戏

a-frame

by Namratha Subramanya

由Namratha Subramanya

使用A-Frame，PubNub和WebVR构建基于浏览器的多人VR游戏 (Build a Multiplayer Browser-based VR Game with A-Frame, PubNub, and WebVR)

Advancements in technology have made Virtual Reality (VR) more immersive and affordable than ever. This immersive environment can be similar to the real world. Or it can be fantastical, creating an experience that is not possible in ordinary reality.

技术的进步使虚拟现实(VR)的沉浸感和负担能力比以往任何时候都高。 这种身临其境的环境可能类似于现实世界。 或者它可能是梦幻般的，创造了在普通现实中无法实现的体验。

Better yet, high-quality VR devices are available at low prices these days. With a number of smartphone-compatible VR headsets such as Google Cardboard, Samsung Gear VR, Oculus Rift and HTC Vive, VR is showing to be the next big thing.

更好的是，这些天以低价提供了高质量的VR设备。 借助许多智能手机兼容的VR耳机，例如Google Cardboard，Samsung Gear VR，Oculus Rift和HTC Vive，VR将会成为下一个大趋势。

In this tutorial, we’ll take advantage of that and build a real-time, multiplayer VR game using A-Frame, PubNub, Glitch, and WebVR.

在本教程中，我们将利用这一优势，并使用A-Frame，PubNub，Glitch和WebVR构建实时的多人VR游戏。

The full GitHub code repository can be found here.

完整的GitHub代码存储库可在此处找到 。

网络录像机 (WebVR)

WebVR is an open specification that makes it possible to experience VR in your browser. It is a JavaScript browser API that acts as an interface for the VR hardware. WebVR is cross-platform and can be used to develop, view and share VR content on any browser that supports VR. With WebVR, you can open up a browser and get into VR just by clicking a link. Working with WebVR directly requires knowledge of JavaScript and WebGL.

WebVR是一个开放的规范，可以在浏览器中体验VR。 它是一个JavaScript浏览器API，充当VR硬件的接口。 WebVR是跨平台的，可用于在支持VR的任何浏览器上开发，查看和共享VR内容。 使用WebVR，您只需单击链接即可打开浏览器并进入VR。 直接使用WebVR需要JavaScript和WebGL的知识。

一个框架 (A-Frame)

A-Frame is a virtual reality framework that is built upon the WebVR API. It uses the WebVR API to gain access to VR headset sensor data (position, orientation) to transform the camera and to render content directly to VR headsets. A-Frame is an open community project that uses the WebVR API along with HTML, CSS, JavaScript, and Three.js. A-Frame aims for highly immersive and interactive VR content with native-like performance. At the same time, A-Frame wants everyone to be able to get involved with VR content creation. A-Frame supports all major headsets with their controllers.

A-Frame是基于WebVR API构建的虚拟现实框架。 它使用WebVR API来访问VR头戴式耳机传感器数据(位置，方向)，以转换摄像机并将内容直接呈现到VR头戴式耳机。 A-Frame是一个开放社区项目，使用WebVR API以及HTML，CSS，JavaScript和Three.js。 A-Frame旨在提供具有原生体验的高度沉浸式和交互式VR内容。 同时，A-Frame希望每个人都能参与VR内容的创建。 A-Frame支持所有主流耳机及其控制器。

毛刺 (Glitch)

Glitch provides an online code editor with instant deployment and hosting of websites. The editor supports both front-end and back-end code as well as multiple files and directories. Glitch lets you remix (i.e., copy) existing projects and make them our own and instantly host and deploy changes for everyone to see. Firefox Nightly allows you to debug the VR content using debug console.

Glitch为在线代码编辑器提供了即时部署和托管网站的功能。 该编辑器支持前端和后端代码以及多个文件和目录。 Glitch允许您重新混合(即复制)现有项目并使它们成为我们自己的项目，并立即托管和部署更改以供所有人查看。 Firefox Nightly允许您使用调试控制台调试VR内容。

游戏环境 (Gaming Environment)

A帧物理系统 (A-Frame Physics System)

aframe-physics-system is middleware that initializes the physics engine and exposes A-Frame components for us to apply to entities. When we use its static-body or dynamic-body components, aframe-physics-system creates a Cannon.Body instance and attaches it to our A-Frame entities, so on every frame, it adjusts the entity’s position, rotation, etc. to match the body.

aframe-physics-system是用于初始化物理引擎并公开A-Frame组件以供我们应用于实体的中间件。 当我们使用其static-body或dynamic-body组件时， aframe-physics-system会创建一个Cannon.Body实例并将其附加到我们的A-Frame实体上，因此在每个框架上，它都会调整实体的位置，旋转等。匹配身体。

球 (Ball)

<a-sphere> primitive creates a spherical shape. You can define its radius color and position. Because of aframe-physics-system, the ball can be converted into a dynamic-body with a certain mass.

<a-sphe re>原语创建球形。 您可以定义其半径颜色和位置。 由于se of aframe-physics-系统，因此可以将球转换为具有一定质量的动态物体。

保龄球道 (Bowling Lane)

<a-box> creates shapes such as boxes, cubes, or walls. You can create a rectangle box and make a bowling lane out of it by placing pins and ball on top of it.

<ab ox>创建诸如盒子，立方体或墙壁之类的形状。 您可以创建一个矩形框，并通过在其上方放置大头针和球来制作保龄球道。

别针 (Pins)

<a-cylinder> primitive is used to create tubes and curved surfaces. These cylinders can be used as bowling pins in the game. Be sure to define the radius, height, position, and mass of the cylinder.

<a-cylind er>原语用于创建管和曲面。 这些圆柱体可以用作游戏中的保龄球。 确保定义圆柱体的半径，高度，位置和质量。

曲目 (Tracks)

The ball cannot roll in the same direction every time you throw it. You can define any number of tracks for the ball to roll, and this track can, in turn, define the direction. This game has 5 tracks, and the movement of the ball on these tracks is controlled by 5 triangles or, let’s say, pointers on the bowling lane.

每次扔球时，球都不能朝同一方向滚动。 您可以定义任意数量的轨道来使球滚动，而该轨道又可以定义方向。 该游戏有5条轨迹，球在这些轨迹上的运动由5个三角形或保龄球道上的指针控制。

周边环境 (Surroundings)

A scene is represented by the <a-scene> element. The scene is the global root object, and all entities are contained within the scene. The objects’ friction, restitution, and iterations are set to values of 0.001, 0.3 and 30 respectively.

场景由<a-sce ne>元素表示。 场景是全局根对象，并且所有实体都包含在场景内。 对象的摩擦，恢复和迭代分别设置为0.001、0.3和30。

A-Frame has an asset management system that allows us to place our assets in one place and to preload and cache assets for better performance. We place such assets within <a-assets>.

A-Frame拥有资产管理系统，该系统使我们能够将资产放置在一个位置，并预加载和缓存资产以提高性能。 我们将此类资产放在<a-asse ts>中。

The scale component defines a shrinking, stretching, or skewing transformation of an entity. You can use the scale component to transform a box into a wall behind the bowling lane.

比例组件定义实体的收缩，拉伸或倾斜变换。 您可以使用比例组件将盒子转换为保龄球道后面的墙。

On similar lines, a box can be converted into a button attached to the wall by using the scale component. <a-text> can add text into your virtual environment.

在类似的线条上，可以使用比例尺组件将盒子转换为附着在墙上的按钮。 <a-te xt>可以将文本添加到您的虚拟环境中。

<a-box> can also be used to build borders next to the bowling lane.

<ab ox>也可以用来在保龄球道旁建立边界。

游戏 (The Game)

滚球 (Rolling the Ball)

As discussed earlier, the ball can roll over 5 imaginary tracks on the bowling lane. This can be achieved using <a-animation>. Animations can be attached in A-Frame through <a-animation> element by making it as a child of the entity to animate.

如前所述，球可以在保龄球道上滚动5条假想轨道。 这可以使用<a-animati on>来实现。 通过将动画作为要进行动画处理的实体的子代，可以将动画附加到A-Frame的rough <aa nimation> rough <aa元素中。

Now you can bind these animations of the ball with the 5 pointers so that the animation begins every time one of the triangles is clicked. This can be achieved by writing a component. We can register the component in JavaScript and use it declaratively from the DOM. Components are configurable, reusable, and shareable.

现在，您可以使用5个指针绑定这些球的动画，以便每次单击一个三角形时开始播放动画。 这可以通过编写组件来实现。 我们可以在JavaScript中注册该组件，然后从DOM中声明性地使用它。 组件是可配置，可重用和共享的。

别针掉落 (Falling of Pins)

When a dynamic-body of mass 17.5 rolls towards 10 dynamic bodies of mass 1.25, some of them tend to fall. After every knockdown, one can count the number of pins that are down. We can check the position of the pins at the end of the animation. If any of the pin’s rotation has its x-value not equal to 0 or -0 then it means that the pin isn’t standing upright. By counting the number of pins that are lying down, you can calculate the score of the player.

当质量为17.5的动态物体滚动到质量为1.25的10个动态物体时，其中一些趋向于下降。 每次击倒后，您都可以计数掉下来的针脚数量。 我们可以检查动画末尾的销钉位置。 如果任何销钉的旋转方向的x值都不等于0或-0，则表示该销钉没有直立。 通过计算躺下的针脚数量，可以计算出玩家的得分。

The above line captures the x-value of the rotation attribute of a pin. This way you can fetch x-value of rotation attribute of all the pins and save it into an array. Now you can loop through the array and check every value and increment the strike counter.

上一行捕获了引脚旋转属性的x值。 这样，您可以获取所有引脚的旋转属性的x值并将其保存到数组中。 现在，您可以遍历数组并检查每个值并增加strike计数器。

新游戏 (New Game)

The player can start a new game at any point of time by clicking on the New Game button on the wall. It automatically refreshes the game.

玩家可以随时通过单击墙上的“新游戏”按钮来开始新游戏。 它会自动刷新游戏。

移动相机 (Moving Camera)

You can move the camera at any point during the game. Here, I have chosen to move the camera every time the player rolls the ball for a better view of the falling pins.

您可以在游戏过程中的任何时候移动相机。 在这里，我选择了每次玩家掷球时都移动相机，以更好地观察跌落的销钉。

PubNub (PubNub)

With less than 1/4th of a second latency, PubNub can smoothly publish and subscribe messages between multiple VR devices. Let’s convert this single-player game into a 2-player game.

通过不到1/4秒的延迟，PubNub可以在多个VR设备之间平稳地发布和订阅消息。 让我们将此单人游戏转换为2人游戏。

You’ll now have to initialize your PubNub keys. Sign up for a PubNub account and create a project in the Admin Dashboard.

现在，您必须初始化您的PubNub键。 注册一个PubNub帐户，并在Admin Dashboard中创建一个项目。

决定转弯 (Deciding the Turns)

Every player gets two turns. The player switch turns after every two shots. So after every two shots, PubNub can notify the other user that they can take control. In this game, every time the player gets his/her turn the 5 triangle pointers surface on the bowling lane. And when it’s not their turn, the 5 triangle pointers are hidden.

每个玩家都有两个回合。 每两次射击，播放器开关转动一次。 因此，每两次拍摄后，PubNub可以通知其他用户他们可以控制。 在此游戏中，每次玩家转身时，保龄球道上的5个三角形指针都会浮出水面。 当轮到他们时，5个三角形指针被隐藏。

Hide the pointers when it’s not your turn. Here, instead of hiding, I am setting the position to 0.

轮到您时隐藏指针。 在这里，我将位置设置为0，而不是隐藏。

Make the pointer surface back to the bowling lane when it is your turn. By doing this, you’ll be taking control of the tracks again.

轮到您时，使指针表面回到保龄球道。 这样，您将再次控制轨道。

击倒后复制引脚状态 (Replicating the State of Pins After Knockdown)

After every knockdown, you can capture the position of pins that are down and send it to the other user using PubNub. By doing so, you can replicate one player’s screen on other players’ screens. In the code below, you can see that the position and rotation values of pin 1 are passed to other players using PubNub. On similar lines, you can send rotation and position values of all the pins through PubNub.

每次敲低后，您都可以捕获被压下的引脚的位置，然后使用PubNub将其发送给其他用户。 这样，您可以将一个播放器的屏幕复制到其他播放器的屏幕上。 在下面的代码中，您可以看到Pin 1的位置和旋转值已通过PubNub传递给其他播放器。 在相似的行上，您可以通过PubNub发送所有引脚的旋转和位置值。

在静态和动态实体之间切换 (Switching Between Static and Dynamic Bodies)

Earlier we used aframe-physics-system to convert the A-Frame objects into dynamic bodies. When the player isn’t rolling the ball and is just replicating the screen of another player, the ball should not be a dynamic body in order to avoid falling of extra pins.

之前我们使用aframe-physics-system将A-Frame对象转换为动态物体。 当球员没有掷球而只是在复制另一名球员的屏幕时，该球就不应是动态物体，以避免落下多余的大头针。

When it is the current player’s turn, dynamics is set to true, and the dynamic-body properties are added.

现在轮到当前玩家了，动态设置为true，并且添加了dynamic-body属性。

When it’s not the player’s turn, dynamics is set to false, and the dynamic-body properties are removed.

轮到玩家时，将动态设置为false，并删除dynamic-body属性。

玩家2 (Player 2)

Once you are done with publishing data through PubNub from Player 1’s screen, you can read the data by subscribing to PubNub’s channel.

在播放器1的屏幕上通过PubNub完成数据发布后，您可以通过订阅PubNub的频道来读取数据。

When PubNub receives data related to the position of fallen pins’ position and rotation, you can set the attribute of pins on player 2’s screen to the same values as Player 1 and hence make the two screens identical.

当PubNub接收到与下落的销钉的位置和旋转位置有关的数据时，可以将播放器2的屏幕上的销钉属性设置为与播放器1相同的值，从而使两个屏幕相同。

结论 (Conclusion)

Congratulations! Every time you roll the ball on Player 1’s screen, you can see Player 2’s screen replicating all the movements. Now you can revert this by publishing Player 2’s data back to Player 1 and convert your game into a fully functional 2-player game. It can be converted into a multiplayer game as well. Happy VR gaming!

恭喜你！ 每次在玩家1的屏幕上掷球时，您都可以看到玩家2的屏幕复制所有动作。 现在，您可以通过将玩家2的数据发布回玩家1来还原此状态，并将您的游戏转换为功能齐全的2人游戏。 它也可以转换为多人游戏。 快乐的VR游戏！

The full GitHub code repository can be found here.

完整的GitHub代码存储库可在此处找到 。

Originally published at www.pubnub.com.

最初在www.pubnub.com上发布。

翻译自: https://www.freecodecamp.org/news/build-a-multiplayer-browser-based-vr-game-with-a-frame-pubnub-and-webvr-b7de33ba088/

a-frame