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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.