Heads up: All products featured here are selected by Mashable's commerce team and meet our rigorous standards for awesomeness. If you buy something, Mashable may earn an affiliate commission. By
In this tutorial series, we will build a web-based multiplayervirtual realitygame in which players will need to collaborate to solve a puzzle. We will useA-Framefor VR modeling,MirrorVRfor cross-device real-time synchronization, andA-Frame Low Polyfor low-poly aesthetics. At the end of this tutorial, you will have a fully functioning demo online that anyone can play.
Each pair of players is given a ring of orbs. The goal is to “turn on” all orbs, where an orb is “on” if it’s elevated and bright. An orb is “off” if it’s lower and dim. However, certain “dominant” orbs affect their neighbors: if it switches state, its neighbors also switch state. Only player 2 can control the dominant orbs while only player 1 can control non-dominant orbs. This forces both players to collaborate to solve the puzzle. In this first part of the tutorial, we will build the environment and add the design elements for our VR game.
The seven steps in this tutorial are grouped into three sections:
This first part will conclude with a clickable orb that turns on and off (as pictured below). You will use A-Frame VR and several A-Frame extensions.
Setting Up The Scene
1. Let’s Go With A Basic Scene
To get started, let’s take a look at how we can set up a simple scene with a ground:
The first three instructions below are excerpted from myprevious article. You will start by setting up a website with a single static HTML page. This allows you to code from your desktop and automatically deploy to the web. The deployed website can then be loaded on your mobile phone and placed inside a VR headset. Alternatively, the deployed website can be loaded by a standalone VR headset.
Get started by navigating toglitch.com. Then, do the following:
- Click on “New Project” in the top right,
- Click on “hello-webpage” in the drop-down,
- Next, click onindex.htmlin the left sidebar. We will refer to this as your “editor”.
You should now see the following Glitch screen with a default HTML file.
As with the linked tutorial above, start by deleting all existing code in the currentindex.htmlfile. Then, type in the following for a basic webVR project, using A-Frame VR. This creates an empty scene by using A-Frame’s default lighting and camera.
Raise the camera to standing height. Per A-Frame VR recommendations (Github issue), wrap the camera with a new entity and move the parent entity instead of the camera directly. Between your
a-scenetags on lines 8 and 9, add the following.
Next, add a large box to denote the ground, using
a-box. Place this directly beneath your camera from the previous instruction.
Yourindex.htmlfile should now match the following exactly. You can find the full source codehere, on Github.
This concludes setup. Next, we will customize lighting for a more mysterious atmosphere.
2. Add Atmosphere
In this step, we will set up the fog and custom lighting.
Add a fog, which will obscure objects far away for us. Modify the
a-scenetag on line 8. Here, we will add a dark fog that quickly obscures the edges of the ground, giving the effect of a distant horizon.
The dark gray
#111fades in linearly from a distance of 10 to a distance of 15. All objects more than 15 units away are completely obscured, and all objects fewer than 10 units away are completely visible. Any object in between is partially obscured.
Add one ambient light to lighten in-game objects and one-directional light to accentuate reflective surfaces you will add later. Place this directly after the
a-scenetag you modified in the previous instruction.
Directly beneath the lights in the previous instruction, add a dark sky. Notice the dark gray
#111matches that of the distant fog.
This concludes basic modifications to the mood and more broadly, scene setup. Check that your code matches thesource code for Step 2on Github, exactly. Next, we will add a low-poly orb and begin customizing the orb’s aesthetics.
Creating The Orbs
3. Create A Low-Poly Orb
In this step, we will create a rotating, reflective orb as pictured below. The orb is composed of two stylized low-poly spheres with a few tricks to suggest reflective material.
Start by importing the low-poly library in your
headtag. Insert the following between lines 4 and 5.
Create a carousel, wrapper, and orb container. The
carouselwill contain multiple orbs, the
wrapperwill allow us to rotate all orbs around a center axis without rotating each orb individually, and the
containerwill — as the name suggests — contain all orb components.
Inside the orb container, add the orb itself: one sphere is slightly translucent and offset, and the other is completely solid. The two combined mimic reflective surfaces.
Finally, rotate the sphere indefinitely by adding the following
a-animationtag immediately after the
.orbentity in the last instruction.
Your source code for the orb wrappers and the orb itself should match the following exactly.
Check that your source code matches the fullsource code for step 3on Github. Your preview should now match the following.
Next, we will add more lighting to the orb for a golden hue.
4. Light Up The Orb
In this step, we will add two lights, one colored and one white. This produces the following effect.
Start by adding the white light to illuminate the object from below. We will use a point light. Directly before
#container-orb0, add the following offset point light.
In your preview, you will see the following.
By default, lights do not decay with distance. By adding
distance="8", we ensure that the light fully decays with a distance of 8 units, to prevent the point light from illuminating the entire scene. Next, add the golden light. Add the following directly above the last light.
Check that your code matches thesource code for step 4exactly. Your preview will now match the following.
Next, you will make your final aesthetic modification to the orb and add rotating rings.
5. Add Rings
In this step, you will produce the final orb, as pictured below.
Add a ring in
Notice the ring itself does not contain color, as the color will be imbued by the point light in the previous step. Furthermore, the
material="side:double"is important as, without it, the ring’s backside would not be rendered; this means the ring would disappear for half of its rotation.
However, the preview with only the above code will not look any different. This is because the ring is currently perpendicular to the screen. Thus, only the ring’s “side” (which has 0 thickness) is visible. Place the following animation in between the
a-ringtags in the previous instruction.
Your preview should now match the following:
Create a variable number of rings with different rotation axes, speeds, and sizes. You can use the following example rings. Any new rings should be placed underneath the last
Your preview will now match the following.
Check that your code matches thesource code for step 5on Github. This concludes decor for the orb. With the orb finished, we will next add interactivity to the orb. In the next step, we will specifically add a visible cursor with a clicking animation when pointed at clickable objects.
Making The Orbs Interactive
6. Add A Cursor
In this step, we will add a white cursor that can trigger clickable objects. The cursor is pictured below.
a-cameratag, add the following entity. The
fuseattribute allows this entity the ability to trigger click events. The
raycasterattribute determines how often and how far to check for clickable objects. The
objectsattribute accepts a selector to determine which entities are clickable. In this case, all objects of class
Next, add cursor animation and an extra ring for aesthetics. Place the following inside the entity cursor object above. This adds animation to the cursor object so that clicks are visible.
Next, add the
clickableclass to the
#orb0to match the following.
Check that your code matches thesource code for Step 6on Github. In your preview, drag your cursor off of them onto the orb to see the click animation in action. This is pictured below.
Note the clickable attribute was added to the orb itself and not the orb container. This is to prevent the rings from becoming clickable objects. This way, the user must click on the spheres that make up the orb itself.
In our final step for this part, you will add animation to control the on and off states for the orb.
7. Add Orb States
In this step, you will animate the orb in and out of an off state on click. This is pictured below.
To start, you will shrink and lower the orb to the ground. Add
a-animationtags to the
#orb0. Both animations are triggered by a click and share the same easing function
ease-elasticfor a slight bounce.
#light-orb0. The light is triggered by a custom
Next, add the following click event listener to the
#container-orb0. This will relay the clicks to the orb lights.
Check that your code matches thesource code for Step 7on Github. Finally, pull up your preview, and move the cursor on and off the orb to toggle between off and on states. This is pictured below.
This concludes the orb’s interactivity. The player can now turn orbs on and off at will, with self-explanatory on and off states.
In this tutorial, you built a simple orb with on and off states, which can be toggled by a VR-headset-friendly cursor click. With a number of different lighting techniques and animations, you were able to distinguish between the two states. This concludes the virtual reality design elements for the orbs. In the next part of the tutorial, we will populate the orbs dynamically, add game mechanics, and set up a communication protocol between a pair of players.