WPF/Silverlight 遊戲開發教程 (2)：CompositionTarget 渲染幀動畫 — 固定頻率、全域同步、需手動插值

CompositionTarget.Rendering 機制

WPF/Silverlight 每幀渲染完成後觸發 CompositionTarget.Rendering 事件，頻率鎖定於螢幕刷新率 (通常 60Hz，約 16.6ms/幀)。間隔不可人為調整，適合需與渲染管線嚴格同步的全域邏輯：攝影機平滑跟隨、大量粒子系統、物理模擬固定時間步長。

完整實作：滑鼠點擊移動方塊

Rectangle rect;
double speed = 1; // 像素/幀
Point moveTo;

public Window1() // 原文 Window1，實為第 2 章視窗
{
    InitializeComponent();
    rect = new Rectangle { Fill = Brushes.Red, Width = 50, Height = 50, RadiusX = 5, RadiusY = 5 };
    Carrier.Children.Add(rect);
    Canvas.SetLeft(rect, 0); Canvas.SetTop(rect, 0);

    CompositionTarget.Rendering += Timer_Tick; // 註冊渲染幀事件
}

private void Carrier_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    moveTo = e.GetPosition(Carrier);
}

private void Timer_Tick(object sender, EventArgs e)
{
    double x = Canvas.GetLeft(rect);
    double y = Canvas.GetTop(rect);
    Canvas.SetLeft(rect, x + (x < moveTo.X ? speed : -speed));
    Canvas.SetTop(rect, y + (y < moveTo.Y ? speed : -speed));
}

核心缺陷：速度分解與抖動問題

程式碼將 X、Y 速度同設為 speed=1，導致：

• 斜向移動實際速度為直向的 √2 倍，視覺「斜向更快」
• 接近目標時 X、Y 獨立判斷方向，造成終點附近「抖動」 (來回橫跳)

正確做法：向量標準化分解

private void Timer_Tick(object sender, EventArgs e)
{
    double x = Canvas.GetLeft(rect);
    double y = Canvas.GetTop(rect);
    double dx = moveTo.X - x;
    double dy = moveTo.Y - y;
    double dist = Math.Sqrt(dx*dx + dy*dy);

    if (dist < speed) { // 到達目標
        Canvas.SetLeft(rect, moveTo.X);
        Canvas.SetTop(rect, moveTo.Y);
        return;
    }

    double vx = dx / dist * speed;
    double vy = dy / dist * speed;
    Canvas.SetLeft(rect, x + vx);
    Canvas.SetTop(rect, y + vy);
}

計算單位向量乘以速度，確保全向等速、平滑停止。此為向量數學在遊戲移動中的最基礎應用。

CompositionTarget vs Storyboard 對比

下章預告

下一章介紹DispatcherTimer：保留 CompositionTarget「每幀更新」特性，但間隔可調、優先級可控，成為角色個體邏輯 (AI、幀動畫、狀態機) 的首選引擎。

1. 上一篇文章： WPF/Silverlight 遊戲開發教程 (3)：三大動畫引擎對比 — DispatcherTimer 幀動畫、參數可控、適用於角色個體邏輯
2. 下一篇文章： WPF/Silverlight 遊戲開發教程 (1)：Storyboard 時間軸動畫入門 — 聲明式屬性漸變、Canvas 絕對定位、動態資源註冊

關於C#

C# 泛型實戰：LinkedList 雙向鏈表與可空類型完整指南

一、LinkedList<T>：高效插入刪除的雙

C# 開發 WPF/Silverlight 動畫與遊戲系列教程（四十）：移植至 Silverlight 實戰（下）

新增功能 1. 音樂與音效物件 public static

.NET 防止表單重複提交的五大經典策略與實作指南

表單重複提交是 Web 應用程式常見問題，可能導致重複扣款、

IIS 7.5 解決「偵測到在整合式管線模式下不適用的 ASP.NET 設定」

錯誤訊息 HTTP 錯誤 500.22 - Internal