erik/acdream
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat(D.2b): retail 3-slice vital bars + headless mockup verifier

Browse source 
Render each vital bar as a horizontal 3-slice from the real retail
RenderSurface sprites (authoritative ids from the vitals LayoutDesc
0x21000014 via dump-vitals-bars): a fixed-width bevelled left-cap, a
stretched glassy-gradient middle, and a fixed-width right-cap. The
empty back track draws full width; the coloured front fill grows from
the left to the value (the track owns the right end, so the fill omits
its own right-cap). Replaces the flat single-sprite Alphablend overlay
that read as the old UI - this is the bordered gradient look from the
retail screenshot (red HP / gold stamina / blue mana).

UiMeter gains the six 9-slice ids (BackLeft/Tile/Right +
FrontLeft/Tile/Right) and a DrawHBar helper; MarkupDocument parses the
backleft/backtile/backright/frontleft/fronttile/frontright attrs;
vitals.xml carries the 18 per-vital ids. The temporary
ACDREAM_BAR_PROVEOUT component grid is removed.

Adds AcDream.Cli render-vitals-mockup: a headless ImageSharp composite
that assembles the bars with the SAME DrawHBar logic, so the sprite
assembly can be verified by eye (Read the PNG) without launching the
client + server - the fast UI-iteration loop the user asked for.
export-ui-sprite dumps a single RenderSurface to PNG for HTML mockups.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Erik 2026-06-14 21:40:11 +02:00
parent 84630517e3
commit 1453ff7da2
7 changed files with 242 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/AcDream.App/UI/MarkupDocument.cs
View file

@ -67,8 +67,12 @@ public static class MarkupDocument
Label = () => (cur(), max()) is (uint c, uint m) ? $"{c}/{m}" : null,
Anchors = Anchor((string?)el.Attribute("anchor")),
SpriteResolve = resolve,
BackSpriteId = Hex((string?)el.Attribute("back")),
FrontSpriteId = Hex((string?)el.Attribute("front")),
BackLeft = Hex((string?)el.Attribute("backleft")),
BackTile = Hex((string?)el.Attribute("backtile")),
BackRight = Hex((string?)el.Attribute("backright")),
FrontLeft = Hex((string?)el.Attribute("frontleft")),
FrontTile = Hex((string?)el.Attribute("fronttile")),
FrontRight = Hex((string?)el.Attribute("frontright")),
});
break;
// future element kinds (label, button, image) added here

74
src/AcDream.App/UI/UiMeter.cs
View file

