WPF特效-拼图游戏

2024-09-01 06:38
文章标签 特效 wpf 拼图游戏

本文主要是介绍WPF特效-拼图游戏,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

此文主要描述我实现碎片化的便捷过程。

步骤1:

   选取参考图如下(百度图库搜的):


步骤2

   根据效果图或者模型构建贝塞尔曲线,为了方便查看效果,可以设置控制点,Console.WriteLine或直接UI上显示的方式记录最终坐标,效果图如:

 

 上图中的红线,为两条贝塞尔曲线,左侧的位置我已经通过控制点的方式调好。 上图Gif为我调整上方第二条贝塞尔的示意。

步骤3:

 当上方右侧的第二条贝塞尔曲线也调整好后,就已经相当于调整好了所有的四条边。

  具体原理为:最上方的一条线绕着最右边的顶点逆时针旋转90度即可得到右侧的线。右侧的线以最下方的点逆时针旋转90度就是下方的线。左侧的线也通过旋转下方的线得到。唯一需要做的就是抽一个某个点围绕中心点逆时针旋转90度后得到新点的函数。

 <Canvas Width="448" Height="448" HorizontalAlignment="Left" VerticalAlignment="Top"Margin="160" x:Name="CvMainZm" Background="Transparent"><Path Stroke="Red" StrokeThickness="1" Fill="Blue" x:Name="Path1Zm"><Path.Data><PathGeometry><PathGeometry.Figures><PathFigureCollection><PathFigure StartPoint="96, 96"><PathFigure.Segments><PathSegmentCollection><BezierSegment x:Name="Bezier1Zm" Point1="286 62" Point2="96 176" Point3="224 192"/><BezierSegment x:Name="Bezier2Zm" Point1="352 176" Point2="162 62" Point3="352 96"/><BezierSegment x:Name="Bezier3Zm" Point3="448 224"/><BezierSegment x:Name="Bezier4Zm" Point3="352 352"/><BezierSegment x:Name="Bezier5Zm" Point3="224 266"/><BezierSegment x:Name="Bezier6Zm" Point3="96 352"/><BezierSegment x:Name="Bezier7Zm" Point3="0 224"/><BezierSegment x:Name="Bezier8Zm" Point3="96 96"/></PathSegmentCollection></PathFigure.Segments></PathFigure></PathFigureCollection></PathGeometry.Figures></PathGeometry></Path.Data></Path></Canvas>
如我的示例代码,我通过步骤1得到了 上方线的两条Bezier线的值,直接写入xaml中。(注:我提前根据步骤一的示例图,给出了每条Bezier的终点,即Point3)
   <BezierSegment x:Name="Bezier1Zm" Point1="286 62" Point2="96 176" Point3="224 192"/><BezierSegment x:Name="Bezier2Zm" Point1="352 176" Point2="162 62" Point3="352 96"/>

旋转设置右侧线操作:

   private void SetRightFirstBezier(){Point oPoint1 = this.Bezier2Zm.Point1;Point oPoint2 = this.Bezier2Zm.Point2;Point oOrigin = this.Bezier2Zm.Point3;Point oNew = this.CarouselPointAnticlockwise(oPoint1, oOrigin);Point oNew2 = this.CarouselPointAnticlockwise(oPoint2, oOrigin);this.Bezier3Zm.Point1 = oNew2;this.Bezier3Zm.Point2 = oNew;}private void SetRightSecondBezier(){Point oPoint1 = this.Bezier1Zm.Point1;Point oPoint2 = this.Bezier1Zm.Point2;Point oOrigin = this.Bezier2Zm.Point3;Point oNew = this.CarouselPointAnticlockwise(oPoint1, oOrigin);Point oNew2 = this.CarouselPointAnticlockwise(oPoint2, oOrigin);this.Bezier4Zm.Point1 = oNew2;this.Bezier4Zm.Point2 = oNew;
}
// 绕顶点旋转得到新点坐标
private Point CarouselPointAnticlockwise(Point oPoint, Point oOrigin)
{double dY = oOrigin.Y - oPoint.Y;double dX = oOrigin.X - oPoint.X;double dXAdd = dX - dY;double dYAdd = dX + dY;double dNewX = oPoint.X + dXAdd;double dNewY = oPoint.Y + dYAdd;return new Point(dNewX, dNewY);
}
下方和左方以此类推。 这样通过后台点旋转的旋转计算处理就可得到所有的Bezier。实现效果如下图。


步骤4:

通过步骤3得到的Path与RectangleGeometry进行组合,设置成不同碎片的Clip属性即可得到所有用到的碎片,效果图如下:



组合过程中,部分碎片的Clip可通过其他碎片的Clip直接翻转或者顺时针、逆时针旋转直接得到。如:

 <CombinedGeometry x:Key="KeyPieceType4" 
                          Geometry1="{StaticResource KeyPieceType1}">
            <CombinedGeometry.Transform>
                <TransformGroup>
                    <ScaleTransform ScaleX="-1" CenterX="224" ScaleY="-1" CenterY="224" />
                    <RotateTransform Angle="-90" CenterX="224" CenterY="224"/>
                </TransformGroup>
            </CombinedGeometry.Transform>

        </CombinedGeometry>

步骤5:

