[r197.2] Letterbox fullscreen high quality - sprite animation jitter

[NoSoul8]

Problem description

Working on a PC, Steam oriented game, using C3 stable verion r197.2. So letterbox scale fullscreen is a must. Any black lines on screen borders are a 100% NO-NO, so other fullscreen modes are not an option. Some sprite animations tend to jitter on screen. Lowering fullscreen quality to low removes the jitter, but blurs up/down scaled sprites and texts. Changing sampling mode removes the jitter, but blurs the sprite.

I have reduced my game to a minimum repro, for you to take a look. (Also, i don't know english that well, so maybe "Jitter" is not a correct word to describe the problem)

Attach a .c3p

123.zip

Steps to reproduce

1. Download and run the attached minimal c3p project
2. Follow the text with hotkeys on screen - at each step check the animation and text
3. You can also add a spritefont - it can sometimes jitter as well. But i only noticed it with a camera moving around a standstill spritefont text

Observed result

At fullscreen, high quality - animation jitters, like it struggles to render some pixels At fullscreen, low quality - animation is ok, but the text is blurred. Making it much harder to read.

Expected result

For a PC oriented game (at least for nw.js exported version), i expect that fullscreen letterbox scale with high quality will display sprite animations without jitter and text without blur.

More details

Affected browsers/platforms: Chrome - browser preview Windows - nw.js export 1920*1080 fullscreen resolution - my monitor

First affected release: I file this issue in r197.2, but i believe this worked like it even in C2, since i googled the problem for a possible workaround and found forum topics of years old.

System details

View details

PASTE HERE Platform information Browser: Chrome Browser version: 83.0.4103.61 Browser engine: Chromium Browser architecture: 64-bit Context: browser Operating system: Windows Operating system version: 7 Operating system architecture: 64-bit Device type: desktop Device pixel ratio: 1 Logical CPU cores: 4 Approx. device memory: 8 GB User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36 C3 release: r202 (beta) Language setting: en-US Local storage Storage quota (approx): 295 gb Storage usage (approx): 1.5 gb (0.5%) Persistant storage: No 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: yes Supports highp precision: yes Vendor: Google Inc. Renderer: ANGLE (NVIDIA GeForce GTX 970 Direct3D11 vs_5_0 ps_5_0) Major performance caveat: no Maximum texture size: 16384 Point size range: 1 to 1024 Extensions: EXT_color_buffer_float EXT_disjoint_timer_query_webgl2 EXT_float_blend EXT_texture_compression_bptc EXT_texture_compression_rgtc EXT_texture_filter_anisotropic KHR_parallel_shader_compile OES_texture_float_linear WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context OVR_multiview2 Audio information System sample rate: 44100 Hz Output channels: 2 Output interpretation: speakers Supported decode formats: Ogg Opus (audio/ogg; codecs=opus) WebM Opus (audio/webm; codecs=opus) Ogg Vorbis (audio/ogg; codecs=vorbis) WebM Vorbis (audio/webm; codecs=vorbis) MPEG-4 AAC (audio/mp4; codecs=mp4a.40.5) MP3 (audio/mpeg) FLAC (audio/flac) PCM WAV (audio/wav; codecs=1) Supported encode formats: WebM Opus (audio/webm; codecs=opus) Video information Supported decode formats: WebM VP9 (video/webm; codecs=vp9) WebM VP8 (video/webm; codecs=vp8) Ogg Theora (video/ogg; codecs=theora) H.264 (video/mp4; codecs=avc1.42E01E) Supported encode formats: WebM VP9 (video/webm; codecs=vp9) WebM VP8 (video/webm; codecs=vp8)

[AshleyScirra]

It works just fine here, there is no issue with the rendering at all. Please test the latest release and provide your system details as per the bug report guidelines.

[NoSoul8]

@AshleyScirra I've added some basic system details to the main description. If you need some exact details, please specify.

Retested in r201 - still reproduces.

I have recorded a video reproducing the problem. 2020-06-02 16-18-12.zip

[AshleyScirra]

You've missed out all the GPU info and some of the display info which are the most relevant parts to this issue. Please include everything as per the bug report guidelines.

[NoSoul8]

@AshleyScirra to evade any further confusion let me just attach a dxdiag file here: DxDiag.txt

[AshleyScirra]

That doesn't cover Chrome or WebGL specific information. Please just provide the requested information, I'm asking for information I need to be able to help you.

[NoSoul8]

@AshleyScirra updated details with the "Menu > About > Platform" info

[AshleyScirra]

Thanks, I'll try to look further in to this in due course.

[SnipG]

Looks neat game! I think there aint much to do. The cropped version has wrong size and align with certain frames, if you remove and resize them, it will start to act like uncropped version. But even that won't remove the pixel shake at certain viewport sizes. For that you need to apply all 3 pixel art settings, to be 100% correct.

[NoSoul8]

@SnipG thanks mate :) The game is called Cold Shell - you can check it on Steam (still in development though).

"you need to apply all 3 pixel art settings, to be 100% correct" - would you kindly tell me what those 3 settings are? And won't any of them, by any chance, blur the sprites? I'd better have pixel shake at some monitors than blurred pixel art.

[SnipG]

I think thous were: sample nearest, integer scale and pixel rounding. Integer scale could ruin the fullscreen ofc. You could keep your currect settings, make frames all same size and align images correctly and retest cases. But it will only fix it on HD screens. Non-HD or devices pixel ratio something else then 1 could still shake it!

[AshleyScirra]

I think as @SnipG is getting at, the problem is with the project settings - you use "Nearest" sampling mode, meaning the image must be pixellated, but other project settings allow fractional rendering. In particular "Letterbox scale" mode can use a fractional scale. With a fractional scale factor, like 1.5x, you can end up with some object pixels almost exactly on the line between two screen pixels. Then which pixel is rendered is subject to floating point imprecision in the texture sampling, as which side of exactly-half-way it falls depends on more-or-less random fractional precision errors. "Letterbox integer scale" is designed to ensure pixel perfect rendering, which is what you should be using. You should also enable "Pixel rounding" to ensure object positions are not rendered at fractional positions, either.

When creating this type of project you should tick "Optimize for pixel art", which applies the necessary settings. The settings it applies are documented in the manual.

Closing as this appears to be an issue with project settings rather than Construct.

[NoSoul8]

@AshleyScirra i got it, thank you. So it's sort of a trade off. Since Letterbox scale is a Must for my game, i will have to endure some jittering on some monitors. I can't have both letterbox fullscreen and no fractional scale factor problem the same time.