2024-02-27 16:13:16 +01:00
<template name="config-menu__graphics">
<head>
</head>
<body>
<form class="config__form">
2024-03-30 19:53:03 +01:00
<div class="config__hz-wrapper">
<div class="config__wrapper" data-event-mouseout="set_current_gfx_description(-1)">
<div class="config-option" data-event-mouseover="set_current_gfx_description(0)">
2024-02-27 16:13:16 +01:00
<label class="config-option__title">Resolution</label>
2024-03-15 17:13:29 +01:00
<div class="config-option__list">
2024-03-30 19:53:03 +01:00
<input type="radio"
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(0)"
name="resolution"
data-checked="res_option"
value="Original"
id="res_original"
style="nav-up:#tab_graphics; nav-down: #ds_windowed"
data-attr-style="res_option == 'Auto' ? 'nav-up:#tab_graphics; nav-down: #ar_original' : 'nav-up:#tab_graphics; nav-down: #ds_windowed'"
/>
2024-02-27 16:13:16 +01:00
<label class="config-option__tab-label" for="res_original">Original</label>
2024-03-30 19:53:03 +01:00
<input type="radio"
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(0)"
name="resolution"
data-checked="res_option"
value="Original2x"
id="res_2x"
style="nav-up:#tab_graphics; nav-down: #ds_2x"
data-attr-style="res_option == 'Auto' ? 'nav-up:#tab_graphics; nav-down: #ar_expand' : 'nav-up:#tab_graphics; nav-down: #ds_2x'"
/>
2024-02-27 16:13:16 +01:00
<label class="config-option__tab-label" for="res_2x">Original 2x</label>
2024-03-30 19:53:03 +01:00
<input type="radio"
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(0)"
name="resolution"
data-checked="res_option"
value="Auto"
id="res_auto"
style="nav-up:#tab_graphics; nav-down: #ds_4x"
data-attr-style="res_option == 'Auto' ? 'nav-up:#tab_graphics; nav-down: #ar_expand' : 'nav-up:#tab_graphics; nav-down: #ds_4x'"
/>
2024-02-27 16:13:16 +01:00
<label class="config-option__tab-label" for="res_auto">Auto</label>
</div>
</div>
2024-03-30 19:53:03 +01:00
<div class="config-option" data-event-mouseover="set_current_gfx_description(1)">
2024-03-27 23:43:15 +01:00
<label class="config-option__title">Downsampling Quality</label>
2024-03-15 17:13:29 +01:00
<div class="config-option__list">
2024-03-30 19:53:03 +01:00
<input type="radio"
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(1)"
name="downsampling"
data-attrif-disabled="res_option == 'Auto'"
data-checked="ds_option"
value="1"
id="ds_windowed"
style="nav-up: #res_original; nav-down: #ar_original"
/>
2024-03-27 23:43:15 +01:00
<label class="config-option__tab-label" for="ds_windowed">Off</label>
2024-03-30 19:53:03 +01:00
<input type="radio"
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(1)"
name="downsampling"
data-attrif-disabled="res_option == 'Auto'"
data-checked="ds_option"
value="2"
id="ds_2x"
style="nav-up: #res_2x; nav-down: #ar_expand"
/>
2024-03-27 23:43:15 +01:00
<label class="config-option__tab-label" for="ds_2x">2x</label>
2024-03-30 19:53:03 +01:00
<input type="radio"
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(1)"
name="downsampling"
data-attrif-disabled="res_option == 'Auto'"
data-checked="ds_option"
value="4"
id="ds_4x"
style="nav-up: #res_auto; nav-down: #ar_expand"
/>
2024-03-27 23:43:15 +01:00
<label class="config-option__tab-label" for="ds_4x">4x</label>
2024-03-30 19:53:03 +01:00
<div class="config-option__details">{{ds_info}}</div>
2024-02-27 16:13:16 +01:00
</div>
</div>
2024-03-30 19:53:03 +01:00
<div class="config-option" data-event-mouseover="set_current_gfx_description(2)">
2024-02-27 16:13:16 +01:00
<label class="config-option__title">Aspect Ratio</label>
2024-03-15 17:13:29 +01:00
<div class="config-option__list">
2024-03-30 19:53:03 +01:00
<input type="radio"
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(2)"
name="aspectratio"
data-checked="ar_option"
value="Original"
id="ar_original"
style="nav-up: #ds_windowed; nav-down: #wm_windowed"
data-attr-style="res_option == 'Auto' ? 'nav-up:#res_original; nav-down: #wm_windowed' : 'nav-up:#ds_windowed; nav-down: #wm_windowed'"
/>
2024-02-27 16:13:16 +01:00
<label class="config-option__tab-label" for="ar_original">Original</label>
2024-03-30 19:53:03 +01:00
<input type="radio"
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(2)"
name="aspectratio"
data-checked="ar_option"
value="Expand"
id="ar_expand"
style="nav-up: #ds_2x; nav-down: #wm_fullscreen"
data-attr-style="res_option == 'Auto' ? 'nav-up:#res_2x; nav-down: #wm_fullscreen' : 'nav-up:#ds_2x; nav-down: #wm_fullscreen'"
/>
2024-02-27 16:13:16 +01:00
<label class="config-option__tab-label" for="ar_expand">Expand</label>
</div>
</div>
2024-03-30 19:53:03 +01:00
<div class="config-option" data-event-mouseover="set_current_gfx_description(3)">
2024-03-27 23:43:15 +01:00
<label class="config-option__title">Window Mode</label>
2024-03-15 17:13:29 +01:00
<div class="config-option__list">
2024-03-30 19:53:03 +01:00
<input type="radio"
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(3)"
name="windowmode"
data-checked="wm_option"
value="Windowed"
id="wm_windowed"
style="nav-up: #ar_original; nav-down: #rr_original"
/>
2024-03-27 23:43:15 +01:00
<label class="config-option__tab-label" for="wm_windowed">Windowed</label>
2024-03-30 19:53:03 +01:00
<input type="radio"
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(3)"
name="windowmode"
data-checked="wm_option"
value="Fullscreen"
id="wm_fullscreen"
style="nav-up: #ar_expand; nav-down: #rr_display"
/>
2024-03-27 23:43:15 +01:00
<label class="config-option__tab-label" for="wm_fullscreen">Fullscreen</label>
2024-02-27 16:13:16 +01:00
</div>
</div>
2024-03-30 19:53:03 +01:00
<div class="config-option" data-event-mouseover="set_current_gfx_description(4)">
2024-02-27 16:13:16 +01:00
<label class="config-option__title">Framerate</label>
2024-03-15 17:13:29 +01:00
<div class="config-option__list">
2024-03-27 18:40:43 +01:00
<input type="radio"
2024-03-30 19:53:03 +01:00
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(4)"
2024-03-27 18:40:43 +01:00
name="refreshrate"
data-checked="rr_option"
value="Original"
id="rr_original"
2024-03-30 19:53:03 +01:00
data-attr-style="rr_option=='Manual' ? 'nav-up: #wm_windowed; nav-down: #rr_manual_input' : 'nav-up: #wm_windowed; nav-down: #msaa_none'"
2024-03-27 18:40:43 +01:00
/>
2024-02-27 16:13:16 +01:00
<label class="config-option__tab-label" for="rr_original">Original</label>
2024-03-27 18:40:43 +01:00
<input type="radio"
2024-03-30 19:53:03 +01:00
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(4)"
2024-03-27 18:40:43 +01:00
name="refreshrate"
data-checked="rr_option"
value="Display"
id="rr_display"
2024-03-30 19:53:03 +01:00
data-attr-style="rr_option=='Manual' ? 'nav-up: #wm_fullscreen; nav-down: #rr_manual_input' : 'nav-up: #wm_fullscreen; nav-down: #msaa_2x'"
2024-03-27 18:40:43 +01:00
/>
2024-02-27 16:13:16 +01:00
<label class="config-option__tab-label" for="rr_display">Display</label>
2024-03-27 18:40:43 +01:00
<input type="radio"
2024-03-30 19:53:03 +01:00
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(4)"
2024-03-27 18:40:43 +01:00
name="refreshrate"
data-checked="rr_option"
value="Manual"
id="rr_manual"
2024-03-30 19:53:03 +01:00
data-attr-style="rr_option=='Manual' ? 'nav-up: #wm_fullscreen; nav-down: #rr_manual_input' : 'nav-up: #wm_fullscreen; nav-down: #msaa_4x'"
2024-03-27 18:40:43 +01:00
/>
2024-02-27 16:13:16 +01:00
<label class="config-option__tab-label" for="rr_manual">Manual</label>
</div>
<div data-if="rr_option=='Manual'" class="config-option__range-wrapper config-option__list">
<label class="config-option__range-label">{{rr_manual_value}}</label>
2024-03-30 19:53:03 +01:00
<input
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(4)"
id="rr_manual_input"
type="range"
min="20"
max="360"
style="flex:1;margin: 0dp;nav-up:auto;nav-down:auto;"
data-value="rr_manual_value"
/>
2024-02-27 16:13:16 +01:00
</div>
</div>
2024-03-30 19:53:03 +01:00
<div class="config-option" data-event-mouseover="set_current_gfx_description(5)">
2024-03-27 23:43:15 +01:00
<label class="config-option__title">MS Anti-Aliasing</label>
<div class="config-option__list">
2024-03-30 19:53:03 +01:00
<input type="radio"
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(5)"
name="antialiasing"
data-checked="msaa_option"
value="None"
id="msaa_none"
2024-04-01 16:31:36 +02:00
data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #hr_original' : 'nav-up: #rr_original; nav-down: #hr_original'"
2024-03-30 19:53:03 +01:00
/>
2024-03-27 23:43:15 +01:00
<label class="config-option__tab-label" for="msaa_none">None</label>
2024-03-30 19:53:03 +01:00
<input type="radio"
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(5)"
name="antialiasing"
2024-04-01 09:19:16 +02:00
data-attrif-disabled="!msaa2x_supported"
2024-03-30 19:53:03 +01:00
data-checked="msaa_option"
value="MSAA2X"
id="msaa_2x"
2024-04-01 16:31:36 +02:00
data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #hr_16_9' : 'nav-up: #rr_display; nav-down: #hr_16_9'"
2024-03-30 19:53:03 +01:00
/>
2024-03-27 23:43:15 +01:00
<label class="config-option__tab-label" for="msaa_2x">2x</label>
2024-03-30 19:53:03 +01:00
<input type="radio"
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(5)"
name="antialiasing"
2024-04-01 09:19:16 +02:00
data-attrif-disabled="!msaa4x_supported"
2024-03-30 19:53:03 +01:00
data-checked="msaa_option"
value="MSAA4X"
id="msaa_4x"
2024-04-01 16:31:36 +02:00
data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #hr_full' : 'nav-up: #rr_manual; nav-down: #hr_full'"
2024-03-30 19:53:03 +01:00
/>
2024-03-27 23:43:15 +01:00
<label class="config-option__tab-label" for="msaa_4x">4x</label>
2024-03-30 19:53:03 +01:00
<!-- <input type="radio" data-event-blur="set_current_gfx_description(-1)" name="antialiasing" data-checked="msaa_option" value="MSAA8X" id="msaa_8x" style="nav-right:none;nav-down:#apply_button"/>
2024-03-27 23:43:15 +01:00
<label class="config-option__tab-label" for="msaa_8x">8x</label> -->
2024-04-01 09:19:16 +02:00
<div class="config-option__details" data-if="!sample_positions_supported">Not available (missing sample positions support)</div>
2024-03-27 23:43:15 +01:00
</div>
</div>
2024-03-30 19:53:03 +01:00
2024-04-01 16:31:36 +02:00
<div class="config-option" data-event-mouseover="set_current_gfx_description(6)">
<label class="config-option__title">HUD Aspect Ratio</label>
<div class="config-option__list">
<input type="radio"
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(6)"
name="hr-option"
data-checked="hr_option"
value="Original"
id="hr_original"
style="nav-up: #msaa_none; nav-down: #apply_button"
/>
2024-04-01 19:32:47 +02:00
<label class="config-option__tab-label" for="hr_original">Original</label>
2024-04-01 16:31:36 +02:00
<input type="radio"
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(6)"
name="hr-option"
data-checked="hr_option"
value="Clamp16x9"
id="hr_16_9"
style="nav-up: #msaa_2x; nav-down: #apply_button"
/>
<label class="config-option__tab-label" for="hr_16_9">16:9</label>
<input type="radio"
data-event-blur="set_current_gfx_description(-1)"
data-event-focus="set_current_gfx_description(6)"
name="hr-option"
data-checked="hr_option"
value="Full"
id="hr_full"
style="nav-up: #msaa_4x; nav-down: #apply_button"
/>
<label class="config-option__tab-label" for="hr_full">Full</label>
</div>
</div>
2024-03-30 19:53:03 +01:00
</div>
<div class="config__wrapper">
<p data-if="cur_gfx_description == 0">
2024-04-01 09:19:16 +02:00
Sets the output resolution of the game. Original matches the game's original 240p resolution. Original 2x will render at 480p. Auto will scale based on the game window's resolution.
2024-03-30 19:53:03 +01:00
</p>
<p data-if="cur_gfx_description == 1">
Renders at a higher resolution and scales it down to the output resolution for increased quality. Only available in Original and Original 2x resolution.
2024-04-01 09:19:16 +02:00
<br />
<br />
Note: 4x downsampling quality at Original 2x resolution may cause performance issues on low end devices, as it will cause the game to render at almost 4k internal resolution.
2024-03-30 19:53:03 +01:00
</p>
<p data-if="cur_gfx_description == 2">
2024-04-01 09:19:16 +02:00
Sets the horizontal aspect ratio. Original uses the game's original 4:3 aspect ratio. Expand will adjust to match the game window's aspect ratio.
2024-03-30 19:53:03 +01:00
</p>
<p data-if="cur_gfx_description == 3">
Sets whether the game should display on a Window or Fullscreen. You can also use Alt + Enter to toggle this option.
</p>
<p data-if="cur_gfx_description == 4">
2024-04-01 09:19:16 +02:00
Sets the game's output framerate. This option does not affect gameplay.
<br />
<br />
Note: If you have issues with Display mode while using an external frame limiter, use Manual mode instead and configure it to that same frame limit.
2024-03-30 19:53:03 +01:00
</p>
<p data-if="cur_gfx_description == 5">
2024-04-01 09:19:16 +02:00
Sets the multisample anti-aliasing (MSAA) quality level. This reduces jagged edges in the final image at the expense of rendering performance.
2024-03-30 19:53:03 +01:00
<br />
<br />
2024-04-01 09:19:16 +02:00
Note: This option won't be available if your GPU does not support programmable MSAA sample positions, as it is currently required to avoid rendering glitches.
2024-03-30 19:53:03 +01:00
</p>
2024-04-01 16:31:36 +02:00
<p data-if="cur_gfx_description == 6">
Sets the position of the HUD from the left and right edges.
</p>
2024-02-27 16:13:16 +01:00
</div>
</div>
<div class="config__footer">
<!-- this empty div makes sure Apply button gets right aligned -->
<div />
<div>
<button
class="button button--secondary"
nav-return="rr_manual"
data-attrif-disabled="!options_changed"
onclick="apply_options"
id="apply_button"
2024-04-01 16:31:36 +02:00
style="nav-up:#hr_original"
2024-02-27 16:13:16 +01:00
>
<div class="button__label">Apply</div>
</button>
</div>
</div>
</form>
</body>
</template>
