碼上歡樂
相關內容    簡體    繁體

.NET實時2D渲染入門·動態時鍾

本文轉載自   查看原文   2019-10-23 08:50   2452 

.NET實時2D渲染入門·動態時鍾

從小以來“坦克大戰”、“魂斗羅”等游戲總令我魂牽夢繞。這些游戲的基礎就是2D實時渲染，以前沒意識，直到后來找到了Direct2D。我的2D實時渲染入門，是從這個動態時鍾開始的。

本文將使用我寫的“准游戲引擎”FlysEngine完成。它是對Direct2D和.NET庫SharpDX淺層次的封裝，隱藏了一些細節，簡化了一些調用。同時還保留了Direct2D的原汁原味。

本文的最終效果如下：

繪制動態時鍾

要繪制動態時鍾，需要有以下步驟：

  • 創建一個實時渲染窗口；
  • 畫一個圓圈，表示時鍾邊緣；
  • 在圓圈內等距離畫上60個分鍾刻度，其中12個比較長，為小時刻度；
  • 用不同粗細、不同長短、不同顏色的畫筆畫上時鍾、分鍾和秒鍾。

實時渲染窗口

using var form = new RenderWindow { ClientSize = new System.Drawing.Size(400, 400) };
form.Draw += (RenderWindow sender, DeviceContext ctx) =>
{
	ctx.Clear(Color.CornflowerBlue);
};
RenderLoop.Run(form, () => form.Render(1, PresentFlags.None));

其中form.Render(1, ...)中的1表示垂直同步，玩過游戲的可能見過，這個設置可以在盡可能節省CPU/GPU資源的同時得到最佳的呈現效果。

熟悉glut的肯定知道，這種寫法和glut非常像，執行效果如下：

注意：

RenderWindow其實繼承於System.Windows.Forms.Form，確實是基於“WinForm”，但實質卻和“拖控件”完全不一樣。“控件”是模態的，本身有狀態，但Direct2D是實時渲染，界面完全沒有狀態，需要動態每隔一個垂直同步時間（如1/60秒）全部清除，然后再重繪一次。

畫圓圈

RenderWindow簡單封裝了Direct2D，可以直接使用里面的XResource屬性來訪問DirectX相關資源，包括：

  • Direct2D Factory
  • Direct2D DeviceContext
  • DirectWrite Factory
  • Transition Library 動畫庫
  • Animation Manager 動畫管理器
  • SwapChain
  • WIC ImagingFactory2

除此之外，還進一步封裝了以下組件，以簡化圖片、文字、顏色等調用和渲染：

  • TextFormatManager 簡化創建TextFormat
  • BitmapManager 簡化加載圖片
  • TextLayoutManager 簡化創建TextLayout
  • .GetColor(color) 方法，簡化使用顏色

這里我們將使用Direct2D DeviceContext，這在COM中的名字叫ID2D1DeviceContext。

回到Draw事件，它包含兩個參數：(RenderWindow sender, DeviceContext ctx)：

  • 其中sender就是原窗口，可以用外層的form代替;
  • ctx參數就是D2D繪圖的核心，我們將圍繞它進行繪制。

要畫圓圈，得先算出一個能放下一個完整圓的半徑，並留下少許空間（5）：

float r = Math.Min(ctx.Size.Width, ctx.Size.Height) / 2 - 5

然后調用ctx參數，使用黑色畫筆將圓畫出來，線寬為1/40半徑：

ctx.DrawEllipse(new Ellipse(Vector2.Zero, r, r), sender.XResource.GetColor(Color.Black), r/40);

執行效果如下：

可見圓只顯示了四分之一，要顯示完整的圓，必須將其“移動”到屏幕正中心，我們可以調整圓的參數，將中心點從Vector2.Zero改成new Vector2(ctx.Size.Width/2, ctx.Size.Height/2)，或者用更簡單的辦法，通過矩陣變換：

ctx.Transform = Matrix3x2.Translation(ctx.Size.Width/2, ctx.Size.Height/2);

注意：“矩陣變換”這幾個字聽起來總令人聯想到“高數”，挺嚇人的。但實際是並不是非要知道線性代碼基礎才能使用。首先只要知道它能完成任務即可，之后再慢慢理解也行。

有多種方法可以完成像平移這樣的任務，但通常來說使用“矩陣變換”更簡單，更不傷腦筋，尤其是多個對象，進行旋轉、扭曲等復雜、或者組合操作等，這些操作如果不使用“矩陣變換”會非常非常麻煩。

這樣，即可將該圓“平移”至屏幕正中心，執行效果如下：

Draw方法完整代碼：

