Downscaling while maintaining original resolution

[aaronyo]

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.

 

 

[ivan.popelyshev]

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 March 26, 2020 by ivan.popelyshev

[aaronyo]

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.

[aaronyo]

 

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

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
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 March 26, 2020 by aaronyo

[aaronyo]

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 March 27, 2020 by aaronyo

[aaronyo]

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):