feat(menu): PLAY is one press, and the level cards are photographs
Reaching a game was Singleplayer → pick a level. Reaching a multiplayer game
was Multiplayer → Host Game → wait → pick a level → wait, and the gamemode
dropdown had exactly one entry which set a string nothing read.
PLAY now starts the last map and mode played, and says which — "Akiba Crossing
• Deathmatch" under the button, so pressing it is a promise rather than a leap.
Everything else on the home screen is a detour from that, which is the right
shape for a menu: the common case is a button, not a path. Hosting is one press
and lands in the lobby already hosting; the lobby puts map, mode, players and
start on ONE screen; Enter connects, so typing an address does not then require
reaching for the mouse.
This is the lesson HoYoverse published about Zenless Zone Zero's first months
more loudly than anything else they have written. Their postmortem on the TV
mode names three complaints — it took too long, it sat between the player and
the combat, and there was too much of it early — and 1.2 removed it from the
story entirely rather than shortening it. Time spent BEFORE the thing the
player came for is not neutral, it is a cost.
The cards were a two-stop gradient generated from two colours in a meta file,
whose hover state was `use_hdr = true` — not a visible change on any of them.
They are photographs now, shot by debug/map_preview_capture.gd, which took
three attempts to get right and each attempt is a comment in the file:
- framing each map from OUTSIDE by merging every VisualInstance3D's AABB
produced five tiny dioramas floating on a table, and one solid black
rectangle. That is a minimap, and a minimap is not a photograph.
- standing at a spawn point fixed three maps and left two black: fps_blockout
is genuinely dark and most of its spawns face an unlit wall, and
procedural_arena builds its geometry at runtime so no fixed offset is
reliably inside it.
- so the tool now RENDERS several vantages and scores each result — mean
luminance times its standard deviation, because brightness alone picks the
empty sky and variance alone picks a high-contrast corner of a dark room.
Their product picks a photograph. A black rectangle passes any check that
only asks whether the camera ended up somewhere sensible.
Also fixed, and caught by looking at the screenshot: the selected mode chip was
unreadable. Its glyph is ink on volt, and the theme gave every button a 5 px INK
outline — an ink glyph inside an ink outline is not outlined, it is five pixels
fatter, and on a small chip that is a solid blob. Button labels now carry no
outline at all, which is the same reasoning debug/ui_contrast_check.gd already
encodes: an outline separates a glyph from a backdrop it cannot beat alone, and
a label on a solid chip does not have that problem. The chips keep their heavy
ink border, so nothing about the drawn look changes.
`current_gamemode` is normalised on the way in, because it used to hold a
display string and six callers still pass one. An unrecognised id compares
unequal to GameMode.GUN_GAME and would silently disable that mode's weapon
issuing — half a mode is worse than none.
The menu's background character is the player's OWN skin holding their weapon,
rather than the box-and-capsule mannequin that stood there before.
spawn smoke 0, game modes 30/30, movement 11/11, contrast 108/108, HUD layout
PASS, weapon holds 0, dances 0.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Nicholas Butzke
co-authored by
Claude Opus 5
Claude Opus 5
parent
986179854d
commit
2efc21b18d
@@ -0,0 +1,144 @@
|
||||
extends Button
|
||||
class_name LevelCard
|
||||
|
||||
## One map on the level select: its photograph, its name, and its mode.
|
||||
##
|
||||
## The cards used to be a two-stop gradient generated from `color1` and `color2`
|
||||
## in the map's meta file. That tells a player which card they clicked last time
|
||||
## and nothing at all about the map, which is the entire job of a level select —
|
||||
## and the hover state was `use_hdr = true` on the gradient texture, which is not
|
||||
## a visible change on any of them.
|
||||
##
|
||||
## The preview comes from assets/ui/map_previews/<folder>.png, shot by
|
||||
## debug/map_preview_capture.gd from inside the map. A map with no preview falls
|
||||
## back to its gradient, so nothing breaks for a map that has not been
|
||||
## photographed yet.
|
||||
##
|
||||
## Built on Button rather than TextureButton so it gets focus, keyboard
|
||||
## navigation and the theme's state machinery for free. The image sits inside the
|
||||
## button's border rather than under it, so the border reads as a frame around a
|
||||
## photograph instead of a rectangle behind one.
|
||||
|
||||
const INSET := 5
|
||||
|
||||
var _plate: ColorRect
|
||||
var _label: Label
|
||||
var _mode_label: Label
|
||||
|
||||
|
||||
func setup(title: String, preview_path: String, gradient: Gradient,
|
||||
card_size: Vector2) -> void:
|
||||
custom_minimum_size = card_size
|
||||
clip_contents = true
|
||||
|
||||
# The frame. Papaya at rest, volt on hover, and the fill stays transparent
|
||||
# so the photograph is what the player sees.
|
||||
var clear := Color(0, 0, 0, 0)
|
||||
add_theme_stylebox_override("normal", _frame(clear, UITheme.PAPAYA, 3))
|
||||
add_theme_stylebox_override("hover", _frame(clear, UITheme.VOLT, 5))
|
||||
add_theme_stylebox_override("pressed", _frame(
|
||||
Color(UITheme.VOLT.r, UITheme.VOLT.g, UITheme.VOLT.b, 0.25),
|
||||
UITheme.VOLT, 5))
|
||||
add_theme_stylebox_override("focus", _frame(clear, UITheme.CYAN, 5))
|
||||
add_theme_stylebox_override("disabled", _frame(
|
||||
Color(UITheme.INK.r, UITheme.INK.g, UITheme.INK.b, 0.7),
|
||||
UITheme.DEAD_EDGE, 3))
|
||||
|
||||
if ResourceLoader.exists(preview_path):
|
||||
var shot := TextureRect.new()
|
||||
shot.texture = load(preview_path)
|
||||
shot.expand_mode = TextureRect.EXPAND_IGNORE_SIZE
|
||||
# COVERED, not scaled: a photograph letterboxed inside a card reads as a
|
||||
# thumbnail in a file browser. Filling the card and cropping reads as a
|
||||
# poster, which is what this is.
|
||||
shot.stretch_mode = TextureRect.STRETCH_KEEP_ASPECT_COVERED
|
||||
shot.mouse_filter = Control.MOUSE_FILTER_IGNORE
|
||||
_fill(shot)
|
||||
add_child(shot)
|
||||
else:
|
||||
var grad := TextureRect.new()
|
||||
var tex := GradientTexture2D.new()
|
||||
tex.gradient = gradient
|
||||
tex.width = int(card_size.x)
|
||||
tex.height = int(card_size.y)
|
||||
tex.fill_to = Vector2(1, 1)
|
||||
grad.texture = tex
|
||||
grad.expand_mode = TextureRect.EXPAND_IGNORE_SIZE
|
||||
grad.stretch_mode = TextureRect.STRETCH_SCALE
|
||||
grad.mouse_filter = Control.MOUSE_FILTER_IGNORE
|
||||
_fill(grad)
|
||||
add_child(grad)
|
||||
|
||||
# The name plate: a hard ink band across the bottom rather than a gradient
|
||||
# fade, because the theme is drawn and a soft fade is not.
|
||||
_plate = ColorRect.new()
|
||||
_plate.color = Color(UITheme.INK.r, UITheme.INK.g, UITheme.INK.b, 0.88)
|
||||
_plate.mouse_filter = Control.MOUSE_FILTER_IGNORE
|
||||
_plate.set_anchors_and_offsets_preset(Control.PRESET_BOTTOM_WIDE)
|
||||
_plate.offset_top = -62
|
||||
_plate.offset_left = INSET
|
||||
_plate.offset_right = -INSET
|
||||
_plate.offset_bottom = -INSET
|
||||
add_child(_plate)
|
||||
|
||||
var stack := VBoxContainer.new()
|
||||
stack.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
|
||||
stack.add_theme_constant_override("separation", -2)
|
||||
stack.mouse_filter = Control.MOUSE_FILTER_IGNORE
|
||||
_plate.add_child(stack)
|
||||
|
||||
_label = Label.new()
|
||||
_label.text = title
|
||||
_label.add_theme_font_size_override("font_size", 28)
|
||||
_label.add_theme_color_override("font_color", UITheme.PAPER)
|
||||
_label.add_theme_color_override("font_outline_color", UITheme.INK)
|
||||
_label.add_theme_constant_override("outline_size", 6)
|
||||
_label.horizontal_alignment = HORIZONTAL_ALIGNMENT_CENTER
|
||||
stack.add_child(_label)
|
||||
|
||||
_mode_label = Label.new()
|
||||
_mode_label.add_theme_font_size_override("font_size", 16)
|
||||
_mode_label.add_theme_color_override("font_color", UITheme.PAPER_DIM)
|
||||
_mode_label.add_theme_color_override("font_outline_color", UITheme.INK)
|
||||
_mode_label.add_theme_constant_override("outline_size", 4)
|
||||
_mode_label.horizontal_alignment = HORIZONTAL_ALIGNMENT_CENTER
|
||||
stack.add_child(_mode_label)
|
||||
|
||||
# The label follows the frame, same rule as every other control: hover turns
|
||||
# the frame volt, so the name turns volt with it.
|
||||
mouse_entered.connect(func(): _tint(UITheme.VOLT))
|
||||
mouse_exited.connect(func(): _tint(UITheme.PAPER))
|
||||
focus_entered.connect(func(): _tint(UITheme.CYAN))
|
||||
focus_exited.connect(func(): _tint(UITheme.PAPER))
|
||||
|
||||
|
||||
## What pressing this card will start. Shown under the name so the player is
|
||||
## never guessing which mode the button they are about to press launches.
|
||||
func set_mode_text(text: String) -> void:
|
||||
if _mode_label:
|
||||
_mode_label.text = text
|
||||
|
||||
|
||||
func _tint(c: Color) -> void:
|
||||
if _label:
|
||||
_label.add_theme_color_override("font_color", c)
|
||||
|
||||
|
||||
func _fill(c: Control) -> void:
|
||||
c.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
|
||||
c.offset_left = INSET
|
||||
c.offset_top = INSET
|
||||
c.offset_right = -INSET
|
||||
c.offset_bottom = -INSET
|
||||
|
||||
|
||||
func _frame(fill: Color, border: Color, width: int) -> StyleBoxFlat:
|
||||
var sb := StyleBoxFlat.new()
|
||||
sb.bg_color = fill
|
||||
sb.border_color = border
|
||||
sb.set_border_width_all(width)
|
||||
sb.set_corner_radius_all(5)
|
||||
sb.shadow_color = Color(UITheme.INK.r, UITheme.INK.g, UITheme.INK.b, 0.6)
|
||||
sb.shadow_size = 4
|
||||
sb.shadow_offset = Vector2(5, 5)
|
||||
return sb
|
||||
Reference in New Issue
Block a user