Sign in to follow this  
Growler

Hybrid GFX test - scaling tilemap

Recommended Posts

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.

Screen Shot 2018-02-26 at 1.03.09 AM.png

Screen Shot 2018-02-26 at 1.00.32 AM.png

Screen Shot 2018-02-26 at 1.01.04 AM.png

Share this post


Link to post
Share on other sites

@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).

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.