2D手机游戏的即时阴影效果

转载要注明作者、出处哟。转自：http://leestorm.iteye.com/blog/900514

前段时间在做可以兼容J2ME和Android的ARPG引擎，获得一些心得。2D手机游戏似乎画面上没什么突破，几乎都是靠美工把地图画得华丽一些，然后加一些云朵、光晕的贴图，再弄点下雨、下雪啥的，已经见怪不怪了。看了一些前几年的PC游戏，同样是2D，像暗黑就有模拟的光照效果，场景有明暗之分，人物也阴影效果。目前手机游戏有点类似当年的形态，当然即时是现在的手机也无法与当年的PC性能抗衡。要在2D手机游戏上实现这些效果肯定要降低效果的质量。

先来说阴影，原理其实很简单，比如要给一个人物精灵绘制阴影：

1）将精灵原图按比例拉伸、旋转

2）转换成带alpha效果的黑色图片

3）绘制到人物脚下

OK！既然这么简单，立马实现到现有的游戏中去看看效果！

结果，效果是出来了，速度却慢得惊人，由于是即时绘制，在我的N85上帧速只有5~8左右，这还只是一个人物精灵的绘制，如果给每个NPC都加上阴影……嗯，你懂的。

好吧，这可是即时运算，我们得找找影响CPU发挥的瓶颈在哪：

1）图像的拉伸、旋转网上有很多算法，什么插值法、扫描法……前辈们总结了很多，这可是在虚拟机上跑，过高的时间复杂度，甚至涉及浮点运算肯定会让速度大打折扣。

2）还有，获取原图的RGB信息，经过一系列的翻转、拉伸，然后新建个动态图像，把RPG值转成黑色填进去，再调整alpha值，再贴到指定位置……这么折腾N85居然能做到5帧，太给力了！

了解了瓶颈所在，下面停止扯淡，介绍一下我的优化方法：

跳过拉伸、旋转操作，每帧都做这么大开销的操作就是手机电池也不会答应。我们可以直接扫描图像的RGB信息，扫描到非透明的RGB值时计算出对应点的位置（计算这里涉及三角函数，为了提升性能以及兼容MIDP1.0，建议用查表法）。跳过新建图像以及alpha调整的操作，我们可以预先建立好一个半透明的黑色影子图片来贴图。

coding...经过一系列的折腾，效果出来了：

感觉还不错吧？场景中有4棵树绘制了阴影，N85实机帧数是20上下。（这是WTK2.5的模拟器截图，由于还开启了引擎的模拟明暗效果，所以帧数下降到了12。）

等等，N85在主流J2ME手机里算不错的，一个影子效果就让PFS降到了20，那以后加上模拟水波、模拟光照、模拟天气等等效果，不是得卡死？嗯……让我来进一步优化，不过这次可就要稍微降低一些影子的质量了：

逐个像素扫描图片，运算量也是相当惊人的，80x32的一棵小树就要判断2560次！我们可以间隔着扫描，比如扫描某行RGB信息时，扫描1个像素然后跳过下面4个像素再扫描下一个，这样影子效果可能有一些偏差，但是大致轮廓还是很清晰的。（如果扫描的像素非透明就用准备好的半透明影子图片绘制一个1x4的影子，跳过接下来4个像素继续扫描，继续绘制……）来看效果：

跳过2个像素

跳过4个像素

FPS提升了5倍！好吧，你应该有所启发，横向、纵向扫描越过几个像素完全由你控制，我们可以理解为扫描精度。来更进一步优化，即便是跳着扫描，仍然需要判断很多次，而我们只是要获得精灵的大致轮廓，画出阴影而已。我们完全可以从图片的两边扫描不透明点的起始位置，然后计算不透明区域的长度，根据这个长度直接贴图！

