Bleeding Issue

[CrackHub]

Problem description

The current sprite sheet algorithm creates problems that are difficult to solve in some cases. As seen in the picture, overflow occurs when the sprite size is sized below 20%. It is quite difficult to solve this situation by adding a few pixels of space on the edges.

Also I will post feature request for fix this easily, in a way that won't take too much time to implement.

Attach a .c3p

Bleeding.zip

Steps to reproduce

1. Preview Bleeding project with %100 zoom (NOTE: I'm using editor with %90 zoom)
   

Observed result

You can see the green sprite bleeding into the other one.

Expected result

Added 3 little more for show it can be fixed.

More details

Affected browsers/platforms: Chrome

First affected release:

System details

View details

Platform information
Product: Construct 3 r416.2 (stable)
Browser: Chrome 131.0.6778.140
Browser engine: Chromium
Context: webapp
Operating system: Windows 11
Device type: desktop
Device pixel ratio: 0.8999999761581421
Logical CPU cores: 16
Approx. device memory: 8 GB
User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Language setting: en-US

Local storage
Storage quota (approx): 189 gb
Storage usage (approx): 120 mb (0.1%)
Persistant storage: Yes

Browser support notes
This list contains missing features that are not required, but could improve performance or user experience if supported.

Nothing is missing. Everything is OK!
WebGL information
Version string: WebGL 2.0 (OpenGL ES 3.0 Chromium)
Numeric version: 2
Supports NPOT textures: yes
Supports GPU profiling: no
Supports highp precision: yes
Vendor: Google Inc. (NVIDIA)
Renderer: ANGLE (NVIDIA, NVIDIA GeForce GTX 1060 3GB (0x00001C02) Direct3D11 vs_5_0 ps_5_0, D3D11)
Major performance caveat: no
Maximum texture size: 16384
Point size range: 1 to 1024
Extensions:

EXT_clip_control
EXT_color_buffer_float
EXT_color_buffer_half_float
EXT_conservative_depth
EXT_depth_clamp
EXT_disjoint_timer_query_webgl2
EXT_float_blend
EXT_polygon_offset_clamp
EXT_render_snorm
EXT_texture_compression_bptc
EXT_texture_compression_rgtc
EXT_texture_filter_anisotropic
EXT_texture_mirror_clamp_to_edge
EXT_texture_norm16
KHR_parallel_shader_compile
NV_shader_noperspective_interpolation
OES_draw_buffers_indexed
OES_sample_variables
OES_shader_multisample_interpolation
OES_texture_float_linear
OVR_multiview2
WEBGL_blend_func_extended
WEBGL_clip_cull_distance
WEBGL_compressed_texture_s3tc
WEBGL_compressed_texture_s3tc_srgb
WEBGL_debug_renderer_info
WEBGL_debug_shaders
WEBGL_lose_context
WEBGL_multi_draw
WEBGL_polygon_mode
WEBGL_provoking_vertex
WEBGL_stencil_texturing
Audio information
System sample rate: 48000 Hz
Output channels: 2
Output interpretation: speakers
Supported decode formats:

WebM Opus (audio/webm;codecs=opus)
WebM Vorbis (audio/webm;codecs=vorbis)
MPEG-4 Opus (audio/mp4;codecs=opus)
MPEG-4 AAC (audio/mp4;codecs=mp4a.40.2)
MP3 (audio/mpeg)
FLAC (audio/flac)
PCM WAV (audio/wav;codecs=1)
Supported encode formats:

WebM Opus (audio/webm;codecs=opus)
MPEG-4 Opus (audio/mp4;codecs=opus)
MPEG-4 AAC (audio/mp4;codecs=mp4a.40.2)
Video information
Supported decode formats:

WebM AV1 (video/webm;codecs=av01.0.00M.08)
WebM VP9 (video/webm;codecs=vp9)
WebM VP8 (video/webm;codecs=vp8)
MPEG-4 AV1 (video/mp4;codecs=av01.0.00M.08)
MPEG-4 H.265 (video/mp4;codecs=hev1.1.2.L93.B0)
MPEG-4 H.264 (video/mp4;codecs=avc1.420034)
Supported encode formats:

WebM AV1 (video/webm;codecs=av01.0.00M.08)
WebM VP9 (video/webm;codecs=vp9)
WebM VP8 (video/webm;codecs=vp8)
WebM H.264 (video/webm;codecs=avc1.420034)
MPEG-4 AV1 (video/mp4;codecs=av01.0.00M.08)
MPEG-4 VP9 (video/mp4;codecs=vp9)
MPEG-4 H.264 (video/mp4;codecs=avc1.420034)

[CrackHub]

I will create request here also when reset finish. For this reason, I am also adding it here
Scirra/Construct-feature-requests#409

Reviewed guidelines

• I have read and understand the suggestion guidelines

Checked for duplicate suggestions

• I checked for existing similar suggestions

Summary

The current sprite sheet algorithm creates problems that are difficult to solve in some cases
Ref: #8370

Possible workarounds or alternatives

The only way to solve this is to fix it manually. And it is not really fix because if you add more sprites in your project you need to fix it again. Changing sprite sizes unnaturally will cause different problems. When you work with UI it can be nightmare.
Manual Fix: I need to add more transparent area for bleeding sprite (Green). In this example, increasing the gap on one side solved the problem. But in different scenarios it will be necessary to add space on all 4 sides. So we need to edit 4 sprites.
Fix.zip

Proposed solution

1. We need margin for sprites. This will fix bleeding issues. How? Current method "Adding 1px for all sides" not fix this issue because when rendered, it does this with the space we add. But adding margin (Unused transparent area for all sides) will fix this. We just need only add margins for Black sprite. With this we don't need to use "Crop" tool. We can manually edit margins in Sprite Editor. So we don't touch original sprite size.

Settings > Default Properties: Default margin option can be added for all sides. So we don't need edit margins everytime.

Also about crop tool: Since the crop tool does not need to add a pixel gap with this method, a "cut without adding a gap" option can be added to it.

NOT to much work because: Will only include spaces (margins) when exporting sprites.

2. In some cases, this may also be necessary to solve the problem more easily. However, if it is not used together with the above method, it will not solve this problem alone.
   Adding Export Group: This will allow us to group sprites when we export game. We can use this for also memory management. But this really needed for fix bleeding issues. If Green sprite bleeding into Black, we can export Black alone with grouping. So if we set "Export Group"=A for Green, "Export Group"=B for Black, these sprites will exported in different spritesheet. In this way we can export Black alone with unique "Export Group" name.
   This can be added Properties Bar in Editor.

NOT to much work because: It can use same spritesheet algorithm, it just calculate spritesheet for every group.

These 2 features will fix this issue together.

Why is this idea important?

It is necessary to solve these and many other problems and offers us more possibilities. Also changing sprite sizes with adding transparent areas, causes difficulties when building UI.

[AshleyScirra]

Set the project property 'Downscaling quality' to 'High' and it should fix this. It's a well-known issue with spritesheets that's described in detail in this blog post: https://www.construct.net/en/blogs/ashleys-blog-2/surprising-difficulty-1528

[CrackHub]

Set the project property 'Downscaling quality' to 'High' and it should fix this. It's a well-known issue with spritesheets that's described in detail in this blog post: https://www.construct.net/en/blogs/ashleys-blog-2/surprising-difficulty-1528

But it affects RAM usage. I already post easy solution which is not require high memory usage.
Main problem currently all sprites using 1px margin in spritesheet (Not talking about crop tool). When you reduce the sprite size, 1 px space is not enough