山寨腾讯“爱消除”游戏7日教程

腾讯“爱消除”游戏7日教程"/>

山寨腾讯“爱消除”游戏7日教程

 

【课程内容】

在今天的课程中，我们将学习一个更加高级的图形特效：位置交换。由于我们采用的是OpenGL ES的技术，因此最终的效果，我们有条件设计得比原版“爱消除”还要好！加油！

【源代码下载地址】

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叠加在一起使用的效果图如下：整个交换的过程细节渲染得非常清楚。