@ -25,12 +25,27 @@ public sealed class UiMeter : UiElement
public Vector4 LabelColor { get; set; } = new(1f, 1f, 1f, 1f);
/// <summary>Resolver from a RenderSurface DataId to (GL handle, w, h). When set
/// with Back/Front sprite ids, the bar draws the retail sprites instead of solid color.</summary>
/// with the 9-slice ids below, the bar draws the retail sprites instead of solid color.</summary>
public Func<uint, (uint tex, int w, int h)>? SpriteResolve { get; set; }
/// <summary>Empty-track sprite (drawn full width). 0 = none.</summary>
public uint BackSpriteId { get; set; }
/// <summary>Colored-fill sprite (drawn cropped to the fill fraction). 0 = none.</summary>
public uint FrontSpriteId { get; set; }
// Retail vital bars are a horizontal 3-slice: a fixed-width bevelled left-cap,
// a stretched gradient middle, and a fixed-width right-cap. The "back" slice is
// the empty track (drawn full width); the "front" slice is the coloured fill
// (drawn from the left, grown to the fill fraction — the track owns the right
// end, so the fill omits its own right-cap). Ids come from the vitals LayoutDesc
// (0x21000014) via tools/dump-vitals-bars; 0 = none.
/// <summary>Empty-track left-cap RenderSurface id.</summary>
public uint BackLeft { get; set; }
/// <summary>Empty-track middle (stretched gradient) RenderSurface id.</summary>
public uint BackTile { get; set; }
/// <summary>Empty-track right-cap RenderSurface id.</summary>
public uint BackRight { get; set; }
/// <summary>Coloured-fill left-cap RenderSurface id.</summary>
public uint FrontLeft { get; set; }
/// <summary>Coloured-fill middle (stretched gradient) RenderSurface id.</summary>
public uint FrontTile { get; set; }
/// <summary>Coloured-fill right-cap RenderSurface id.</summary>
public uint FrontRight { get; set; }
public UiMeter() { ClickThrough = true; }
@ -49,19 +64,13 @@ public sealed class UiMeter : UiElement
float? pct = Fill();
float p = pct is float pf ? (pf < 0f ? 0f : pf > 1f ? 1f : pf) : 0f;
if (SpriteResolve is { } resolve && (BackSpriteId != 0 || FrontSpriteId != 0))
if (SpriteResolve is { } resolve && (BackLeft != 0 || BackTile != 0 || FrontTile != 0))
{
// Retail bar: empty track full width, colored fill cropped to p (left→right).
if (BackSpriteId != 0)
{
var (bt, _, _) = resolve(BackSpriteId);
if (bt != 0) ctx.DrawSprite(bt, 0, 0, Width, Height, 0, 0, 1, 1, Vector4.One);
}
if (FrontSpriteId != 0 && pct is not null && p > 0f)
{
var (ft, _, _) = resolve(FrontSpriteId);
if (ft != 0) ctx.DrawSprite(ft, 0, 0, Width * p, Height, 0, 0, p, 1, Vector4.One);
}
// Empty track: full-width 3-slice (left-cap + stretched gradient + right-cap).
DrawHBar(ctx, resolve, BackLeft, BackTile, BackRight, 0, 0, Width, Height, withRightCap: true);
// Coloured fill: grows from the left to the value, no right-cap of its own.
if (pct is not null && p > 0f)
DrawHBar(ctx, resolve, FrontLeft, FrontTile, FrontRight, 0, 0, Width * p, Height, withRightCap: false);
}
else
{
@ -83,4 +92,35 @@ public sealed class UiMeter : UiElement
ctx.DrawString(label, tx, ty, LabelColor);
}
}
/// <summary>
/// Draws a horizontal 3-slice into <paramref name="w"/> x <paramref name="h"/> at
/// (<paramref name="x"/>,<paramref name="y"/>): a native-width left-cap, a stretched
/// middle, and (when <paramref name="withRightCap"/>) a native-width right-cap. Caps
/// are clamped so a narrow bar never overdraws. A 0 id skips that slice.
/// </summary>
private static void DrawHBar(
UiRenderContext ctx, Func<uint, (uint tex, int w, int h)> resolve,
uint leftId, uint tileId, uint rightId,
float x, float y, float w, float h, bool withRightCap)
{
if (w <= 0f) return;
var (lt, lw, _) = resolve(leftId);
var (tt, _, _) = resolve(tileId);
var (rt, rw, _) = resolve(rightId);
float rcap = withRightCap && rt != 0 ? MathF.Min(rw, w) : 0f;
float lcap = lt != 0 ? MathF.Min(lw, w - rcap) : 0f;
if (lt != 0 && lcap > 0f)
ctx.DrawSprite(lt, x, y, lcap, h, 0, 0, 1, 1, Vector4.One);
float midX = x + lcap;
float midW = w - lcap - rcap;
if (tt != 0 && midW > 0f)
ctx.DrawSprite(tt, midX, y, midW, h, 0, 0, 1, 1, Vector4.One);
if (rcap > 0f)
ctx.DrawSprite(rt, x + w - rcap, y, rcap, h, 0, 0, 1, 1, Vector4.One);
}
}

9
src/AcDream.App/UI/assets/vitals.xml
View file

@ -1,5 +1,8 @@
<panel id="acdream.vitals" x="10" y="30" w="220" h="96" resize="x">
<meter id="health" x="8" y="24" w="200" h="14" fill="{HealthPercent}" cur="{HealthCurrent}" max="{HealthMax}" color="#FFC70D0D" anchor="left,top,right" back="0x06005F3C" front="0x06005F3D"/>
<meter id="stamina" x="8" y="44" w="200" h="14" fill="{StaminaPercent}" cur="{StaminaCurrent}" max="{StaminaMax}" color="#FFD49E1F" anchor="left,top,right" back="0x06005F3E" front="0x06005F3F"/>
<meter id="mana" x="8" y="64" w="200" h="14" fill="{ManaPercent}" cur="{ManaCurrent}" max="{ManaMax}" color="#FF1F33D9" anchor="left,top,right" back="0x06005F40" front="0x06005F41"/>
<meter id="health" x="8" y="24" w="200" h="14" fill="{HealthPercent}" cur="{HealthCurrent}" max="{HealthMax}" color="#FFC70D0D" anchor="left,top,right"
backleft="0x06001141" backtile="0x06001140" backright="0x0600113F" frontleft="0x06001131" fronttile="0x06001132" frontright="0x06001133"/>
<meter id="stamina" x="8" y="44" w="200" h="14" fill="{StaminaPercent}" cur="{StaminaCurrent}" max="{StaminaMax}" color="#FFD49E1F" anchor="left,top,right"
backleft="0x06001147" backtile="0x06001146" backright="0x06001145" frontleft="0x06001137" fronttile="0x06001138" frontright="0x06001139"/>
<meter id="mana" x="8" y="64" w="200" h="14" fill="{ManaPercent}" cur="{ManaCurrent}" max="{ManaMax}" color="#FF1F33D9" anchor="left,top,right"
backleft="0x06001144" backtile="0x06001143" backright="0x06001142" frontleft="0x06001134" fronttile="0x06001135" frontright="0x06001136"/>
</panel>