ctx.Clear(Color.CornflowerBlue);
float r = Math.Min(ctx.Size.Width, ctx.Size.Height) / 2 - 5;
ctx.Transform = Matrix3x2.Translation(ctx.Size.Width/2, ctx.Size.Height/2);
ctx.DrawEllipse(new Ellipse(Vector2.Zero, r, r), sender.XResource.GetColor(Color.Black), r/40);

畫刻度

刻度就是線條，共60-12=48個分鍾刻度和12個時鍾刻度，其中分鍾刻度較短，時鍾刻度較長。

刻度的一端是沿着圓的邊緣，另一端朝着圓的中心，邊緣位置可以通過sin/cos等三角函數計算出來……呃，可能早忘記了，不怕，我們有“矩陣變換”。

利用矩陣變換，可以非常容易地完成這項工作：

for (var i = 0; i < 60; ++i)
{
	ctx.Transform = 
		Matrix3x2.Rotation(MathF.PI * 2 / 60 * i) * 
		Matrix3x2.Translation(ctx.Size.Width/2, ctx.Size.Height/2);
	ctx.DrawLine(new Vector2(r-r/30,0), new Vector2(r,0), form.XResource.GetColor(Color.Black),r/200);
}

執行效果如下：

注意：此處用到了矩陣乘法：

Matrix3x2.Rotation(MathF.PI * 2 / 60 * i) * 
Matrix3x2.Translation(ctx.Size.Width/2, ctx.Size.Height/2);

注意乘法是有順序的，這符合空間邏輯，可以這樣想想，先旋轉再平移，和先平移再旋轉顯然是有區別的。

然后再加上長時鍾，只需在原代碼基礎上加個判斷即可，如果i % 5 == 0，則為長時鍾，粗細設置為r/100：

for (var i = 0; i < 60; ++i)
{
	ctx.Transform =
		Matrix3x2.Rotation(MathF.PI * 2 / 60 * i) *
		Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2);
	if (i % 5 == 0)
	{   // 時鍾
		ctx.DrawLine(new Vector2(r - r / 15, 0), new Vector2(r, 0), form.XResource.GetColor(Color.Black), r/100);
	}
	else
	{   // 分鍾
		ctx.DrawLine(new Vector2(r - r / 30, 0), new Vector2(r, 0), form.XResource.GetColor(Color.Black), r/200);
	}
}

執行效果如下：

畫時、分、秒鍾

時、分、秒鍾是動態的，必須隨着時間變化而變化；其中時鍾最短、最粗，分鍾次之，秒鍾最細長，然后時鍾必須疊在分鍾和秒鍾之上。

用代碼實現，可以先畫秒鍾、再畫分鍾和時鍾，即可實現重疊效果。還可以通過設置一定的透明度和不同的顏色，可以讓它們區分更明顯。

獲取當前時間可以通過DateTime.Now來完成，DateTime提供了時、分、秒和毫秒，可以輕松地計算各個指針應該指向的位置。

畫秒鍾的代碼如下，顯示為藍色，長度為0.9倍半徑，寬度為1/50半徑：

// 秒鍾
ctx.Transform = 
	Matrix3x2.Rotation(MathF.PI * 2 / 60 * time.Second) * 
	Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2);
ctx.DrawLine(Vector2.Zero, new Vector2(0,-r*0.9f), form.XResource.GetColor(Color.Blue), r/50);

效果如下：

依法炮制，可以畫出分鍾和時鍾：

// 分鍾
ctx.Transform =
	Matrix3x2.Rotation(MathF.PI * 2 / 60 * time.Minute) *
	Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2);
ctx.DrawLine(Vector2.Zero, new Vector2(0, -r * 0.8f), form.XResource.GetColor(Color.Green), r / 35);

// 時鍾
ctx.Transform =
	Matrix3x2.Rotation(MathF.PI * 2 / 12 * time.Hour) *
	Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2);
ctx.DrawLine(Vector2.Zero, new Vector2(0, -r * 0.7f), form.XResource.GetColor(Color.Red), r / 20);

效果如下：

優化

其實到了這一步，已經是一個完整的，可運行的時鍾了，但還能再優化優化。

半透明時鍾

首先可以設置一定的半透明度，使三根鍾重疊時不顯得很突兀，代碼如下：

var blue = new Color(red: 0.0f, green: 0.0f, blue: 1.0f, alpha: 0.7f);
ctx.DrawLine(Vector2.Zero, new Vector2(0,-r*0.9f), form.XResource.GetColor(blue), r/50);

只需將原本的Color.Blue等顏色改成自定義，並且指定alpha參數為0.7（表示70%半透明）即可，效果如下：

