C# 開發 WPF/Silverlight 動畫與遊戲系列教程（二十六）：通用型角色頭像面板

前言

遊戲開發進入戰鬥系統前夕，須完善精靈基本屬性（生命、魔法、活力、經驗等）並透過介面完美呈現。本節實作通用型角色頭像面板。

精靈基本屬性擴充

public double[] VLife { get; set; }      // [0]當前 [1]最大
public double[] VMagic { get; set; }
public double[] VEnergy { get; set; }
public double VLevel { get; set; }
public double VExperience { get; set; }
public int FaceSign { get; set; }        // 頭像代號
public PKMode PKmode { get; set; }       // PK模式

public enum PKModes { Peace=0, Whole=1, GoodAndEvil=2, Faction=3, Clan=4 }

PK 模式決定滑鼠樣式與是否可攻擊。

精靈頭頂血條

XAML 加入 Border 包裹 Rectangle：

<Border x:Name="LifeBorder" Width="45" Height="5" BorderBrush="Black" BorderThickness="0.6" HorizontalAlignment="Left">
  <Rectangle x:Name="Life" Width="45" Height="5" HorizontalAlignment="Left"/>
</Border>

三類頭像面板分析

• 主角頭像面板（左上）：頭像、名字、等級、PK狀態、生命/魔法/活力值。
• 監視對象頭像面板（中上）：點擊其他精靈顯示，構造較簡，尺寸較小。
• 隊伍頭像面板（左側）：介於兩者間，尺寸最小。

以主角面板為藍本，透過參數配置衍生其他兩種 → 通用型角色頭像面板。

素材準備

面板背景透明 PNG：

PK 圖標對應枚舉值：

頭像分朝向：x_0 右向（主角/隊伍）、x_1 左向（監視對象），Silverlight 暫無單圖水平翻轉方案。

QXRoleFace 控件實作

建立控件，鑲嵌頭像、PK圖標、參數值：

漸層圓角數值條

三條值條（生命/魔法/活力）為漸層圓角矩形。定義三組彩虹筆刷：

LinearGradientBrush[] rainbowBrush = new LinearGradientBrush[3];
private void InitializeRainbowBrush() {
    CreateRainbowBrush(ref rainbowBrush[0], 201,238,206, 60,224,70, 106,234,130); // 血
    CreateRainbowBrush(ref rainbowBrush[1], 192,195,238, 86,104,226, 100,104,233); // 魔
    CreateRainbowBrush(ref rainbowBrush[2], 254,209,172, 255,142,40, 255,177,74);  // 活
}
private void CreateRainbowBrush(ref LinearGradientBrush brush, byte r0,byte g0,byte b0, byte r1,byte g1,byte b1, byte r2,byte g2,byte b2) {
    brush = new LinearGradientBrush();
    brush.StartPoint = new Point(0,0); brush.EndPoint = new Point(0,1);
    brush.GradientStops.Add(new GradientStop(Color.FromRgb(r0,g0,b0), 0));
    brush.GradientStops.Add(new GradientStop(Color.FromRgb(r1,g1,b1), 0.70));
    brush.GradientStops.Add(new GradientStop(Color.FromRgb(r2,g2,b2), 1));
    brush.Freeze();
}

設 RadiusX/Y 圓角，嵌入主角面板完成：

參數化衍生監視對象面板

定義 RoleFaceTypes 枚舉：

public enum RoleFaceTypes { Leader=0, Object=1, Team=2 }

建立時傳入類型：new QXRoleFace(RoleFaceTypes.Object)。構建時依類型調整子控件佈局與隱藏（監視面板少兩條值條、方向尺寸不同）。

執行成果

監視面板顯示模式：滑鼠懸停精靈顯示，離開隱藏，於命中測試邏輯中處理。介面微調代碼繁多但基礎扎實者輕鬆駕馭。統一美術風格，遊戲介面必精美。下節進入戰鬥階段，您準備好了嗎？

出處：https://alamiye010.cnblogs.com/