好吧，光放几张鸟图，不贴代码是不厚道的，下面是影子绘制部分的核心代码（写的比较烂，望海涵）：

   /** 利用透明图片绘制向下的影子  
    * @param g Graphics  画布对象  
    * @param img Image  要绘制阴影的原图  
    * @param px int  绘制x位置  
    * @param py int  绘制y位置  
    * @param height int  影子高度（<=原图像素高度）  
    * @param scanSkip int  扫描跳过的像素个数（1最高精度，建议用2）  
    * @param cot256 int  影子角度的cot值（这里是查表法得来的256倍）  
    */  
   public static void drawTransShadowDown(Graphics g, Image img, int px,   
    int py, int height, int scanSkip, int cot256) {   
  
int w = img.getWidth();   
int h = img.getHeight();   
int pels[] = new int[w];   
int ofx = 0;   
int scanH = 256 * h / height;   
  
int startX = 0;   
int endX = 0;   
int rowIn = 0;   
int scanIn = (h - 1) * 256;   
g.setColor(0x000000);   
  
while (scanIn >= 0) {   
    //跳过扫描？   
    if (rowIn % scanSkip == 0) {   
    img.getRGB(pels, 0, w, 0, scanIn >> 8, w, 1);   
    //扫描起始位置   
    for (int j = 0; j < w; j++) {   
        if ((pels[j] >> 24) == -1) {   
        startX = j;   
        break;   
        }   
    }   
    //扫描结束位置   
    for (int j = w - 1; j >= 0; j--) {   
        if ((pels[j] >> 24) == -1) {   
        endX = j;   
        break;   
        }   
    }   
    //这个方法是我自己里面封装的，类似DrawRegion，transImg是一张半透明黑色图片   
    BaseCanvas.drawImage(g, transImg, 0, 0, endX - startX + 1,   
        scanSkip, 0, px + (ofx >> 8) + startX, py + rowIn, 20);   
    }   
    ofx += cot256;   
    rowIn++;   
    scanIn -= scanH;   
}   
   }  

查表法求三角函数：

//sin(0°) to sin(90°)    all *256   
public final static int SIN_TABLE[] = {   
    0, 4, 8, 13, 17, 22, 26, 31, 35, 39,   
    44, 48, 53, 57, 61, 65, 70, 74, 78, 83,   
    87, 91, 95, 99, 103, 107, 111, 115, 119, 123,   
    127, 131, 135, 138, 142, 146, 149, 153, 156, 160,   
    163, 167, 170, 173, 177, 180, 183, 186, 189, 192,   
    195, 198, 200, 203, 206, 208, 211, 213, 216, 218,   
    220, 223, 225, 227, 229, 231, 232, 234, 236, 238,   
    239, 241, 242, 243, 245, 246, 247, 248, 249, 250,   
    251, 251, 252, 253, 253, 254, 254, 254, 254, 254,   
    255  
};   
  
  
/** 查表法求SIN值  
 *  
 * @param angle int 0到360度  
 * @return int  返回SIN值的256倍  
 */  
public static int sin256(int angle) {   
    angle %= 360; // 360 degrees   
    if (angle <= 90) { // 0..90 degrees   
        return SIN_TABLE[angle];   
    }   
    else if (angle <= 180) { // 90..180 degrees   
        return SIN_TABLE[180 - angle];   
    }   
    else if (angle <= 270) { // 180..270 degrees   
        return -SIN_TABLE[angle - 180];   
    }   
    else { // 270..360 degrees   
        return -SIN_TABLE[360 - angle];   
    }   
}   
  
public static int cos256(int angle) {   
    return sin256(angle + 90); // i.e. add 90 degrees   
}   
  
public static int cot256(int angle){   
    return cos256(angle)*256/Math.sin256(angle);   
}   
  
public static int tan256(int angle){   
    return sin256(angle)*256/Math.cos256(angle);   
}  

最后，有一个问题值得注意，细心观察自然界的影子，其实并不是直接旋转一下原图的效果，而是根据光源的位置投影而来的。网上有些那原图直接翻转的方法其实是错的，本文的方法也不太正确，但至少在2D游戏里看上去像那么回事，哈哈，看图为证~

刚开始在这写点东西，技术不足还请多多指教。我对J2ME、Android游戏开发很感兴趣，望有朋友能一起交流QQ:350751373。