**Note: You can jump straight to the [Question] part. I’m just giving you some background info to help you get the full picture. Thanks!
[1. Background]
I am working on a game prototype featuring multiplayer collision, similar to ‘Fall Guys’. This is my first project using a 3D game engine, and I am currently learning everything about 3D physics from scratch.
[2. References]
:Tutorials | Learn PlayCanvas
I based my project on ‘Crash Course’ tutorial for implementing player movement
And I referred to ‘Real Time Multiplayer’ for implementing real-time multiplayer features
(just 2 direct link is available. sorry for your inconvenience!)
[3. My project]
You can view my project here: PlayCanvas | HTML5 Game Engine
[4. Question]
Q1) Rotating Entity itself is not working
In the referenced project above (Crash Course), the ‘modelEntity’ is rotated to turn the player character. This seems effective, but I feel it’s just a visual trick because the entity itself isn’t rotating. I want to rotate the ‘Player’ entity itself, so that the ‘model Entity’, being a child of the Player, will rotate accordingly.
In the PlayerController.js:
// 모델 회전
var newAngle = 90 - (Math.atan2(z, x) * pc.math.RAD_TO_DEG);
this.modelEntity.setEulerAngles(0, newAngle, 0);
// this.entity.setEulerAngles(0, newAngle, 0);
Line 3 rotates the 3D model correctly
Line 4 does not rotate the 3D model(Player always looking at front)
What’s wrong with my code or understanding?
Q2) Logic for Synchronizing Multiplayer Animations and Rotations
I intend to ensure that animations and rotations for each client are synchronized through the server. Here’s my current approach for animation states:
- Client1 send their anim state(ex. isRunning) to server
if (this.initialized && this.posSendTimer >= 0.05) {
var animState = {
isRunning : this.player.isRunning,
isJumping : this.player.isJumping
};
this.socket.emit("playerMoved", { id : this.id, pos : pos, rot : rot, animState : animState });
}
- Server broadcasts anim state to other clients(Client2)
socket.on("playerMoved", function (data) {
// Broadcast the new position to all the other clients
socket.broadcast.emit("updatePlayerTransform", data);
});
- Client2 get anim state of Client1, and store its state in entity of Client1
// 서버에서 유저의 포지션 업데이트 요청이 오는 경우 위치 업데이트
this.socket.on('updatePlayerTransform', (data) => {
if (this.initialized) {
var isRunning = data.animState.isRunning;
var isJumping = data.animState.isJumping;
// 유저 데이터 세팅
if (this.players && this.players[data.id]) {
// anim state
this.players[data.id].entity.isRunning = isRunning;
this.players[data.id].entity.isJumping = isJumping;
}
}
});
- Set boolean for playing animation
// update code called every frame
OtherController.prototype.update = function(dt) {
// 더미 엔티티는 아래의 코드를 실행하지 않음
if (!this.initialized) {
return;
}
this.animStateTimer += dt;
if (this.animStateTimer >= 1) {
this.modelEntity.anim.setBoolean('isJumping', this.entity.isJumping);
this.modelEntity.anim.setBoolean('isRunning', this.entity.isRunning);
// 타이머 리셋
this.animStateTimer = 0;
}
};
The logic above is actually working well, but applying a similar approach for rotation data isn’t successful. If Q1 is resolved, I plan to:
- Have Client1 calculate the Euler angle of the player entity and send it to the server.
- The server then broadcasts this rotation data to other clients.
- Client2 receives this data from the server and sets the Euler angle of Client1’s entity using
setEulerAngles, which should result in rotation.
Will this approach work effectively for a multiplayer game?
As I’m completely new to programming and 3D physics, any advice will be greatly appreciated.
Thank you for your assistance!