Merge branch 'feature/optimization' into develop

README.md

@@ -1 +1,10 @@
-shoot.io
+#shoot.io
+
+###執行方法：
+
+1. 安裝[Node.js 10+](https://nodejs.org/dist/latest-v10.x/)
+2. 切到專案根目錄 (shoot.io/)
+3. 執行 `npm install`
+4. 執行 `node src/server.js`
+5. 遊戲可以使用瀏覽器到 http://localhost:8081/ 遊玩
+6. 若要新增ai玩家可到 http://localhost:8081/ai 新增

src/client/js/GameFeed.js

@@ -20,6 +20,7 @@ class GameFeed {
       true
     );
     this.feed.depth = 99;
+    this.feed.setScrollFactor(0);
     scene.add.existing(this.feed);
   }
 

src/client/js/LeaderBoard.js

@@ -12,6 +12,7 @@ class LeaderBoard {
       }
     );
     this.textObj.depth = 99;
+    this.textObj.setScrollFactor(0);
     scene.add.existing(this.textObj);
     this.scene = scene;
   }

src/client/js/MpScene.js

@@ -1,5 +1,3 @@
-const PLAYERS_MAP = new Map();
-
 class MpScene extends Phaser.Scene {
   constructor () {
     super();
@@ -10,16 +8,15 @@ class MpScene extends Phaser.Scene {
     let assetsPath = 'assets/';
 
     // 載入素材
-    this.load.image('bg', assetsPath + 'whitebg.png');
-    this.load.image('player', assetsPath + 'green_block.png');
-    this.load.image('bullet', assetsPath + 'bullet.png');
+    this.load.image('bg', assetsPath + 'backgrounddetailed1.png');
+    this.load.image('player', assetsPath + 'tank.png');
+    this.load.image('bullet', assetsPath + 'bullet14.png');
     this.load.image('wide_bullet', assetsPath + 'wide_bullet.png');
     this.load.image('bullet', assetsPath + 'wide_bullet.png');
     this.load.image(
       'penetration_bullet',
       assetsPath + 'penetration_bullet.png'
     );
-    this.load.image('enemy', assetsPath + 'blue_square.png');
     this.load.image('heart', assetsPath + 'heart.png');
     this.load.image('xp', assetsPath + 'xp.png');
     this.load.text('names', assetsPath + 'first-names.txt');
@@ -40,7 +37,7 @@ class MpScene extends Phaser.Scene {
 
     this.bindEvents();
 
-    this.add.image(640, 360, 'bg');
+    let bg = this.add.image(640, 360, 'bg');
 
     this.keyA = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);
     this.keyD = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);
@@ -67,8 +64,8 @@ class MpScene extends Phaser.Scene {
     this.socket.emit(PLAYER_JOIN_EVENT, localPlayerData);
 
     // this.camera = new Phaser.Cameras.Scene2D.Camera(0, 0, 640, 360);
-    // this.cameras.main.startFollow(this.localPlayer);
-    // this.cameras.main.setSize(640, 360);
+    this.cameras.main.startFollow(this.localPlayer);
+    this.cameras.main.setSize(1280, 720);
 
     this.bullets = this.physics.add.group();
     this.hearts = this.physics.add.group();
@@ -111,6 +108,7 @@ class MpScene extends Phaser.Scene {
       }
     );
     this.upgradeText.originX = 0.5;
+    this.upgradeText.setScrollFactor(0);
     this.upgradeText.depth = 99;
 
     this.leaderBoard = new LeaderBoard(this);
@@ -265,16 +263,19 @@ class MpScene extends Phaser.Scene {
 
       // fire
       if (this.mouse.isDown) {
-        this.localPlayer.shoot({ x: this.mouse.x, y: this.mouse.y });
+        this.localPlayer.shoot({
+          x: this.mouse.x + this.cameras.main.scrollX,
+          y: this.mouse.y + this.cameras.main.scrollY
+        });
       }
 
       // localPlayer will rotate according to mouse
       this.localPlayer.setRotation(
         Phaser.Math.Angle.Between(
           this.localPlayer.x,
           this.localPlayer.y,
-          this.mouse.x,
-          this.mouse.y));
+          this.mouse.x + this.cameras.main.scrollX,
+          this.mouse.y + this.cameras.main.scrollY));
     } else {
       if (this.keyR.isDown) {
         this.localPlayer.respawn();

src/client/js/ProjectUtils.js

@@ -33,4 +33,6 @@ function getRandomId () {
   // Convert it to base 36 (numbers + letters), and grab the first 9 characters
   // after the decimal.
   return '_' + Math.random().toString(36).substr(2, 9);
-}
+}
+
+const PLAYERS_MAP = new Map();

src/client/js/XpBar.js

@@ -7,6 +7,8 @@ class XpBar {
     this.startX = config.width / 2 - this.barWidth / 2;
     this.startY = 30;
     this.bar = new Phaser.GameObjects.Graphics(scene);
+    this.bar.setScrollFactor(0);
+
     this.bar.depth = 99;
     scene.add.existing(this.bar);
     this.verticalPadding = 2;