I’m trying to make a 2d game with imported maps from Tiled, I’m currently loading up the tiles 1 by 1, and have run into a few issues.
When using ImageRectOffset (location of tile in image) and ImageRectSize (32,32 as per tile size), the tiles will occasionally include pixels outside of their “range” like so:
I thought I could mitigate this by padding the tiles, and accommodating for it within the ImageRectOffset, but then this happens: (my math isn’t off, trust me)
Is there any way I could possible fix either of these problems, or is this a limitation of Roblox’s ImageRect rendering? I would assume it’s not a limitation, as I could upload each image separately and it’ll be fixed:
I’d rather not upload individually, as I currently have maps in the making that use 4 different tilesheets, and each tilesheet has 1024 tiles (1024x1024 image, 32x32 tiles) and this would take many many hours to upload and index into modules.
You should add gutters of 1 pixel around each of your tiles on the spritesheet, and then fill that with the color of the nearest pixel. So a green grass tile would get a gutter of 1 pixel all around it with just pure green. You will have to sacrifice in the total count of sprites per spritesheet (since the gutters take space, around +2 pixels in each direction for every tile), and your calculation of offset/size has to be adjusted a little bit to account for not grabbing the gutters, but this should get rid of the bleeding color issue.
I would hope to avoid any editing of the tilesheets I’m already using, this would certainly require me to reorder the tilesheets to accommodate for the extra space this requires me to both remake all maps because tilesheets used are out of order, and have more tilesheets to accommodate for all the tiles that do not make it into the single 1024x1024 image
This will probably be what I do if this isn’t an issue that is fixed down the line or completely ignore it.
(Alternatively I could move back to LÖVE but I like not having to manually re-render everything every frame)
It looks like you’re not sizing the image labels 1:1 with the number of pixels in each sprite.
Like @buildthomas said, in order for spritesheet rendering to work well, you need to add padding around each sprite. Otherwise, the linear blending will cause bleeding from surrounding pixels when rendered upscaled or downscaled. This is more of a limitation of graphics hardware than a limitation with our engine, as far as I know.
It’s likely you haven’t run into this issue with Love2D because of the use of nearest-neighbor filtering instead of bilinear filtering. We currently do not offer a way to change filtering modes.
This example might help show why this is happening:
The pixels get sampled from the center. When you upscale the image, it means that there are some pixels sampling slightly left of the left-most pixel of the sprite, which means it blends between the left-most pixel of the sprite and a pixel that’s out of bounds.
Any chance of there ever being nearest neighbor filtering in Roblox? Using these tiles at the original 32x32 is way too small for a 1080p and 720p device, and like I stated earlier, the padding would mess up quite a bit that is already made.
