Hello, I just started development of a 2D pixel art game. We have many assets at this point, maybe 20, including another animated character (frames are 64x64) total png size is 256x64.
We also have static images (16x16, 32x32) all these assets look fine.
We just replaced the main-character’s art with a new character. The sprite sheet is 96 x 192, and each frame in the spritesheet is 32x64.
This character flips in and out of being bury. I ensured the sprite was imported properly and using the “Nearest” filter mode.
I read that the viewport and scaling can mess up sprite renderings, this is what is occuring. I have “viewport” rendering, with “expand” aspect ratio, and fractional scaling. I’d really like to preserve these settings, as I don’t want black bars, and would like to be able to handle multiple window sizes.
I also saw that the difference in sprite sizes could be the issue, and they should be uniform. (32x64 vs 64x64). I added padding to each sprite in the sheet, extended the sheet to 192x192, and imported the animation frames as 64x64. No luck.
Any ideas how I can fix this? How do others handle this? I’m new to godot and 2D. Thank you for your help!
Yes, certainly, and while I said “blurry” maybe the proper term would be “distorted”. The issue depends on the screen size, and can vary if I’m moving the character, for now. I’m using the same animation for all frames:
if direction == Vector2.ZERO:
anim_player.play("walk_forward")
elif direction.y == -1:
anim_player.play("walk_forward")
elif direction.y == 1:
anim_player.play("walk_forward")
else:
anim_player.play("walk_forward")
This is the whole player scene, which is a “CharacterBody2D” The highlighted “animator” node is the “AnimatedSprite2D” being used for the character’s frames:
For the node’s attributes, everything is default with exception of:
Sprite Frames & Animation (set to my animation)
Transform.position.y = -26.0 px
Texture.Filter = “Nearest”
Yeah, I don’t think it’s the movement code. I am pretty sure it has to do with the display stretch settings. I’m set with:
Stretch Mode : Viewport
Aspect: Expand
Scale:1.0
Scale Mode: Fractional.
This problem goes away if I switch to “Keep” Aspect ratio, or “Integer” scaling. But I don’t want black bars, and want the game to fill the screen.
I did not, but turning this on. This does seem to do the trick. Although sometimes I feel as though I can see the gitter when I’m moving across the screen, as it’s snapping my character to these pixel boundaries.
As I mentioned above, I’m not someone familiar with making 2D games, so I need to learn more about the stretch modes and any potential tradeoffs, however, the best I’ve been able to find, is to switch to “canvas_items” stretch mode. This seems to look perfect, and I get no black bars.
Is there a downside to this stretch mode that I’m not realizing, as this seems to be the solution for me.
I wouldn’t say it’s necessarily a downside, but with canvas_items, the graphics are rendered directly at the target resolution, but with viewport, it’s rendered to the base resolution first and then upscaled. The docs say this about canvas_items
3D is unaffected, while in 2D, there is no longer a 1:1 correspondence between sprite pixels and screen pixels, which may result in scaling artifacts.
Personally I think canvas_items is fine unless you’re looking for exactly pixel-perfect graphics.
I see, that sounds like that would make sense as to why it’s displaying incorrectly, thank you very much for your help here and explaining the two modes.
maybe it has something to do with the movement code?