HTML5 WebGL 2D游戏引擎研发第十章：纹理及动画

HTML5 WebGL 2D游戏引擎研发第十章节：纹理集动画

http://bbs.9tech.cn/index.php/topic/show/363724

本系列教程将从最原始的渲染原理开始讲解，通过学习章节中每一个技巧，切片、混色等，逐步了解2D引擎的核心渲染原理。喜欢自己钻研引擎的同学看过来！

从后天起,我得回趟老家,去世界上最美丽的地方,吃最好吃的粉,所以本系列教程会停止更新5天哦,不过本系列的教程到这一章为止,渲染的核心原理和代码已经讲得差不多了,哦,还缺少鼠标交互,不过我相信计算点和面积的碰撞应该难不到你,实际上你现在可以开始构想你的游戏和引擎了。

在我开始写这系列教程时收到了很多不同的评价,不过最多的是引擎的定义,怎么说呢？现在以我的观念来概述吧,一般来说,一个游戏引擎包括几个部分,第一个是最基本的叫渲染引擎,这一部分是引擎里最核心的存在,它底层封装了所有绘图的方法,就和我们现在做的一样,第二部分是业务逻辑,你可能需要提供资源管理器,或者事件模式,再或者与网络通信的接口,有的还会有第三方的工具库,比如BOX2D,等等这些与渲染没有关系,但是游戏必须的功能,第三部分是外部工具,根据不同的游戏类型，可能会有粒子编辑器,RPG地图编辑器,UI编辑器等等,如果这些你都有了,就说明这是一套游戏引擎了,但是,一个游戏引擎写完之后需要做的事情会有很多,最重要的是用实际项目提炼,你可能会持续几年去维护你的引擎不停的升级,它永远没有尽头.

我当初写这个系列教程步骤是分为渲染引擎,业务逻辑,工具开发这样的流程,这是一个庞大的工程,而且我发现,原理和架构在教程中很难并存,如果我按照最直接的原理讲解,需要少量的代码就可以实现,但如果以架构去实现,我需要先完成WEBGL整套架构通过测试没有BUG,并且它会按照一定的规范去耦合某些类,这样的关系就很难去讲解原理,比如要讲解显示一副图像,理论上是需要一个纹理对象,纹理存储了大量图片的信息和动画信息,但讲解纹理又需要讲到XML，动画读取,切片相关信息,但实际上要显示一个图片最直接的方式只需要几行代码就可以了,所以我一直很纠结这点,不知道能否听到你们的反馈呢,你们是希望简单快速的了解实现原理？还是需要以架构的方式去学习？

好了,开始新的章节吧,本章的内容实际上没有太多技术含量了,它与我们的canvas系列教程的XML动画原理是一样的,你只需要读取XML配置信息,然后利用切片切出不同的显示区域就可以了,不过在此之前可能需要修改上一个章节的BUG,因为我们用的默认坐标系UV从左下角的点开始切,在本章的教程源码中我已经修复了这个问题,其实只是反转了UV信息和正交视口而已,这里就不帖代码了,现在让我们看看新的类,其实我只是拷贝canvas系列教程里的,读取XML信息和帧信息

CSDN编辑器不好使，还需要重复粘贴代码，大家直接去始发地看吧：http://bbs.9tech.cn/index.php/topic/show/363724

其他章节 http://bbs.9tech.cn/html5/
教程版块