ken@zephan.top

Members
  • Content Count

    6
  • Joined

  • Last visited

  1. ken@zephan.top

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

    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.
  2. 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
  3. For example, when velocity > 4000, object goes straight through a boundary. I need to use the setMaxVelocity to set the maximum velocity as a work around.
  4. ken@zephan.top

    Why Phaser 3 Don't Allow Loading Data URI?

    Hi farhan, Can you tell me where can I find this "GUIDE"? I'm using images uploaded by players to play games, those images are stored inside mysql in the form of base64 strings. I don't know how to load it! Thanks!
  5. ken@zephan.top

    Multiplayer game using phaser 3 and socket.io

    Thanks for your response. I do find some more information about writing multiplayer games with Phaser after my previous post. I just don't know which algorithm I should choose. For example, on the client side, an object A from the left hit another object B on the right and bounce back. Algorithm 1: This event catches by the server (by running the Phaser physics on the server side), and sent to the client. Before the client received this event, object A goes straight through object B to the right hand side of object B, then after the client received this event, object A "Suddenly" appear at the left hand side of object B to "Correct" its position. Algorithm 2: This event "Predicts" by the client, it bounces back first and send this event to the server. Then when the Phaser physics on the server side also got the same result, everything is correct. However, it is possible that on the server side (may be the movement of object B is controlled by another player), object B has already moved away, so the bounce should never occur, in this case, the server sends the corrected positions of the objects back to the client, and the object A "Suddenly" appears at the right hand side of object B, to correct its position. In either case, the movement of objects are not smooth but the final result is correct. It seems that no matter which algorithm I choose, I need to run the Phaser physics on the server side. So my question is, can I run the Phaser 3 physics on the SERVER side (node.js) for these kind of fast paced multiplayer games? By the way, my son is able to run the Phaser 3 Single player game in his Cordova project, he uses a special technique so that the game can be run as an Android app, or an iPhone app, as well as running inside any PC browsers in Windows or Linux, with the same source codes! Which means that it can be written once and run anywhere. His Cordova project is a "Whatsapp" like chat app(text, images, voice messages and WebRTC), and he wants to add some games into it so that friends in the same chat group can play together. So his only way is to find a Javascript game engine, instead of other game engines such as Unity, which is not suitable for this kind of app. We really hope that Phaser can fullfill our requirement, and thanks again for your help. My son also wants to thank you all for your effort in Phaser, he was able to write a simple game in pure Javascript in days, now he can write the same game in hours using Phaser!
  6. I have problems writing a multiplayer game with phaser 3 and socket.io I’ll explain it using a simple example: 2 players P1 and P2, try to kill each other using bullets B1 and B2. Scenario A: Use Pure Javascript and socket.io, without any game engine. A1. The socket.io server calculates the position of all players and bullets, and send these information to all players for every 30ms. A2. Each player send [inputs] to the server on real time basis. Of course, those inputs may arrive the server later then expected. A3. Each player show objects in screen only according to the information provided by the server, without calculating the objects’ position on the client side. A4. The game runs without any BIG problem since the Unique Game State is only calculated on the server side. A5. However, without using game engine, I need to calculate the [Physics] of all objects by myself on the server side. Scenario B: Use Javascript with phaser 3 and socket.io B1. At time 0.000 second, the server ask both players start the game at the same time. B2. At time 0.030 and 0.040, both players start the game accordingly. (As you can see, the network of player P1 is faster) B3. At time 0.200, player P1 fires a bullet B1 and starts to update screen using the phaser 3 engine’s [Physics]. B4. At time 0.280 (here the server takes 10ms to transfer this action from P1 to P2), P2 gets this action from the server, and starts to update screen using the game engine’s [Physics]. (You may probably notice that at this moment, the screens of P1 and P2 are different!) B5. Suppose the bullet B1 is able to hit P2 at time 1.000. At time 0.950, P2 moves away from the bullet and continues playing the game. B6. As you may already figure out, the action that P2 moves away, arrives P1 at time 1.030, at that time, P1 already win the game! At this moment, in P1’s screen, P1 win the game, but in P2’s screen, P2 is still playing the game! It seems that phaser 3 is not suitable for multiplayer games. Did I miss anything? Thanks in advance for your help.