How do I snap camera to pixels in 2d pixel art game

Archezuli

I'm trying to make a Pixel art 2D Sidescroller, but the camera just moves around "smoothly" and for some reason is generating artifacts near tiles sometimes. How do I make it so the camera snaps along with the pixels and hopefully stops the artifacting.

( I tried recording to post examples here but the project refuses to work with shadowplay, so I have no way of doing so.)

Megalomaniak

Have you tried OBS instead of ShadowPlay to record screen?

Also there have been quite a few similar topics in the past, perhaps searching for those might find some solutions?

Archezuli

I tried searching now and all the results had nothing to do with my issue... if you know of any, could you please link them so I could see?

As for OBS, I tried it already years ago and didn't like it, I prefer to stick with Shadowplay. it works perfectly for recording any and all games and programs I ever had the need to.

Archezuli

EDIT: I found this thread and it answered my question:

https://godotforums.org/discussion/23305/use-pixel-snap-not-working

but instead of fixing the glitching|artifacts, it made them worse... how can I fix that?

Megalomaniak

To be able to help we would probably really need to see what the specific 'artifacting' is. Doesn't necessarily have to be video tho, screenshot or two might do.

Archezuli

Screenshotting it is next to impossible because it's super unstable. it only shows when I'm moving the player, while it's moving, for like less than half a second... is there any other way I could show it to you?

Archezuli

I managed to capture a Screenshot by recording with Microsoft gamebar then pausing the recording at the exact moment it happens:

Should I send the recording too? Or is this good enough?

Megalomaniak

I see what you mean about it being hard to capture, the 2bit grayscale artstyle makes it probably harder. I assume it's the white that is ever so slightly offset?

cybereality

Have you seen this page? https://alvarber.gitlab.io/pixel-perfection-in-godot.html

Archezuli

@Megalomaniak said: I see what you mean about it being hard to capture, the 2bit grayscale artstyle makes it probably harder. I assume it's the white that is ever so slightly offset?

Sorry about that, and yes.

For comparison, here's the Scene.

And these are the glitches that happen in the previously mentioned situations:

Circled the ones I could tell the most by visibility

@cybereality said: Have you seen this page? https://alvarber.gitlab.io/pixel-perfection-in-godot.html

Yes, I have seen it. I have already set "Mode" to "Viewport" as I learned previously in another thread. so the camera is already snapped to pixels at least as far as I can tell. Other than that I understand very little of that page... why do you ask?

Archezuli

Hello?

Megalomaniak

seems like it could be issues with image mapping/texture coordinates, beyond that I don't really have any idea.

cybereality

It looks like it's displaying the edge of an adjacent tile. Maybe disable mipmaps and change filtering to nearest neighbor in the image reimport settings?

lawnjelly

In addition to above advice,

See https://github.com/godotengine/godot/issues/45047

The best solution to this is to use edge padding, i.e. add at least a pixel border around each tile in your atlas - the problem is with the artwork. A lot of engines suffer with this problem. The legacy renderer used a hack in the shader to try and get around this problem, which you can try if you turn off batching, but performance will drop.

There is also a setting rendering/batching/precision/uv_contract which you can switch on which may help with this.

I'm hopeful someone will put in support to make automatic bordered atlases (this is really Groud's area), but there has been no joy so far. I may if I get a moment try and put in a very basic version of this, but I'm not really familiar with the tile editor code.

An alternative which I may get around to is adding this extra border information to a new FVF for the batching and using a similar hack to the legacy renderer, but this isn't a great solution because it can cause problems on some hardware (I suspect the problems that required the nvidia_workaround are related to this) and it may drop performance, in some cases severely.

Archezuli

@cybereality said: It looks like it's displaying the edge of an adjacent tile. Maybe disable mipmaps and change filtering to nearest neighbor in the image reimport settings?

Mipmap seems to already be disabled, and I see no filtering options...

@lawnjelly said: [...] There is also a setting rendering/batching/precision/uv_contract which you can switch on which may help with this. [...]

Giant thanks for this, it feels a bit wonky but at least the artifacting seems to be gone?

After some pondering and testing, I can't help but feel like the Movement doesn't really respect the pixels so it's trying to render in real time things that don't respect the grid (Which obviously can cause wonky behavior)

Any chance you guys could help me out with making sure the camera|renderer respects and follow the pixel grid completely? Like in games like Megaman Zero or Zordak, for instance. where the character can move smoothly just fine, but the graphics still look nice the whole time. any tips|settings, or even links to useful resources would be deeply appreciated.

Megalomaniak

You could fix the fps(could be multiples of) to your sprite animations frame rate and make sure all the speed values in your code are perfectly aligned with that too. No silver bullet I'm afraid.

cybereality

It was that setting filter that you might want to uncheck and click reimport. Not sure though.