8
src/AcDream.Cli/AcDream.Cli.csproj
View file

@ -9,6 +9,14 @@
<ItemGroup>
<PackageReference Include="Chorizite.DatReaderWriter" Version="2.1.7" />
<!-- render-vitals-mockup: SurfaceDecoder (Core) + ImageSharp for a headless
PNG composite of the retail vital bars, so the 3-slice assembly can be
verified without launching the client. -->
<PackageReference Include="SixLabors.ImageSharp" Version="3.1.12" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\AcDream.Core\AcDream.Core.csproj" />
</ItemGroup>
</Project>

26
src/AcDream.Cli/Program.cs
View file

@ -1,4 +1,5 @@
using System.Diagnostics;
using AcDream.Cli;
using DatReaderWriter;
using DatReaderWriter.DBObjs;
using DatReaderWriter.Enums;
@ -18,6 +19,31 @@ if (args.Length >= 1 && args[0] == "dump-vitals-bars")
return DumpVitalsBars(dvbDatDir);
}
if (args.Length >= 1 && args[0] == "render-vitals-mockup")
{
string? rvmDatDir = args.ElementAtOrDefault(1) ?? Env.GetEnvironmentVariable("ACDREAM_DAT_DIR");
string rvmOut = args.ElementAtOrDefault(2) ?? "vitals-mockup.png";
if (string.IsNullOrWhiteSpace(rvmDatDir))
{
Console.Error.WriteLine("usage: AcDream.Cli render-vitals-mockup <dat-directory> [out.png]");
return 2;
}
return VitalsMockup.Render(rvmDatDir, rvmOut);
}
if (args.Length >= 1 && args[0] == "export-ui-sprite")
{
string? eusDatDir = args.ElementAtOrDefault(1) ?? Env.GetEnvironmentVariable("ACDREAM_DAT_DIR");
string? eusId = args.ElementAtOrDefault(2);
string eusOut = args.ElementAtOrDefault(3) ?? "sprite.png";
if (string.IsNullOrWhiteSpace(eusDatDir) || string.IsNullOrWhiteSpace(eusId))
{
Console.Error.WriteLine("usage: AcDream.Cli export-ui-sprite <dat-directory> <0xId> [out.png]");
return 2;
}
return VitalsMockup.ExportSprite(eusDatDir, eusId, eusOut);
}
// Phase 0: open the four AC dat files and print how many of each asset type live in them.
// This proves DatReaderWriter works on our retail dats and gives us a baseline inventory
// to compare against what a future renderer needs.

129
src/AcDream.Cli/VitalsMockup.cs Normal file
View file

