candid kernel
Hello, I am trying to create a pixel-art ui, but can't seem to get the pixels to scale the same with each other. The background image scales using Percent(100.0) on the width and height. Is there a way to have the pixels on other images scale to appear to be the same size? Using px to the set the image size doesn't make it scale with the screen.
Attached is the current, incomplete, ui and the aseprite mock up
strange ice
Perhaps I can be of some help. I'm also trying to create a pixel art game. To maintain consistency between pixels, I used this plugin https://github.com/drakmaniso/bevy_pixel_camera, which essentially modifies Bevy's orthogonal camera with its own algorithm. Afterwards, I handled the UI with sprites instead of using Bevy's native UI. I can't say this with absolute certainty, but I've noticed that x and y correspond to pixels using this type of camera. Hope this helps.
pure forum
are you using bevy 11
bevy ui supports viewpoint coordinates now
so you can use a constraint like width: Val::Vw(10.) to set a node to 10% of the width of the viewport
so if you use viewport coordinates you can make it so everything has a size relative to the window size
the other option
is to use UiScale and or scale factor override
then you can set it so the engine uses logical coords 256 x 256 or whatever resolution you want, regardless of what the physical pixel resolution of the window is
wind mauve
Can you scale fonts with vw as well?
candid kernel
I went with using Vw and Vh. The values I used was based on the size of the background images and the size of the image I wanted to scale. The background image was 240x135 so for a 16x95 image I did:
width: Val::Vw((16.0 / 240.0) * 100.0),
height: Val::Vh((95.0 / 135.0) * 100.0),
It still needs some work but here is the outcome and thanks for helping
pure forum
Scaling fonts with Vw doesn't work yet, you have to use UiScale or override the windows scale factor