Matter.js 我需要始终相同的动作(在任何 canvas 尺寸上)
Matter.js i need always same movement ( on any canvas size)
我需要帮助。我有一个播放器,我想以相同的直径顺序跳转播放器。我想用 getHeight 和 return ( innerHeight/100 * per ) 来解决这个问题,但没有任何改进。更糟糕的是,如果 canvas 尺寸变大,玩家就不会跳得那么高,而如果 window 变小,玩家就会跳得更高!我不想以硬代码方式进行校准。我需要响应功能!
"leave a comment before vote negative"
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;
}
};
完整来源:link
我不知道一个函数可以完成所有事情,但你可以将力乘以 window.innerHeight
或 window.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
应用于玩家(当玩家移动到左边)。如果你想让它看起来更一致,你可以让 jumpForce
使用 vw
而不是 vh
并确保游戏中创建的所有对象都使用 vw
进行定位和缩放。
无论您是否只使用 vw
,您都必须将所有像素值转换为 vw
或 vh
(取决于您是否正在更改对象的 x 或 y) ,所以它看起来像这样:
var object = Bodies.rectangle(vw*60, vw*40, vw*8, vw*5);
我认为 matter.js 已经有了带有简单数字输入的直径刻度。
当我删除所有 getHeight 和 getWidth 并输入数字时,一切又开始正常工作了。
这是我的解决方案,无论屏幕大小如何,任何平台都能始终获得百分比。
我的意见:Matter.js 看起来是个不错的解决方案。
我需要帮助。我有一个播放器,我想以相同的直径顺序跳转播放器。我想用 getHeight 和 return ( innerHeight/100 * per ) 来解决这个问题,但没有任何改进。更糟糕的是,如果 canvas 尺寸变大,玩家就不会跳得那么高,而如果 window 变小,玩家就会跳得更高!我不想以硬代码方式进行校准。我需要响应功能!
"leave a comment before vote negative"
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;
}
};
完整来源:link
我不知道一个函数可以完成所有事情,但你可以将力乘以 window.innerHeight
或 window.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
应用于玩家(当玩家移动到左边)。如果你想让它看起来更一致,你可以让 jumpForce
使用 vw
而不是 vh
并确保游戏中创建的所有对象都使用 vw
进行定位和缩放。
无论您是否只使用 vw
,您都必须将所有像素值转换为 vw
或 vh
(取决于您是否正在更改对象的 x 或 y) ,所以它看起来像这样:
var object = Bodies.rectangle(vw*60, vw*40, vw*8, vw*5);
我认为 matter.js 已经有了带有简单数字输入的直径刻度。
当我删除所有 getHeight 和 getWidth 并输入数字时,一切又开始正常工作了。
这是我的解决方案,无论屏幕大小如何,任何平台都能始终获得百分比。 我的意见:Matter.js 看起来是个不错的解决方案。