edbentley / replay

A cross-platform JS game engine inspired by React
https://replay.js.org
MIT License
298 stars 11 forks source link

Add new dimension option: 'scale-up-proportional' #93

Open ejb opened 3 years ago

ejb commented 3 years ago

This adds a third option for scaling up that preserves pixel ratios. Essentially, the game canvas is scaled the highest possible integer. It's a great option for retro-style pixel art.

For example, here's scaled-up. Note how some of the pixels on the birb are wider than others, leading to distortion of the sprite.

scaled-up

And the same scene with scaled-up-proportional. The borders are annoying, but a reasonable compromise to preserve the art style.

scaled-up-proportional

edbentley commented 3 years ago

I don't quite understand why some pixels are wider. Shouldn't you just have a greater width / height margin with a fixed size image?

And what's the difference with this option and just setting margins to 0?

    maxWidthMargin: 0,
    maxHeightMargin: 0,

Also please rebase with the latest master.