优化我的Node.js / Js / Socket射击游戏

Question

So here I made a little shooter game just to play around with and on my pc it runs fine but for people with worse internet/less powerful computers (eg at school/few friends of mine) it is quite laggy and this is my first canvas game so I'm not to sure of the usual techniques of optimisation.

I'm sending the clients information and then the rest of the players information(only the minimum that the client needs) to the client 60 times a second in my game loop through a socket.

Sorry for this question being a little vague, just looking for tips on optimisation basically. If any more code is needed just ask! Thanks!

Here is my draw function:

  function draw() {
    ctx.clearRect(0, 0, canvas.width,canvas.height);
    //grey background
    ctx.fillStyle="rgba(128, 128, 128, 0.15)";
    ctx.fillRect(0, 0,canvas.width, canvas.height);
    //drawing background grid
    for(var pos = 25;pos<5000;pos+=25)
    {
      ctx.beginPath();
      ctx.strokeStyle = "rgba(128, 128, 128, 0.75)";
      ctx.lineWidth="1";
      ctx.moveTo(0, pos-player.y+pos);
      ctx.lineTo(canvas.width, pos-player.y+pos);
      ctx.stroke();
    }
    for(var pos = 25;pos<5000;pos+=25)
    {
      ctx.beginPath();
      ctx.strokeStyle = "rgba(128, 128, 128, 0.75)";
      ctx.lineWidth="1";
      ctx.moveTo(pos-player.x+pos, 0);
      ctx.lineTo(pos-player.x+pos, canvas.height);
      ctx.stroke();
    }
    //drawing the clients player
    if(player != '')
    {
      ctx.save();
      ctx.translate((window.innerWidth/2), (window.innerHeight/2));
      ctx.font = '11px Roboto';
      ctx.textAlign="center";
      ctx.fillStyle="black";
      ctx.fillText(player.health, 0, 42);
      ctx.rotate(player.look * (Math.PI / 180));
      var circle = new Path2D();
      circle.arc(0, 0, 30, 0, 2.5 * Math.PI);
      ctx.fillStyle="black";
      ctx.fill(circle);

      ctx.beginPath();
      ctx.strokeStyle="red";
      ctx.lineWidth="4";
      ctx.moveTo(0, -10);
      ctx.lineTo(0, -30);
      ctx.stroke();

      ctx.restore();
      ctx.save();
      ctx.translate((window.innerWidth/2), (window.innerHeight/2));
      ctx.rotate(0);

      ctx.font = '12pt Roboto';
      ctx.textAlign="center";
      ctx.fillStyle="white";
      ctx.strokeStyle="black";
      ctx.strokeText(player.name, 0, 4);
      ctx.fillText(player.name, 0, 4);


      ctx.restore();

      if(player.bullets != 'undefined')
      {
        for(var j = 0;j<player.bullets.length;j++)
        {
          ctx.save();
          ctx.translate((window.innerWidth/2)+(player.bullets[j].playerX - player.x), (window.innerHeight/2)+(player.bullets[j].playerY - player.y));
          ctx.rotate(player.bullets[j].attack * (Math.PI/180));
          ctx.fillStyle = 'black';
          ctx.fillRect(player.bullets[j].traveled, 0, 6, 2);
          ctx.restore();
          ctx.rotate(0);
        }
      }
      ctx.restore();
    }
    //drawing every other player
    for(var i = 0;i<playerArr.length;i++)
    {
      if(player.id  != playerArr[i].id)
      {
        ctx.save();
        ctx.translate((window.innerWidth/2)+(playerArr[i].x - player.x), (window.innerHeight/2)+(playerArr[i].y - player.y));

        ctx.font = '11px Roboto';
        ctx.textAlign="center";
        ctx.fillStyle="black";
        ctx.fillText(playerArr[i].health, 0, 42);

        ctx.rotate(playerArr[i].look * (Math.PI / 180));
        var circle = new Path2D();
        circle.arc(0, 0, 30, 0, 2.5 * Math.PI);
        ctx.fillStyle="black";
        ctx.fill(circle);

        ctx.beginPath();
        ctx.strokeStyle="red";
        ctx.lineWidth="4";
        ctx.moveTo(0, -10);
        ctx.lineTo(0, -30);
        ctx.stroke();

        ctx.restore();
        ctx.save();
        ctx.translate((window.innerWidth/2)+(playerArr[i].x - player.x), (window.innerHeight/2)+(playerArr[i].y - player.y));
        ctx.rotate(0);

        ctx.font = '12pt Roboto';
        ctx.textAlign="center";
        ctx.fillStyle="white";
        ctx.strokeStyle="black";
        ctx.strokeText(playerArr[i].name, 0, 4);
        ctx.fillText(playerArr[i].name, 0, 4);

        ctx.restore();

        for(var j = 0;j<playerArr[i].bullets.length;j++)
        {
          ctx.save();
          ctx.translate((window.innerWidth/2)+(playerArr[i].bullets[j].playerX - player.x), (window.innerHeight/2)+(playerArr[i].bullets[j].playerY - player.y))
          ctx.rotate(playerArr[i].bullets[j].attack * (Math.PI/180));
          ctx.fillStyle = 'black';
          ctx.fillRect(playerArr[i].bullets[j].traveled, 0, 6, 2);
          ctx.restore();
          ctx.rotate(0);
        }
      }
    }
    //drawing trees
    for(var i = 0;i<treeArr.length;i++)
    {
      ctx.save();
      ctx.translate((window.innerWidth/2)+(treeArr[i].x - player.x), (window.innerHeight/2)+(treeArr[i].y - player.y));
      ctx.drawImage(tree, 0, 0, 108, 108);
      ctx.restore();
    }
    if(playing)
    {
      requestAnimationFrame(draw);
    }
  }

