Updated TouchEventsManager to support input from Keyboard as well as an additional atk btn.

frontend/assets/scripts/AttackingCharacter.js

@@ -16,13 +16,20 @@ cc.Class({
   },
 
   ctor() {
+    this.speciesName = null;
+  },
+
+  setSpecies(speciesName) {
+    this.speciesName = speciesName;
+    this.effAnimNode = this.animNode.getChildByName(this.speciesName);
+    this.animComp = this.effAnimNode.getComponent(dragonBones.ArmatureDisplay);
+    this.animComp.playAnimation(ATK_CHARACTER_STATE.Idle1[1]);
+    this.effAnimNode.active = true;
   },
 
   onLoad() {
     BaseCharacter.prototype.onLoad.call(this);
     this.characterState = ATK_CHARACTER_STATE.Idle1[0];
-    this.animComp = this.animNode.getComponent(dragonBones.ArmatureDisplay);
-    this.animComp.playAnimation(ATK_CHARACTER_STATE.Idle1[1]);
   },
 
   scheduleNewDirection(newScheduledDirection, forceAnimSwitch) {

frontend/assets/scripts/KeyboardControls.js

@@ -1,69 +0,0 @@
-cc.Class({
-  extends: cc.Component,
-
-  properties: {},
-
-  setInputControls: function() {
-    const self = this;
-    // add keyboard event listener
-    // When there is a key being pressed down, judge if it's the designated directional button and set up acceleration in the corresponding direction
-    cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, function(event) {
-      switch (event.keyCode) {
-        case cc.macro.KEY.w:
-          self.activeDirection.dPjY = +1.0;
-          break;
-        case cc.macro.KEY.s:
-          self.activeDirection.dPjY = -1.0;
-          break;
-        case cc.macro.KEY.a:
-          self.activeDirection.dPjX = -2.0;
-          break;
-        case cc.macro.KEY.d:
-          self.activeDirection.dPjX = +2.0;
-          break;
-        default:
-          break;
-      }
-    }, self.node);
-
-    // when releasing the button, stop acceleration in this direction
-    cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, function(event) {
-      switch (event.keyCode) {
-        case cc.macro.KEY.w:
-          if (+1.0 == self.activeDirection.dPjY) {
-            self.activeDirection.dPjY = 0.0;
-          }
-          break;
-        case cc.macro.KEY.s:
-          if (-1.0 == self.activeDirection.dPjY) {
-            self.activeDirection.dPjY = 0.0;
-          }
-          break;
-        case cc.macro.KEY.a:
-          if (-2.0 == self.activeDirection.dPjX) {
-            self.activeDirection.dPjX = 0.0;
-          }
-          break;
-        case cc.macro.KEY.d:
-          if (+2.0 == self.activeDirection.dPjX) {
-            self.activeDirection.dPjX = 0.0;
-          }
-          break;
-        default:
-          break;
-      }
-    }, self.node);
-  },
-
-  // LIFE-CYCLE CALLBACKS:
-
-  onLoad() {
-    // Properties deliberately hidden from GUI panel.
-    this.activeDirection = {
-      dPjY: 0.0,
-      dPjX: 0.0
-    };
-    this.setInputControls();
-  }
-});
-

frontend/assets/scripts/KeyboardControls.js.meta

@@ -1,9 +0,0 @@
-{
-  "ver": "1.0.5",
-  "uuid": "4561a173-bfd2-4f64-b7ba-888cce0e4d9d",
-  "isPlugin": false,
-  "loadPluginInWeb": true,
-  "loadPluginInNative": true,
-  "loadPluginInEditor": false,
-  "subMetas": {}
-}

frontend/assets/scripts/Map.js

