projection

How to use

parameters

Parameter	Default Value	Type	Description
sprite	string	'grass'
backDistance	number	200
fieldOfView	number	400
maxDistanceDisplayed	number	2000
playerScreenPosY	number	0.25
heightFactor	number	0.5
perspectiveDeformation	number	1
width	number	50

example

projection({
  sprite: 'grass',
  backDistance: 200,
  fieldOfView: 400,
  maxDistanceDisplayed: 2000,
  playerScreenPosY: 0.25,
  heightFactor: 0.5,
  perspectiveDeformation: 1,
  width: 50
}),

Source

component.js

function projection(p) {
  const param = {
    sprite: 'grass',
    backDistance: 200,
    fieldOfView: 400,
    maxDistanceDisplayed: 2000,
    playerScreenPosY: 0.25,
    heightFactor: 0.5,
    perspectiveDeformation: 1,
    width: 50,
    ...p,
  };
  return {
    add() {
      const sp = add([
        pos(center()),
        fixed(),
        sprite(param.sprite, { width: param.width }),
        anchor('bot'),
        z(0),
        scale(),
      ]);
      let player;
      onUpdate(() => {
        const p = this.screenPos.sub(center());
        const pp = param.fieldOfView / (param.fieldOfView + -p.y);
        if (
          p.y < param.backDistance &&
          p.y > -param.maxDistanceDisplayed &&
          pp > 0
        ) {
          sp.pos = center()
            .add(
              vec2(p.x, p.y * param.heightFactor)
                .scale(pp)
                .scale(1, param.perspectiveDeformation)
            )
            .add(0, param.playerScreenPosY * height());
          sp.z = p.y;
          sp.hidden = false;
          sp.scaleTo(pp);
        } else sp.hidden = true;
      });
    },
  };
}