Answer 1

Optimizing graphics and comms

There is some important information missing

• Number of players?
• Number of bullets per player?
• What are you sending to each client machine?
• What is each client sending back?

I will make some assumptions.

Graphics

Looking at the code you gave and assuming that you have only at most 10 or so players with half a dozen bullets you can expect some slowdown due to rendering on slower machines if they are full page size (near 1920 by 1080)

Avoid vector draw calls

You can improve the rendering by using images rather than the canvas vector draw calls.

To draw an image rotated

function drawCircle(player){
   ctx.setTransform(1,0,0,1,player.x,player.y);
   ctx.rotate(player.look * (Math.PI / 180));
   ctx.drawImage(playerImage, - playerImage.width / 2, - playerImage.height / 2);
}

Pre render text

Render player names to a off screen canvas

Eg

  // do the following at start of game 
  var names = document.createElement("canvas");
  // for each players name render that onto the names canvas
  // record the bounding box of the name on that canvas
  // eg playerArr[i].nameImage = {x :?, y : ?, w : ?, h : ?};

Then you can draw the players name over the player image

   function drawName(player){
       ctx.setTransform(1,0,0,1,player.x,player.y);
       var loc = playerArr[i].nameImage;
       ctx.drawImage(names, loc.x, loc.y, loc.w, loc.h, -loc.w / 2, -loc.h /2, loc.w, loc.h)
   }

Simplify

For the health I would suggest a health bar rather than text.

Find alternatives

For the grid drawing grid lines is very slow. Create a off screen canvas just big enough to draw one grid square. At the start of the game create a pattern from that canvas (only create the pattern once to save cycles)

Then rather than clear the screen set the fill to that pattern and use fillRect to draw the grid pattern. You can offset the rect to move the grid.

   gridSize = 25;
   ctx.fillStyle = gridPattern;
   fillRect(
       -gridSize + (player.x % gridSize),
       -gridSize + (playeryx % gridSize),
       innerWidth + gridSize * 2,
       innerHeight * 2
    );

This will be a lot quicker than drawing each line.

Images, particles, and stuff

Bullets. Drawing many small images is quicker than many lines, as long as you keep the transformation simple.

And the trees you can optimize them a little by checking if they are on screen or not, if not don`t draw them. If about half are always off screen you will get a benefit, if most are on screen most of the time, the extra code to check will outweigh the benefit. This applies to the bullets as well.

---

Communication

I am assuming you are broadcasting from a server, each client gets a constant stream of player data for each player, their position, health and bullets, and some additional game state info.

Each client also returns to the server their data that is broadcast to the other players.

No! don't send JSON

I don't know how you are sending, if you are serializing via JSON "DONT!!!" it is very band width hungry. Encode the data into the minimum data size.

EG the player position.

Encode to minimum possible bit count.

The grid is 5000 by 5000 pixels. If you send that as JSON

"player" : {
     "x" : 1283,
     "y" : 2345,
 } 

That is at min 29 bytes, or 232 bits. To store value between 0 and 5000 rounded to a pixel is 13 bits (range of 8192 pixels). You can double that to 14 bits to get half pixel precision. To make things even simpler and just make coordinates 16 bits.

To encode for sending

var playerData = new Uint16Array(packetSize)
// data is ordered with first word the x coord, second is y and so on
// pixel step to 1/8th
playerData[0] = Math.floor(player.x * 8) & 0xFFFF;
playerData[1] = Math.floor(player.y * 8) & 0xFFFF;

To decode

player.x = socketData[0] / 8; 
player.x = socketData[1] / 8; 

That is 4 bytes to send position data rather than JSONs 29 a saving of almost 8 times the bandwidth.

Do the same with all data, encode it into the minimum number of bytes. Dont send structural data like property names, that is already in the code.

Dont send data that can be calculated.

If a bullets is dumb and once fired traveled in a straight line till done you dont need to send that information every frame. Send that a player has fired and the position the player was when firing, let all the clients (and server) computer create and track the bullet.

When a bullet hits a player send that to the server and confirm that the player hit and the player that shot both have signaled the bullet has hit and that matches the game state on the sever if you are running one on the server as well..

Create a protocol

Dont send all the data all the time. Send relevant data as unique packets. Each packet of data should start with a header, just a 8bit number that identifies the type of data that is in the packet. Types of packets, Player fired, player hit, player moved, player has left the game. etc...

Give data a priority and set a bandwidth budget. High priority data is sent first, like player pos, player hit, lower priority data is sent when there is room in the budget, like total score or that player x has been hit by player y

I could go on and on but I have no clue how you are managing the data. These are only suggestions and if you are running over gigabit lines JSON data is just fine, and raw serialized data dumps will work. If some players are on slower lines and sharing bandwidth with other people (resulting in variable data rates) you will have to reduce the bytes sent per second to accommodate, or just terminate the connection if so slow that it pulls the rest of the game back.