時鍾兩端的尖角或者圓角

Direct2D可以很方便地控制繪制的線段兩端，有許多風格可供選擇，具體可以參見CapStyle枚舉：

public enum CapStyle
{
	/// <unmanaged>D2D1_CAP_STYLE_FLAT</unmanaged>
	Flat,
	/// <unmanaged>D2D1_CAP_STYLE_SQUARE</unmanaged>
	Square,
	/// <unmanaged>D2D1_CAP_STYLE_ROUND</unmanaged>
	Round,
	/// <unmanaged>D2D1_CAP_STYLE_TRIANGLE</unmanaged>
	Triangle
}

此處我們將使用Round用於做中心點，用Triangle用於做針尖，首先創建一個StrokeStyle對象：

using var clockLineStyle = new StrokeStyle(form.XResource.Direct2DFactory, new StrokeStyleProperties 
{ 
	StartCap = CapStyle.Round, 
	EndCap = CapStyle.Triangle, 
});

然后在調用ctx.DrawLine()時，將clockLineStyle參數傳入最后一個參數即可：

ctx.DrawLine(Vector2.Zero, new Vector2(0,-r*0.9f), form.XResource.GetColor(blue), r/50, clockLineStyle);

執行效果如下（可見有那么點意思了）：

平滑移動

Direct2D是實時渲染，我們不能浪費這實時二字帶來的好處。更何況顯示出來的時鍾也不太合理，因為當時時間是9:57，此時時鍾應該指向偏10點的位置。但現在由於忽略了這一分量，指向的是9點，這不符合實時的時鍾。

因此計算小時角度時，可以加入分鍾分量，計算分鍾角度時，可以加入秒鍾分量，計算秒鍾角度時，也可以加入毫秒的分量。代碼只需將矩陣變換代碼稍微變動一點點即可：

// 秒鍾
ctx.Transform = 
	Matrix3x2.Rotation(MathF.PI * 2 / 60 * (time.Second + time.Millisecond / 1000.0f)) * 
	Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2);
// ...
// 分鍾
ctx.Transform =
	Matrix3x2.Rotation(MathF.PI * 2 / 60 * (time.Minute + time.Second / 60.0f)) *
	Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2);
// ...
// 時鍾
ctx.Transform =
	Matrix3x2.Rotation(MathF.PI * 2 / 12 * (time.Hour + time.Minute / 60.0f)) *
	Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2);

執行效果如下：

陰影效果

和邊緣刻度不一樣，時鍾多少是和窗口底層有距離的，因此怎么說也會顯示一些陰影效果。這在Direct2D中也能輕易實現。代碼會復雜一點，過程如下：

  • 先將創建一個臨時的Bitmap1;
  • 將時、分、秒鍾繪制到這個Bitmap中;
  • 創建一個ShadowEffect，傳入這個Bitmap的內容生成一個陰影貼圖;
  • 調用ctx.DrawImage()將ShadowEffect先繪制;
  • 調用ctx.DrawBitmap()繪制最后真正的時、分、秒鍾。

注意這個過程的順序不能錯，否則可能出現陰影顯示的真實物體上的虛幻效果。

臨時的Bitmap1和ShadowEffect可以在CreateDeviceSizeResources和ReleaseDeviceSizeResources事件中創建和銷毀：

Bitmap1 bitmap = null;
Shadow shadowEffect = null;

form.CreateDeviceSizeResources += (RenderWindow sender) =>
{
	bitmap = new Bitmap1(form.XResource.RenderTarget, form.XResource.RenderTarget.PixelSize,
		new BitmapProperties1(new PixelFormat(Format.B8G8R8A8_UNorm, SharpDX.Direct2D1.AlphaMode.Premultiplied),
		dpi, dpi, BitmapOptions.Target));
	shadowEffect = new SharpDX.Direct2D1.Effects.Shadow(form.XResource.RenderTarget);
};

form.ReleaseDeviceSizeResources += o =>
{
	bitmap.Dispose();
	shadowEffect.Dispose();
};

其中dpi從Direct2DFactory.DesktopDpi.Width進行獲取。

先將ctx的Target屬性指定這個bitmap，但又同時保存老的Target屬性用於稍后繪制：

var oldTarget = ctx.Target;
ctx.Target = bitmap;
ctx.BeginDraw();
{
	ctx.Clear(Color.Transparent);
	// 上文中的繪制時鍾部分...
}
ctx.EndDraw();

注意ctx.Clear(Color.Transparent);是有必要的，否則將出現重影：

這樣即可將時鍾單獨繪制到bitmap中，對這個bitmap生成一個陰影：