@ -0,0 +1,129 @@
using AcDream.Core.Textures;
using DatReaderWriter;
using DatReaderWriter.DBObjs;
using DatReaderWriter.Options;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.PixelFormats;
using SixLabors.ImageSharp.Processing;
namespace AcDream.Cli;
/// <summary>
/// Headless PNG preview of the retail vital bars. Loads the real RenderSurface
/// sprites from the dats and composites them with the SAME horizontal 3-slice
/// logic the in-client <c>UiMeter.DrawHBar</c> uses (fixed-width bevelled caps +
/// a stretched gradient middle; the empty "back" track full width, the coloured
/// "front" fill grown from the left to the value). This lets the bar assembly be
/// verified by eye without launching the client + connecting to the server.
/// Bar sprite ids come from the vitals LayoutDesc (0x21000014) via dump-vitals-bars.
/// </summary>
public static class VitalsMockup
{
private readonly record struct Vital(
string Name, uint BackL, uint BackT, uint BackR, uint FrontL, uint FrontT, uint FrontR);
private static readonly Vital[] Vitals =
{
new("health", 0x06001141, 0x06001140, 0x0600113F, 0x06001131, 0x06001132, 0x06001133),
new("stamina", 0x06001147, 0x06001146, 0x06001145, 0x06001137, 0x06001138, 0x06001139),
new("mana", 0x06001144, 0x06001143, 0x06001142, 0x06001134, 0x06001135, 0x06001136),
};
private static readonly float[] Fills = { 1.0f, 0.6f, 0.25f };
private const int BarW = 200, BarH = 14, PadX = 10, PadY = 10, GapY = 10, ColGap = 16, Zoom = 3;
public static int Render(string datDir, string outPath)
{
if (!Directory.Exists(datDir)) { Console.Error.WriteLine($"error: directory not found: {datDir}"); return 2; }
using var dats = new DatCollection(datDir, DatAccessType.Read);
int cols = Fills.Length;
int canvasW = PadX * 2 + cols * BarW + (cols - 1) * ColGap;
int canvasH = PadY * 2 + Vitals.Length * BarH + (Vitals.Length - 1) * GapY;
// Retail vitals window backdrop is a dark translucent panel; pick a neutral
// dark gray so the bevels + gradient read clearly.
using var canvas = new Image<Rgba32>(canvasW, canvasH, new Rgba32(38, 38, 44, 255));
for (int vi = 0; vi < Vitals.Length; vi++)
{
var v = Vitals[vi];
using var bl = Load(dats, v.BackL);
using var bt = Load(dats, v.BackT);
using var br = Load(dats, v.BackR);
using var fl = Load(dats, v.FrontL);
using var ft = Load(dats, v.FrontT);
using var fr = Load(dats, v.FrontR);
Console.WriteLine($"{v.Name,-8} back[{bl.Width}x{bl.Height} {bt.Width}x{bt.Height} {br.Width}x{br.Height}] " +
$"front[{fl.Width}x{fl.Height} {ft.Width}x{ft.Height} {fr.Width}x{fr.Height}]");
int y = PadY + vi * (BarH + GapY);
for (int ci = 0; ci < Fills.Length; ci++)
{
int x = PadX + ci * (BarW + ColGap);
DrawHBar(canvas, bl, bt, br, x, y, BarW, BarH, withRightCap: true);
int fw = (int)(BarW * Fills[ci]);
if (fw > 0)
DrawHBar(canvas, fl, ft, fr, x, y, fw, BarH, withRightCap: false);
}
}
canvas.Mutate(c => c.Resize(canvasW * Zoom, canvasH * Zoom, KnownResamplers.NearestNeighbor));
canvas.SaveAsPng(outPath);
Console.WriteLine($"wrote {outPath} ({canvasW * Zoom}x{canvasH * Zoom}; rows=vitals, cols=100%/60%/25%)");
return 0;
}
public static int ExportSprite(string datDir, string idText, string outPath)
{
if (!Directory.Exists(datDir)) { Console.Error.WriteLine($"error: directory not found: {datDir}"); return 2; }
uint id = ParseHex(idText);
if (id == 0) { Console.Error.WriteLine($"error: bad id '{idText}'"); return 2; }
using var dats = new DatCollection(datDir, DatAccessType.Read);
using var img = Load(dats, id);
img.SaveAsPng(outPath);
Console.WriteLine($"wrote {outPath} (0x{id:X8} {img.Width}x{img.Height})");
return 0;
}
/// <summary>Replicates UiMeter.DrawHBar: native-width left-cap, stretched middle,
/// optional native-width right-cap; caps clamped so a narrow bar never overdraws.</summary>
private static void DrawHBar(
Image<Rgba32> canvas, Image<Rgba32> left, Image<Rgba32> tile, Image<Rgba32> right,
int x, int y, int w, int h, bool withRightCap)
{
if (w <= 0) return;
int rcap = withRightCap ? Math.Min(right.Width, w) : 0;
int lcap = Math.Min(left.Width, w - rcap);
if (lcap > 0) Blit(canvas, left, x, y, lcap, h);
int midX = x + lcap, midW = w - lcap - rcap;
if (midW > 0) Blit(canvas, tile, midX, y, midW, h);
if (rcap > 0) Blit(canvas, right, x + w - rcap, y, rcap, h);
}
private static void Blit(Image<Rgba32> canvas, Image<Rgba32> src, int x, int y, int dw, int dh)
{
if (dw <= 0 || dh <= 0) return;
using var s = src.Clone(c => c.Resize(dw, dh));
canvas.Mutate(c => c.DrawImage(s, new Point(x, y), 1f));
}
private static Image<Rgba32> Load(DatCollection dats, uint id)
{
var rs = dats.Get<RenderSurface>(id);
if (rs is null) { Console.Error.WriteLine($" missing RenderSurface 0x{id:X8}"); return new Image<Rgba32>(1, 1); }
var dt = SurfaceDecoder.DecodeRenderSurface(rs);
return Image.LoadPixelData<Rgba32>(dt.Rgba8, dt.Width, dt.Height);
}
private static uint ParseHex(string s)
{
s = s.Trim();
if (s.StartsWith("0x", StringComparison.OrdinalIgnoreCase)) s = s[2..];
return uint.TryParse(s, System.Globalization.NumberStyles.HexNumber,
System.Globalization.CultureInfo.InvariantCulture, out var v) ? v : 0u;
}
}