【课程内容】
在今天的课程中,我们将学习一个更加高级的图形特效:位置交换。由于我们采用的是OpenGL ES的技术,因此最终的效果,我们有条件设计得比原版“爱消除”还要好!加油!
【源代码下载地址】http://download.csdn.net/detail/elong_2009/6450675
1、位置交换特效简介
“爱消除”核心特效就是交换消除,通过滑动某个动物,实现两个动物的位置交换。“爱消除”完成了位置交换,但这个交换却缺少交换的过程细节。
今天要设计的山寨版本,除了要完成位置交换,同时还要把交换的过程完整展现出来。也就是要把交换的完整细节过程渲染出来!
2、渲染动态控制算法类
前面介绍DrawLoading渲染类时,通过启用一个线程来修改要显示的图片picId。由于要实现的功能比较简单,当时并没用考虑用一个统一的算法类来处理这个需求。
今天,我们将设计一个控制算法类,来实现控制算法与渲染的分离。后续还会有大量的特效,也将遵循这个设计原则,实现渲染与控制分离。
动态控制算法类是为渲染类服务的,给渲染类提供必要的渲染信息:如可以为DrawLoading提供图片信息picId,以及为即将实现的DrawExchange提供坐标变换信息,等等。
本节附件提供的代码,将DrawLoading的控制动作也分离了,专门设计了CtlLoading来实现同样的功能。
动态控制算法的代码放在 package elong.CrazyLink.Control 中。
3、CtlExchange 类
DrawExchange 的实现目的很简单,就是为DrawExchange 提供交换效果所需要的坐标变换信息。
对外提供了5个公有的方法:
public void run() //执行坐标变换
public float getX1() //获取对象1的X方向偏移量
public float getX2() //获取对象2的X方向偏移量
public float getY1() //获取对象1的Y方向偏移量
public float getY2() //获取对象2的Y方向偏移量
详细代码请参考附件。
要获得不同的运动效果,修改run()就可以了。
4、DrawExchange 类
DrawExchange 的设计与前面已经完成的渲染类不同,它直接利用了已经设计好的DrawAnimal ,这样可以有效地复用代码。
4.1构造函数
DrawExchange 的构造函数原型如下:
public DrawExchange(DrawAnimal drawAnimal, int witch1, int col1, int row1, int witch2, int col2, int row2);
Para1:传入DrawAnimal对象
Para2:第一个对象要显示的图片
Para3/Para4:第一个对象的网格坐标(0~6)
Para5:第二个对象要显示的图片
Para6/Para7:第二个对象的网格坐标(0~6)
4.2动态控制对象
在前面介绍的的方法中,如果渲染类要支持动态属性,需要启动一个线程,随着渲染类逐渐增多(如数十个),管理上会变得越来越困难,而且会占用过多的资源。
在今天的课程里,我们已经改进了动态控制的方法,不再在渲染类中启动线程来修改动态属性。控制动态属性的线程,放到了CrazyLinkGLSurfaceView 类中,并且在package elong.CrazyLink.Control 里设计了一个简单的Control类来统一管理所有的动态控制对象。
package elong.CrazyLink.Control;
public class Control {
public CtlExchange exchange;
public CtlLoading loading;
//TODO:后续新增动态控制类在这里添加
}
4.3 draw 方法
在这个方法中,用动态控制算法提供的数据,执行坐标变换glTranslatef,这样,动态的交换效果就出来了,是不是很cool!
public void draw(GL10 gl)
{
gl.glPushMatrix();
gl.glTranslatef(ctlExchange.getX1()*CrazyLinkConstent.translateRatio, ctlExchange.getY1()*CrazyLinkConstent.translateRatio, 0f);
drawAnimal.draw(gl, witch1, col1, row1);
gl.glPopMatrix();
gl.glPushMatrix();
gl.glTranslatef(ctlExchange.getX2()*CrazyLinkConstent.translateRatio, ctlExchange.getY2()*CrazyLinkConstent.translateRatio, 0f);
drawAnimal.draw(gl, witch2, col2, row2);
gl.glPopMatrix();
}
4.4堆栈技术
在draw方法中,我们使用了堆栈技术。
在OpenGL ES中,调用glPushMatrix()和glPopMatrix()方法进行堆栈操作。
glPushMatrix()表示复制一份当前矩阵,并把复制的矩阵添加到堆栈的顶部;glPopMatrix表示丢弃堆栈顶部的那个矩阵。
可以这样理解:glPushMatrix()记录下当前坐标的位置,经过一系列的平移、旋转变换之后,调用glPopMatrix()回到原来的坐标位置。
把DrawGrid/DrawAnimal/DrawLoading/DrawExchange叠加在一起使用的效果图如下:整个交换的过程细节渲染得非常清楚。