可以通过提前设定矩阵碎片样式的固定模式得到所有切图,也可以随机生成每个碎片,每个片的形状通过检索左侧右边是否凹凸和上侧碎片下边是否凹凸获得。我的碎片化效果如下图。


这篇关于WPF特效-拼图游戏的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1126224

相关文章

『功能项目』战士的平A特效【35】

我们打开上一篇34武器的切换实例的项目, 本章要做的事情是在战士的每次按A键时在指定位置生成一个平A特效 首先将之前下载的技能拖拽至场景中 完全解压缩后重命名为AEffect 拖拽至预制体文件夹 进入主角动画的战士动画层级 双击第一次攻击 选择Animation 创建事件 创建的动画事件帧放在攻击动画挥剑指定处 命名为PerpetualAtt

第49课 Scratch入门篇:骇客任务背景特效

骇客任务背景特效 故事背景:   骇客帝国特色背景在黑色中慢慢滚动着! 程序原理:  1 、 角色的设计技巧  2 、克隆体的应用及特效的使用 开始编程   1、使用 黑色的背景: ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/7d74c872f06b4d9fbc88aecee634b074.png#pic_center)   2

【生日视频制作】酒吧一群美女车展模特大屏幕视频改字AE模板修改文字软件生成器教程特效素材【AE模板】

生日视频制作教程酒吧一群美女车展模特大屏幕视频改字AE模板修改文字特效广软件告生成神器素材祝福玩法AE模板工程 怎么如何做的【生日视频制作】酒吧一群美女车展模特大屏幕视频改字AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤: 安装AE软件 下载AE模板 把AE模板导入AE软件 修改图片或文字 渲染出视频

WPF入门到跪下 第十三章 3D绘图 - 3D绘图基础

3D绘图基础 四大要点 WPF中的3D绘图涉及4个要点: 视口,用来驻留3D内容3D对象照亮部分或整个3D场景的光源摄像机,提供在3D场景中进行观察的视点 一、视口 要展示3D内容,首先需要一个容器来装载3D内容。在WPF中,这个容器就是Viewport3D(3D视口),它继承自FrameworkElement,因此可以像其他元素那样在XAML中使用。 Viewport3D与其他元素相

【生日视频制作】劳斯莱斯库里南中控改名软件AE模板修改文字软件生成器教程特效素材【AE模板】

生日视频制作教程豪车劳斯莱斯库里南中控改名软件AE模板修改文字特效广告生成神器素材祝福玩法AE模板工程 怎么如何做的【生日视频制作】劳斯莱斯库里南中控改名软件AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤: 下载AE模板 安装AE软件 把AE模板导入AE软件 修改图片或文字 渲染出视频

印度再现超级大片,豪华阵容加顶级特效

最近,印度影坛再次掀起了风潮,一部名为《毗湿奴降临》的神话大片强势登陆各大影院,上映首周票房就飙升至105亿卢比,成功占据了票房榜首的位置。之后,这部电影也在北美上映,海外市场的表现同样不俗,收获了相当亮眼的票房成绩。作为一部印度神话科幻大片,《毗湿奴降临》不仅在本土大火,在国际市场上也引发了不小的关注。 《毗湿奴降临》由印度著名导演纳格·阿什温执导,卡司阵容极其豪华,集结了迪皮卡·帕度柯妮

C# WPF燃气报警器记录读取串口工具

C# WPF燃气报警器记录读取串口工具 概要串口帧数据布局文件代码文件运行效果源码下载 概要 符合国标文件《GB+15322.2-2019.pdf》串口通信协议定义;可读取燃气报警器家用版设备历史记录信息等信息; 串口帧数据 串口通信如何确定一帧数据接收完成是个麻烦事,本文采用最后一次数据接收完成后再过多少毫秒认为一帧数据接收完成,开始解析出来。每次接收到数据更新一次re

【生日视频制作】海上绿色摩托艇汽车艇车身AE模板修改文字软件生成器教程特效素材【AE模板】

生日视频制作教程海上绿色摩托艇汽车艇车身AE模板修改文字特效广软件告生成神器素材祝福玩法AE模板替换工程 怎么如何做的【生日视频制作】海上绿色摩托艇汽车艇车身AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤: 安装AE软件 下载AE模板 把AE模板导入AE软件 修改图片或文字 渲染出视频

WPF-快速构建统计表、图表并认识相关框架

一、使用ScottPlot.Wpf 官网地址:https://scottplot.net/quickstart/wpf/ 1、添加NuGet包:ScottPlot.Wpf 2、XAML映射命名空间:  xmlns:ScottPlot="clr-namespace:ScottPlot.WPF;assembly=ScottPlot.WPF" 3、简单示例: <ScottPlot:WpfP

C# wpf 实现游戏启动器界面制作的坑

用C# winform制作界面的时候发现背景图是带透明通道的会实现不了,于是用了个单独的类来实现底层背景图带透明 窗口原图: 。。。可是后面发现在鼠标悬浮Windows任务栏中此窗口预览图的时候只会渲染出控件了,没有了背景图。。。 网上找了很久没有找到好的解决办法,于是弃用了winform改用了wpf做游戏启动器的界面。  wpf的界面布局文件类似xml文档,实现背景透明的话不复杂