Retro look on 256x224 resolution with x2 or x3 pixels

#1

Hi, I’m learning Heaps and I’m looking for a way to render a 2d scene with big pixels, like a NES game for example. The idea is to have a total resolution of 256x224 pixels for rendering, then to scale the rendered frame 2 or 3 times to fill a descent portion of modern screens with big chunky pixels.

Is there a straightforward or usual way to do this? In my searches I could not find a simple example of this.

Cheers!

#2

I found help on the Discord, here’s what works for me. Note: setting the filter to a Nothing filter is important, and the LetterBox scale mode also works. Also, you need an image like src/res/sheet.png for the example to work.

import h2d.Scene;
import h2d.filter.Nothing;

class Main extends hxd.App {
    var bmp: h2d.Bitmap;

    override function init() {
        super.init();
        s2d.scaleMode = AutoZoom(256, 224, true);
        s2d.filter = new Nothing();

        var tile = hxd.Res.img.sheet.toTile();
        bmp = new h2d.Bitmap(tile);
        bmp.x = s2d.width/2;
        bmp.y = s2d.height/2;

        s2d.addChild(bmp);
    }

    override function update(dt: Float) {
        bmp.rotation += 0.01;
    }

    static function main() {
        hxd.Res.initEmbed();

        new Main();
    }
}
1 Like
#3

The solution above was incomplete, it lacked clipping. This sets the scale mode and the clipping, with a h2d.filter.Mask defined by a rectangle of the right dimension (W and H are set to 256 and 224 in my example).

    s2d.scaleMode = LetterBox(W, H, true, Center, Center);
    var mask = new h2d.Graphics(s2d);
    mask.beginFill(0xFF0000, 0.5);
    mask.drawRect(0, 0, W, H);
    mask.endFill();
    s2d.filter = new h2d.filter.Mask(mask);
1 Like