Files
OpenFrontIO/src/client/render/gl/debug/Layout.ts
T
evanpelle ac6d8d739a Make attack ring size tunable and increase it to 30px
The transport-target ring size was hardcoded as RING_SCREEN_PX in
attack-ring.vert.glsl. Promote it to a uRingScreenPx uniform fed from
a new fx.attackRingScreenPx entry in render-settings.json, with an
"Attack Ring Size (px)" slider in the debug GUI's FX folder.

Also bump the size from 20 to 30 screen px so the ring is easier
to spot. The inner/outer ring fractions (0.5/0.8 of the quad) stay
shader constants.
2026-06-12 15:41:03 -07:00

811 lines
19 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import type { RenderSettings } from "../RenderSettings";
import type { DebugNode } from "./Folder";
import { folder } from "./Folder";
import { color } from "./props/Color";
import { slider } from "./props/Slider";
import { toggle } from "./props/Toggle";
export function buildTree(s: RenderSettings, d: RenderSettings): DebugNode[] {
return [
folder("Pass Enables", [
toggle(s.passEnabled, "terrain", d.passEnabled),
toggle(s.passEnabled, "territory", d.passEnabled),
toggle(s.passEnabled, "borderCompute", d.passEnabled),
toggle(s.passEnabled, "borderStamp", d.passEnabled),
toggle(s.passEnabled, "trail", d.passEnabled),
toggle(s.passEnabled, "structure", d.passEnabled),
toggle(s.passEnabled, "unit", d.passEnabled),
toggle(s.passEnabled, "name", d.passEnabled),
toggle(s.passEnabled, "falloutBloom", d.passEnabled),
toggle(s.passEnabled, "railroad", d.passEnabled),
toggle(s.passEnabled, "fx", d.passEnabled),
toggle(s.passEnabled, "bar", d.passEnabled),
toggle(s.passEnabled, "nameDebug", d.passEnabled, "Name Debug Boxes"),
]),
folder("Fallout Bloom", [
slider(s.falloutBloom, "broilSpeedCold", d.falloutBloom, 0, 0.05, 0.0001),
slider(s.falloutBloom, "broilSpeedHot", d.falloutBloom, 0, 0.05, 0.0001),
slider(s.falloutBloom, "noiseFreq1", d.falloutBloom, 0, 0.5, 0.001),
slider(s.falloutBloom, "noiseFreq2", d.falloutBloom, 0, 0.5, 0.001),
slider(s.falloutBloom, "contrastLoCold", d.falloutBloom, 0, 1, 0.01),
slider(s.falloutBloom, "contrastLoHot", d.falloutBloom, 0, 1, 0.01),
slider(s.falloutBloom, "contrastHiCold", d.falloutBloom, 0, 1, 0.01),
slider(s.falloutBloom, "contrastHiHot", d.falloutBloom, 0, 1, 0.01),
slider(s.falloutBloom, "metaFreq", d.falloutBloom, 0, 0.2, 0.001),
slider(s.falloutBloom, "intensityCold", d.falloutBloom, 0, 10, 0.05),
slider(s.falloutBloom, "intensityHot", d.falloutBloom, 0, 20, 0.1),
slider(s.falloutBloom, "metaInfluenceCold", d.falloutBloom, 0, 1, 0.01),
slider(s.falloutBloom, "metaInfluenceHot", d.falloutBloom, 0, 1, 0.01),
slider(s.falloutBloom, "opacityFadeEnd", d.falloutBloom, 0, 1, 0.01),
color(
s.falloutBloom,
"bloomR",
"bloomG",
"bloomB",
d.falloutBloom,
"Bloom Color",
),
slider(s.falloutBloom, "bloomCoverage", d.falloutBloom, 0, 10, 0.1),
slider(s.falloutBloom, "heatDecayPerTick", d.falloutBloom, 0, 5, 0.01),
color(
s.falloutBloom,
"particleColorDarkR",
"particleColorDarkG",
"particleColorDarkB",
d.falloutBloom,
"Particle Color Dark",
),
color(
s.falloutBloom,
"particleColorBrightR",
"particleColorBrightG",
"particleColorBrightB",
d.falloutBloom,
"Particle Color Bright",
),
slider(
s.falloutBloom,
"particleThresholdUnowned",
d.falloutBloom,
0.5,
1,
0.005,
),
slider(
s.falloutBloom,
"particleThresholdOwned",
d.falloutBloom,
0.5,
1,
0.005,
),
slider(
s.falloutBloom,
"particleFlickerSpeed",
d.falloutBloom,
0,
2,
0.01,
),
slider(s.falloutBloom, "particleStrength", d.falloutBloom, 0, 5, 0.01),
slider(s.falloutBloom, "particleFreshScale", d.falloutBloom, 0, 1, 0.01),
]),
folder("Lighting", [
toggle(s.lighting, "enabled", d.lighting),
slider(s.lighting, "ambient", d.lighting, 0, 1, 0.01),
slider(s.lighting, "falloffPower", d.lighting, 0.5, 5, 0.1),
slider(s.lighting, "falloutLightIntensity", d.lighting, 0, 20, 0.1),
slider(s.lighting, "falloutLightThreshold", d.lighting, 0, 0.5, 0.001),
slider(s.lighting, "blurZoomDivisor", d.lighting, 1, 20, 0.5),
slider(s.lighting, "lightRadiusMultiplier", d.lighting, 0.1, 5, 0.1),
color(
s.lighting,
"falloutLightR",
"falloutLightG",
"falloutLightB",
d.lighting,
"Fallout Light Color",
),
slider(s.lighting, "emberLightIntensity", d.lighting, 0, 20, 0.1),
color(
s.lighting,
"emberLightR",
"emberLightG",
"emberLightB",
d.lighting,
"Ember Light Color",
),
]),
folder("Map Overlay", [
slider(s.mapOverlay, "trailAlpha", d.mapOverlay, 0, 1, 0.01),
slider(s.mapOverlay, "defenseCheckerDarken", d.mapOverlay, 0, 1, 0.01),
slider(s.mapOverlay, "territoryDefenseDarken", d.mapOverlay, 0, 1, 0.01),
slider(
s.mapOverlay,
"territorySaturation",
d.mapOverlay,
0,
1,
0.01,
"Territory Saturation",
),
slider(
s.mapOverlay,
"territoryAlpha",
d.mapOverlay,
0,
1,
0.01,
"Territory Alpha",
),
slider(s.mapOverlay, "staleNukeBase", d.mapOverlay, 0, 0.3, 0.005),
slider(s.mapOverlay, "staleNukeVariation", d.mapOverlay, 0, 0.3, 0.005),
slider(s.mapOverlay, "staleNukeAlpha", d.mapOverlay, 0, 1, 0.01),
color(
s.mapOverlay,
"staleNukeR",
"staleNukeG",
"staleNukeB",
d.mapOverlay,
"Stale Nuke Color",
),
slider(
s.mapOverlay,
"highlightBrighten",
d.mapOverlay,
0,
1,
0.01,
"Highlight Brighten (border)",
),
slider(
s.mapOverlay,
"highlightFillBrighten",
d.mapOverlay,
0,
1,
0.01,
"Highlight Brighten (fill)",
),
slider(
s.mapOverlay,
"highlightThicken",
d.mapOverlay,
0,
10,
1,
"Highlight Thicken (tiles)",
),
folder("Railroad", [
slider(s.railroad, "railMinZoom", d.railroad, 0, 10, 0.1, "Min Zoom"),
slider(
s.railroad,
"railFadeRange",
d.railroad,
0,
5,
0.1,
"Fade Range",
),
slider(
s.railroad,
"railDetailZoom",
d.railroad,
0,
20,
0.1,
"Detail Zoom",
),
slider(s.railroad, "railAlpha", d.railroad, 0, 1, 0.01, "Alpha"),
slider(
s.railroad,
"railThickness",
d.railroad,
0.5,
3,
0.1,
"Thickness",
),
]),
]),
folder("Structure", [
slider(s.structure, "iconSize", d.structure, 10, 60, 1),
slider(s.structure, "dotsZoomThreshold", d.structure, 0.1, 2, 0.05),
slider(
s.structure,
"iconScaleFactorZoomedOut",
d.structure,
0.5,
3,
0.05,
),
slider(
s.structure,
"highlightOutlineWidth",
d.structure,
0,
0.2,
0.005,
"Highlight Outline W",
),
slider(
s.structure,
"highlightDimAlpha",
d.structure,
0,
1,
0.01,
"Highlight Dim Alpha",
),
folder(
"Per-Shape",
Object.entries(s.structure.shapes).map(([name, cfg]) =>
folder(name, [
slider(
cfg,
"scale",
d.structure.shapes[name],
0.5,
2,
0.05,
"Frame Scale",
),
slider(
cfg,
"iconFill",
d.structure.shapes[name],
0.2,
1.5,
0.05,
"Icon Fill",
),
]),
),
),
]),
folder("Bar", [
slider(s.bar, "healthBarW", d.bar, 3, 30, 1, "Health Width"),
slider(s.bar, "healthBarH", d.bar, 1, 10, 1, "Health Height"),
slider(s.bar, "healthBarOffsetY", d.bar, -20, 0, 1, "Health Offset Y"),
slider(s.bar, "progressBarW", d.bar, 3, 30, 1, "Progress Width"),
slider(s.bar, "progressBarH", d.bar, 1, 10, 1, "Progress Height"),
slider(s.bar, "progressBarOffsetY", d.bar, 0, 20, 1, "Progress Offset Y"),
slider(s.bar, "borderWidth", d.bar, 0, 3, 0.5, "Border Width"),
slider(s.bar, "threshold1", d.bar, 0, 1, 0.05, "Red→Orange"),
slider(s.bar, "threshold2", d.bar, 0, 1, 0.05, "Orange→Yellow"),
slider(s.bar, "threshold3", d.bar, 0, 1, 0.05, "Yellow→Green"),
color(s.bar, "colorRedR", "colorRedG", "colorRedB", d.bar, "Red"),
color(
s.bar,
"colorOrangeR",
"colorOrangeG",
"colorOrangeB",
d.bar,
"Orange",
),
color(
s.bar,
"colorYellowR",
"colorYellowG",
"colorYellowB",
d.bar,
"Yellow",
),
color(s.bar, "colorGreenR", "colorGreenG", "colorGreenB", d.bar, "Green"),
]),
folder("Unit", [
slider(s.unit, "unitSize", d.unit, 4, 64, 1),
slider(s.unit, "flickerSpeed", d.unit, 0, 2, 0.01),
color(s.unit, "angryR", "angryG", "angryB", d.unit, "Angry Color"),
]),
folder("Name", [
slider(s.name, "lerpSpeed", d.name, 1, 30, 0.5),
slider(s.name, "cullThreshold", d.name, 0, 0.05, 0.001),
slider(s.name, "nameScaleFactor", d.name, 0.1, 1, 0.05),
slider(s.name, "nameScaleCap", d.name, 1, 10, 0.5),
slider(s.name, "troopSizeMultiplier", d.name, 0.1, 2, 0.05),
slider(s.name, "outlineWidth", d.name, 0, 10, 0.1, "Outline Width (px)"),
color(
s.name,
"outlineR",
"outlineG",
"outlineB",
d.name,
"Outline Color",
),
toggle(s.name, "outlineUsePlayerColor", d.name, "Outline = Player Color"),
toggle(s.name, "fillUsePlayerColor", d.name, "Fill = Player Color"),
slider(s.name, "emojiRowOffset", d.name, 0, 5, 0.1, "Emoji Row Offset"),
slider(s.name, "statusRowOffset", d.name, 0, 5, 0.1, "Status Row Offset"),
slider(s.name, "hoverFadeAlpha", d.name, 0, 1, 0.05, "Hover Fade Alpha"),
slider(s.name, "hoverGlowWidth", d.name, 0, 8, 0.25, "Hover Glow Width"),
slider(s.name, "hoverGlowAlpha", d.name, 0, 1, 0.05, "Hover Glow Alpha"),
]),
folder("FX", [
slider(s.fx, "shockwaveRingWidth", d.fx, 0.01, 0.2, 0.005),
slider(
s.fx,
"attackRingScreenPx",
d.fx,
5,
60,
1,
"Attack Ring Size (px)",
),
slider(
s.fx,
"nukeShockwaveDurationMs",
d.fx,
200,
5000,
100,
"Nuke Shock Duration",
),
slider(
s.fx,
"nukeShockwaveRadiusFactor",
d.fx,
0.5,
3,
0.1,
"Nuke Shock Radius ×",
),
slider(
s.fx,
"samShockwaveDurationMs",
d.fx,
200,
3000,
50,
"SAM Shock Duration",
),
slider(s.fx, "samShockwaveRadius", d.fx, 10, 100, 5, "SAM Shock Radius"),
slider(
s.fx,
"debrisLifetimeMs",
d.fx,
1000,
15000,
500,
"Debris Lifetime",
),
slider(s.fx, "debrisFadeIn", d.fx, 0, 0.5, 0.01, "Debris Fade In"),
slider(s.fx, "debrisFadeOut", d.fx, 0.3, 1, 0.01, "Debris Fade Out"),
slider(
s.fx,
"conquestLifetimeMs",
d.fx,
500,
8000,
250,
"Conquest Lifetime",
),
slider(s.fx, "conquestFadeIn", d.fx, 0, 0.5, 0.01, "Conquest Fade In"),
slider(s.fx, "conquestFadeOut", d.fx, 0.3, 1, 0.01, "Conquest Fade Out"),
]),
folder("Nuke Trajectory", [
slider(
s.nukeTrajectory,
"lineWidth",
d.nukeTrajectory,
0.5,
5,
0.25,
"Line Width (px)",
),
slider(
s.nukeTrajectory,
"outlineWidth",
d.nukeTrajectory,
0,
4,
0.25,
"Outline Width (px)",
),
slider(
s.nukeTrajectory,
"dashTargetable",
d.nukeTrajectory,
1,
30,
1,
"Dash (targetable)",
),
slider(
s.nukeTrajectory,
"gapTargetable",
d.nukeTrajectory,
1,
20,
1,
"Gap (targetable)",
),
slider(
s.nukeTrajectory,
"dashUntargetable",
d.nukeTrajectory,
1,
20,
1,
"Dash (untargetable)",
),
slider(
s.nukeTrajectory,
"gapUntargetable",
d.nukeTrajectory,
1,
20,
1,
"Gap (untargetable)",
),
color(
s.nukeTrajectory,
"lineR",
"lineG",
"lineB",
d.nukeTrajectory,
"Line Color",
),
color(
s.nukeTrajectory,
"interceptR",
"interceptG",
"interceptB",
d.nukeTrajectory,
"Intercept Color",
),
color(
s.nukeTrajectory,
"outlineR",
"outlineG",
"outlineB",
d.nukeTrajectory,
"Outline Color",
),
color(
s.nukeTrajectory,
"interceptOutlineR",
"interceptOutlineG",
"interceptOutlineB",
d.nukeTrajectory,
"Intercept Outline",
),
slider(
s.nukeTrajectory,
"markerCircleRadius",
d.nukeTrajectory,
2,
16,
1,
"Circle Marker (px)",
),
slider(
s.nukeTrajectory,
"markerXRadius",
d.nukeTrajectory,
2,
64,
1,
"X Marker (px)",
),
]),
folder("Nuke Telegraph", [
slider(
s.nukeTelegraph,
"strokeWidth",
d.nukeTelegraph,
0.5,
5,
0.25,
"Stroke Width",
),
slider(
s.nukeTelegraph,
"dashLen",
d.nukeTelegraph,
2,
30,
1,
"Dash Length",
),
slider(
s.nukeTelegraph,
"gapLen",
d.nukeTelegraph,
1,
20,
1,
"Gap Length",
),
slider(
s.nukeTelegraph,
"rotationSpeed",
d.nukeTelegraph,
0,
60,
1,
"Rotation Speed",
),
slider(
s.nukeTelegraph,
"baseAlpha",
d.nukeTelegraph,
0,
1,
0.05,
"Base Alpha",
),
slider(
s.nukeTelegraph,
"pulseAmplitude",
d.nukeTelegraph,
0,
0.5,
0.01,
"Pulse Amplitude",
),
slider(
s.nukeTelegraph,
"pulseSpeed",
d.nukeTelegraph,
0,
10,
0.5,
"Pulse Speed",
),
slider(
s.nukeTelegraph,
"fillAlphaOffset",
d.nukeTelegraph,
0,
1,
0.05,
"Fill Alpha Offset",
),
color(
s.nukeTelegraph,
"colorR",
"colorG",
"colorB",
d.nukeTelegraph,
"Color",
),
]),
folder("Move Indicator", [
slider(
s.moveIndicator,
"startRadius",
d.moveIndicator,
1,
40,
1,
"Start Radius (px)",
),
slider(
s.moveIndicator,
"chevronSize",
d.moveIndicator,
1,
20,
0.5,
"Chevron Size (px)",
),
slider(
s.moveIndicator,
"lineWidth",
d.moveIndicator,
0.5,
6,
0.25,
"Line Width (px)",
),
slider(
s.moveIndicator,
"duration",
d.moveIndicator,
100,
3000,
50,
"Duration (ms)",
),
slider(
s.moveIndicator,
"converge",
d.moveIndicator,
0,
1,
0.05,
"Converge",
),
]),
folder("SAM Radius", [
slider(
s.samRadius,
"strokeWidth",
d.samRadius,
0.5,
5,
0.1,
"Stroke Width",
),
slider(s.samRadius, "dashLen", d.samRadius, 2, 30, 1, "Dash Length"),
slider(s.samRadius, "gapLen", d.samRadius, 1, 20, 1, "Gap Length"),
slider(
s.samRadius,
"rotationSpeed",
d.samRadius,
0,
40,
1,
"Rotation Speed",
),
slider(s.samRadius, "alpha", d.samRadius, 0, 1, 0.05, "Alpha"),
slider(
s.samRadius,
"outlineWidth",
d.samRadius,
0,
2,
0.05,
"Outline Width",
),
slider(
s.samRadius,
"outlineSoftness",
d.samRadius,
0,
1,
0.05,
"Outline Softness",
),
]),
folder("Bonus Popup", [
slider(s.bonusPopup, "scale", d.bonusPopup, 1, 12, 0.5, "Scale"),
slider(
s.bonusPopup,
"lifetimeMs",
d.bonusPopup,
500,
5000,
100,
"Lifetime (ms)",
),
slider(s.bonusPopup, "riseSpeed", d.bonusPopup, 0, 10, 0.5, "Rise Speed"),
slider(s.bonusPopup, "yOffset", d.bonusPopup, -10, 10, 0.5, "Y Offset"),
slider(
s.bonusPopup,
"outlineWidth",
d.bonusPopup,
0,
5,
0.1,
"Outline Width",
),
color(s.bonusPopup, "colorR", "colorG", "colorB", d.bonusPopup, "Color"),
slider(
s.bonusPopup,
"minScreenScale",
d.bonusPopup,
0,
1,
0.01,
"Min Screen Scale",
),
slider(s.bonusPopup, "cullZoom", d.bonusPopup, 0, 2, 0.05, "Cull Zoom"),
]),
folder("Spawn Overlay", [
slider(
s.spawnOverlay,
"highlightRadius",
d.spawnOverlay,
1,
20,
1,
"Highlight Radius",
),
slider(
s.spawnOverlay,
"highlightAlpha",
d.spawnOverlay,
0,
1,
0.05,
"Highlight Alpha",
),
slider(
s.spawnOverlay,
"selfMinRad",
d.spawnOverlay,
1,
30,
0.5,
"Self Min Radius",
),
slider(
s.spawnOverlay,
"selfMaxRad",
d.spawnOverlay,
5,
50,
0.5,
"Self Max Radius",
),
slider(
s.spawnOverlay,
"mateMinRad",
d.spawnOverlay,
1,
20,
0.5,
"Mate Min Radius",
),
slider(
s.spawnOverlay,
"mateMaxRad",
d.spawnOverlay,
5,
30,
0.5,
"Mate Max Radius",
),
slider(
s.spawnOverlay,
"animSpeed",
d.spawnOverlay,
0.001,
0.02,
0.001,
"Anim Speed",
),
slider(
s.spawnOverlay,
"gradientInnerEdge",
d.spawnOverlay,
0.001,
0.1,
0.001,
"Gradient Inner Edge",
),
slider(
s.spawnOverlay,
"gradientSolidEnd",
d.spawnOverlay,
0.01,
0.5,
0.01,
"Gradient Solid End",
),
]),
folder("Alt View", [
slider(s.altView, "gridFontSize", d.altView, 6, 32, 1, "Grid Font Size"),
toggle(s.altView, "recolorStructures", d.altView, "Recolor Structures"),
]),
folder(
"Light Configs",
Object.entries(s.lightConfigs).map(([name, cfg]) =>
folder(name, [
slider(cfg, "radius", d.lightConfigs[name], 1, 60, 1),
slider(cfg, "intensity", d.lightConfigs[name], 0, 10, 0.1),
]),
),
),
];
}