77 lines
2.8 KiB
Markdown
77 lines
2.8 KiB
Markdown
# Datawhale Honor UI Asset Plan
|
|
|
|
## Runtime Layout Reference
|
|
|
|
- Godot panel script: `res://scenes/ui/DatawhaleHonorRankingPanel.gd`
|
|
- Logical panel size: `1500 x 850`
|
|
- Runtime safe margin: `64 px` total in each viewport axis
|
|
- Current compressed screenshot reference: `1355 x 761`
|
|
- Existing mall UI main frame reference: `1457 x 891`
|
|
- Honor board world prop reference: `160 x 193`
|
|
|
|
## Layout Estimate
|
|
|
|
- Main frame target: `1500 x 850`, 9-slice, warm carved wood outer frame
|
|
- Content margin: `32 px` left/right, `28 px` top/bottom
|
|
- Header: `1436 x 104`, 9-slice wooden plank
|
|
- Tabs row: `1436 x 58`, six to seven tabs, each roughly `188 x 50`
|
|
- Podium area: `1436 x 236`, parchment inset with top-three cards
|
|
- Rank list: `1436 x 240+`, Top10 compact rows, 4-10 visible rows about `44-48 px` each
|
|
- Footer: `1436 x 72`, parchment footer strip with reward button
|
|
|
|
## Source Generation Strategy
|
|
|
|
Generate sources on pure magenta background `#ff00ff`, no text, no fake data, no full scenic background.
|
|
Use BiRefNet cutout first, then trim/export components.
|
|
Text, numbers, ranking data, category labels, and user names must remain Godot-rendered.
|
|
|
|
## Required Components
|
|
|
|
### Nine-slice Surfaces
|
|
|
|
- `honor_panel_wood_frame.png`
|
|
- Target use: main `StyleBoxTexture`
|
|
- Source component size: about `1500 x 850`
|
|
- Suggested texture margins: `72, 72, 72, 72`
|
|
- `honor_parchment_panel.png`
|
|
- Target use: podium/list/footer inset panels
|
|
- Source component size: about `1200 x 300`
|
|
- Suggested texture margins: `42, 42, 42, 42`
|
|
- `honor_header_plank.png`
|
|
- Target use: header panel
|
|
- Source component size: about `1436 x 120`
|
|
- Suggested texture margins: `64, 34, 64, 34`
|
|
- `honor_tab_normal.png`
|
|
- Target use: inactive category tab
|
|
- Source component size: about `220 x 62`
|
|
- Suggested texture margins: `34, 24, 34, 24`
|
|
- `honor_tab_active.png`
|
|
- Target use: active category tab
|
|
- Source component size: about `220 x 62`
|
|
- Suggested texture margins: `34, 24, 34, 24`
|
|
- `honor_claim_button.png`
|
|
- Target use: reward button
|
|
- Source component size: about `330 x 68`
|
|
- Suggested texture margins: `40, 24, 40, 24`
|
|
|
|
### Fixed Icons
|
|
|
|
- `honor_close_button.png`: `64 x 64`
|
|
- `honor_whale_crest.png`: `96 x 96`
|
|
- `honor_medal_gold.png`: `72 x 72`
|
|
- `honor_medal_silver.png`: `72 x 72`
|
|
- `honor_medal_bronze.png`: `72 x 72`
|
|
- `honor_icon_score_globe.png`: `40 x 40`
|
|
- `honor_icon_contribution_whale.png`: `40 x 40`
|
|
- `honor_icon_repo_chest.png`: `40 x 40`
|
|
- `honor_icon_star.png`: `40 x 40`
|
|
- `honor_icon_reward_gem.png`: `40 x 40`
|
|
- `honor_icon_gift.png`: `44 x 44`
|
|
|
|
## Visual Direction
|
|
|
|
- Cozy WhaleTown guild entrance style, not web dashboard.
|
|
- Materials: carved oak, brass corner caps, cream parchment, soft blue enamel accents.
|
|
- Pixel-friendly painterly UI, readable at runtime scale.
|
|
- Keep corners modest and practical for dense ranking UI.
|