HTML5 2D游戏引擎研发系列 第八章

HTML5 2D游戏引擎研发系列 第八章 <Canvas技术篇-基于顶点绘制与变形>
~\(≥▽≤)/~HTML5游戏开发者社区（群号：326492427）

HTML5 2D游戏引擎研发系列 第一章 <一切的开始>

HTML5 2D游戏引擎研发系列 第二章 <磨剑>

HTML5 2D游戏引擎研发系列 第三章 <Canvas技术篇-画布技术-显示图片>

HTML5 2D游戏引擎研发系列 第四章 <Canvas技术篇-画布技术-基于手动切片动画>

HTML5 2D游戏引擎研发系列 第五章 <Canvas技术篇-画布技术-纹理集复杂动画>

HTML5 2D游戏引擎研发系列 第六章 <Canvas技术篇-画布技术-混色特效和粒子>

HTML5 2D游戏引擎研发系列 第七章 <Canvas技术篇-画布技术-鼠标侦听器>

HTML5 2D游戏引擎研发系列 第八章 <Canvas技术篇-基于顶点绘制与变形>

WEBGL 2D游戏引擎研发系列 第一章 <新的开始>

WEBGL 2D游戏引擎研发系列 第二章 <显示图片>

WEBGL 2D游戏引擎研发系列 第三章 <正交视口>

WEBGL 2D游戏引擎研发系列 第四章 <感想以及矩阵>

WEBGL 2D游戏引擎研发系列 第五章 <操作显示对象>

WEBGL 2D游戏引擎研发系列 第六章 <第一次封装>

WEBGL 2D游戏引擎研发系列 第七章 <混色>

WEBGL 2D游戏引擎研发系列 第八章 <批处理(影分身之术)>

WEBGL 2D游戏引擎研发系列 第九章 <基于UV的模拟切片>

WEBGL 2D游戏引擎研发系列 第十章 <纹理集动画>

WEBGL 2D游戏引擎研发系列 第十一章 <着色器-shader>

WEBGL 2D游戏引擎研发系列 第十二章 <粒子发射器>

WEBGL 2D游戏引擎研发系列 第十三章 <Shader分享>

游戏技法 2D游戏引擎研发系列 第一章 <优化技巧>

游戏技法 2D游戏引擎研发系列 第二章 <计时器>

游戏技法 2D游戏引擎研发系列 第三章 <基于UV的无缝图像滚动>

游戏技法 2D游戏引擎研发系列 第四章 <基于形状的碰撞检测>

HI,大家好,今天本章节的内容属于扩展篇,利用它你可以做出非常炫酷的伪3D效果,或者动态的水流,小河等等,回想看看,我们之前所使用的canvas的绘图技术都是绘制一张矩形的图片,虽然我们可以对它们进行缩放旋转等一些变换,如果是要基于某个顶点的变形可能不行了,而真正的3D技术的图像都是通过顶点的组合来绘制出漂亮的画面的,今天我们就来学习学习如何在canvas里利用矩阵的变换来实现这个效果,很抱歉,我不是故意要说得这么复杂,如果你还不太理解矩阵的话,我可能需要整理思路重新写一篇教程,而且有可能把我自己搞晕,但是再后面的章节中我们会很频繁的接触矩阵,实践是最好的学习,所以我希望通过一系列的文章和实践告诉你为何要使用矩阵,现在,如果你不太懂不要紧的,我告诉你一个技巧如何去学习他们,首先是使用,再是理解,也就是说有很多公式和原理你虽然不懂,但你至少要保证知道如何使用,而且你可以把他们收集起来当作你的工具库,这也就是为何要自己写引擎的目的,引擎是一个全面的架构,你可以把自己学到的知识通过引擎存储下来,方便你在任何平台快速的找到立柱之地,好了,说了这么说只是希望你不要对复杂的技术产生抵触,因为之后可能越来越复杂,但是你的收获也会越来越多.
要实现本章的效果我们可以分为2个部分,一个部分是基于3个顶点去绘制一个图形,另外一个部分是控制这3个顶点,这里有一个新的API可以给你使用createPattern,它替代了之前的直接传入图片的方法,利用它我们可以绘制一系列的路径之后用图片填充这个路径里面的内容,所以我们可以绘制一个三角形,然后用图片去填充,具体的解释你可以参考W3School,之后就是绘制路径的API,他们组合起来是这样的:

?
这段代码是针对原图的坐标开始填充图形,如果没有问题,这段代码执行的效果应该是这样





好了,很简单,第一步就这样完成了,第二步就是变形了,其实我们让三角形做某个顶点的拉升实际上并不是真的对顶点拉升了,而是针对这整个图形的一个变换操作,这个概念很重要,为了验证这个理论,你可以打开你电脑上的任何绘图软件,然后绘制一个三角形,然后再任意创建3个点,你可以通过你手动操作这个图形的倾斜缩放缩放操作而让这个图形的3个点完全吻合你创建的3个点,现在,我们再使用一个新的API transform，它可以直接设置矩阵变换的操作,这样就非常方便我们,详细的解释你依然可以参考W3school,现在我们要做的事情就是把顶点变换转换成矩阵变换,最后把矩阵变换的值通过这个transform直接输入到绘图系统里,这里是很关键的一个部分,我们如果要对一个三角形变形是需要2组坐标的,或者你可以理解为A组坐标变换到B组坐标的矩阵变换,而且A组坐标永远是初始化坐标,不然你执行的每一次变换都会累加,所以,你现在可以创建2组坐标,一组是绘制三角形的初始化坐标,另外一组是实际三角形变换的坐标,比如这样:

?
然后你需要一个变换的公式,通过这2组坐标求出变换出的矩阵,比如这样,这个方法接受一个数组,前三个元素为第一组坐标,后三个元素为第二组坐标,然后通过他们计算出之间的变化矩阵

?
现在打开你的DisplayObject.js把上面3个部分加入到系统里去,先加入新的成员变量:

?
然后是一个点对象,用来存储我们的坐标点:

?
还记得isPlay参数吗,之前我们扩展到2,现在要加入到3了,比如这样:

?
好了,系统的扩展结束了,让我们回到Main.js看看如何使用

?
为了偷点懒,我就利用了上一章节的结束素材当作背景和拖拽点了,然后注册鼠标的相关事件,Main.js完整代码如下:

?
如果没有报错,你运行项目看到的内容应该是这样了,拖拽画面上的任意火球可以控制图像的其中一个顶点













在线演示
源码下载
转载请注明：HTML5游戏开发者社区 »
HTML5 2D游戏引擎研发系列 第八章

本文作者：HTML5游戏开发者社区-白泽

HTML5游戏开发者社区联合创始人，著名高级游戏开发工程师，现专注于HTML5游戏开发