@@ -163,8 +163,8 @@ cc.Class({
       return [previousSelfInput, existingInputFrame.inputList[joinIndex - 1]];
     }
     const prefabbedInputList = (null == previousInputFrameDownsyncWithPrediction ? new Array(self.playerRichInfoDict.size).fill(0) : previousInputFrameDownsyncWithPrediction.inputList.slice());
-    const discreteDir = self.ctrl.getDiscretizedDirection();
-    prefabbedInputList[(joinIndex - 1)] = discreteDir.encodedIdx;
+    const currSelfInput = self.ctrl.getEncodedInput();
+    prefabbedInputList[(joinIndex - 1)] = currSelfInput;
     const prefabbedInputFrameDownsync = {
       inputFrameId: inputFrameId,
       inputList: prefabbedInputList,
@@ -173,7 +173,7 @@ cc.Class({
 
     self.dumpToInputCache(prefabbedInputFrameDownsync); // A prefabbed inputFrame, would certainly be adding a new inputFrame to the cache, because server only downsyncs "all-confirmed inputFrames" 
 
-    return [previousSelfInput, discreteDir.encodedIdx];
+    return [previousSelfInput, currSelfInput];
   },
 
   shouldSendInputFrameUpsyncBatch(prevSelfInput, currSelfInput, lastUpsyncInputFrameId, currInputFrameId) {
@@ -204,7 +204,7 @@ cc.Class({
       } else {
         const inputFrameUpsync = {
           inputFrameId: i,
-          encodedDir: inputFrameDownsync.inputList[self.selfPlayerInfo.joinIndex - 1],
+          encoded: inputFrameDownsync.inputList[self.selfPlayerInfo.joinIndex - 1],
         };
         inputFrameUpsyncBatch.push(inputFrameUpsync);
       }
@@ -338,7 +338,7 @@ cc.Class({
     window.mapIns = self;
     window.forceBigEndianFloatingNumDecoding = self.forceBigEndianFloatingNumDecoding;
 
-    self.showCriticalCoordinateLabels = true;
+    self.showCriticalCoordinateLabels = false;
 
     console.warn("+++++++ Map onLoad()");
     window.handleClientSessionError = function() {
@@ -754,12 +754,12 @@ cc.Class({
     const self = this;
     const newPlayerNode = cc.instantiate(self.controlledCharacterPrefab)
     const playerScriptIns = newPlayerNode.getComponent("ControlledCharacter");
+
     if (1 == joinIndex) {
-      newPlayerNode.color = cc.Color.RED;
-    }
-    if (2 == joinIndex) {
-      newPlayerNode.color = cc.Color.BLUE;
-      playerScriptIns.animNode.scaleX = (-1.0);
+      playerScriptIns.setSpecies("SoldierElf");
+    } else if (2 == joinIndex) {
+      playerScriptIns.setSpecies("SoldierFireGhost");
+      playerScriptIns.animComp.node.scaleX = (-1.0);
     }
 
     const wpos = self.virtualGridToWorldPos(vx, vy);
@@ -1039,8 +1039,7 @@ cc.Class({
         const playerCollider = collisionSysMap.get(collisionPlayerIndex);
         const player = currRenderFrame.players[playerId];
 
-        const encodedInput = inputList[joinIndex - 1];
-        const decodedInput = self.ctrl.decodeDirection(encodedInput);
+        const decodedInput = self.ctrl.decodeInput(inputList[joinIndex - 1]);
 
         // console.log(`Got non-zero inputs for playerId=${playerId}, decodedInput=${JSON.stringify(decodedInput)} @currRenderFrame.id=${currRenderFrame.id}, delayedInputFrame.id=${delayedInputFrame.id}`);
         /* 

frontend/assets/scripts/OfflineMap.js

@@ -6,13 +6,6 @@ const OnlineMap = require('./Map');
 cc.Class({
   extends: OnlineMap,
 
-  properties: {
-    keyboardInputControllerNode: {
-      type: cc.Node,
-      default: null
-    },
-  },
-
   onDestroy() {
     console.warn("+++++++ Map onDestroy()");
   },
@@ -21,6 +14,12 @@ cc.Class({
     const self = this;
     const newPlayerNode = cc.instantiate(self.controlledCharacterPrefab)
     const playerScriptIns = newPlayerNode.getComponent("ControlledCharacter");
+    if (1 == joinIndex) {
+      playerScriptIns.setSpecies("SoldierElf");
+    } else if (2 == joinIndex) {
+      playerScriptIns.setSpecies("SoldierFireGhost");
+      playerScriptIns.animComp.node.scaleX = (-1.0);
+    }
     const wpos = self.virtualGridToWorldPos(vx, vy);
 
     newPlayerNode.setPosition(cc.v2(wpos[0], wpos[1]));
@@ -150,9 +149,10 @@ cc.Class({
         players: {
           10: {
             id: 10,
+            joinIndex: 2,
             virtualGridX: 0,
             virtualGridY: 0,
-            speed: 2*self.worldToVirtualGridRatio,
+            speed: 2 * self.worldToVirtualGridRatio,
             dir: {
               dx: 0,
               dy: 0

frontend/assets/scripts/TouchEventsManager.js

@@ -94,6 +94,12 @@ cc.Class({
 
   onLoad() {
     this.cachedStickHeadPosition = cc.v2(0.0, 0.0);
+    this.cachedBtnUpLevel = 0;
+    this.cachedBtnDownLevel = 0;
+    this.cachedBtnLeftLevel = 0;
+    this.cachedBtnRightLevel = 0;
+    this.cachedBtnALevel = 0;
+
     this.canvasNode = this.mapNode.parent;
     this.mainCameraNode = this.canvasNode.getChildByName("Main Camera"); // Cannot drag and assign the `mainCameraNode` from CocosCreator EDITOR directly, otherwise it'll cause an infinite loading time, till v2.1.0.
     this.mainCamera = this.mainCameraNode.getComponent(cc.Camera);
@@ -143,6 +149,51 @@ cc.Class({
       self._touchEndEvent(event);
     });
     zoomingListenerNode.inTouchPoints = new Map();
+
+    // Setup keyboard controls for the ease of attach debugging
+    cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, function(evt) {
+      switch (evt.keyCode) {
+        case cc.macro.KEY.w:
+          self.cachedBtnUpLevel = 1;
+          break;
+        case cc.macro.KEY.s:
+          self.cachedBtnDownLevel = 1;
+          break;
+        case cc.macro.KEY.a:
+          self.cachedBtnLeftLevel = 1;
+          break;
+        case cc.macro.KEY.d:
+          self.cachedBtnRightLevel = 1;
+          break;
+        case cc.macro.KEY.h:
+          self.cachedBtnALevel = 1;
+          break;
+        default:
+          break;
+      }
+    }, this);
+
+    cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, function(evt) {
+      switch (evt.keyCode) {
+        case cc.macro.KEY.w:
+          self.cachedBtnUpLevel = 0;
+          break;
+        case cc.macro.KEY.s:
+          self.cachedBtnDownLevel = 0;
+          break;
+        case cc.macro.KEY.a:
+          self.cachedBtnLeftLevel = 0;
+          break;
+        case cc.macro.KEY.d:
+          self.cachedBtnRightLevel = 0;
+          break;
+        case cc.macro.KEY.h:
+          self.cachedBtnALevel = 0;
+          break;
+        default:
+          break;
+      }
+    }, this);
   },
 
   _isMapOverMoved(mapTargetPos) {
@@ -239,7 +290,6 @@ cc.Class({
 
     // TODO: Handle single-finger-click event.
     } while (false);
-    this.cachedStickHeadPosition = cc.v2(0.0, 0.0);
     for (let touch of event._touches) {
       if (touch) {
         theListenerNode.inTouchPoints.delete(touch._id);
@@ -252,7 +302,42 @@ cc.Class({
   update(dt) {
     if (this.inMultiTouch) return;
     if (true != this.initialized) return;
+    const self = this;
+    // Keyboard takes top priority
+    let keyboardDiffVec = cc.v2(0, 0);
+    if (1 == this.cachedBtnUpLevel) {
+      if (1 == this.cachedBtnLeftLevel) {
+        keyboardDiffVec = cc.v2(-1.0, +1.0);
+      } else if (1 == this.cachedBtnRightLevel) {
+        keyboardDiffVec = cc.v2(+1.0, +1.0);
+      } else {
+        keyboardDiffVec = cc.v2(0.0, +1.0);
+      }
+    } else if (1 == this.cachedBtnDownLevel) {
+      if (1 == this.cachedBtnLeftLevel) {
+        keyboardDiffVec = cc.v2(-1.0, -1.0);
+      } else if (1 == this.cachedBtnRightLevel) {
+        keyboardDiffVec = cc.v2(+1.0, -1.0);
+      } else {
+        keyboardDiffVec = cc.v2(0.0, -1.0);
+      }
+    } else if (1 == this.cachedBtnLeftLevel) {
+      keyboardDiffVec = cc.v2(-1.0, 0.0);
+    } else if (1 == this.cachedBtnRightLevel) {
+      keyboardDiffVec = cc.v2(+1.0, 0.0);
+    }
+    if (0 != keyboardDiffVec.x || 0 != keyboardDiffVec.y) {
+      this.cachedStickHeadPosition = keyboardDiffVec.mul(this.maxHeadDistance / keyboardDiffVec.mag());
+    }
     this.stickhead.setPosition(this.cachedStickHeadPosition);
+
+    const translationListenerNode = (self.translationListenerNode ? self.translationListenerNode : self.mapNode);
+    if (0 == translationListenerNode.inTouchPoints.size
+      &&
+      (0 == keyboardDiffVec.x && 0 == keyboardDiffVec.y)
+    ) {
+      this.cachedStickHeadPosition = cc.v2(0, 0); // Important reset!
+    }
   },
 
   discretizeDirection(continuousDx, continuousDy, eps) {
@@ -312,18 +397,23 @@ cc.Class({
     return ret;
   },
 
-  decodeDirection(encodedDirection) {
-    const mapped = window.DIRECTION_DECODER[encodedDirection];
-    if (null == mapped) {
-      console.error("Unexpected encodedDirection = ", encodedDirection);
-    }
-    return {
-      dx: mapped[0],
-      dy: mapped[1],
-    };
+  getEncodedInput() {
+    const discretizedDir = this.discretizeDirection(this.stickhead.x, this.stickhead.y, this.joyStickEps).encodedIdx; // There're only 9 dirs, thus using only the lower 4-bits
+    const btnALevel = (this.cachedBtnALevel << 4);
+    return (btnALevel + discretizedDir);
   },
 
-  getDiscretizedDirection() {
-    return this.discretizeDirection(this.cachedStickHeadPosition.x, this.cachedStickHeadPosition.y, this.joyStickEps);
-  }
+  decodeInput(encodedInput) {
+    const encodedDirection = (encodedInput & 0xf);
+    const mappedDirection = window.DIRECTION_DECODER[encodedDirection];
+    if (null == mappedDirection) {
+      console.error("Unexpected encodedDirection = ", encodedDirection);
+    }
+    const btnALevel = ((encodedInput >> 4) & 1);
+    return {
+      dx: mappedDirection[0],
+      dy: mappedDirection[1],
+      a: btnALevel,
+    };
+  },
 });