.NET实时2D渲染入门·动态时钟

.NET实时2D渲染入门·动态时钟

从小以来“坦克大战”、“魂斗罗”等游戏总令?#19968;?#29301;梦绕。这些游戏的基础就是2D实时渲染,以前没意识,直到后来找到了Direct2D。我的2D实时渲染入门,是从这个动态时钟开始的。

本文将使用我写的“准游戏引擎”FlysEngine完成。它是对Direct2D.NETSharpDX浅层次的封装,隐藏了一些细节,简化了一些调用。同时还保留了Direct2D的原汁原味。

本文的最终效果如下:

绘制动态时钟

要绘制动态时钟,需要有以下步骤:

  • 创建一个实时渲染窗口;
  • 画一个圆圈,表示时钟边缘;
  • 在圆圈内?#26579;?#31163;画上60个分钟刻度,?#28210;?code>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));

?#28210;?code>form.Render(1, ...)中的1表示垂直同步,玩过游戏的可能见过,这个设置可以在尽可能节省CPU/GPU资源的同时得到最佳的呈现效果。

熟悉glut的肯定知道,这种写法和glut?#27973;?#20687;,执行效果如下:

注意:

RenderWindow其实继承于System.Windows.Forms.Form,确实是基于“WinForm?#20445;?#20294;实质却和“拖控件”完全不一样。“控件”是模态的,本身有状态,但Direct2D是实时渲染,界面完全没有状态,需要动态每隔一个垂直同步时间(如1/60秒)全部清除,然后再重绘一次。

画圆圈

RenderWindow简单封装了Direct2D,可以直接使用里面的XResource属性来?#26790;?code>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事件,它包含两个?#38382;?code>(RenderWindow sender, DeviceContext ctx):

  • ?#28210;?code>sender就是原窗口,可以用外层的form代替;
  • ctx?#38382;?#23601;是D2D绘图的核?#27169;?#25105;们将围绕它进行绘制。

要画圆圈,得先算出一个能放下一个完整圆的半径,并留下少许空间(5):

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

然后调用ctx?#38382;?#20351;用黑色画笔将圆画出来,线宽为1/40半径:

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

执行效果如下:

可见圆只显示了四分之一,要显示完整的圆,必须将其“移动”到屏幕正中?#27169;?#25105;们可以调整圆的?#38382;?#23558;中心点从Vector2.Zero改成new Vector2(ctx.Size.Width/2, ctx.Size.Height/2),或者用更简单的办法,通过矩阵变换:

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

注意:“矩阵变换”这几个字听起来总令人联想到“高数?#20445;?#25402;吓人的。但实际是并不是非要知道线?#28304;?#30721;基础才能使用。首先只要知道它能完成任务即可,之后再慢慢理解也?#23567;?/p>

有多种方法可以完成像平移这样的任务,但通常来说使用“矩阵变换”更简单,更不?#22235;?#31563;,?#32469;?#26159;多个对象,进行旋转、扭曲等复杂、或者组合操作等,这些操作如果不使用“矩阵变换”会?#27973;7浅?#40635;烦。

这样,即可将该圆“平移”至屏幕正中?#27169;?#25191;行效果如下:

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个时钟刻度,?#28210;?#20998;钟刻度较短,时钟刻度较长。

刻度的一端是沿着圆的边缘,另一端朝着圆的中?#27169;?#36793;缘位置可以通过sin/cos等三角函数计算出来……呃,可能早忘记了,不怕,我们?#23567;?#30697;阵变换”。

利用矩阵变换,可以?#27973;?#23481;易地完成这项工作:

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);

注意乘法是有?#25215;?#30340;,这符合空间逻辑,可以这样想想,先旋转再平移,和?#32469;?#31227;再旋转显然是有区别的。

然后再加上长时钟,只需在原代码基础上加个判断即可,如果i % 5 == 0,则为长时钟,粗细设?#26790;?code>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);
    }
}

执行效果如下:

画时、分、秒钟

时、分、秒钟是动态的,必须随着时间变化而变化;?#28210;?#26102;钟最短、最粗,分钟次之,秒钟最细长,然后时钟必须叠在分钟和秒钟之上。

用代码实现,可以先画秒钟、再画分钟和时钟,即可实现重叠效果。还可以通过设置一定的?#35813;?#24230;和不同的颜色,可以让它们区分更明显。

获取当前时间可以通过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);

效果如下:

优化

其实到了这一步,已经是一个完整的,可运行的时钟了,但还能再优化优化。

半?#35813;?#26102;钟

首先可以设置一定的半?#35813;?#24230;,使三根钟重叠时不?#32536;?#24456;?#22238;#?#20195;码如下:

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?#38382;?#20026;0.7(表示70%半?#35813;鰨?#21363;可,效果如下:

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?#38382;?#20256;入最后一个?#38382;?#21363;可:

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

