{"id":61498,"date":"2019-03-14T04:18:54","date_gmt":"2019-03-14T11:18:54","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/"},"modified":"2019-03-14T04:18:54","modified_gmt":"2019-03-14T11:18:54","slug":"how-to-build-an-endless-runner-game-in-virtual-reality-part-2","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/","title":{"rendered":"How To Build An Endless Runner Game In Virtual Reality (Part 2)"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/03\/virtual-reality-endless-runner-game-vr-part-2\/\"><title>How To Build An Endless Runner Game In Virtual Reality (Part 2)<\/title><\/p>\n<article>\n<header>\n<h1>How To Build An Endless Runner Game In Virtual Reality (Part 2)<\/h1>\n<address>Alvin Wan<\/address>\n<p>                  <time datetime=\"2019-03-13T12:00:35+01:00\">2019-03-13T12:00:35+01:00<\/time><time datetime=\"2019-03-14T11:04:50+00:00\">2019-03-14T11:04:50+00:00<\/time><\/header>\n<p>In <a href=\"https:\/\/www.smashingmagazine.com\/2019\/03\/virtual-reality-endless-runner-game-vr-part-1\/\">Part 1<\/a> of this series, we\u2019ve seen how a virtual reality model with lighting and animation effects can be created. In this part, we will implement the game\u2019s core logic and utilize more advanced A-Frame environment manipulations to build the \u201cgame\u201d part of this application. By the end, you will have a functioning virtual reality game with a real challenge.<\/p>\n<p>This tutorial involves a number of steps, including (but not limited to) collision detection and more A-Frame concepts such as mixins.<\/p>\n<ul>\n<li><a href=\"https:\/\/ergo-2.glitch.me\/\">Demo of the final product<\/a><\/li>\n<\/ul>\n<h3>Prerequisites<\/h3>\n<p>Just like in the previous tutorial, you will need the following:<\/p>\n<ul>\n<li>Internet access (specifically to <a href=\"http:\/\/glitch.com\/\">glitch.com<\/a>);<\/li>\n<li>A Glitch project completed from <a href=\"https:\/\/www.smashingmagazine.com\/2019\/03\/virtual-reality-endless-runner-game-vr-part-1\/\">part 1<\/a>. (You can continue from the finished product by navigating to <a href=\"https:\/\/glitch.com\/edit\/#!\/ergo-1\">https:\/\/glitch.com\/edit\/#!\/ergo-1<\/a> and clicking \u201cRemix to edit\u201d;<\/li>\n<li>A virtual reality headset (optional, recommended). (I use Google Cardboard, which is offered at $15 a piece.)<\/li>\n<\/ul>\n<div data-component=\"FeaturePanel\" data-audience=\"non-subscriber\" data-remove=\"true\"><\/div>\n<h3>Step 1: Designing The Obstacles<\/h3>\n<p>In this step, you design the trees that we will use as obstacles. Then, you will add a simple animation that moves the trees towards the player, like the following:<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/75d89663-74dc-4ab5-b4e7-75440e270272\/2-how-to-build-an-endless-runner-game-in-virtual-reality.gif?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/2-how-t0-build-an-endless-runner-game-in-virtual-reality-800w.gif?resize=800%2C368\" width=\"800\" height=\"368\" alt=\"Template trees moving towards player\"><\/a><figcaption>Template trees moving towards player (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/75d89663-74dc-4ab5-b4e7-75440e270272\/2-how-to-build-an-endless-runner-game-in-virtual-reality.gif\">Large preview<\/a>)<br \/>\n<\/figcaption><\/figure>\n<p>These trees will serve as templates for obstacles you generate during the game. For the final part of this step, we will then remove these \u201ctemplate trees\u201d.<\/p>\n<p>To start, add a number of different <strong>A-Frame mixins<\/strong>. Mixins are commonly-used sets of component properties. In our case, all of our trees will have the same color, height, width, depth etc. In other words, all your trees will look the same and therefore will use a few shared mixins.<\/p>\n<p><strong>Note<\/strong>: <em>In our tutorial, your only assets will be mixins. Visit the <a href=\"https:\/\/aframe.io\/docs\/0.8.0\/core\/mixins.html\">A-Frame Mixins page<\/a> to learn more.<\/em><\/p>\n<p>In your editor, navigate to <em>index.html<\/em>. Right after your sky and before your lights, add a new A-Frame entity to hold your assets:<\/p>\n<pre><code><a-sky...><\/a-sky>\n\n<!-- Mixins -->\n<a-assets>\n<\/a-assets>\n\n<!-- Lights -->\n...\n<\/code><\/pre>\n<p>In your new <code>a-assets<\/code> entity, start by adding a mixin for your foliage. This mixins defines common properties for the foliage of the template tree. In short, it is a white, flat-shaded pyramid, for a low poly effect.<\/p>\n<pre><code><a-assets>\n  <a-mixin id=\"foliage\" geometry=\"\n      primitive: cone;\n      segments-height: 1;\n      segments-radial:4;\n      radius-bottom:0.3;\"\n     material=\"color:white;flat-shading: true;\"><\/a-mixin>\n<\/a-assets>\n<\/code><\/pre>\n<p>Just below your foliage mixin, add a mixin for the trunk. This trunk will be a small, white rectangular prism.<\/p>\n<pre><code><a-assets>\n  ...\n  <a-mixin id=\"trunk\" geometry=\"\n      primitive: box;\n      height:0.5;\n      width:0.1;\n      depth:0.1;\"\n     material=\"color:white;\"><\/a-mixin>\n<\/a-assets>\n<\/code><\/pre>\n<p>Next, add the template tree objects that will use these mixins. Still in <em>index.html<\/em>, scroll down to the platforms section. Right before the player section, add a new tree section, with three empty tree entities:<\/p>\n<pre><code><a-entity id=\"tree-container\" ...>\n\n  <!-- Trees -->\n  <a-entity id=\"template-tree-center\"><\/a-entity>\n  <a-entity id=\"template-tree-left\"><\/a-entity>\n  <a-entity id=\"template-tree-right\"><\/a-entity>\n\n  <!-- Player -->\n  ...\n<\/code><\/pre>\n<p>Next, reposition, rescale, and add shadows to the tree entities.<\/p>\n<div>\n<pre><code><!-- Trees -->\n<a-entity id=\"template-tree-center\" shadow scale=\"0.3 0.3 0.3\" position=\"0 0.6 0\"><\/a-entity>\n<a-entity id=\"template-tree-left\" shadow scale=\"0.3 0.3 0.3\" position=\"0 0.6 0\"><\/a-entity>\n<a-entity id=\"template-tree-right\" shadow scale=\"0.3 0.3 0.3\" position=\"0 0.6 0\"><\/a-entity>\n<\/code><\/pre>\n<\/div>\n<p>Now, populate the tree entities with a trunk and foliage, using the mixins we defined previously.<\/p>\n<div>\n<pre><code><!-- Trees -->\n<a-entity id=\"template-tree-center\" ...>\n  <a-entity mixin=\"foliage\"><\/a-entity>\n  <a-entity mixin=\"trunk\" position=\"0 -0.5 0\"><\/a-entity>\n<\/a-entity>\n<a-entity id=\"template-tree-left\" ...>\n  <a-entity mixin=\"foliage\"><\/a-entity>\n  <a-entity mixin=\"trunk\" position=\"0 -0.5 0\"><\/a-entity>\n<\/a-entity>\n<a-entity id=\"template-tree-right\" ...>\n  <a-entity mixin=\"foliage\"><\/a-entity>\n  <a-entity mixin=\"trunk\" position=\"0 -0.5 0\"><\/a-entity>\n<\/a-entity>\n<\/code><\/pre>\n<\/div>\n<p>Navigate to your preview, and you should now see the following template trees.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/668ec49c-6ce9-478b-9f65-e1a5c38f927a\/3-how-to-build-an-endless-runner-game-in-virtual-reality.png?ssl=1\"><br \/>\n\t\t<img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/3-how-to-build-an-endless-runner-game-in-virtual-reality.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/668ec49c-6ce9-478b-9f65-e1a5c38f927a\/3-how-to-build-an-endless-runner-game-in-virtual-reality.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/668ec49c-6ce9-478b-9f65-e1a5c38f927a\/3-how-to-build-an-endless-runner-game-in-virtual-reality.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/668ec49c-6ce9-478b-9f65-e1a5c38f927a\/3-how-to-build-an-endless-runner-game-in-virtual-reality.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/668ec49c-6ce9-478b-9f65-e1a5c38f927a\/3-how-to-build-an-endless-runner-game-in-virtual-reality.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/3-how-to-build-an-endless-runner-game-in-virtual-reality.png?w=900\" sizes=\"100vw\" alt=\"Template trees for obstacles\"><\/a><figcaption>\n\t\t\tTemplate trees for obstacles (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/668ec49c-6ce9-478b-9f65-e1a5c38f927a\/3-how-to-build-an-endless-runner-game-in-virtual-reality.png\">Large preview<\/a>)<br \/>\n\t\t<\/figcaption><\/figure>\n<p>Now, animate the trees from a distant location on the platform towards the user. As before, use the <code>a-animation<\/code> tag:<\/p>\n<div>\n<pre><code><!-- Trees -->\n<a-entity id=\"template-tree-center\" ...>\n  ...\n  <a-animation attribute=\"position\" ease=\"linear\" from=\"0 0.6 -7\" to=\"0 0.6 1.5\" dur=\"5000\"><\/a-animation>\n<\/a-entity>\n<a-entity id=\"template-tree-left\" ...>\n  ...\n  <a-animation attribute=\"position\" ease=\"linear\" from=\"-0.5 0.55 -7\" to=\"-0.5 0.55 1.5\" dur=\"5000\"><\/a-animation>\n<\/a-entity>\n<a-entity id=\"template-tree-right\" ...>\n  ...\n  <a-animation attribute=\"position\" ease=\"linear\" from=\"0.5 0.55 -7\" to=\"0.5 0.55 1.5\" dur=\"5000\"><\/a-animation>\n<\/a-entity>\n<\/code><\/pre>\n<\/div>\n<p>Ensure that your code matches the following.<\/p>\n<div>\n<pre><code><a-entity id=\"tree-container\"...>\n\n<!-- Trees -->\n<a-entity id=\"template-tree-center\" shadow scale=\"0.3 0.3 0.3\" position=\"0 0.6 0\">\n  <a-entity mixin=\"foliage\"><\/a-entity>\n  <a-entity mixin=\"trunk\" position=\"0 -0.5 0\"><\/a-entity>\n  <a-animation attribute=\"position\" ease=\"linear\" from=\"0 0.6 -7\" to=\"0 0.6 1.5\" dur=\"5000\"><\/a-animation>\n<\/a-entity>\n\n<a-entity id=\"template-tree-left\" shadow scale=\"0.3 0.3 0.3\" position=\"-0.5 0.55 0\">\n  <a-entity mixin=\"foliage\"><\/a-entity>\n  <a-entity mixin=\"trunk\" position=\"0 -0.5 0\"><\/a-entity>\n  <a-animation attribute=\"position\" ease=\"linear\" from=\"-0.5 0.55 -7\" to=\"-0.5 0.55 1.5\" dur=\"5000\"><\/a-animation>\n<\/a-entity>\n\n<a-entity id=\"template-tree-right\" shadow scale=\"0.3 0.3 0.3\" position=\"0.5 0.55 0\">\n  <a-entity mixin=\"foliage\"><\/a-entity>\n  <a-entity mixin=\"trunk\" position=\"0 -0.5 0\"><\/a-entity>\n  <a-animation attribute=\"position\" ease=\"linear\" from=\"0.5 0.55 -7\" to=\"0.5 0.55 1.5\" dur=\"5000\"><\/a-animation>\n<\/a-entity>\n\n<!-- Player -->\n...\n<\/code><\/pre>\n<\/div>\n<p>Navigate to your preview, and you will now see the trees moving towards you.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/75d89663-74dc-4ab5-b4e7-75440e270272\/2-how-to-build-an-endless-runner-game-in-virtual-reality.gif?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/2-how-t0-build-an-endless-runner-game-in-virtual-reality-800w.gif?resize=800%2C368\" width=\"800\" height=\"368\" alt=\"Template trees moving towards player\"><\/a><figcaption>Template trees moving towards playerTemplate trees moving towards player (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/75d89663-74dc-4ab5-b4e7-75440e270272\/2-how-to-build-an-endless-runner-game-in-virtual-reality.gif\">Large preview<\/a>)<br \/>\n<\/figcaption><\/figure>\n<p>Navigate back to your editor. This time, select <em>assets\/ergo.js<\/em>. In the game section, setup trees after the window has loaded.<\/p>\n<pre><code>\/********\n * GAME *\n ********\/\n\n...\n\nwindow.onload = function() {\n  setupTrees();\n}\n<\/code><\/pre>\n<p>Underneath the controls but before the Game section, add a new <code>TREES<\/code> section. In this section, define a new <code>setupTrees<\/code> function.<\/p>\n<pre><code>\/************\n * CONTROLS *\n ************\/\n\n...\n\n\/*********\n * TREES *\n *********\/\n\nfunction setupTrees() {\n}\n\n\/********\n * GAME *\n ********\/\n\n...\n<\/code><\/pre>\n<p>In the new <code>setupTrees<\/code> function, obtain references to the template tree DOM objects, and make the references available globally.<\/p>\n<div>\n<pre><code>\/*********\n * TREES *\n *********\/\n\nvar templateTreeLeft;\nvar templateTreeCenter;\nvar templateTreeRight;\n\nfunction setupTrees() {\n  templateTreeLeft    = document.getElementById('template-tree-left');\n  templateTreeCenter  = document.getElementById('template-tree-center');\n  templateTreeRight   = document.getElementById('template-tree-right');\n}\n\n<\/code><\/pre>\n<\/div>\n<p>Next, define a new <code>removeTree<\/code> utility. With this utility, you can then remove the template trees from the scene. Underneath the <code>setupTrees<\/code> function, define your new utility.<\/p>\n<pre><code>function setupTrees() {\n    ...\n}\n\nfunction removeTree(tree) {\n  tree.parentNode.removeChild(tree);\n}\n<\/code><\/pre>\n<p>Back in <code>setupTrees<\/code>, use the new utility to remove the template trees.<\/p>\n<pre><code>function setupTrees() {\n  ...\n\n  removeTree(templateTreeLeft);\n  removeTree(templateTreeRight);\n  removeTree(templateTreeCenter);\n}\n<\/code><\/pre>\n<p>Ensure that your tree and game sections match the following:<\/p>\n<div>\n<pre><code>\/*********\n * TREES *\n *********\/\n\nvar templateTreeLeft;\nvar templateTreeCenter;\nvar templateTreeRight;\n\nfunction setupTrees() {\n  templateTreeLeft    = document.getElementById('template-tree-left');\n  templateTreeCenter  = document.getElementById('template-tree-center');\n  templateTreeRight   = document.getElementById('template-tree-right');\n\n  removeTree(templateTreeLeft);\n  removeTree(templateTreeRight);\n  removeTree(templateTreeCenter);\n}\n\nfunction removeTree(tree) {\n  tree.parentNode.removeChild(tree);\n}\n\n\/********\n * GAME *\n ********\/\n\nsetupControls();  \/\/ TODO: AFRAME.registerComponent has to occur before window.onload?\n\nwindow.onload = function() {\n  setupTrees();\n}\n<\/code><\/pre>\n<\/div>\n<p>Re-open your preview, and your trees should now be absent. The preview should match our game at the start of this tutorial.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a112e7e5-c79b-4ce9-8d07-812efadc9cab\/1-how-to-build-an-endless-runner-game-in-virtual-reality.gif?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/01-how-to-build-an-endless-runner-game-in-virtual-reality-800w.gif?resize=800%2C368\" width=\"800\" height=\"368\" alt=\"Part 1 finished product\"><\/a><figcaption>Part 1 finished product (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/a112e7e5-c79b-4ce9-8d07-812efadc9cab\/1-how-to-build-an-endless-runner-game-in-virtual-reality.gif\">Large preview<\/a>)<br \/>\n<\/figcaption><\/figure>\n<p>This concludes the template tree design.<\/p>\n<p>In this step, we covered and used A-Frame mixins, which allow us to simplify code by defining common properties. Furthermore, we leveraged A-Frame integration with the DOM to remove objects from the A-Frame VR scene.<\/p>\n<p>In the next step, we will spawn multiple obstacles and design a simple algorithm to distribute trees among different lanes.<\/p>\n<div><\/div>\n<h3>Step 2 : Spawning Obstacles<\/h3>\n<p>In an endless runner game, our goal is to avoid obstacles flying towards us. In this particular implementation of the game, we use three lanes as is most common.<\/p>\n<p>Unlike most endless runner games, <strong>this game will only support movement left and right<\/strong>. This imposes a constraint on our algorithm for spawning obstacles: we can\u2019t have three obstacles in all three lanes, at the same time, flying towards us. If that occurs, the player would have zero chance of survival. As a result, our spawning algorithm needs to accommodate this constraint.<\/p>\n<p>In this step, all of our code edits will be made in <em>assets\/ergo.js<\/em>. The HTML file will remain the same. Navigate to the <code>TREES<\/code> section of <em>assets\/ergo.js<\/em>.<\/p>\n<p>To start, we will add utilities to spawn trees. Every tree will need a unique ID, which we will naively define to be the number of trees that exist when the tree is spawned. Start by tracking the number of trees in a global variable.<\/p>\n<pre><code>\/*********\n * TREES *\n *********\/\n\n...\nvar numberOfTrees = 0;\n\nfunction setupTrees() {\n...\n<\/code><\/pre>\n<p>Next, we will initialize a reference to the tree container DOM element, which our spawn function will add trees to. Still in the <code>TREES<\/code> section, add a global variable and then make the reference.<\/p>\n<pre><code>...\nvar treeContainer;\nvar numberOfTrees ...\n\nfunction setupTrees() {\n    ...\n    templateTreeRight   = ...\n    treeContainer       = document.getElementById('tree-container');\n    \n    removeTree(...);\n    ...\n}\n<\/code><\/pre>\n<p>Using both the number of trees and the tree container, write a new function that spawns trees.<\/p>\n<pre><code>function removeTree(tree) {\n    ...\n}\n\nfunction addTree(el) {\n  numberOfTrees += 1;\n  el.id = 'tree-' + numberOfTrees;\n  treeContainer.appendChild(el);\n}\n\n...\n<\/code><\/pre>\n<p>For ease-of-use later on, you will create a second function that adds the correct tree to the correct lane. To start, define a new <code>templates<\/code> array in the <code>TREES<\/code> section.<\/p>\n<div>\n<pre><code>var templates;\nvar treeContainer;\n...\n\nfunction setupTrees() {\n    ...\n    templates           = [templateTreeLeft, templateTreeCenter, templateTreeRight];\n\n    removeTree(...);\n    ...\n}\n<\/code><\/pre>\n<\/div>\n<p>Using this templates array, add a utility that spawns trees in a specific lane, given an ID representing left, middle, or right.<\/p>\n<pre><code>function function addTree(el) {\n    ...\n}\n\nfunction addTreeTo(position_index) {\n  var template = templates[position_index];\n  addTree(template.cloneNode(true));\n}\n<\/code><\/pre>\n<p>Navigate to your preview, and open your developer console. In your developer console, invoke the global <code>addTreeTo<\/code> function.<\/p>\n<pre><code>> addTreeTo(0);  # spawns tree in left lane\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d13455db-2b8d-4082-bfbf-82fda93d1de7\/4-how-to-build-an-endless-runner-game-in-virtual-reality.gif?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/4-how-to-build-an-endless-runner-game-in-virtual-reality-800w.gif?resize=800%2C368\" width=\"800\" height=\"368\" alt=\"Invoking addTreeTo manually\"><\/a><figcaption>Invoke <code>addTreeTo<\/code> manually (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d13455db-2b8d-4082-bfbf-82fda93d1de7\/4-how-to-build-an-endless-runner-game-in-virtual-reality.gif\">Large preview<\/a>)<br \/>\n<\/figcaption><\/figure>\n<p>Now, you will write an algorithm that spawns trees randomly:<\/p>\n<ol>\n<li>Pick a lane randomly (that hasn\u2019t been picked yet, for this timestep);<\/li>\n<li>Spawn a tree with some probability;<\/li>\n<li>If the maximum number of trees has been spawned for this timestep, stop. Otherwise, repeat step 1.<\/li>\n<\/ol>\n<p>To effect this algorithm, we will instead shuffle the list of templates and process one at a time. Start by defining a new function, <code>addTreesRandomly<\/code> that accepts a number of different keyword arguments.<\/p>\n<pre><code>function addTreeTo(position_index) {\n    ...\n}\n\n\/**\n * Add any number of trees across different lanes, randomly.\n **\/\nfunction addTreesRandomly(\n  {\n    probTreeLeft = 0.5,\n    probTreeCenter = 0.5,\n    probTreeRight = 0.5,\n    maxNumberTrees = 2\n  } = {}) {\n}\n<\/code><\/pre>\n<p>In your new <code>addTreesRandomly<\/code> function, define a list of template trees, and shuffle the list.<\/p>\n<pre><code>function addTreesRandomly( ... ) {\n  var trees = [\n    {probability: probTreeLeft,   position_index: 0},\n    {probability: probTreeCenter, position_index: 1},\n    {probability: probTreeRight,  position_index: 2},\n  ]\n  shuffle(trees);\n}\n<\/code><\/pre>\n<p>Scroll down to the bottom of the file, and create a new utilities section, along with a new <code>shuffle<\/code> utility. This utility will shuffle an array in place.<\/p>\n<pre><code>\/********\n * GAME *\n ********\/\n\n...\n\n\/*************\n * UTILITIES *\n *************\/\n\n\/**\n * Shuffles array in place.\n * @param {Array} a items An array containing the items.\n *\/\nfunction shuffle(a) {\n   var j, x, i;\n   for (i = a.length - 1; i > 0; i--) {\n       j = Math.floor(Math.random() * (i + 1));\n       x = a[i];\n       a[i] = a[j];\n       a[j] = x;\n   }\n   return a;\n}\n<\/code><\/pre>\n<p>Navigate back to the <code>addTreesRandomly<\/code> function in your Trees section. Add a new variable <code>numberOfTreesAdded<\/code> and iterate through the list of trees defined above.<\/p>\n<pre><code>function addTreesRandomly( ... ) {\n  ...\n  var numberOfTreesAdded = 0;\n  trees.forEach(function (tree) {\n  });\n}\n<\/code><\/pre>\n<p>In the iteration over trees, spawn a tree only with some probability and only if the number of trees added does not exceed <code>2<\/code>. Update the for loop as follows.<\/p>\n<div>\n<pre><code>function addTreesRandomly( ... ) {\n  ...\n  trees.forEach(function (tree) {\n    if (Math.random() <\/code><\/pre>\n<\/div>\n<p>To conclude the function, return the number of trees added.<\/p>\n<pre><code>function addTreesRandomly( ... ) {\n  ...\n  return numberOfTreesAdded;\n}\n<\/code><\/pre>\n<p>Double check that your <code>addTreesRandomly<\/code> function matches the following.<\/p>\n<div>\n<pre><code>\/**\n * Add any number of trees across different lanes, randomly.\n **\/\nfunction addTreesRandomly(\n  {\n    probTreeLeft = 0.5,\n    probTreeCenter = 0.5,\n    probTreeRight = 0.5,\n    maxNumberTrees = 2\n  } = {}) {\n\n  var trees = [\n    {probability: probTreeLeft,   position_index: 0},\n    {probability: probTreeCenter, position_index: 1},\n    {probability: probTreeRight,  position_index: 2},\n  ]\n  shuffle(trees);\n\n  var numberOfTreesAdded = 0;\n  trees.forEach(function (tree) {\n    if (Math.random() <\/code><\/pre>\n<\/div>\n<p>Finally, to spawn trees automatically, setup a timer that runs triggers tree-spawning at regular intervals. Define the timer globally, and add a new teardown function for this timer.<\/p>\n<pre><code>\/*********\n * TREES *\n *********\/\n...\nvar treeTimer;\n\nfunction setupTrees() {\n...\n}\n\nfunction teardownTrees() {\n  clearInterval(treeTimer);\n}\n<\/code><\/pre>\n<p>Next, define a new function that initializes the timer and saves the timer in the previously-defined global variable. The below timer is run every half a second.<\/p>\n<pre><code>function addTreesRandomlyLoop({intervalLength = 500} = {}) {\n  treeTimer = setInterval(addTreesRandomly, intervalLength);\n}\n<\/code><\/pre>\n<p>Finally, start the timer after the window has loaded, from the Game section.<\/p>\n<pre><code>\/********\n * GAME *\n ********\/\n...\nwindow.onload = function() {\n  ...\n  addTreesRandomlyLoop();\n}\n<\/code><\/pre>\n<p>Navigate to your preview, and you\u2019ll see trees spawning at random. Note that there are never three trees at once.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3ade6de6-ec8e-4327-88e6-d061f597b8c3\/5-how-to-build-an-endless-runner-game-in-virtual-reality.gif?ssl=1\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/5-how-to-build-an-endless-runner-game-in-virtual-reality-800w.gif?w=800\"  alt=\"Tree spawning at random\"><\/a><figcaption>Tree randomly spawning (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/3ade6de6-ec8e-4327-88e6-d061f597b8c3\/5-how-to-build-an-endless-runner-game-in-virtual-reality.gif\">Large preview<\/a>)<br \/>\n<\/figcaption><\/figure>\n<p>This concludes the obstacles step. We\u2019ve successfully taken a number of template trees and generated an infinite number of obstacles from the templates. Our spawning algorithm also respects natural constraints in the game to make it playable.<\/p>\n<p>In the next step, let\u2019s add collision testing.<\/p>\n<div><\/div>\n<h3>Step 3: Collision Testing<\/h3>\n<p>In this section, we\u2019ll implement the collision tests between the obstacles and the player. These collision tests are simpler than collision tests in most other games; however, the player only moves along the x-axis, so whenever a tree crosses the x-axis, check if the tree\u2019s lane is the same as the player\u2019s lane. We will implement this simple check for this game.<\/p>\n<p>Navigate to <em>index.html<\/em>, down to the <code>TREES<\/code> section. Here, we will add lane information to each of the trees. For each of the trees, add <code>data-tree-position-index=<\/code>, as follows. Additionally add <code>class=\"tree\"<\/code>, so that we can easily select all trees down the line:<\/p>\n<div>\n<pre><code><a-entity data-tree-position-index=\"1\" class=\"tree\" id=\"template-tree-center\" ...>\n<\/a-entity>\n<a-entity data-tree-position-index=\"0\" class=\"tree\" id=\"template-tree-left\" ...>\n<\/a-entity>\n<a-entity data-tree-position-index=\"2\" class=\"tree\" id=\"template-tree-right\" ...>\n<\/a-entity>\n<\/code><\/pre>\n<\/div>\n<p>Navigate to <em>assets\/ergo.js<\/em> and invoke a new <code>setupCollisions<\/code> function in the <code>GAME<\/code> section. Additionally, define a new <code>isGameRunning<\/code> global variable that denotes whether or not an existing game is already running.<\/p>\n<pre><code>\/********\n * GAME *\n ********\/\n\nvar isGameRunning = false;\n\nsetupControls();\nsetupCollision();\n\nwindow.onload = function() {\n...\n<\/code><\/pre>\n<p>Define a new <code>COLLISIONS<\/code> section right after the <code>TREES<\/code> section but before the Game section. In this section, define the setupCollisions function.<\/p>\n<pre><code>\/*********\n * TREES *\n *********\/\n\n...\n\n\/**************\n * COLLISIONS *\n **************\/\n\nconst POSITION_Z_OUT_OF_SIGHT = 1;\nconst POSITION_Z_LINE_START = 0.6;\nconst POSITION_Z_LINE_END = 0.7;\n\nfunction setupCollision() {\n}\n\n\/********\n * GAME *\n ********\/\n<\/code><\/pre>\n<p>As before, we will register an AFRAME component and use the <code>tick<\/code> event listener to run code at every timestep. In this case, we will register a component with <code>player<\/code> and run checks against all trees in that listener:<\/p>\n<div>\n<pre><code>function setupCollisions() {\n  AFRAME.registerComponent('player', {\n    tick: function() {\n      document.querySelectorAll('.tree').forEach(function(tree) {\n      }\n    }\n  }\n}\n<\/code><\/pre>\n<\/div>\n<p>In the <code>for<\/code> loop, start by obtaining the tree\u2019s relevant information:<\/p>\n<div>\n<pre><code> document.querySelectorAll('.tree').forEach(function(tree) {\n  position = tree.getAttribute('position');\n  tree_position_index = tree.getAttribute('data-tree-position-index');\n  tree_id = tree.getAttribute('id');\n}\n<\/code><\/pre>\n<\/div>\n<p>Next, still within the <code>for<\/code> loop, remove the tree if it is out of sight, right after extracting the tree\u2019s properties:<\/p>\n<div>\n<pre><code> document.querySelectorAll('.tree').forEach(function(tree) {\n  ...\n  if (position.z > POSITION_Z_OUT_OF_SIGHT) {\n    removeTree(tree);\n  }\n}\n<\/code><\/pre>\n<\/div>\n<p>Next, if there is no game running, do not check if there is a collision.<\/p>\n<div>\n<pre><code> document.querySelectorAll('.tree').forEach(function(tree) {\n  if (!isGameRunning) return;\n}\n<\/code><\/pre>\n<\/div>\n<p>Finally (still in the <code>for<\/code> loop), check if the tree shares the same position at the same time with the player. If so, call a yet-to-be-defined <code>gameOver<\/code> function:<\/p>\n<div>\n<pre><code>document.querySelectorAll('.tree').forEach(function(tree) {\n  ...\n  if (POSITION_Z_LINE_START <\/code><\/pre>\n<\/div>\n<p>Check that your <code>setupCollisions<\/code> function matches the following:<\/p>\n<div>\n<pre><code>function setupCollisions() {\n  AFRAME.registerComponent('player', {\n    tick: function() {\n      document.querySelectorAll('.tree').forEach(function(tree) {\n        position = tree.getAttribute('position');\n        tree_position_index = tree.getAttribute('data-tree-position-index');\n        tree_id = tree.getAttribute('id');\n\n        if (position.z > POSITION_Z_OUT_OF_SIGHT) {\n          removeTree(tree);\n        }\n\n        if (!isGameRunning) return;\n\n        if (POSITION_Z_LINE_START <\/code><\/pre>\n<\/div>\n<p>This concludes the collision setup. Now, we will add a few niceties to abstract away the <code>startGame<\/code> and <code>gameOver<\/code> sequences. Navigate to the <code>GAME<\/code> section. Update the <code>window.onload<\/code> block to match the following, replacing <code>addTreesRandomlyLoop<\/code> with a yet-to-be-defined <code>startGame<\/code> function.<\/p>\n<pre><code>window.onload = function() {\n  setupTrees();\n  startGame();\n}\n<\/code><\/pre>\n<p>Beneath the setup function invocations, create a new <code>startGame<\/code> function. This function will initialize the <code>isGameRunning<\/code> variable accordingly, and prevent redundant calls.<\/p>\n<pre><code>window.onload = function() {\n    ...\n}\n\nfunction startGame() {\n  if (isGameRunning) return;\n  isGameRunning = true;\n\n  addTreesRandomlyLoop();\n}\n<\/code><\/pre>\n<p>Finally, define <code>gameOver<\/code>, which will alert a \u201cGame Over!\u201d message for now.<\/p>\n<pre><code>function startGame() {\n    ...\n}\n\nfunction gameOver() {\n  isGameRunning = false;\n\n  alert('Game Over!');\n  teardownTrees();\n}\n<\/code><\/pre>\n<p>This concludes the collision testing section of the endless runner game.<\/p>\n<p>In this step, we again used A-Frame components and a number of other utilities that we added previously. We additionally re-organized and properly abstracted the game functions; we will subsequently augment these game functions to achieve a more complete game experience.<\/p>\n<h3>Conclusion<\/h3>\n<p>In <a href=\"https:\/\/www.smashingmagazine.com\/2019\/03\/virtual-reality-endless-runner-game-vr-part-1\/?_ga=2.254726144.945251289.1552293602-640474844.1551793279\">part 1<\/a>, we added VR-headset-friendly controls: Look left to move left, and right to move right. In this second part of the series, I\u2019ve shown you how easy it can be to build a basic, functioning virtual reality game. We added game logic, so that the endless runner matches your expectations: run forever and have an endless series of dangerous obstacles fly at the player. Thus far, you have built a functioning game with keyboard-less support for virtual reality headsets.<\/p>\n<p>Here are additional resources for different VR controls and headsets:<\/p>\n<ul>\n<li><a href=\"https:\/\/aframe.io\/docs\/0.8.0\/introduction\/vr-headsets-and-webvr-browsers.html\">A-Frame for VR Headsets<\/a><br \/>\nA survey of browsers and headsets that A-Frame VR supports.<\/li>\n<li><a href=\"https:\/\/aframe.io\/docs\/0.8.0\/introduction\/interactions-and-controllers.html\">A-Frame for VR Controllers<\/a><br \/>\nHow A-Frame supports no controllers, 3DoF controllers and 6DoF controllers, in addition to other alternatives for interaction.<\/li>\n<\/ul>\n<p>In the next part, we will add a few finishing touches and synchronize <em>game states<\/em>, which move us one step closer to multiplayer games.<\/p>\n<p>Stay tuned for Part 3!<\/p>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/logo-red-9.png?w=900\" alt=\"Smashing Editorial\"><span>(rb, ra, yk, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How To Build An Endless Runner Game In Virtual Reality (Part 2) How To Build An Endless Runner Game In Virtual Reality (Part 2) Alvin Wan 2019-03-13T12:00:35+01:002019-03-14T11:04:50+00:00 In Part 1 of this series, we\u2019ve seen how a virtual reality model with lighting and animation effects can be created. In this part, we will implement the&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":61499,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-61498","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"How To Build An Endless Runner Game In Virtual Reality (Part 2)How To Build An Endless Runner Game In Virtual Reality (Part 2) Alvin Wan 2019-03-13T12:00:35+01:002019-03-14T11:04:50+00:00In Part 1 of this series, we\u2019ve seen how a virtual reality model with lighting and animation effects can be created. In this part, we will implement the game\u2019s core\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"How To Build An Endless Runner Game In Virtual Reality (Part 2) | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"How To Build An Endless Runner Game In Virtual Reality (Part 2)How To Build An Endless Runner Game In Virtual Reality (Part 2) Alvin Wan 2019-03-13T12:00:35+01:002019-03-14T11:04:50+00:00In Part 1 of this series, we\u2019ve seen how a virtual reality model with lighting and animation effects can be created. In this part, we will implement the game\u2019s core\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-03-14T11:18:54+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-03-14T11:18:54+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"How To Build An Endless Runner Game In Virtual Reality (Part 2) | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"How To Build An Endless Runner Game In Virtual Reality (Part 2)How To Build An Endless Runner Game In Virtual Reality (Part 2) Alvin Wan 2019-03-13T12:00:35+01:002019-03-14T11:04:50+00:00In Part 1 of this series, we\u2019ve seen how a virtual reality model with lighting and animation effects can be created. In this part, we will implement the game\u2019s core\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/03\\\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\\\/#article\",\"name\":\"How To Build An Endless Runner Game In Virtual Reality (Part 2) | Design for Immersive Technologies\",\"headline\":\"How To Build An Endless Runner Game In Virtual Reality (Part 2)\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/2-how-t0-build-an-endless-runner-game-in-virtual-reality-800w.gif?fit=800%2C368&ssl=1\",\"width\":800,\"height\":368},\"datePublished\":\"2019-03-14T04:18:54-07:00\",\"dateModified\":\"2019-03-14T04:18:54-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/03\\\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/03\\\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/03\\\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/03\\\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\\\/#listItem\",\"name\":\"How To Build An Endless Runner Game In Virtual Reality (Part 2)\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/03\\\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\\\/#listItem\",\"position\":3,\"name\":\"How To Build An Endless Runner Game In Virtual Reality (Part 2)\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/03\\\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/03\\\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/03\\\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\\\/\",\"name\":\"How To Build An Endless Runner Game In Virtual Reality (Part 2) | Design for Immersive Technologies\",\"description\":\"How To Build An Endless Runner Game In Virtual Reality (Part 2)How To Build An Endless Runner Game In Virtual Reality (Part 2) Alvin Wan 2019-03-13T12:00:35+01:002019-03-14T11:04:50+00:00In Part 1 of this series, we\\u2019ve seen how a virtual reality model with lighting and animation effects can be created. In this part, we will implement the game\\u2019s core\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/03\\\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/2-how-t0-build-an-endless-runner-game-in-virtual-reality-800w.gif?fit=800%2C368&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/03\\\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\\\/#mainImage\",\"width\":800,\"height\":368},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/03\\\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\\\/#mainImage\"},\"datePublished\":\"2019-03-14T04:18:54-07:00\",\"dateModified\":\"2019-03-14T04:18:54-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"How To Build An Endless Runner Game In Virtual Reality (Part 2) | Design for Immersive Technologies","description":"How To Build An Endless Runner Game In Virtual Reality (Part 2)How To Build An Endless Runner Game In Virtual Reality (Part 2) Alvin Wan 2019-03-13T12:00:35+01:002019-03-14T11:04:50+00:00In Part 1 of this series, we\u2019ve seen how a virtual reality model with lighting and animation effects can be created. In this part, we will implement the game\u2019s core","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/#article","name":"How To Build An Endless Runner Game In Virtual Reality (Part 2) | Design for Immersive Technologies","headline":"How To Build An Endless Runner Game In Virtual Reality (Part 2)","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/2-how-t0-build-an-endless-runner-game-in-virtual-reality-800w.gif?fit=800%2C368&ssl=1","width":800,"height":368},"datePublished":"2019-03-14T04:18:54-07:00","dateModified":"2019-03-14T04:18:54-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/#listItem","name":"How To Build An Endless Runner Game In Virtual Reality (Part 2)"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/#listItem","position":3,"name":"How To Build An Endless Runner Game In Virtual Reality (Part 2)","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/","name":"How To Build An Endless Runner Game In Virtual Reality (Part 2) | Design for Immersive Technologies","description":"How To Build An Endless Runner Game In Virtual Reality (Part 2)How To Build An Endless Runner Game In Virtual Reality (Part 2) Alvin Wan 2019-03-13T12:00:35+01:002019-03-14T11:04:50+00:00In Part 1 of this series, we\u2019ve seen how a virtual reality model with lighting and animation effects can be created. In this part, we will implement the game\u2019s core","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/2-how-t0-build-an-endless-runner-game-in-virtual-reality-800w.gif?fit=800%2C368&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/#mainImage","width":800,"height":368},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/#mainImage"},"datePublished":"2019-03-14T04:18:54-07:00","dateModified":"2019-03-14T04:18:54-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"How To Build An Endless Runner Game In Virtual Reality (Part 2) | Design for Immersive Technologies","og:description":"How To Build An Endless Runner Game In Virtual Reality (Part 2)How To Build An Endless Runner Game In Virtual Reality (Part 2) Alvin Wan 2019-03-13T12:00:35+01:002019-03-14T11:04:50+00:00In Part 1 of this series, we\u2019ve seen how a virtual reality model with lighting and animation effects can be created. In this part, we will implement the game\u2019s core","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/","article:published_time":"2019-03-14T11:18:54+00:00","article:modified_time":"2019-03-14T11:18:54+00:00","twitter:card":"summary","twitter:title":"How To Build An Endless Runner Game In Virtual Reality (Part 2) | Design for Immersive Technologies","twitter:description":"How To Build An Endless Runner Game In Virtual Reality (Part 2)How To Build An Endless Runner Game In Virtual Reality (Part 2) Alvin Wan 2019-03-13T12:00:35+01:002019-03-14T11:04:50+00:00In Part 1 of this series, we\u2019ve seen how a virtual reality model with lighting and animation effects can be created. In this part, we will implement the game\u2019s core"},"aioseo_meta_data":{"post_id":"61498","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 21:56:11","updated":"2026-09-01 06:25:17","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tHow To Build An Endless Runner Game In Virtual Reality (Part 2)\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"How To Build An Endless Runner Game In Virtual Reality (Part 2)","link":"https:\/\/www.taterboy.com\/blog\/2019\/03\/how-to-build-an-endless-runner-game-in-virtual-reality-part-2\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-fZU","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/03\/2-how-t0-build-an-endless-runner-game-in-virtual-reality-800w.gif?fit=800%2C368&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/61498","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=61498"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/61498\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/61499"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=61498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=61498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=61498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}