캔버스에 여러 개의 소켓이있는 경우

Question

그래서 socket.io와 HTML5 캔버스를 사용하여 노드 멀티 플레이어 게임을 만들려고합니다. 서로의 클라이언트 캔버스에 표시 할 개체를 가져 왔지만 위치가 다릅니다. 객체를 배치하여 클라이언트 측에서 올바르게 표시되도록하려면 어떻게해야합니까?

여기 내 코드입니다. 클라이언트 :

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() 
} 

---

객체

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) 
    } 
} 

---

서버

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); 
     } 

    } 
    }) 
}) 

내가보고하고 문제의 일부는 다른 클라이언트 오브젝트가 것처럼 그려되고 있다는 점이다 그들의 원점은 t에 있지 않다. 그는 그 자신의 물건의 중심입니다.

Answer 1

나는 그것이 왜 문제인지를 알아 냈습니다. 번역 및 회전 기능이 특정 객체가 아니라는 것을 알지 못했습니다. 내 의뢰인을 위해 회전 할 때, 그것은 대상이 아닌 캔버스의 관점을 회전시키고 있다는 것을 의미합니다. 따라서 어떤 다른 물체도 눈에 보이게 회전 할 것입니다.