fix: fromScreen not using viewport scale, mousePos() not working with letterbox/stretch

[lajbel]

Description

Issues or related

• Related Issue #
• Closes #325

[pkg-pr-new[bot]]

Open in Stackblitz

pnpm add https://pkg.pr.new/kaplayjs/kaplay@436

commit: 7381226

[mflerackers]

Additionally, you don't want to divide each time, it is better to store 1 / factor and multiply instead.

[dragoncoder047]

So scale is fine now, it's stretch that is bugged. If letterbox: true then it works since the canvas's aspect ratio is as specified. stretch makes it not be as specified, so it gets off.

kaplay({
    scale: 3,
    width: 20,
    height: 40,
    stretch: true
});

const x = add([
    anchor("center"),
    circle(3),
    color(RED),
    pos(),
]);

getTreeRoot().use(pos());

onMouseMove(pos => {
    x.pos = getTreeRoot().fromScreen(pos);
});

[mflerackers]

Yeah, when stretch is used, you no longer have a uniform scale. You need a vec2 in that case.

[lajbel]

So scale is fine now, it's stretch that is bugged. If letterbox: true then it works since the canvas's aspect ratio is as specified. stretch makes it not be as specified, so it gets off.

kaplay({
    scale: 3,
    width: 20,
    height: 40,
    stretch: true
});

const x = add([
    anchor("center"),
    circle(3),
    color(RED),
    pos(),
]);

getTreeRoot().use(pos());

onMouseMove(pos => {
    x.pos = getTreeRoot().fromScreen(pos);
});

The question is if there's an user case using only Stretch without letterbox

[niceEli]

resolved conflicts in commit 894d9df6d65baa497d017fb09db200cb39066eae

[niceEli]

no idea for fail should of worked properly