Hybrid GFX test - scaling tilemap

[Growler]

Using MelonJS 5.1, my game's pixel artist wants to test "Hybrid GFX" approach and see how the tilemap will scale at 16x16 tilemaps compared with GUI (GUI Object) items.

Basically, we want to scale up 16x16 pixel art 3x, but not scale the GUI overlays.

Video settings are:

{wrapper : "screen", scale : 1.0, scaleMethod : "fit", renderer : me.video.AUTO, subPixel : false }

- Resolution is: 1280x640 (1x zoom)

How can I independently scale up pixel map art and leave GUI elements as is?

Essentially: My resolution options are:

        let screenRes = {
          // Pixels rendered at 64x64 (3x size)
          '16': [320, 160],
          // Pixels rendered at 32x32 (2x size)
          '16': [640, 320],
          // Pixels rendered at true form, 16x16 (1x size)
          '16': [1280, 640],
        };

We want to test 3x zoom (320x160) on 16x16 pixels, but leave the GUI watch in pure resolution. In the me.GUI_Object for the watch, if I set

this.scale(1, 1);

Then you can see the result (first image). If I scale it back down by .33, then it looks horribly pixelated.

[Growler]

@obiot @Parasyte any thoughts on this?

[Parasyte]

@Growler I think you might want to try it the other way; Set the video mode into the highest resolution supported, and scale up the tile background layer. I don't have any code on hand for this, and I'm not 100% sure it will work with collision shapes and stuff, but you definitely want to go with this approach. Going through some old github issues, it looks like the new Renderable transformation matrices will make this significantly easier to work with: https://github.com/melonjs/melonJS/issues/335#issuecomment-231292730 

The problem you are facing in the screenshots is that the canvas size is very small, and you're stretching the whole thing, making big chunky pixels. Scaling down a GUI element onto that canvas is the same thing as scaling the image down in photoshop, and then scaling it back up with nearest neighbor (this is the "stretching" that I just described).