C# 開發 WPF/Silverlight 動畫與遊戲系列教程（三十三）：魔法特效裝飾系統

前言

以凍結魔法為例，講解如何為魔法增加華麗特效裝飾。

裝飾控件 QXDecoration

建立使用者控件 QXDecoration。準備 3 張冰刺素材（4-0, 4-1, 4-2），對應魔法類型設定。隨機抽取增加畫面生動感；若用 Blend 繪製向量圖可任意拉伸變化，效果更逼真。

配置與掛載邏輯

Config.xml 定義裝飾參數：

<Decoration Code="4" Num="3" Duration="2" CenterX="40" CenterY="60"/>

魔法觸發傷害幀時，將裝飾掛載至被攻擊物件腳底：

if (magic.DecorationCode != -1 && canvas.FindName(string.Format("Decoration{0}", enemy.Name)) == null) {
    LoadXElement(...);
    XElement DecorationData = GetXElement(...);
    Random rm = new Random();
    QXDecoration decoration = new QXDecoration() {
        BodySource = getImage(string.Format("Decoration/{0}-{1}.png", magic.DecorationCode, rm.Next((int)DecorationData.Attribute("Num") - 1))),
        CenterX = (double)DecorationData.Attribute("CenterX"),
        CenterY = (double)DecorationData.Attribute("CenterY"),
        X = enemy.X, Y = enemy.Y,
        Duration = (double)DecorationData.Attribute("Duration")
    };
    canvas.RegisterName(string.Format("Decoration{0}", enemy.Name), decoration);
    canvas.Children.Add(decoration);
}

裝飾消失條件：凍結時間歸零或物件死亡。成果圖：

Buff 圖示系統：QXIcon + StackPanel

角色頭像面板顯示 Buff 圖示與持續時間。建立 QXIcon 控件：主體 Image + ToolTip 顯示描述。頭像面板加入水平 StackPanel (ExtraPanel) 作為容器，選 StackPanel 因相容 Silverlight 且動態增減自動排列極佳。

刷新面板時邏輯：

for (int i = 0; i < obj.ExtraTime.Count(); i++) {
    QXIcon icon = ObjectRoleFace.ExtraPanel.FindName(string.Format("Extra{0}", i)) as QXIcon;
    if (obj.ExtraTime[i] > 0) {
        XElement ExtraItem = Super.GetTreeNode(Super.SystemXElement["ExtraItems"], "Item", "Value", i.ToString());
        if (icon == null) {
            icon = new QXIcon() { Width = 16, Height = 16, BodySource = Super.getImage(ExtraItem.Attribute("Src").Value) };
            ObjectRoleFace.ExtraPanel.RegisterName(string.Format("Extra{0}", i), icon);
            ObjectRoleFace.ExtraPanel.Children.Add(icon);
        }
        icon.Tip = string.Format("{0}持續:{1}秒", ExtraItem.Attribute("Name").Value, obj.ExtraTime[i]);
    } else {
        if (icon != null) {
            ObjectRoleFace.ExtraPanel.UnregisterName(string.Format("Extra{0}", i));
            ObjectRoleFace.ExtraPanel.Children.Remove(icon);
            icon = null;
        }
    }
}

StackPanel 自動處理隊列：前一個消失後面自動前補，新增追尾顯示，無需多餘代碼。

角色面板完善告一段落。下節講解地圖編輯器（障礙物設定與切片），現做現賣，時間較久，敬請關注。

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