Skip to content

Commit aa86be5

Browse files
authored
Merge pull request godotengine#8298 from Calinou/multiple-resolutions-add-integer-scaling
Document integer scaling support in Multiple resolutions
2 parents b1b79a6 + c3c5895 commit aa86be5

File tree

3 files changed

+59
-9
lines changed

3 files changed

+59
-9
lines changed
610 Bytes
Loading
420 Bytes
Loading

tutorials/rendering/multiple_resolutions.rst

Lines changed: 59 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,57 @@ To configure the stretch scale at runtime from a script, use the
277277
``get_tree().root.content_scale_factor`` property (see
278278
:ref:`Window.content_scale_factor <class_Window_property_content_scale_factor>`).
279279

280+
.. _doc_multiple_resolutions_stretch_scale_mode:
281+
282+
Stretch Scale Mode
283+
^^^^^^^^^^^^^^^^^^
284+
285+
Since Godot 4.2, the **Stretch Scale Mode** setting allows you to constrain the
286+
automatically determined scale factor (as well as the manually specified
287+
**Stretch Scale** setting) to integer values. By default, this setting is set to
288+
``fractional``, which allows any scale factor to be applied (including fractional
289+
values such as ``2.5``). When set to ``integer``, the value is rounded down to
290+
the nearest integer. For example, instead of using a scale factor of ``2.5``, it
291+
would be rounded down to ``2.0``. This is useful to prevent distortion when
292+
displaying pixel art.
293+
294+
Compare this pixel art which is displayed with the ``viewport`` stretch mode,
295+
with the stretch scale mode set to ``fractional``:
296+
297+
.. figure:: img/multiple_resolutions_pixel_art_fractional_scaling.webp
298+
:align: center
299+
:alt: Fractional scaling example (incorrect pixel art appearance)
300+
301+
Checkerboard doesn't look "even". Line widths in the logo and text varies wildly.
302+
303+
This pixel art is also displayed with the ``viewport`` stretch mode, but the
304+
stretch scale mode is set to ``integer`` this time:
305+
306+
.. figure:: img/multiple_resolutions_pixel_art_integer_scaling.webp
307+
:align: center
308+
:alt: Integer scaling example (correct pixel art appearance)
309+
310+
Checkerboard looks perfectly even. Line widths are consistent.
311+
312+
For example, if your viewport base size is 640×360 and the window size is 1366×768:
313+
314+
- When using ``fractional``, the viewport is displayed at a resolution of
315+
1366×768 (scale factor is roughly 2.133×). The entire window space is used.
316+
Each pixel in the viewport corresponds to 2.133×2.133 pixels in the displayed
317+
area. However, since displays can only display "whole" pixels, this will lead
318+
to uneven pixel scaling which results in incorrect appearance of pixel art.
319+
- When using ``integer``, the viewport is displayed at a resolution of 1280×720
320+
(scale factor is 2×). The remaining space is filled with black bars on all
321+
four sides, so that each pixel in the viewport corresponds to 2×2 pixels in
322+
the displayed area.
323+
324+
This setting is effective with any stretch mode. However, when using the
325+
``disabled`` stretch mode, it will only affect the **Stretch Scale** setting by
326+
rounding it *down* to the nearest integer value. This can be used for 3D games
327+
that have a pixel art UI, so that the visible area in the 3D viewport doesn't
328+
reduce in size (which occurs when using ``canvas_items`` or ``viewport`` stretch
329+
mode with the ``integer`` scale mode).
330+
280331
Common use case scenarios
281332
-------------------------
282333

@@ -305,16 +356,20 @@ Desktop game
305356

306357
**Pixel art:**
307358

308-
- Set the base window size to the viewport size you intend to use. Most pixel art games
309-
use viewport sizes between 256×224 and 640×480. Higher viewport sizes will
310-
require using higher resolution artwork, unless you intend to show more of the
311-
game world at a given time.
359+
- Set the base window size to the viewport size you intend to use. Most pixel
360+
art games use viewport sizes between 256×224 and 640×480. 640×360 is a good
361+
baseline, as it scales to 1280×720, 1920×1080, 2560×1440, and 3840×2160 without
362+
any black bars when using integer scaling. Higher viewport sizes will require
363+
using higher resolution artwork, unless you intend to show more of the game
364+
world at a given time.
312365
- Set the stretch mode to ``viewport``.
313366
- Set the stretch aspect to ``keep`` to enforce a single aspect ratio (with
314367
black bars). As an alternative, you can set the stretch aspect to ``expand`` to
315368
support multiple aspect ratios.
316369
- If using the ``expand`` stretch aspect, Configure Control nodes' anchors to
317370
snap to the correct corners using the **Layout** menu.
371+
- Set the stretch scale mode to ``integer``. This prevents uneven pixel scaling
372+
from occurring, which makes pixel art not display as intended.
318373

319374
.. note::
320375

@@ -324,11 +379,6 @@ Desktop game
324379
viewport, you should use the ``canvas_items`` stretch mode instead of the ``viewport``
325380
stretch mode.
326381

327-
Godot currently doesn't have a way to enforce integer scaling when using the
328-
``canvas_items`` or ``viewport`` stretch mode, which means pixel art may look bad if the
329-
final window size is not a multiple of the base window size.
330-
To fix this, use an add-on such as the `Integer Resolution Handler <https://github.com/Yukitty/godot-addon-integer_resolution_handler>`__.
331-
332382
Mobile game in landscape mode
333383
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
334384

0 commit comments

Comments
 (0)