Multiplayer game demo (Fast Paced) by Phaser 3, Socket.IO and Cordova

[[email protected]]

I'm a Newbie, just learned Phaser 3 for less than a week, I've created 2 simple games, one Single Player game and one TWO Players game.

But I really need some help!

You may try the game at the following url, using any Android/iPhone Browser, or Windows/Linux Browser:

https://thisapp.zephan.top

As it is created by Cordova, you can also download the APK from the following URL, using an Android Phone:

https://thisapp.zephan.top/thisapp.apk

 

When you run it from the browser or the apk, you need to login, you may register a new user id using email address but I'm going to provide 2 here:

user id 1: test1

password 1: qwerty

user id 2: test2

password 2: qwerty

 

Let's first take a look at the multiplayer screen:

 

To try this game, you'll need 2 PC/Mobile Phones.

 

Before asking my question, I'll explain my strategy first:

1. Use the first player joined the room as the HOST, all physics are calculated by the HOST.  The second player joined the same room is the SLAVE.  If there is a third player, it will open a new room automatically to wait for the fourth player.

2. The SLAVE sends its own [BAR] position and velocity to the HOST for the calculation. (if and only if there is any change in values)

3. The slave receives, from the host, the positions of the [BALL] (always send with 20ms interval), as well as the position and velocity of the HOST's [BAR] (if and only if there is any change in values).

 

So, my problem is, using this architecture, the motion of the ball in the HOST screen is smooth, but the motion of the ball in the SLAVE screen is NOT smooth.

 

I tried to using TWEENS in the SLAVE screen but failed, here are the source code related and please show me what's wrong:

 

function funGame03ReceiveFromHostBallOnly(intIndex, intPlayer, floTimeDiff, floBallX, floBallY) {
    var thisTimeDiff = floTimeDiff - Game03intTimeDiffL;

    // Game03intTimeDiffL is the Last [Time]
    Game03intTimeDiffL = floTimeDiff;

    // This is to ensure the ball goes to the correct position asap after network lag
    if (thisTimeDiff > 100) {
        thisTimeDiff = 100;
    }

    // Please ignore HOW I calculate the NEW POSITION of the ball,
    // Since the 2 players have different screen resolution and/or orientation,
    // The calculation is a little bit complicated.
    var newBallX = mainWidth - (floBallX * mainWidth + Game03ball.displayWidth);
    var newBallY = Game03intEffectiveHeight - (floBallY * Game03intEffectiveHeight + Game03ball.displayHeight) + Game03otherbar.y + Game03otherbar.displayHeight;


    //Change Ball Position

    // These works, but NOT SMOOTH, as you can see in the demo
    Game03ball.x = newBallX;
    Game03ball.y = newBallY;

    // The following codes do not work, the ball stay STILL
    //game03.tweens.add({
    //    targets: Game03ball,
    //    x: newBallX - Game03ball.x,
    //    y: newBallY - Game03ball.y,
    //    duration: thisTimeDiff,
    //    ease: 'Linear'
    //});
}

 

The above SLAVE function is called by the HOST's SOCKET.IO at an interval of around 20ms,  please show me how to use TWEENS to correct the problem, thanks in advance.

 

I'm sorry that my APP is a little bit complicated because it was not a game APP, but a chat APP.  You may go to the game tab and ignore the other tabs after login.

 

Ken

 

 

 

 

 

[[email protected]]

I found the reason why I can't use TWEENS, because the TWEENS play / stop / restart action CANNOT be activated by the SOCKET.IO of the HOST, there is a "makeActive" error.  After changing the codes, I can use TWEENS but the motion is still not smooth owing to network lag.  So I change the strategy by "Client Prediction" on the SLAVE screen.

Finally, I got a smooth SLAVE screen, by setting the velocity of the BALL on the SLAVE screen, this velocity is sent from the HOST if and only if there is any changes in value (e.g. if a Bounce occurs)

You may take a look at the following GIF, which is only recorded in 8 fps.

 

 

[makis]

Congratulations! You are rather a pro, not a newb. No real newbie has any chance in phaser's beasty world!