- 博客(118)
- 资源 (4)
- 收藏
- 关注
RSS订阅
原创 HTML5各引擎显示效率比较
现在越来越多的人开始尝试使用HTML5开发，HTML5的引擎也逐渐增多，开发者到底应该选择一款什么样的引擎呢？这一次我来对比一下几个我个人认为还不错的引擎的效率。本次参加对比的引擎：1. createJS，2. cocos2d-HTML5，3. enchant.js，4. lufylegend.js
2014-02-09 14:15:37
36230
44
原创 HTML5开源游戏引擎lufylegend1.8.0发布
lufylegend是一个HTML5开源引擎， 它实现了利用仿ActionScript3.0的语法进行HTML5的开发，包含了LSprite，LBitmapData，LBitmap，LLoader，LURLLoader，LTextField，LEvent等多个AS开发人员熟悉的类， 支持Google Chrome，Firefox，Opera，IE9，IOS，Android等多种热门环境。利用lufylegend可以轻松的使用面向对象编程，并且可以配合Box2dWeb制作物理游戏， 另外它还内置了LTween
2013-10-09 07:51:57
13214
64
原创 《游戏脚本的设计与开发》-目录&序
简单说，游戏脚本就是依据一定的格式编写的可执行文件，游戏可以通过脚本中自定义的语句来执行相应的逻辑。举个例子，舞蹈演员随着音乐翩翩起舞，其实音乐在这里就担当了脚本的角色，音乐里记录了每一个舞蹈动作，舞蹈演员根据自己的专业知识，将这些音乐转换为优美的舞姿。游戏也一样，游戏脚本里记录了游戏的控制语句，游戏引擎将这些控制语句进行解析，转换为生动的游戏画面。
2013-05-06 09:01:03
69882
44
原创 我的新书《HTML5 Canvas游戏开发实战》
本书简介本书主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧，在介绍HTML5 Canvas相关特性的同时，还通过游戏开发实例深入剖析了其内在原理，让读者不仅知其然，而且知其所以然。在本书中，除了介绍了HTML5 Canvas的基础API之外，还重点阐述了如何在JavaScript中运用面向对象的编程思想来进行游戏开发。本书在介绍每个游戏开发的过程时，都会包括游戏分析、开发
2013-04-17 12:18:42
30396
48
原创 三国记系列游戏，第二部《三国记-乱世群雄》发布
发布新游戏：三国记-乱世群雄一，关于引擎：本游戏是用鄙人新开发的flash脚本引擎Legend0.12制作而成，该引擎完全脱离光荣原版引擎，关于引擎Legend0.1版的下载和使用方法，请看这里http://blog.csdn.net/lufy_legend/article/details/6889424目前引擎的剧本编辑器仍在制作中，希望下次发布新游戏的时候，下次引擎更新时会提供给大家。二，关于
2012-04-04 10:01:20
20580
38
原创 三国记系列游戏，特殊版《三国记-经典战役版》发布
一，关于引擎：本游戏是用鄙人新开发的flash脚本引擎LegendForFlashProgramming0.11制作而成，该引擎完全脱离光荣原版引擎，关于引擎LegendForFlashProgramming0.1版的下载和使用方法，请看这里http://blog.csdn.net/lufy_legend/article/details/6889424为了简化游戏制作，目前引擎的剧本编辑器正在制作
2012-01-18 19:09:53
15998
20
翻译 [WebGL入门]三十二，四元数和minMatrixb.js
这次结合实际应用，来继续了解一下。将三维空间中的坐标变换为四元数，然后进行旋转处理。虽说，本次用来解说的demo，即使不使用四元数也能轻易的实现，但是使用了四元数之后，会更加的直观一些。对于四元数周边的处理，会使用到本网站的算法库minMatrixb.js，还有另一个与矩阵相关的处理就是它的姐妹库minMatrix.js。四元数相关的处理是相对比较难的，使用minMatrixb.js能让简化四元数的计算。
2017-08-29 09:15:00
4293
6
翻译 [WebGL入门]三十一，Quaternions（四元数）
D编程的世界中，数学的知识是非常重要的。最具代表的就是矩阵了，不知道矩阵的话，就没办法进行坐标变换了。而其他的，向量的知识，内积・外积这些也都是不可缺少的。的确是非常烦人。那么，这次的标题是四元数。不光是WebGL，在DirectX中也同样存在着四元数。它到底是个什么东西，使用它之后又有那些方便之处，我想很多人恐怕也没有明确的概念。这次就来说说四元数的定义以及它的简单的使用方法。这次真的是纯粹的数学话题，估计读起来会很枯燥，首先理解这篇文章的最大目的，然后慢慢往下看吧。
2017-08-23 11:43:05
3050
1
翻译 [WebGL入门]三十，混合系数
混色是将颜色和颜色混合处理的总称，在WebGL中主要是指源颜色和目标颜色这两种颜色的混合。源颜色是即将要绘制的颜色，目标颜色是已经绘制的颜色，源颜色如何处理，目标颜色如何处理，这些都可以单独进行设置。颜色如何处理是由混合系数决定的，混合系数有很多种，不同的组合绘制的结果也会有很大不同。根据自己的创意，可以实现透明处理，加算合成，反转合成等各种各样的合成处理。这次，来更进一步详细说说混合系数。而这回的demo，也会将这些混合系数做成可调整的形式，大家可以试一下各种混合系数的组合。
2017-08-23 09:04:38
3293
翻译 [WebGL入门]二十九，透明混色
所谓混色，就是刚才叙述的那样，把颜色混合在一起。那么用来混合的颜色是什么颜色呢？顶点的颜色？还是纹理的颜色？答案既不是顶点颜色也不是纹理 颜色。而是源颜色（即将要绘制的颜色）和目标颜色（已经绘制的颜色）。WebGL在渲染东西之前，必须进行context的初始化，将颜色和深度清除。持续循环的处理中，需要每次执行clear函数，将context的颜色初始化。这时候，要通过clearColor函数指定一种颜色将context涂抹一遍，这也是所谓的目标颜色中的颜色，也就是已经画上去的颜色了。而接下来要渲染什么的话，
2017-08-18 23:58:14
4150
2
翻译 [WebGL入门]二十八，纹理参数
为了进一步提升纹理的渲染质量，来介绍一下纹理参数。通过控制纹理参数，可以很好的提升模型的渲染质量，虽然会有些比较难理解的地方，这些可以以后再考虑。那么，WebGL中的纹理参数到底是什么呢？现在就从这里开始说明。纹理参数就是跟纹理渲染的时候的质量及特征相关的特性。比如说，即使是使用同样的解析度和大小的图片生成的纹理，如果纹理参数不同，那么渲染的结果差异会很大。
2017-08-16 21:34:47
3137
1
翻译 [WebGL入门]二十七，多纹理
多纹理进行渲染的时候应该注意的是，指定正确的纹理单位进行数据的处理，这就足够了。其他的细节，主要是activeTexture函数和uniform1i函数的使用方法，这几个不出错的话，之后就可以在着色器一侧使用自己喜欢的图片了。这次只是单纯的在着色器中将两个纹理数据进行相乘运算，然后各个纹理数据分别进行处理，就可以进行完全不一样的渲染，没有使用固定渲染管道，而是使用GLSL中的程序员自定义着色器，这一点很刺激吧。
2014-10-19 01:06:02
10282
19
翻译 [WebGL入门]二十六，纹理绘图
在片段着色器中对光进行计算，阴影，亮点等效果都非常的漂亮，3D场景的真实度大幅度提升。并且能和顶点颜色一起使用，理解了前面讲解的内容之后，就应该能进行比较高质量的3D渲染了。这一次，来看高级一点的纹理的使用。所谓纹理，简单一点说，就是可以放到多边形上的图片数据，在WebGL中当然也可以使用。WebGL和HTML不同，一般的图片类型（gif，jpg，png等）是不可以直接使用的，另外，也可以把canvas转换成纹理，总之，要变换一下方法来进行渲染。
2014-10-18 18:04:25
15133
1
翻译 [WebGL入门]二十五，点光源的光照
用点光源的光照，概念基本上和平行光源一样。根据获取光向量和顶点的法线及视点向量的内积来添加阴影。和平行光源的不同之处，简单的说就是光向量是否是一个固定值。点光源使用的是模型坐标变换后的顶点的位置和光源的位置，这时再计算光向量，所以增加了若干的计算量。平行光源的光的方向是一定的，整体都受到均等的光照。但是点光源根据实际顶点的坐标要进行具体的光的碰撞。这次的demo和上次一样在片段着色器中进行光的计算和补色着色，所以可以进行很漂亮的渲染。这次的文章中只需要明白是进行了光照相关的基础部分的封装，WebGL中的
2014-10-13 00:22:09
8655
翻译 [WebGL入门]二十四，补色着色
这一次分别说了高氏着色和补色着色两种着色，高氏着色的优点是计算量比较低，而和补色着色相比的话，渲染效果不太自然。补色着色正好相反，计算量很高，但是渲染效果非常完美。到底选择那种方法，取决于模型的顶点数和需要的渲染效果，以及执行环境能够承受的计算负荷。实际应用中，根据利用的场景和描画的模型，分别使用不同的方法是非常重要的。这次也准备了demo，急着看运行效果的人可以点击文章最后的链接来测试。另外，补充一点，这次的demo中对圆环体的生成函数做了几处修改，返回值是以对象的形势返回的，可以指定圆环体的颜
2014-10-11 21:55:59
6781
翻译 [WebGL入门]二十三，反射光的光照效果
与目前为止所涉及到的算法相比，今天的算法也不算难，就是，计算从光源发出的光向量和视线向量之间的半向量，然后与面法线向量求内积，所以相对的负荷也不大。但是，这只是在一定程度上模拟了反射光的效果，并不是非常严格的反射光的计算。从渲染的结果来看，圆环体已经变的非常漂亮了，实际的效果，请参考文章最后给出的链接。
2014-10-06 21:47:31
9936
9
翻译 [WebGL入门]二十二，从环境光源发出的光
环境光，模拟了自然界的光的漫反射，弥补了平行光源的缺点。一般，这两种光会同时使用。只使用环境光的话，无法表现出模型的凹凸，只使用平行光源的话，阴影过于严重无法分清模型的轮廓。3D模拟中的扩散光的代表就是环境光和平行光。这次的demo也实现到了这一步。
2014-09-06 00:52:18
7663
4
原创 《游戏脚本的设计与开发》-(RPG部分)3.8 通过脚本来自由控制游戏(一)
一个RPG游戏中会触发各种各样的剧情，让某个人物的动作改变，或者让某个人移动到另一处，或者让某个人物从战场上消失，或者会播放一段动画，或者会切换游戏场景，等等吧，这些都要通过脚本来动态的控制。我在序章中就已经说了，一个优秀的游戏脚本，通常能控制游戏中的一切。本次先来实现一下几个游戏指令，以后会再进行扩展。・人物角色按照绝对坐标进行移动・人物角色以自己为参照物，按照相对坐标进行移动・人物角色以指定人物为参照物，按照相对坐标进行移动・人物方向和动作的改变（等待动作结束）・人物方向和动作的改变（不等待
2014-09-02 21:31:01
18324
10
翻译 [WebGL入门]二十一，从平行光源发出的光
写的太长了，果然，就算是简单点说，关于光的处理也需要很长的描述。重点是，3D渲染中没有办法完全模拟现实中的光，只是大致是那么回事而已。完全模拟自然界的物理学的话，计算量是非常大的，所以代替这些的就是这次所介绍的，使用平行光源，法线，逆矩阵等技术，在一定程度上尽可能的让画面看起来真实。理解这次文章的内容，需要一定程度的数学知识，向量，法线，矩阵，这些在平常生活中是不会出现的，但是好好考虑一下的话，应该是可以理解的。
2014-08-28 23:40:53
10780
4
翻译 [WebGL入门]二十，绘制立体模型（圆环体）
这次，并没有对WebGL相关的新技术进行说明，这一点运行一下demo就能知道了，果然，比起绘制简单的板状的多边形来说，像圆环体这样的立体模型绘制起来更有意思吧。demo中使用的着色器和HTML跟以前并没有变化，javascript相关部分，也只是添加了一个生成圆环体的函数和一个HSV转换的函数，没有什么特别的变更点。demo中绘制的圆环体，会沿着Y轴和Z轴进行旋转，使用了七彩颜色，看起来应该挺赏心悦目的吧。
2014-08-15 21:25:38
12987
2
翻译 [WebGL入门]十九，遮挡剔除和深度测试
这次，介绍了遮挡剔除和深度测试，无论那一个都是使用enable函数来设置有效，使用disable函数来设置无效。enable和disable这两个函数的参数是一致的，根据传入的参数不同，可以设定各种属性设置为有效或者无效。遮挡剔除设置为有效的话，内侧的多边形就不会描画了，这样就减轻了绘图的负担。深度测试在模拟有深度概念的三维空间时有着非常重要的作用，指定为正确的评价方法的话，就能像现实世界一样，近处的物体会将远处的物体遮挡住。这次做的demo，可以自由切换遮挡剔除的有效和无效，而且可以自由指定多边形的内
2014-08-15 01:37:37
12576
2
翻译 [WebGL入门]十八，利用索引缓存来绘图
使用索引缓存IBO，既可以节约数据，又能够提高渲染顶点的效率，而且，模型越复杂影响越大，这是程序员非常乐意看到的。索引缓存和顶点缓存一样，可以使用纯粹的一维数组来生成，生成的IBO进行绑定后就可以使用了，利用IBO绘图的时候使用drawElements函数是重点。这次的demo，顶点着色器和片段着色器是没有任何变化的，所以，还使用以前的HTML代码，javascript的内容多少有些变化，最后会给出完整代码，另外，文章最后会贴出本次demo的链接，可以参考一下。
2014-08-14 01:21:49
8720
1
翻译 [WebGL入门]十七，递归处理和移动・旋转・缩放
这次利用递归处理实现了持续循环，并介绍了模型坐标变换矩阵的移动，旋转和放大缩小等处理。以后，动态的demo会越来越多，这次介绍的持续循环也会被更多的用到。匿名函数或者普通的函数的递归可能是个稍微难理解的概念，也要着急，仔细考虑的话会理解的。如果处理比较多的话，这一部分处理可能应该单独分离出来。
2014-08-13 00:16:37
9872
翻译 [WebGL入门]十六，绘制多个模型
这次操作的是模型坐标变换矩阵，介绍了重复利用VBO，视图和投影坐标变换矩阵，进行多个模型的绘制的方法。绘制很多个简单的模型，图形的时候，像这次的做法一样，可以使处理变的简洁一些，避免写很多多余的代码。这次的demo，HTML的代码和上一次是完全一样的，就是说，顶点着色器和片段着色器没有做任何调整。javascript代码有了一些变化，所以贴出所有代码。另外，在文章的最后面，添加了demo的链接，有支持WebGL的浏览器的话，可以直接打开链接看一下效果。
2014-08-11 00:21:04
10964
6
翻译 [WebGL入门]十五，为多边形涂抹颜色（顶点颜色的指定）
与上一篇的内容相比的变更点。主要就是着色器和VBO周围的处理有了些小变化。如果再给顶点增加其他新的属性的话，就依葫芦画瓢，像本次的内容一样，按照同样的步骤，再重复一遍就可以了，这样就可以给顶点自由的添加属性了。最后，贴出本篇文章的demo的全部代码，链接也在最后给出，大家可以参考一下。
2014-08-09 22:56:26
8985
1
翻译 [WebGL入门]十四，绘制多边形
其实这次的代码绘制的只是一个简单的三角形。只是这样，却写了这么长的代码，所以才说3D开发是比较难的。但是，个人认为，即使这样，和DirectX相比较的话，已经相当简单，简练了。单从开发环境上来说，不需要特别的开发环境，WebGL这一点已经很轻松了吧。理解了本次的内容的话，只需要稍微慢慢的调整一下，就可以实现很多效果。这以后的内容，都是以这次的内容为基础的，所以必须要好好的理解一下。本文章最后，给出本文demo的链接，如果浏览器支持的话，直接看demo比较直观吧。
2014-08-08 23:10:57
16049
2
翻译 [WebGL入门]十三，minMatrix.js和坐标变换矩阵
这次介绍了一下本网站的矩阵计算的库minMatrix.js的基本的使用方法，和坐标变换矩阵的顺序。minMatrix.js通过一个叫做matIV的对象来对矩阵进行操作，各种方法的具体内容，现在不明白也不要紧，等必要的时候会进行具体的说明。生成了坐标变换矩阵之后，离绘制多边形还差一小步了。下次，终于该让多边形显示到画面上了。
2014-08-07 23:15:40
13450
翻译 [WebGL入门]十二，模型数据和顶点属性
顶点中的属性是由程序员来自由添加的，需要的VBO的个数就是添加的属性个数。顶点属性的各个数据，使用纯粹的一维数组，当然，数组的元素个数要根据想要绘制的顶点个数来定义。生成VBO的时候，首先要把缓存绑定到WebGL，然后相应的数据，要转换为相应的类型，然后使用指定的常量来写入数据。而为了避免预想之外的错误发生，数据写入结束之后，要将WebGL中绑定的缓存无效化。这样，一连串的处理之后，模型数据就可以被顶点着色器利用了。下一回以后，说一下将VBO传给着色器的步骤，首先先把VBO的准备部分好好理解一下吧。
2014-08-06 22:20:09
11038
2
翻译 [WebGL入门]十一，着色器的编译和连接
HTML代码中引入必要的javascript文件，以及描述着色器的代码。准备了着色器的编译函数和连接着色器的程序对象相关的函数。每个函数中都有是否进行了正确处理的判断。下次，准备好顶点数据，也就是说准备好模型数据，然后变换为VBO。按照前面说的步骤，一步步全都理解的话，就应该没问题了，加油吧。
2014-08-06 00:28:28
16501
6
翻译 [WebGL入门]十，矩阵计算和外部库
从长远来看，真正进行非常复杂的处理时，矩阵的知识还是不能缺少的。但是，要提前把这些都理解是很苦难的。所以，先熟练使用外部库，等能够熟练进行3D开发之后，再逐步了解这些知识是比较理想的。使用外部库的时候，也可能存在平台问题，必须边理解外部库的特征边使用，并不是说完全没有问题。本网站使用的库是管理人自己的库，会尽可能减低使用的门槛。
2014-08-04 22:28:20
10460
1
翻译 [WebGL入门]九，顶点缓存的基础
顶点里添加怎样的情报，程序员是可以自由决定的，DirectX中有一种叫做［灵活顶点格式］的机制，WebGL中顶点格式是没有的，程序员必须自己处理所有的顶点情报。只需要添加你想要添加的顶点信息的VBO就行了，VBO的生成方法以及怎样把数组信息传递给VBO等等，以后的文章中会详细的介绍。首先，把大概的流程理解一下。最难理解的是怎样把attribute变量相关联，这个以后肯定会详细的介绍的。这次，只需要了解了顶点缓存的作用就足够了。
2014-08-03 09:30:23
10553
翻译 [WebGL入门]八，着色器的说明和基础
顶点着色器和片段着色器，都可以通过GLSL来书写，基本上它们算是一个组合。着色器的内部，必须要定义一个main函数，在这个函数里面添加自己的处理。而且，要从WebGL一侧向着色器传递数据的时候，需要用到一些特殊的修饰符所定义的变量。要向着色器传递各个顶点的不同的信息的时候，使用attribute修饰符声明变量，要向着色器传递对所有顶点来说都一样的信息的时候，使用uniform修饰符声明变量。另外，从顶点着色器向片段着色器传递数据的时候，使用varying修饰符声明变量。顶点着色器中内置的变量gl_Po
2014-08-02 11:24:15
15881
5
翻译 [WebGL入门]七，context的初始化
这一次，只是获取一下WebGL的context，然后将使用黑色将画面清空一下。但是事实上，这样就可以开始使用WebGL了。接下来，会更具体更详细的介绍WebGL相关的处理，但不管做什么，基础都是很重要的，这次的内容还是需要彻底理解一下的。
2014-08-01 22:36:18
13877
3
翻译 [WebGL入门]六，顶点和多边形
顶点就是至少包含了坐标情报的三维空间上的任意的一个点，三个点用线连接起来，表现为一个三角形的多边形。而多边形根据顶点的连接顺序不同，分为内侧和外侧，根据这个可以进行遮挡剔除。接下来，实际进行渲染的时候，会从顶点的情报的定义开始。这时候，顶点的顺序，遮挡剔除等设定就变得非常重要了，所以一定要把这次的内容彻底理解。
2014-08-01 01:40:49
13122
4
翻译 [WebGL入门]五，矩阵的基础知识
这次，不是让你完全理解矩阵，就是先介绍一下，如果要阵的讲解矩阵的话，你必须一个脚踩进数学世界的大门才行。进行3D渲染，矩阵是不可缺少的，而且要彻底理解矩阵是非常难的。所以现在先明白一下矩阵到底是个什么东西就行了。以后，我有可能会专门进行矩阵的讲解，首先，简单理解一下就好。重要的是，比起零基础，先来知道一下矩阵的用处。如果有兴趣的话，网上有很多相关的介绍，理解的越深肯定越好。如果有时间的话，可以先自己看一下。
2014-07-31 23:31:50
15750
2
翻译 [WebGL入门]四，渲染准备
使用WebGL进行3D渲染，这次说了下面几个必须要做的准备。最低限度，需要HTML，canvas标签，处理WebGL的javascript代码，顶点着色器和片段着色器的代码。另外，比如要描画3D模型的模型数据，图片文件等当然有时候也是需要的，但是根据你用WebGL想要做的东西不同而不同。真要说最新限度的话，只需要一个HTML文件。javascript代码和着色器代码都可以记录在HTML文件中。基本上，本网站的所有javascript代码都是记录在单独的文件内的，而着色器的代码，也不是必须记录在HTML
2014-07-31 00:21:32
16544
2
翻译 [WebGL入门]三，3D绘图的基础知识
使用程序来模拟三维空间的时候，最终的情报必须变换成二维数据。而且三维坐标，根据平台不同，Z轴的处理是不一样的。WebGL是OpenGL的处理系，使用的是右手坐标系。为了模拟三维空间，将三维空间的情报向二维的情报进行转换，需要三个坐标变换。分别是模型变换，视图变换和投影变换，将这些变换进行组合，最终决定描画的图形内容。
2014-07-30 06:43:34
21328
4
翻译 [WebGL入门]二，开始WebGL之前，先了解一下canvas
HTML5和canvas标签，canvas标签的基础知识，WebGL和canvas，总结
2014-07-30 06:33:40
26013
1
原创 用程序来控制一个网页，实现自动输入等操作
首先今天要说的东西跟游戏无关，你是不是有时候会遇到，在某个网页上重复着几十次的简单而又无聊的录入或点击等工作？比如你的程序需要测试，需要注册大量的测试邮箱。比如你的老板是个变态，让你去各个论坛发大量的垃圾贴子（最无耻行为，纯属举例）。或者，你需要定时的到某一个网页上执行某一些行为，比如上班下班的出勤打卡系统，等等吧，如果有，那么我今天所介绍的或许会对你有帮助。当然，如果你要操作的这些网页都是自己开发的，那么无所谓了，你在多开发个工具就行了，但是我说的上面这些都是第三方的网页，你控制不了它们，如果遇到上上
2014-05-07 10:55:33
174814
122
《HTML5 Canvas 游戏开发实战》前三章试读
2013-04-22
slg游戏之多人对战版
2010-12-08
用AS3.0开发的flash版曹操传
2010-08-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人