Matter.js我需要始终保持相同的运动(在任何画布尺寸上)

时间:2018-11-27 10:41:20

标签: matter.js

我需要帮助。我有一个球员,我想按相同的直径顺序跳球员。我想用带有返回值的getHeight(innerHeight / 100 * per)修复此问题,但是没有任何改进。更糟糕的是,如果画布尺寸变大,播放器将不会跳得更高;如果窗口变小,则播放器将跳得更高!我不想用硬编码方式进行校正。我需要响应功能!

“在否定投票之前发表评论”

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;
    }

 };

完整来源:链接

2 个答案:

答案 0 :(得分:0)

我不知道一个函数可以完成所有操作,但是您可以将力乘以window.innerHeightwindow.innerWidth

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
var vw = windowWidth/100;
var vh = windowHeight/100;
var jumpForce = vh*-5;
var pushX = vw*0.1;

此后,您只需在他们跳动时将jumpForce应用于玩家,并在他们移动时将pushX应用于玩家(当玩家向左移动时,您必须将其乘以-1 )。如果您希望它看起来更加一致,则可以让jumpForce使用vw而不是vh,并确保游戏中创建的所有对象都使用vw进行定位和缩放。

无论您是否仅使用vw,都必须将所有像素值转换为vwvh(取决于您要更改对象的x还是y) ,因此看起来像这样:

var object = Bodies.rectangle(vw*60, vw*40, vw*8, vw*5);

答案 1 :(得分:0)

我认为what.js已经具有简单数字输入的直径比例。

当我删除所有的getHeight和getWidth并放数字时,一切开始又恢复正常了。

这是我的解决方案,无论屏幕大小如何,任何平台均可始终获得百分比。  我的观点:Matter.js看起来是个不错的解决方案。