Jump to content

Downscaling while maintaining original resolution


Recommended Posts

I'm trying to create a retro game with a resolution of about  256 x 224. Ideally, I would lock in this resolution so it is not possible for the canvas to use fractional pixels.

I am using roundPixels=true and setting the resolution to something large on PIXI.Application.

I have noticed that scaling textures with fractional values less than 1 (making them smaller than the original) and rotation both make use of the full device resolution regardless of the resolution I have set on PIXI.Application.

I was planning on manually creating pixel art for the rotated sprites, anyway, so the rotation part is not an issue.  But I do need a solution for down scaling as I attempt to zoom smoothly between 1 and 1/4 scale.

I don't mind the down scaled graphics getting ugly. If I have a piece of pixel art that is 16x16 pixels, I'm looking for it to be rendered as 4x4 pixels when scaled to 1/4 -- I expect it to get ugly.

Is there a way to do this in PIXI.js? If not, any suggestions for other libs that might help?

Thanks for any pointers! I can post pictures if my problem is not clear.



Link to comment
Share on other sites

Yes, everything can be done.

The problem is - no one gets it on first try ;) 

People use older versions of pixi, people dont understand that "resolution" means they shouldnt scale the stage, it should just work, people forget about mipmapping and texture bleeding, some people dont even know what NEAREST is and how it works. Some even dont understand that CSS size !== canvas size in case resolution>1.

Suggestion - experiment with everything, use cloned pixijs source and not docs, read pixijs wiki, and post real question here. Yes, of course I have to answer every question with 2-hours long lections, that's the way I'll make a book about pixi. But right now I dont have enough time for that :(

Specifically, roundPixels was fixed in a few latest versions. maybe you need pixijs dev  (pixijs.download/dev/pixi.js or pixi-legacy.js) and not 5.2.1 . You can search for PR related to roundPixels here: https://github.com/pixijs/pixi.js/pulls , just remove "open" tag and see what was merged.

Edited by ivan.popelyshev
Link to comment
Share on other sites

I'll keep digging. For now, it is very useful just to know that what I'm trying to do seems reasonable and possible. I definitely don't expect anyone to set aside 2 hours for me.

I am indeed using 5.2.1, so I will look into other versions and the pull requests.

Thanks for the help! I've seen you all over these forums and github issues, and I appreciate it.

Link to comment
Share on other sites



This is a flying saucer at 3 sizes. I used the following settings:

PIXI.settings.RENDER_OPTIONS.resolution = 4;
PIXI.settings.ROUND_PIXELS = true; // Pretty sure this is irrelevant for this question


The first saucer is at scale 1, the second at .5, and the last at .25.

The pixels that make up the saucer are getting smaller when the pixel is scaled down. How do I get the saucer to be downsampled on scaling down rather than having the pixels be shrunk?

I've tried using the WebGL renderer in 5.2.1 as well as the canvas/2d using pixel.js-legacy. In both cases, it doesn't seem to matter what scale mode I use, downsampling does not happen until the devices physical pixel limitation is reached.


Edited by aaronyo
Link to comment
Share on other sites

I got the downsampling working by rendering my scaled down sprites to a RenderTexture...



I assume I'll have some performance problems if I do this naively in the game loop, but at least I have something to go on...

I'm starting to dig into the pixi.js code. I'm guessing when I render to the canvas directly (not through an intermediate RenderTexture), texture scaling is delegated to the canvas which doesn't know about the pixi-js resolution setting? Is that that correct?


Edited by aaronyo
Link to comment
Share on other sites

Uggh. I must have had a typo when I tried this earlier, but what i needed was just scaling the canvas via CSS. I've got to make sure this works from within an actual game loop, now but i should be good...

width: 800px;
height: 800px;
image-rendering: pixelated;


legacy/2d canvas:


webgl canvas (actually pretty good):


Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...