Added input mapping and update aframe

index.html

@@ -5,9 +5,10 @@
     <title>A-Blast</title>
     <meta name="description" content="A WebVR wave shooter game using A-Frame by Mozilla VR.">
     <meta name="theme-color" content="#3d4d55">
-    <!--<script src="vendor/aframe-master.min.js"></script>-->
-    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
+    <script src="vendor/aframe-master.min.js"></script>
+    <!--<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>-->
     <script src="build/build.js"></script>
+    <script src="vendor/aframe-input-mapping-component.min.js"></script>
     <script src="vendor/aframe-bmfont-component.min.js"></script>
     <script src="assets/data/waves.js"></script>
     <link rel="stylesheet" href="css/main.css">

src/components/gun.js

@@ -7,7 +7,8 @@ var WEAPONS = require('./weapon');
 AFRAME.registerComponent('shoot', {
   schema: {
     direction: {type: 'vec3', default: {x: 0, y: -2, z: -1}},  // Event to fire bullet.
-    on: {default: 'triggerdown'},  // Event to fire bullet.
+    on: {default: 'shoot'},  // Event to fire bullet.
+    onFromScreen: {default: 'shootScreen'},  // Event to fire bullet from screen position (touch screens or desktop mouse)
     spaceKeyEnabled: {default: false},  // Keyboard support.
     weapon: {default: 'default'}  // Weapon definition.
   },
@@ -21,15 +22,12 @@ AFRAME.registerComponent('shoot', {
     this.shoot = this.shoot.bind(this);
     this.weapon = null;
 
+    // Add keyboard listener.
+    if (data.spaceKeyEnabled) { el.sceneEl.addEventListener(data.onFromScreen, this.shoot); }
+
     // Add event listener.
-    if (data.on) { el.addEventListener(data.on, this.shoot); }
+    el.sceneEl.addEventListener(data.on, self.shoot);
 
-    // Add keyboard listener.
-    if (data.spaceKeyEnabled) {
-      window.addEventListener('keydown', function (evt) {
-        if (evt.code === 'Space' || evt.keyCode === '32') { self.shoot(); }
-      });
-    }
 /*
     if (AFRAME.utils.device.isMobile())
     {
@@ -102,7 +100,7 @@ AFRAME.registerComponent('shoot', {
       bulletEntity.play();
 
       // Communicate the shoot.
-      el.emit('shoot', bulletEntity);
+      el.emit('shot', bulletEntity);
 
       // Set cooldown period.
       this.coolingDown = true;

src/components/shoot-controls.js

@@ -5,56 +5,6 @@ AFRAME.registerComponent('shoot-controls', {
     hand: { default: 'left' }
   },
 
-  init: function () {
-    var self = this;
-
-    this.onButtonChanged = this.onButtonChanged.bind(this);
-    this.onButtonDown = function (evt) { self.onButtonEvent(evt.detail.id, 'down'); };
-    this.onButtonUp = function (evt) { self.onButtonEvent(evt.detail.id, 'up'); };
-  },
-
-  play: function () {
-    var el = this.el;
-    el.addEventListener('buttonchanged', this.onButtonChanged);
-    el.addEventListener('buttondown', this.onButtonDown);
-    el.addEventListener('buttonup', this.onButtonUp);
-  },
-
-  pause: function () {
-    var el = this.el;
-    el.removeEventListener('buttonchanged', this.onButtonChanged);
-    el.removeEventListener('buttondown', this.onButtonDown);
-    el.removeEventListener('buttonup', this.onButtonUp);
-  },
-
-  // buttonId
-  // 0 - trackpad
-  // 1 - trigger ( intensity value from 0.5 to 1 )
-  // 2 - grip
-  // 3 - menu ( dispatch but better for menu options )
-  // 4 - system ( never dispatched on this layer )
-  mapping: {
-    axis0: 'trackpad',
-    axis1: 'trackpad',
-    button0: 'trackpad',
-    button1: 'trigger',
-    button2: 'grip',
-    button3: 'menu',
-    button4: 'system'
-  },
-
-  onButtonChanged: function (evt) {
-    var buttonName = this.mapping['button' + evt.detail.id];
-    if (buttonName !== 'trigger') { return; }
-    var value = evt.detail.state.value;
-    this.el.components['weapon'].setTriggerPressure(value);
-  },
-
-  onButtonEvent: function (id, evtName) {
-    var buttonName = this.mapping['button' + id];
-    this.el.emit(buttonName + evtName);
-  },
-
   update: function () {
     var data = this.data;
     var el = this.el;

src/components/weapon.js

@@ -12,7 +12,6 @@ var WEAPONS = {
   }
 };
 
-
 /**
  * Tracked controls, gun model, firing animation, shooting effects.
  */
@@ -25,7 +24,6 @@ AFRAME.registerComponent('weapon', {
   },
 
   updateWeapon: function () {
-    console.log(this.controllerModel);
     if (this.controllerModel === 'oculus-touch-controller') {
       this.model.applyMatrix(new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), 0.8));
       this.el.setAttribute('shoot', {direction: '0 -0.3 -1'});
@@ -56,7 +54,6 @@ AFRAME.registerComponent('weapon', {
     this.trigger = null;
 
     el.addEventListener('controllerconnected', function (evt) {
-      console.log(evt);
       self.controllerModel = evt.detail.name;
       if (self.model == null) {
         self.isGamepadConnected = true;
@@ -89,7 +86,7 @@ AFRAME.registerComponent('weapon', {
     }.bind(this));
 
     var self = this;
-    el.addEventListener('shoot', function (evt) {
+    el.addEventListener('shot', function (evt) {
       el.components['json-model'].playAnimation('default');
       self.light.components.light.light.intensity = self.lightIntensity;
       for (var i in self.fires){

src/index.js

@@ -6,6 +6,7 @@ require('./a-asset-image.js')
 require('./lib/utils.js');
 
 // Systems.
+require('./systems/ablast.js');
 require('./systems/bullet.js');
 require('./systems/enemy.js');
 require('./systems/explosion.js');

src/systems/ablast.js

@@ -0,0 +1,23 @@
+AFRAME.registerSystem('a-blast', {
+  schema: {},
+
+  init: function () {
+    var mappings = {
+      default: {
+        'vive-controls': {
+          triggerdown: 'shoot'
+        },
+        'oculus-touch-controls': {
+          triggerdown: 'shoot'
+        },
+        'windows-motion-controls': {
+          triggerdown: 'shoot'
+        },
+        keyboard: {
+          'space_down': 'shootScreen'
+        }
+      }
+    };
+    AFRAME.registerInputMappings(mappings);
+  }
+});