shadowEffect.SetInput(0, ctx.Target, invalidate: new RawBool(false));

最后進行繪制，繪制時記得順序：

ctx.Target = oldTarget;
ctx.BeginDraw();
{
	ctx.Transform = Matrix3x2.Identity;
	ctx.UnitMode = UnitMode.Pixels;
	ctx.DrawImage(shadowEffect);
	ctx.DrawBitmap(bitmap, 1.0f, InterpolationMode.NearestNeighbor);
	ctx.UnitMode = UnitMode.Dips;
}

注意兩點：

首先，設置ctx.Transform = identity是有必要的，否則會上文的矩陣變換會一直保持作用；

然后兩次設置ctx.UnitMode = pixels/dips也是有必要的，因為此時的繪制相當於是圖片，按照默認的高DPI顯示會導致顯示模糊，因此顯示圖片時需要改成點對點顯示;

效果如下：

這個陰影默認是完全重疊的，現實中這種光線較小，加一點點平移效果可能會更好：

ctx.DrawImage(shadowEffect, new Vector2(r/20,r/20));

效果如下（顯然更逼真了）：

更好的動畫

有些時鍾的秒確實是這樣動的，但我印象中兒時的記憶，秒是一格一格地動，它是每動一下，停頓一下再動的那種感覺。

為了實現這種感覺，我加入了Windows Animation Manager的功能，這也是COM組件的一部分，我的FlysEngine中稍微封裝了一下。使用時需要引入一個timer進行配合：

float secondPosition = DateTime.Now.Second;
Variable secondVariable = null;

var timer = new System.Windows.Forms.Timer { Enabled = true, Interval = 1000 };
timer.Tick += (o, e) =>
{
	secondVariable?.Dispose();
	secondVariable = form.XResource.CreateAnimation(secondPosition, DateTime.Now.Second, 0.2f);
};

form.FormClosing += delegate { timer.Dispose(); };

form.UpdateLogic += (window, dt) =>
{
	secondPosition = (float)(secondVariable?.Value ?? 0.0f);
};

注意此處我使用了UpdateLogic事件，這也是FlysEngine中封裝的，可以在繪制呈現前執行一段更新邏輯的代碼。

然后后面的繪制時，將獲取秒的矩陣變換參數改為secondPosition變量即可：

ctx.Transform = 
	Matrix3x2.Rotation(MathF.PI * 2 / 60 * secondPosition) * 
	Matrix3x2.Translation(ctx.Size.Width / 2, ctx.Size.Height / 2);

最后的執行效果如下：

看起來一切正常，但……如果經過分鍾滿時，會出現這種情況：

這是因為秒數從59秒到00秒的動畫，是一個遞減的過程（59->00），因此秒鍾反向轉了一圈，這明顯不對。

解決這個問題可以這樣考慮，如果當前是59秒，我們假裝它是-1秒即可，這時計算角度不會出錯，矩陣變換也沒任何問題，通過C# 8.0強大的switch expression功能，可以不需要額外語句，在表達式內即可解決：

secondVariable = form.XResource.CreateAnimation(secondPosition switch
{
	59 => -1, 
	var x => x, 
}, DateTime.Now.Second, 0.2f);

最后的最后，最終效果如下：

結語

說來這是我和我老婆的愛情故事。

記得6年前我老婆第一次來我出租房玩，然后……我給她感受了作為一個程序員的“浪漫”，花了一整個下午時間，把這個demo從0開始做了出來給她看，不過那時我還在用C++。多年后和她說起這個入門demo，她仍記憶尤新。

本文中最終效果的代碼，可以從我的github倉庫下載：
https://github.com/sdcb/blog-data/blob/master/2019/20191021-render-clock-using-dotnet/clock.linq

有了.NET，那些代碼已經遠比當年簡單，我的確是從這個例子出發，做出了許多好玩的東西，以后有機會我會慢慢介紹，敬請期待。

喜歡的朋友 請關注我的微信公眾號：【DotNet騷操作】

DotNet騷操作


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Hightopo 2D 入門 canvas用2d渲染出3d的感覺 關於2D渲染的一些小想法 JavaScript入門之Canvas(一): 2D Context Java 2D API - 2. Graphics 入門 WPF 2D圖形 Shape入門（一）--Shape PixiJS - 基於 WebGL 的超快 HTML5 2D 渲染引擎 CutJS – 用於 HTML5 游戲開發的 2D 渲染引擎 stage3D 搭建2d圖形引擎 （八） 動態紋理 Cocos Creator 3.0 入門! 2D 素材 3D 效果
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM