Matter-js: Same force manifesting movement in all resolution (canvas sizes)

[zlatnaspirala]

Hello i am new here !

I need help. I have a player and i want jump player always in same diametric order. I wanted to fix this with getHeight with return ( innerHeight/100 * per ) but no improved. Even worst if canvas size become bigger player have smallest jump , for smaller window player jumps higher! I dont want to callibrate in hard code way. I need responsive function!
On smaller window size player jump much more !
I guest this is duplicate but please void me to the right answer.

r.player.force = {
x: 0,
y: -(getHeight(0.03)),
};
Matter.Body.applyForce(r.player, { x: r.player.position.x, y: r.player.position.y }, r.player.force);

public getHeight(percente: number): number {
return this.reperH() / 100 * percente;
}

this.reperH = function () {

if ((window as any).innerHeight > (window as any).innerWidth / this.aspectRatio) {
return (window as any).innerWidth / this.aspectRatio;
} else {
return (window as any).innerHeight;
}

};

Speed is changed also.

This is link for my project :
https://github.com/zlatnaspirala/visual-ts-game-engine

I want next step to implement networking but with this status there is no possible to do that. Any suggest ! Thank for any response.

[liabru]

If I understand correctly you just need to make sure that you're rendering things at the correct scale? Using the built in render this would mean setting render.bounds appropriately.

[zlatnaspirala]

I don't have a problem with scale i make it on 2 different ways ( diametric 100% 100%H size always/on resize and (i call it "frame") other way is keeping aspect radio logic).

I spot this :

    this.runner = Runner.create({
      delta: 1000 / 60,
      isFixed: true,
    });

Changing _delta_ is only way to make calibration for force manifesting on different resolution. When i change render interval force manifesting also changing.

Maybe it is old canvas resize/animation frame rate problem.

[liabru]

Is the issue that a larger resolution causes a lower FPS? That's the only thing that might have some effect, when using isFixed: true then the simulation will appear to slow down, where as isFixed: false it will try to maintain speed at the cost of accuracy. A jsfiddle would help here if you have one?

[zlatnaspirala]

Here's online demo . This is the best what i can do to pack whole scripts for short time ( because i use typescript vs webpack ).
https://jsfiddle.net/zlatnaspirala/5e8fwpz1/

Maybe is better to look at : https://maximumroulette.com/visual-ts/beta/

Resizing is not problem in self. Problem is _after resizing and than refreshing_ velocity and force manifesting different.

[liabru]

Unfortunately your fiddle is too large for me to investigate fully, a minimal example would be much appreciated. Though one thing I did notice is that you are somehow changing the sizes of bodies based on some factor e.g.

r.player = Matter.Bodies.circle(r.v.getWidth(50), r.v.getHeight(30), r.v.getWidth(playerRadius)

Do those functions change based on canvas scale? If so that might be your issue, there should be no need to change the size of bodies for that, just transform your rendering instead.

[zlatnaspirala]

Oh yes i get it now. Matter.js already have diametric scale. When i put simple numbers for x,y,width and height everything start work normally.

I usually use this :

 public getHeight(percente: number): number {
   return this.innerHeight / 100 * percente;
}

I can simple use css i setup what ever canvas size stage will always response same. This is good point.

Thanks for reply !