Ready Player Me Multiplayer

I am trying to use ready player me avatar tutorial PlayCanvas | HTML5 Game Engine and convert it to multiplayer using photon. Hence i forked this tutorial and tried to implement multiplayer in it but it doesn’t work for me can anyone tell what’s wrong in it. Here is my project link PlayCanvas | HTML5 Game Engine.

You will have to be more specific about what you want to do and what isn’t working for anyone to help

Ok so I implemented photon multiplayer into this Ready Player Me Tutorial and the players are connecting fine but if more than one player joins the movement is messed up for some reason. PlayCanvas | HTML5 Game Engine I’m not able to record a video of it. Can someone look into the project?

Issue is that the controls affect all avatars instead of the one that the user owned

Looking at the code, there are multiple places where scripts are detecting input

The bottom on PlayerAnimationHandler.js, this script is on all the other avatars

Which means the user is changing animation of all the avatars in the scene with keyboard input.

Looking at this more closely, the character that looks like you are in control of, is not actually moving.

The real problem here is that you have multiple cameras in the scene (one for each avatar) and currently we are seeing the camera from the other avatars, not your own.

If we disable that camera on the multiplayer avatar, everything works as expected (besides the animation issue mentioned above)


Ok i think i fixed the camera thing but there is one problem i noticed this thing that the player who joins at the beginning has everything fine besides the animation problem but when the 2nd player joins there is a position problem with the 1st player position in the view of that player as you can see in the image positions are not correct here. And also to fix the animation can i try with creating another script with same animation code for multiplayer avatar and add that there? And can you share me the forked project where you fixed the camera?


I didn’t fork the project, I debugged the issue from your project’s launch page

The player that is circle looks like they are in the correct position on both screens

The 1st player’s avatar is in the wrong position on the 2nd player view.

At a guess, the project is not putting the other players in the correct position when they are first spawned and/or it’s not sending that data across as the initial state of the world when the 2nd player joins.

You will need to debug this in your project and work out where this data is being sent and received, if it’s correct and if it’s being processed by the project.

The way I would do it is to remove input detection from the animation logic and have it based on the Entity’s direction and velocity/change of position over time.

So for example, if avatar is moving to the right of where it is facing, play the right strafing animation.

@yaustar Here is the project where i fixed camera PlayCanvas | HTML5 Game Engine

@yaustar @Leonidas @Albertos is there any tutorial for animation based on the Entity’s direction and velocity/change of position over time.

Hi @Vivek_Chaini,

Check this third person controller example, it uses the player direction in the state graph:

Similarly you can create a float for velocity and use that to switch between idle/walk/run states.


@Leonidas @yaustar I am using this method now to play animations but still in the multiplayer view we can’t see other player animations so how can we sync this animations with server? here is my new project where i tried the player direction in the state graph PlayCanvas | HTML5 Game Engine.
what can i do here to solve this animation problem.

Rather than syncing animations, I would have them driven by the direction and change of position over time, similar to how the third person controller project works that Leonidas shared.

You may have to do some extra math to work out if they should strafing, going forward/back etc

This logic will need to be applied to the network players too


@yaustar So in this PlayCanvas | HTML5 Game Engine project i implemented animation based on the direction of player I have followed the project that @Leonidas shared. we cant see the animation of players who joins so can fix this by just applying the logic in the template?

You will probably have to adjust the logic to work with how a networked player is moved and problem solve any issues that come up. But yes, the same underlying concept will apply

1 Like

@yaustar @Leonidas So yea just to test things out i just put the playerMovement script in the template but the animation is still not working there PlayCanvas | HTML5 Game Engine here is my project. I’m finding it pretty hard for the logic can someone help me here?

I’m afraid I don’t have the bandwidth to deep dive into a project and help implement a project feature