执行效果如下(可见有那么点意思了):

平滑移动

Direct2D是实时渲染,我们不能浪费这实时二?#25191;?#26469;的好处。更何况显示出来的时钟也不太合理,因为当时时间是9:57,此时时钟应该指向偏10点的位置。但现在由于忽略了这一分量,指向的是9点,这不符合实时的时钟。

因此计算小时角度时,可以加入分钟分量,计算分钟角度时,可以加入秒钟分量,计算秒钟角度时,?#37096;?#20197;加入毫秒的分量。代码只需将矩阵变换代码稍微变动一点点即可:

// 秒钟
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);

执行效果如下:

阴影效果

和边缘刻度不一样,时钟多少是和窗口底层有距离的,因此怎?#27492;?#20063;会显示一些阴影效果。这在Direct2D中也能轻易实现。代码会复杂一点,过程如下:

  • 先将创建一个临时的Bitmap1;
  • 将时、分、秒钟绘制到这个Bitmap中;
  • 创建一个ShadowEffect,传入这个Bitmap的内容生成一个阴影贴图;
  • 调用ctx.DrawImage()ShadowEffect先绘制;
  • 调用ctx.DrawBitmap()绘制最后真正的时、分、秒钟。

注意这个过程的?#25215;?#19981;能错,否则可能出现阴影显示的真实物体上的虚幻效果。

临时的Bitmap1ShadowEffect可以在CreateDeviceSizeResourcesReleaseDeviceSizeResources事件?#20889;?#24314;和销毁:

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();
};

?#28210;?code>dpi从Direct2DFactory.DesktopDpi.Width进行获取。

先将ctxTarget属性指定这个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));

最后进行绘制,绘制时记得?#25215;潁?/p>

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显示会导致显示模糊,因此显?#23601;?#29255;时需要改成点对点显示;

效果如下:

这个阴影默认是完全重叠的,现实中这种光线较小,加一点点平移效果可能会更好:

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

效果如下(显然更逼真了):

更好的动画

有些时钟的秒确实是这样动的,但我印象中儿时的记忆,秒是一格一格地动,它是每动一下,停顿一下再动的那种感觉。

为了实现这种感觉,我加入了Windows Animation Manager的功能,这也是COM组件的一部分,我的FlysEngine中稍微封装了一下。使用时需要引入一个timer进?#20449;?#21512;:

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中封装的,可以在绘制呈现前执行一段更新逻辑的代码。

然后后面的绘制时,将获取秒的矩阵变换?#38382;?#25913;为secondPosition变量即可:

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

最后的执行效果如下:

看起来一切正常,但……如果经过分钟满时,会出现这种情况:

这是因为秒数从59秒到00秒的动画,是一个递减的过程(59->00),因此秒钟反向转了一圈,这明?#22278;?#23545;。

解决这个问题可以这样考?#29301;?#22914;果当前是59秒,我们假装它是-1秒即可,这时计算角度不会出错,矩阵变换也没任何问题,通过C# 8.0?#30475;?#30340;switch expression功能,可以不需要额外语句,在表达式内即可解决:

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

最后的最后,最终效果如下:

结语

说来这是我和我老婆的爱情故事。

记得6年前我老婆第一次来?#39029;?#31199;?#23458;媯?#28982;后……我给她感受了作为一个程序员的“浪漫?#20445;?#33457;了一整个下午时间,把这个demo0开始做了出来给她看,?#36824;?#37027;时?#19968;?#22312;用C++。多年后和她说起这个入门demo,她仍记忆尤新。

本文中最终效果的代码,可以从我的github仓库下载:
https://github.com/sdcb/blog-data/blob/master/2019/20191021-render-clock-using-dotnet/clock.linq

有了.NET,那些代码已经远比当年简单,我的确是从这个例子出发,做出了许多好玩的东西,以后有机会?#19968;?#24930;慢介绍,敬请期待。

?#19981;?#30340;朋友 请关注我的微信公众号:【DotNet骚操作】

DotNet骚操作

posted @ 2019-10-23 08:50 .NET骚操作 阅读(...) 评论(...) 编辑 收藏
三剑客和女王APP
天天赢棋牌 安徽11选5的推荐和预测 天涯社区点赞怎么赚钱 st股票涨跌幅度 上海时时乐走势图表 代发广告怎么赚钱 kk棋牌游戏 北京十一选五开奖查询 分分彩走势图如何看 981捕鱼游戏官网手机版 北京pk10走势图长龙 号码预测 文房四宝店铺赚钱吗 永利棋牌官网手机 河北十一选五遗漏 网上什么职业赚钱快