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。
