Sanal Gerçeklikte Sonsuz Bir Koşucu Oyunu Nasıl Oluşturulur (Bölüm 2)

Bu serinin 1. Bölümünde, ışıklandırma ve animasyon efektleriyle bir sanal gerçeklik modelinin nasıl oluşturulabileceğini gördük. Bu bölümde, oyunun temel mantığını uygulayacağız ve bu uygulamanın “oyun” bölümünü oluşturmak için daha gelişmiş A-Frame ortam manipülasyonlarını kullanacağız. Sonunda, gerçek bir meydan okuma ile işleyen bir sanal gerçeklik oyununa sahip olacaksınız.

Bu öğretici, çarpışma algılama ve karışımlar gibi daha fazla A-Frame konsepti dahil (ancak bunlarla sınırlı olmamak üzere) bir dizi adımı içerir.

• Nihai ürünün demosu

Önkoşullar

Tıpkı önceki eğitimde olduğu gibi, aşağıdakilere ihtiyacınız olacak:

• İnternet erişimi (özellikle glitch.com'a);
• 1. bölümden tamamlanan bir Glitch projesi (bitmiş üründen https://glitch.com/edit/#!/ergo-1 adresine gidip “Düzenlemek için Remix”e tıklayarak devam edebilirsiniz;
• Bir sanal gerçeklik başlığı (isteğe bağlı, önerilir). (Parçası 15 dolardan sunulan Google Cardboard'u kullanıyorum.)
  

Adım 1: Engelleri Tasarlamak

Bu adımda engel olarak kullanacağımız ağaçları tasarlıyorsunuz. Ardından, ağaçları oynatıcıya doğru hareket ettiren aşağıdaki gibi basit bir animasyon ekleyeceksiniz:

Bu ağaçlar, oyun sırasında oluşturduğunuz engeller için şablon görevi görecek. Bu adımın son kısmı için, bu “şablon ağaçlarını” kaldıracağız.

Başlamak için birkaç farklı A-Frame karışımı ekleyin. Karışımlar, yaygın olarak kullanılan bileşen özellikleri kümeleridir. Bizim durumumuzda, tüm ağaçlarımız aynı renge, yüksekliğe, genişliğe, derinliğe vb. sahip olacaktır. Diğer bir deyişle, tüm ağaçlarınız aynı görünecek ve bu nedenle birkaç ortak karışım kullanacaktır.

Not : Eğitimimizde, tek varlığınız mixins olacaktır. Daha fazla bilgi için A-Frame Mixins sayfasını ziyaret edin.

Editörünüzde index.html'ye gidin. Gökyüzünüzden hemen sonra ve ışıklarınızdan önce varlıklarınızı tutmak için yeni bir A-Frame varlığı ekleyin:

 <a-sky...></a-sky> <!-- Mixins --> <a-assets> </a-assets> <!-- Lights --> ...

Yeni a-assets varlığınızda, yeşillikleriniz için bir karışım ekleyerek başlayın. Bu karışımlar, şablon ağacın yaprakları için ortak özellikleri tanımlar. Kısacası, düşük poli etkisi için beyaz, düz gölgeli bir piramittir.

 <a-assets> <a-mixin geometry=" primitive: cone; segments-height: 1; segments-radial:4; radius-bottom:0.3;" material="color:white;flat-shading: true;"></a-mixin> </a-assets>

Yeşillik karışımınızın hemen altına, gövde için bir karışım ekleyin. Bu gövde küçük, beyaz bir dikdörtgen prizma olacak.

 <a-assets> ... <a-mixin geometry=" primitive: box; height:0.5; width:0.1; depth:0.1;" material="color:white;"></a-mixin> </a-assets>

Ardından, bu karışımları kullanacak şablon ağaç nesnelerini ekleyin. Hâlâ index.html içinde, platformlar bölümüne gidin. Oynatıcı bölümünden hemen önce, üç boş ağaç varlığıyla yeni bir ağaç bölümü ekleyin:

 <a-entity ...> <!-- Trees --> <a-entity></a-entity> <a-entity></a-entity> <a-entity></a-entity> <!-- Player --> ...

Ardından, ağaç varlıklarını yeniden konumlandırın, yeniden ölçeklendirin ve gölgeler ekleyin.

 <!-- Trees --> <a-entity shadow scale="0.3 0.3 0.3" position="0 0.6 0"></a-entity> <a-entity shadow scale="0.3 0.3 0.3" position="0 0.6 0"></a-entity> <a-entity shadow scale="0.3 0.3 0.3" position="0 0.6 0"></a-entity>

Şimdi, daha önce tanımladığımız karışımları kullanarak ağaç varlıklarını bir gövde ve yapraklarla doldurun.

 <!-- Trees --> <a-entity ...> <a-entity mixin="foliage"></a-entity> <a-entity mixin="trunk" position="0 -0.5 0"></a-entity> </a-entity> <a-entity ...> <a-entity mixin="foliage"></a-entity> <a-entity mixin="trunk" position="0 -0.5 0"></a-entity> </a-entity> <a-entity ...> <a-entity mixin="foliage"></a-entity> <a-entity mixin="trunk" position="0 -0.5 0"></a-entity> </a-entity>

Önizlemenize gidin ve şimdi aşağıdaki şablon ağaçlarını görmelisiniz.

Şimdi, platformdaki uzak bir konumdan ağaçları kullanıcıya doğru hareket ettirin. Daha önce olduğu gibi, a-animation etiketini kullanın:

 <!-- Trees --> <a-entity ...> ... <a-animation attribute="position" ease="linear" from="0 0.6 -7" to="0 0.6 1.5" dur="5000"></a-animation> </a-entity> <a-entity ...> ... <a-animation attribute="position" ease="linear" from="-0.5 0.55 -7" to="-0.5 0.55 1.5" dur="5000"></a-animation> </a-entity> <a-entity ...> ... <a-animation attribute="position" ease="linear" from="0.5 0.55 -7" to="0.5 0.55 1.5" dur="5000"></a-animation> </a-entity>

Kodunuzun aşağıdakilerle eşleştiğinden emin olun.

 <a-entity...> <!-- Trees --> <a-entity shadow scale="0.3 0.3 0.3" position="0 0.6 0"> <a-entity mixin="foliage"></a-entity> <a-entity mixin="trunk" position="0 -0.5 0"></a-entity> <a-animation attribute="position" ease="linear" from="0 0.6 -7" to="0 0.6 1.5" dur="5000"></a-animation> </a-entity> <a-entity shadow scale="0.3 0.3 0.3" position="-0.5 0.55 0"> <a-entity mixin="foliage"></a-entity> <a-entity mixin="trunk" position="0 -0.5 0"></a-entity> <a-animation attribute="position" ease="linear" from="-0.5 0.55 -7" to="-0.5 0.55 1.5" dur="5000"></a-animation> </a-entity> <a-entity shadow scale="0.3 0.3 0.3" position="0.5 0.55 0"> <a-entity mixin="foliage"></a-entity> <a-entity mixin="trunk" position="0 -0.5 0"></a-entity> <a-animation attribute="position" ease="linear" from="0.5 0.55 -7" to="0.5 0.55 1.5" dur="5000"></a-animation> </a-entity> <!-- Player --> ...

Önizlemenize gidin ve şimdi ağaçların size doğru hareket ettiğini göreceksiniz.

Editörünüze geri dönün. Bu sefer, entity/ergo.js öğesini seçin. Oyun bölümünde, pencere yüklendikten sonra ağaçları kurun.

 /******** * GAME * ********/ ... window.onload = function() { setupTrees(); }

Kontrollerin altında, ancak Oyun bölümünden önce, yeni bir TREES bölümü ekleyin. Bu bölümde, yeni bir setupTrees işlevi tanımlayın.

 /************ * CONTROLS * ************/ ... /********* * TREES * *********/ function setupTrees() { } /******** * GAME * ********/ ...

Yeni setupTrees işlevinde, şablon ağacı DOM nesnelerine referanslar alın ve referansları global olarak kullanılabilir hale getirin.

 /********* * TREES * *********/ var templateTreeLeft; var templateTreeCenter; var templateTreeRight; function setupTrees() { templateTreeLeft = document.getElementById('template-tree-left'); templateTreeCenter = document.getElementById('template-tree-center'); templateTreeRight = document.getElementById('template-tree-right'); }

Ardından, yeni bir removeTree yardımcı programı tanımlayın. Bu yardımcı programla, şablon ağaçlarını sahneden kaldırabilirsiniz. setupTrees işlevinin altında yeni yardımcı programınızı tanımlayın.

 function setupTrees() { ... } function removeTree(tree) { tree.parentNode.removeChild(tree); }

setupTrees geri döndüğünüzde, şablon ağaçlarını kaldırmak için yeni yardımcı programı kullanın.

 function setupTrees() { ... removeTree(templateTreeLeft); removeTree(templateTreeRight); removeTree(templateTreeCenter); }

Ağaç ve oyun bölümlerinizin aşağıdakilerle eşleştiğinden emin olun:

 /********* * TREES * *********/ var templateTreeLeft; var templateTreeCenter; var templateTreeRight; function setupTrees() { templateTreeLeft = document.getElementById('template-tree-left'); templateTreeCenter = document.getElementById('template-tree-center'); templateTreeRight = document.getElementById('template-tree-right'); removeTree(templateTreeLeft); removeTree(templateTreeRight); removeTree(templateTreeCenter); } function removeTree(tree) { tree.parentNode.removeChild(tree); } /******** * GAME * ********/ setupControls(); // TODO: AFRAME.registerComponent has to occur before window.onload? window.onload = function() { setupTrees(); }

Önizlemenizi yeniden açın ve ağaçlarınız şimdi yok olmalıdır. Önizleme, bu öğreticinin başlangıcında oyunumuzla eşleşmelidir.

Bu, şablon ağacı tasarımını tamamlar.

Bu adımda, ortak özellikleri tanımlayarak kodu basitleştirmemizi sağlayan A-Frame karışımlarını ele aldık ve kullandık. Ayrıca, nesneleri A-Frame VR sahnesinden kaldırmak için DOM ile A-Frame entegrasyonundan yararlandık.

Bir sonraki adımda, birden fazla engel oluşturacağız ve ağaçları farklı şeritler arasında dağıtmak için basit bir algoritma tasarlayacağız.

2. Adım : Engelleri Ortaya Çıkarmak

Sonsuz bir koşu oyununda amacımız, bize doğru uçan engellerden kaçınmaktır. Oyunun bu özel uygulamasında, en yaygın olduğu gibi üç şerit kullanıyoruz.

Çoğu sonsuz koşu oyununun aksine, bu oyun yalnızca sola ve sağa hareketi destekleyecektir . Bu, engel oluşturma algoritmamıza bir kısıtlama getirir: Üç şeritte aynı anda bize doğru uçan üç engelimiz olamaz. Bu gerçekleşirse, oyuncunun hayatta kalma şansı sıfır olur. Sonuç olarak, yumurtlama algoritmamızın bu kısıtlamaya uyması gerekiyor.

Bu adımda, tüm kod düzenlemelerimiz varlıklar/ergo.js içinde yapılacaktır. HTML dosyası aynı kalacaktır. varlıklar/ergo.js'nin TREES bölümüne gidin.

Başlamak için, ağaçları yumurtlamak için yardımcı programlar ekleyeceğiz. Her ağacın benzersiz bir kimliğe ihtiyacı olacaktır; bu, ağaç doğduğunda var olan ağaçların sayısı olarak saf bir şekilde tanımlayacağız. Global bir değişkendeki ağaç sayısını izleyerek başlayın.

 /********* * TREES * *********/ ... var numberOfTrees = 0; function setupTrees() { ...

Daha sonra, spawn fonksiyonumuzun ağaç ekleyeceği ağaç kapsayıcı DOM öğesine bir referans başlatacağız. Hâlâ TREES bölümünde, global bir değişken ekleyin ve ardından referansı yapın.

 ... var treeContainer; var numberOfTrees ... function setupTrees() { ... templateTreeRight = ... treeContainer = document.getElementById('tree-container'); removeTree(...); ... }

Hem ağaç sayısını hem de ağaç kapsayıcısını kullanarak, ağaçları ortaya çıkaran yeni bir fonksiyon yazın.

 function removeTree(tree) { ... } function addTree(el) { numberOfTrees += 1; el.id = 'tree-' + numberOfTrees; treeContainer.appendChild(el); } ...

Daha sonra kullanım kolaylığı için, doğru ağacı doğru şeride ekleyen ikinci bir işlev yaratacaksınız. Başlamak için, TREES bölümünde yeni bir templates dizisi tanımlayın.

 var templates; var treeContainer; ... function setupTrees() { ... templates = [templateTreeLeft, templateTreeCenter, templateTreeRight]; removeTree(...); ... }

Bu şablonlar dizisini kullanarak, solu, ortayı veya sağı temsil eden bir kimlik verildiğinde ağaçları belirli bir şeritte oluşturan bir yardımcı program ekleyin.

 function function addTree(el) { ... } function addTreeTo(position_index) { var template = templates[position_index]; addTree(template.cloneNode(true)); }

Önizlemenize gidin ve geliştirici konsolunuzu açın. Geliştirici konsolunuzda genel addTreeTo işlevini çağırın.

 > addTreeTo(0); # spawns tree in left lane 

Şimdi ağaçları rastgele oluşturan bir algoritma yazacaksınız:

1. Rastgele bir şerit seçin (bu zaman aralığı için henüz seçilmedi);
2. Belli bir olasılıkla bir ağaç yumurtlayın;
3. Bu zaman aralığı için maksimum ağaç sayısı ortaya çıktıysa, durun. Aksi takdirde, 1. adımı tekrarlayın.

Bu algoritmayı uygulamak için şablon listesini karıştıracağız ve her seferinde bir tane işleyeceğiz. Bir dizi farklı anahtar sözcük bağımsız değişkenini kabul eden addTreesRandomly adlı yeni bir işlev tanımlayarak başlayın.

 function addTreeTo(position_index) { ... } /** * Add any number of trees across different lanes, randomly. **/ function addTreesRandomly( { probTreeLeft = 0.5, probTreeCenter = 0.5, probTreeRight = 0.5, maxNumberTrees = 2 } = {}) { }

Yeni addTreesRandomly işlevinizde, şablon ağaçlarının bir listesini tanımlayın ve listeyi karıştırın.

 function addTreesRandomly( ... ) { var trees = [ {probability: probTreeLeft, position_index: 0}, {probability: probTreeCenter, position_index: 1}, {probability: probTreeRight, position_index: 2}, ] shuffle(trees); }

Dosyanın en altına gidin ve yeni bir shuffle yardımcı programıyla birlikte yeni bir yardımcı programlar bölümü oluşturun. Bu yardımcı program, bir diziyi yerinde karıştıracaktır.

 /******** * GAME * ********/ ... /************* * UTILITIES * *************/ /** * Shuffles array in place. * @param {Array} a items An array containing the items. */ function shuffle(a) { var j, x, i; for (i = a.length - 1; i > 0; i--) { j = Math.floor(Math.random() * (i + 1)); x = a[i]; a[i] = a[j]; a[j] = x; } return a; }

Ağaçlar bölümünüzdeki addTreesRandomly işlevine geri dönün. Yeni bir numberOfTreesAdded değişkeni ekleyin ve yukarıda tanımlanan ağaçların listesini yineleyin.

 function addTreesRandomly( ... ) { ... var numberOfTreesAdded = 0; trees.forEach(function (tree) { }); }

Ağaçlar üzerinde yinelemede, yalnızca belirli bir olasılıkla ve yalnızca eklenen ağaç sayısı 2 geçmiyorsa bir ağaç oluşturun. For döngüsünü aşağıdaki gibi güncelleyin.

 function addTreesRandomly( ... ) { ... trees.forEach(function (tree) { if (Math.random() < tree.probability && numberOfTreesAdded < maxNumberTrees) { addTreeTo(tree.position_index); numberOfTreesAdded += 1; } }); }

İşlevi tamamlamak için eklenen ağaç sayısını döndürün.

 function addTreesRandomly( ... ) { ... return numberOfTreesAdded; }

addTreesRandomly işlevinizin aşağıdakiyle eşleştiğini iki kez kontrol edin.

 /** * Add any number of trees across different lanes, randomly. **/ function addTreesRandomly( { probTreeLeft = 0.5, probTreeCenter = 0.5, probTreeRight = 0.5, maxNumberTrees = 2 } = {}) { var trees = [ {probability: probTreeLeft, position_index: 0}, {probability: probTreeCenter, position_index: 1}, {probability: probTreeRight, position_index: 2}, ] shuffle(trees); var numberOfTreesAdded = 0; trees.forEach(function (tree) { if (Math.random() < tree.probability && numberOfTreesAdded < maxNumberTrees) { addTreeTo(tree.position_index); numberOfTreesAdded += 1; } }); return numberOfTreesAdded; }

Son olarak, ağaçları otomatik olarak yumurtlamak için, düzenli aralıklarla ağaç yumurtlamayı tetikleyen bir zamanlayıcı kurun. Zamanlayıcıyı global olarak tanımlayın ve bu zamanlayıcı için yeni bir sökme işlevi ekleyin.

 /********* * TREES * *********/ ... var treeTimer; function setupTrees() { ... } function teardownTrees() { clearInterval(treeTimer); }

Ardından, zamanlayıcıyı başlatan ve zamanlayıcıyı önceden tanımlanmış global değişkene kaydeden yeni bir işlev tanımlayın. Aşağıdaki zamanlayıcı her yarım saniyede bir çalıştırılır.

 function addTreesRandomlyLoop({intervalLength = 500} = {}) { treeTimer = setInterval(addTreesRandomly, intervalLength); }

Son olarak, pencere yüklendikten sonra Oyun bölümünden zamanlayıcıyı başlatın.

 /******** * GAME * ********/ ... window.onload = function() { ... addTreesRandomlyLoop(); }

Önizlemenize gidin ve rastgele ortaya çıkan ağaçları göreceksiniz. Asla aynı anda üç ağaç olmadığına dikkat edin.

Bu, engeller adımını tamamlar. Bir dizi şablon ağacını başarıyla aldık ve şablonlardan sonsuz sayıda engel oluşturduk. Yumurtlama algoritmamız, oyunu oynanabilir kılmak için oyundaki doğal kısıtlamalara da saygı gösterir.

Bir sonraki adımda, çarpışma testini ekleyelim.

Adım 3: Çarpışma Testi

Bu bölümde engeller ve oyuncu arasındaki çarpışma testlerini uygulayacağız. Bu çarpışma testleri, diğer oyunların çoğunda bulunan çarpışma testlerinden daha basittir; bununla birlikte, oyuncu yalnızca x ekseni boyunca hareket eder, bu nedenle bir ağaç x eksenini geçtiğinde, ağacın şeridinin oyuncunun şeridiyle aynı olup olmadığını kontrol edin. Bu oyun için bu basit kontrolü uygulayacağız.

TREES bölümüne kadar index.html dosyasına gidin. Burada ağaçların her birine şerit bilgisi ekleyeceğiz. Ağaçların her biri için data-tree-position-index= öğesini aşağıdaki gibi ekleyin. Ayrıca, satırdaki tüm ağaçları kolayca seçebilmemiz için class="tree" ekleyin:

 <a-entity data-tree-position-index="1" class="tree" ...> </a-entity> <a-entity data-tree-position-index="0" class="tree" ...> </a-entity> <a-entity data-tree-position-index="2" class="tree" ...> </a-entity>

Varlıklar/ergo.js'ye gidin ve GAME bölümünde yeni bir setupCollisions işlevini çağırın. Ek olarak, mevcut bir oyunun zaten çalışıp çalışmadığını belirten yeni bir isGameRunning global değişkeni tanımlayın.

 /******** * GAME * ********/ var isGameRunning = false; setupControls(); setupCollision(); window.onload = function() { ...

TREES bölümünden hemen sonra, ancak Oyun bölümünden önce yeni bir COLLISIONS bölümü tanımlayın. Bu bölümde setupCollisions işlevini tanımlayın.

 /********* * TREES * *********/ ... /************** * COLLISIONS * **************/ const POSITION_Z_OUT_OF_SIGHT = 1; const POSITION_Z_LINE_START = 0.6; const POSITION_Z_LINE_END = 0.7; function setupCollision() { } /******** * GAME * ********/

Daha önce olduğu gibi, bir AFRAME bileşeni kaydedeceğiz ve her zaman adımında kodu çalıştırmak için tick olay dinleyicisini kullanacağız. Bu durumda, player bir bileşen kaydedeceğiz ve o dinleyicideki tüm ağaçlara karşı kontroller yapacağız:

 function setupCollisions() { AFRAME.registerComponent('player', { tick: function() { document.querySelectorAll('.tree').forEach(function(tree) { } } } }

for döngüsünde, ağacın ilgili bilgilerini alarak başlayın:

 document.querySelectorAll('.tree').forEach(function(tree) { position = tree.getAttribute('position'); tree_position_index = tree.getAttribute('data-tree-position-index'); tree_id = tree.getAttribute('id'); }

Daha sonra, hala for döngüsü içinde, ağacın özelliklerini çıkardıktan hemen sonra, görüş alanı dışındaysa ağacı kaldırın:

 document.querySelectorAll('.tree').forEach(function(tree) { ... if (position.z > POSITION_Z_OUT_OF_SIGHT) { removeTree(tree); } }

Ardından, çalışan oyun yoksa, çarpışma olup olmadığını kontrol etmeyin.

 document.querySelectorAll('.tree').forEach(function(tree) { if (!isGameRunning) return; }

Son olarak (hala for döngüsünde), ağacın oynatıcıyla aynı anda aynı konumu paylaşıp paylaşmadığını kontrol edin. Öyleyse, henüz tanımlanmamış bir gameOver işlevini çağırın:

 document.querySelectorAll('.tree').forEach(function(tree) { ... if (POSITION_Z_LINE_START < position.z && position.z < POSITION_Z_LINE_END && tree_position_index == player_position_index) { gameOver(); } }

setupCollisions işlevinizin aşağıdakilerle eşleştiğini kontrol edin:

 function setupCollisions() { AFRAME.registerComponent('player', { tick: function() { document.querySelectorAll('.tree').forEach(function(tree) { position = tree.getAttribute('position'); tree_position_index = tree.getAttribute('data-tree-position-index'); tree_id = tree.getAttribute('id'); if (position.z > POSITION_Z_OUT_OF_SIGHT) { removeTree(tree); } if (!isGameRunning) return; if (POSITION_Z_LINE_START < position.z && position.z < POSITION_Z_LINE_END && tree_position_index == player_position_index) { gameOver(); } }) } }) }

Bu, çarpışma kurulumunu tamamlar. Şimdi startGame ve gameOver dizilerini soyutlamak için birkaç incelik ekleyeceğiz. GAME bölümüne gidin. addTreesRandomlyLoop'u henüz tanımlanmamış bir addTreesRandomlyLoop işleviyle değiştirerek, window.onload bloğunu aşağıdakiyle eşleşecek şekilde startGame .

 window.onload = function() { setupTrees(); startGame(); }

Kurulum işlevi çağrılarının altında yeni bir startGame işlevi oluşturun. Bu işlev isGameRunning değişkenini uygun şekilde başlatacak ve gereksiz çağrıları önleyecektir.

 window.onload = function() { ... } function startGame() { if (isGameRunning) return; isGameRunning = true; addTreesRandomlyLoop(); }

Son olarak, bir “Game Over!” uyarısı verecek olan gameOver tanımlayın. şimdilik mesaj.

 function startGame() { ... } function gameOver() { isGameRunning = false; alert('Game Over!'); teardownTrees(); }

Bu, sonsuz koşucu oyununun çarpışma testi bölümünü tamamlar.

Bu adımda, yine A-Frame bileşenlerini ve daha önce eklediğimiz bir dizi başka yardımcı programı kullandık. Ayrıca oyun fonksiyonlarını yeniden düzenledik ve uygun şekilde soyutladık; Daha sonra daha eksiksiz bir oyun deneyimi elde etmek için bu oyun işlevlerini artıracağız.

Çözüm

1. bölümde, VR-kulaklık dostu kontroller ekledik: Sola gitmek için sola, sağa gitmek için sağa bakın. Serinin bu ikinci bölümünde, size basit, işleyen bir sanal gerçeklik oyunu oluşturmanın ne kadar kolay olabileceğini gösterdim. Sonsuz koşucunun beklentilerinize uyması için oyun mantığını ekledik: sonsuza kadar koş ve oyuncuya sonsuz bir dizi tehlikeli engel uçsun. Şimdiye kadar, sanal gerçeklik kulaklıkları için klavyesiz desteğe sahip, işleyen bir oyun oluşturdunuz.

İşte farklı VR kontrolleri ve başlıklar için ek kaynaklar:

• VR Kulaklıklar için A-Frame
  A-Frame VR'nin desteklediği tarayıcılar ve başlıklar hakkında bir anket.
• VR Kontrolörleri için A-Frame
  A-Frame, etkileşim için diğer alternatiflere ek olarak hiçbir kontrol cihazını, 3DoF kontrol cihazını ve 6DoF kontrol cihazını nasıl destekler.

Bir sonraki bölümde, bizi çok oyunculu oyunlara bir adım daha yaklaştıran birkaç son rötuş ekleyeceğiz ve oyun durumlarını senkronize edeceğiz.