mirror of
https://github.com/coah80/LegacyVulkEdition.git
synced 2026-07-19 06:58:07 +00:00
124 lines
7.1 KiB
Markdown
124 lines
7.1 KiB
Markdown
# Wave 1 Button Texture Research
|
|
|
|
## Summary
|
|
|
|
The SWF extractions contain **stone/gray button textures** that match the original LCE main menu appearance. The buttons are NOT red/brown -- they are gray cobblestone-textured rectangles with a thin dark outline border and a blue/purple highlighted variant for the selected/hover state.
|
|
|
|
The button system uses a **3-layer composite** approach:
|
|
1. **Norm** (normal state fill) -- gray stone texture
|
|
2. **Over** (hover/selected state fill) -- blue/purple tinted stone texture
|
|
3. **Outline** -- bright yellow selection indicator (rendered as a border around the active button)
|
|
|
|
## CORRECT Button Textures (HD - skinHDGraphics)
|
|
|
|
These are the files we should use. Located in:
|
|
`/Users/cole/Downloads/minecraft_swf_pngs/Minecraft.Client/Common/Media/skinHDGraphics/`
|
|
|
|
### MainMenuButton (Primary Menu Buttons - "Play Game", "Help & Options", etc.)
|
|
|
|
| File | Dimensions | Description | Visual |
|
|
|------|-----------|-------------|--------|
|
|
| `191_FJ_MainMenuButton_Norm.png` | **600x60** | Normal state -- GRAY STONE texture with subtle dark edges. This is the correct stone/gray button. | Gray cobblestone rectangle |
|
|
| `189_MainMenuButton_Over.png` | **600x60** | Hover/selected state -- BLUE/PURPLE tinted stone texture. This is what highlights when selected. | Blue-purple cobblestone rectangle |
|
|
| `190_MainMenuButton_Outline.png` | **606x66** | Selection outline -- BRIGHT YELLOW border (3px larger on each side). Rendered behind the selected button. | Solid yellow rectangle (used as glow/outline mask) |
|
|
|
|
### ListButton (Used in list menus, settings, etc.)
|
|
|
|
| File | Dimensions | Description | Visual |
|
|
|------|-----------|-------------|--------|
|
|
| `185_ListButton_Norm.png` | **600x90** | Normal state -- same gray stone texture, taller than MainMenuButton | Gray cobblestone, 90px tall |
|
|
| `183_ListButton_Over.png` | **600x90** | Hover/selected state -- blue/purple tinted | Blue-purple cobblestone, 90px tall |
|
|
| `184_ListButton_Outline.png` | **606x96** | Selection outline -- yellow border | Yellow rectangle outline |
|
|
|
|
### LayoutButton (Smaller UI buttons)
|
|
|
|
| File | Dimensions | Description | Visual |
|
|
|------|-----------|-------------|--------|
|
|
| `188_Layout_Button_Bmp.png` | **210x60** | Normal state -- gray stone, smaller width | Gray cobblestone, 210px wide |
|
|
| `186_LayoutButton_Over.png` | **210x60** | Hover/selected -- blue/purple tinted | Blue-purple cobblestone |
|
|
| `187_LayoutButton_Outline.png` | **216x66** | Selection outline -- yellow border | Yellow rectangle |
|
|
|
|
### LeaderboardButton (Wide, thinner variant)
|
|
|
|
| File | Dimensions | Description | Visual |
|
|
|------|-----------|-------------|--------|
|
|
| `173_LeaderboardButton_Norm.png` | **1005x60** | Normal state -- gray stone, very wide | Gray cobblestone, 1005px wide |
|
|
| `172_LeaderboardButton_Over.png` | **1005x60** | Hover/selected -- blue/purple tinted | Blue-purple cobblestone |
|
|
|
|
## SD Equivalents (skinGraphics - for reference)
|
|
|
|
Located in: `/Users/cole/Downloads/minecraft_swf_pngs/Minecraft.Client/Common/Media/skinGraphics/`
|
|
|
|
These are 2/3 scale versions (SD resolution):
|
|
|
|
| File | Dimensions | HD Equivalent |
|
|
|------|-----------|---------------|
|
|
| `197_FJ_MainMenuButton_Norm.png` | 400x40 | 191 (HD 600x60) |
|
|
| `195_MainMenuButton_Over.png` | 400x40 | 189 (HD 600x60) |
|
|
| `196_MainMenuButton_Outline.png` | 404x44 | 190 (HD 606x66) |
|
|
| `191_ListButton_Norm.png` | 400x60 | 185 (HD 600x90) |
|
|
| `189_ListButton_Over.png` | 400x60 | 183 (HD 600x90) |
|
|
| `190_ListButton_Outline.png` | 404x64 | 184 (HD 606x96) |
|
|
| `194_Layout_Button_Bmp.png` | 140x40 | 188 (HD 210x60) |
|
|
| `192_LayoutButton_Over.png` | 140x40 | 186 (HD 210x60) |
|
|
| `193_LayoutButton_Outline.png` | 144x44 | 187 (HD 216x66) |
|
|
| `180_LeaderboardButton_Norm.png` | 670x40 | 173 (HD 1005x60) |
|
|
| `179_LeaderboardButton_Over.png` | 670x40 | 172 (HD 1005x60) |
|
|
|
|
## How LCE Renders Buttons (Composite System)
|
|
|
|
The original LCE SWF renders buttons as a **layered composite**:
|
|
|
|
1. **Base layer**: The `_Norm` texture is always drawn (gray stone fill)
|
|
2. **Hover layer**: When selected/hovered, the `_Over` texture replaces or overlays the norm (blue/purple tint)
|
|
3. **Outline layer**: The `_Outline` texture (yellow) is drawn BEHIND the selected button as a highlight border. The outline is 6px wider and 6px taller (3px padding on each side), creating a visible selection ring.
|
|
|
|
The button text is rendered ON TOP of these textures using the SWF label system (white text, with black shadow).
|
|
|
|
## DefineSprite Directories (NOT Useful)
|
|
|
|
The DefineSprite button directories in the `skin/` directory contain only tiny placeholder frames:
|
|
- `DefineSprite_125_fourj.Buttons.FJ_MenuButton_Normal/` -- 30 frames, all 2x2 px
|
|
- `DefineSprite_67_fourj.Buttons.FJ_MenuButton_Small/` -- 30 frames, all 2x2 px
|
|
- `DefineSprite_113_fourj.Buttons.FJ_ListButton_Normal/` -- 30 frames, all 10x16 px
|
|
- `DefineSprite_82_fourj.Buttons.FJ_ListButton_Small/` -- 30 frames, all 6x6 px
|
|
- `DefineSprite_61_FJ_Button_Outline/` -- 4 frames, all 1x1 px
|
|
|
|
These are animation timeline placeholders from the SWF, not usable rendered textures. The actual button appearance comes from the bitmap assets listed above.
|
|
|
|
## Files Already in Project
|
|
|
|
The project at `/Users/cole/Documents/LegacyVulkEdition/Assets/ui/skinHDGraphics/` already has copies of all the HD button textures:
|
|
- `191_FJ_MainMenuButton_Norm.png` (gray stone - normal)
|
|
- `189_MainMenuButton_Over.png` (blue/purple - hover)
|
|
- `190_MainMenuButton_Outline.png` (yellow - selection outline)
|
|
- `185_ListButton_Norm.png`
|
|
- `183_ListButton_Over.png`
|
|
- `184_ListButton_Outline.png`
|
|
- `188_Layout_Button_Bmp.png`
|
|
- `186_LayoutButton_Over.png`
|
|
- `187_LayoutButton_Outline.png`
|
|
- `172_LeaderboardButton_Over.png`
|
|
- `173_LeaderboardButton_Norm.png`
|
|
|
|
## Key Findings
|
|
|
|
1. **The correct button textures ARE the MainMenuButton files** -- `191_FJ_MainMenuButton_Norm.png` is gray/stone colored, matching the original LCE screenshot. These are NOT red/brown.
|
|
|
|
2. **The stone appearance comes from a subtle cobblestone noise pattern** baked into the PNG. Looking at the actual pixels, the `_Norm` textures have a slightly noisy gray pattern (reminiscent of Minecraft cobblestone) with slightly darker edges creating a beveled look.
|
|
|
|
3. **The "Over" (hover) textures have a blue/purple tint** applied to the same cobblestone noise pattern. This creates the highlighted button look when selected with a controller.
|
|
|
|
4. **The yellow "Outline" textures are selection indicators**, not part of the button face itself. They render as a bright border behind the currently selected button.
|
|
|
|
5. **The textures are already present in the project** -- the issue is likely in how they're being rendered/composited in the UI code, not in the texture files themselves.
|
|
|
|
## Recommended Button Rendering Approach
|
|
|
|
For the main menu buttons at 1080p:
|
|
- Use `191_FJ_MainMenuButton_Norm.png` (600x60) as the default button background
|
|
- Use `189_MainMenuButton_Over.png` (600x60) as the hover/selected background
|
|
- Use `190_MainMenuButton_Outline.png` (606x66) drawn BEHIND and CENTERED on the selected button for the selection glow
|
|
- Scale buttons proportionally to fit the target resolution
|
|
- The dark outline visible on the buttons is part of the `_Norm` and `_Over` textures themselves (the edges are darker/beveled)
|