Positionierung auf Canvas mit mehreren Sockets

Question

Also ich versuche, ein Knoten Multiplayer-Spiel mit socket.io und der HTML5 Canvas zu machen. Ich habe die Objekte auf dem Client-Canvas des anderen erscheinen lassen, aber ihre Positionen sind weit weg. Wie positioniere ich die Objekte so, dass sie auf der Client-Seite korrekt angezeigt werden?

Hier ist mein Code. Auftraggeber:

var socket; 
var ship; 
var cnv; 

function setup() { 

cnv = createCanvas(1000, 1000); 
translate(120, 120); 
var x = (windowWidth - width)/2; 
var y = (windowHeight - height)/2; 
cnv.position(x, y); 
    background(51); 
    socket = io('http://localhost:3000'); 
    ship = new Avatar(); 
    socket.on('pos', newDrawing) 

    var data = { 
    x:ship.pos.x, 
    y:ship.pos.y, 
    r:ship.r, 
    heading:ship.heading 
    } 
    socket.emit('start', data) 
} 

function newDrawing(data){ 
    for(var i =0; i< data.length;i++){ 
    if(data[i].id != socket.id){ 
     rotate(data[i].h+ PI/2) 
     var x=data[i].x; 
     var y= data[i].y 
     var r = data[i].r 

     console.log(r) 
     triangle(x+ -data[i].r, y+data[i].r, x+data[i].r,y+data[i].r,x+ 0,y+-data[i].r) 
    } 
    } 
    } 


function keyPressed(){ 

    if(keyCode == 65){ 
    ship.setRotation(-0.1) 
    //ship.vel.x += -speed; 
    } 
    //Right 
    if(keyCode == 68){ 
    ship.setRotation(0.1) 
    } 
    if(keyCode == 87){ 
    ship.boosting(true); 
    } 

} 
function keyReleased(){ 
    ship.setRotation(0); 
    ship.boosting(false); 
} 

function draw() { 
    //background(51); 
//console.log(cnv) 
ship.render(); 
ship.turn() 
ship.update(); 
ship.edges(); 
var data = { 
    x:ship.pos.x, 
    y:ship.pos.y, 
    r:ship.r, 
    heading:ship.heading 
} 

socket.emit('pos', data) 
//clear() 
} 

---

Objekt

class Avatar{ 
    constructor(){ 
    this.pos=createVector(1000,1000); 
    this.r=50; 
    this.vel=createVector(0,0) 
    this.color = 'red'; 
    this.move=false; 
    this.heading=0; 
    this.rotation=0; 
    this.isBoost=false; 
    } 
    update(){ 
    if(this.isBoost){ 
     this.boost(); 
    } 
    this.pos.add(this.vel); 
    this.vel.mult(.99) 
    } 
    setRotation(a){ 
    this.rotation=a; 
    } 
    boosting(a){ 
    this.isBoost=a; 
    } 
    boost(){ 
    var force= p5.Vector.fromAngle(this.heading); 
    this.vel.add(force); 
    } 
    turn(){ 
    this.heading+= this.rotation; 
    } 
    edges(){ 
    if(this.pos.x>width+this.r){ 
     this.pos.x=-this.r; 
    } else if(this.pos.x<-this.r){ 
     this.pos.x=width +this.r; 
    } 
    if(this.pos.y>height+this.r){ 
     this.pos.y=-this.r; 
    } else if(this.pos.y<-this.r){ 
     this.pos.y=height +this.r; 
    } 
    } 
    render(){ 
    //clear() 
    //translate(this.pos.x, this.pos.y) 
    rotate(this.heading+ PI/2) 
    //rect(this.r,-this.r,this,this.r) 
    fill(this.color) 
    triangle(-this.r,this.r,this.r,this.r,0,-this.r) 
    } 
} 

---

Server

var express=require('express'); 
var app=express(); 
var server = app.listen(3000) 
var ships=[]; 

function Avatar(id,x,y,r,h){ 
    this.id=id; 
    this.x = x; 
    this.y= y; 
    this.r=r; 
    this.h=h; 
} 

console.log("Server on %s", server.address().port) 
// function listen(){ 
// var host= server.address().address; 
// var port= server.address().port; 
// console.log('Server running on %s',port) 
// } 
app.use(express.static('public')); 

var socket=require('socket.io'); 
var io=socket(server); 
io.sockets.on('connection',function(socket){ 

    console.log("New Socket:" + socket.id) 

    socket.on('start',function(data){ 
    ships.push(new Avatar(socket.id, data.x, data.y, data.r, data.heading)); 
    //console.log(ships) 
    }) 

    socket.on('pos',function(data){ 
    var ship; 
    for(var i =0; i< ships.length; i++){ 
     if(ships[i].id == socket.id){ 
     ships[i].x=data.x; 
     ships[i].y=data.y; 
     ships[i].r=data.r; 
     ships[i].h=data.heading; 
     } 
    } 
    //console.log(ships[0]) 
    //console.log(ships) 
     //console.log(socket.id) 
     //io.sockets.emit('pos',ships) 

     socket.broadcast.emit('pos',ships) 

    }) 
    socket.on('disconnect' , function(){ 

    for(var i =0; i< ships.length; i++){ 
     if(ships[i].id == socket.id){ 
     console.log(socket.id + " Has Left") 
     ships.splice(i,1); 
     } 

    } 
    }) 
}) 

Ein Teil der Ausgabe, die ich zu sehen bin, ist, dass die anderen Clients Objekte gezeichnet werden, als ob ihr Ausgangspunkt ist nicht in t er Mittelpunkt seines eigenen Gegenstandes.

Answer 1

Ich fand heraus, warum es ein Problem war. Mir war nicht bewusst, dass die Übersetzungs- und Rotationsfunktionen nicht objektspezifisch waren. Das heißt, wenn ich für meinen Kunden rotierte, rotierte er die Perspektive der Leinwand, nicht das Objekt. Also würden sich andere Objekte sichtbar um ihn drehen.