Hi,
I'm working on a game called HaxArena that is available here: http://eu.haxarena.com/ | http://us.haxarena.com/ | http://eu2.haxarena.com/ | http://us2.haxarena.com/
and right now I'm trying to add Client Side Prediction based on the source code from http://www.gabrielgambetta.com/fpm_live.html. At the beginning I improved that demo by adding another dimension http://hax.droppages.com/ and now I'm trying to integrate that example with Matter.JS but I somehow can't make it work correctly e.g. I see some kind of rubber banding or the player starts moving faster and faster with every frame even though I don't press any buttons.
There are 2 functions available:
Matter.Engine.update(engine, [delta=16.666], [correction=1]) - right now I'm using only this one on the server while I still don't have any Client Side Prediction; it's responsible for movement of all bodies and collisions
Matter.Body.update(body, deltaTime, timeScale, correction) - I'm trying to use it in the applyInput method of the Entity class
var Entity = function() {
this.x = 0;
this.speed = 2; // units/s
}
// Apply user's input to this entity.
Entity.prototype.applyInput = function(input) {
this.x += input.press_time*this.speed;
}
I also tried changing some parts of this function:
Client.prototype.processServerMessages = function() {
while (true) {
var message = this.network.receive();
if (!message) {
break;
}
// World state is a list of entity states.
for (var i = 0; i < message.length; i++) {
var state = message[i];
if (state.entity_id == this.entity_id) {
// Got the position of this client's entity.
if (!this.entity) {
// If this is the first server update, create a local entity.
this.entity = new Entity();
}
// Set the position sent by the server.
this.entity.x = state.position;
if (server_reconciliation) {
// Server Reconciliation. Re-apply all the inputs not yet processed by
// the server.
var j = 0;
while (j < this.pending_inputs.length) {
var input = this.pending_inputs[j];
if (input.input_sequence_number <= state.last_processed_input) {
// Already processed. Its effect is already taken into account
// into the world update we just got, so we can drop it.
this.pending_inputs.splice(j, 1);
} else {
// Not processed by the server yet. Re-apply it.
this.entity.applyInput(input);
j++;
}
}
} else {
// Reconciliation is disabled, so drop all the saved inputs.
this.pending_inputs = [];
}
} else {
// TO DO: add support for rendering other entities.
}
}
}
Something like:
var isSimulation = true
this.entity.applyInput(input, isSimulation);
and then using a fake / shadow body to apply an input and setting the final position of that fake body to the real body to avoid the rubber banding problem.
I will be really helpful if anyone gives me some advice or an idea of how to deal with these problems.