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 (e.g 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);
}
}
via JohnT
No comments:
Post a Comment