在游戏中，角色的影子处理是一个比较重要的问题，在我之前系列的演示效果中，一个没有影子的角色在地图上行走，总是显得很生硬，用直白的话来讲，就是很假！不够真实！

　　在一些现成的2D游戏中，影子处理起来有多种方法，而且都在实际中找得到对应的游戏！总体来说应该是有这三种(对此没有深入研究，如有更多，欢迎大家指点)：

　　第一种：由美工为每一帧图都处理好一个影子，影子图有和精灵图混在一起的，程序中不需要额外处理，也有分离出一张单独的影子图，再通过程序合成到一起的！它的优点显而易见，程序处理起来非常容易！缺点也很明显，美工的工作量加大了，游戏资源更大了！页游一般很少用这种方式！在页游中，尽量保证图片不失真的情况下，图片素材越小越好！

　　第二种：直接通过程序将精灵图进行变形，变黑而生成影子，优点是控制自由，并且可以配合光源的变动，让影子产生更多的变化，更逼真！缺点是需要程序进行一些较复杂的处理！在html5中，要进行大量的像素级操作来实现，而且效果不一定好！

　　第三种：也是我在演示页面中采用的方法，现在大多数页游中都采用的方法，用一张图形的半透明的黑色圆形图片来做影子，即满足需求，也处理简单！缺点么，就是光源永远处在正上方，所有人物的影子都是一个大圆砣砣！

　　在这里，我就介绍，如果来实现角色的影子效果！

　　在我们之前的ObjectEntity中,有一个Containet的数组，它里面的元素会在父对象执行Draw方法与Update方法时被执行，我们可以定义一影子对象，放到Containet中，就可以让它绘制出来了！

　　首先，这里要用到一张PNG图片：

　　然后定放一个方法，为每个角色来生成影子

var shadowPic = new Image(); shadowPic.src="Data/UI/Shadow.png"; function GetShadow(value) { var shadow = new j2d.ObjectEntity(); shadow.DrawObject=shadowPic; shadow.Width=shadowPic.width; shadow.Height=shadowPic.height; shadow.Offset.X=100; shadow.Offset.Y=34; shadow.ID="Shadow_"+value.ID; shadow.Update=function(){ shadow.Coordinate.X=value.Coordinate.X; shadow.Coordinate.Y=value.Coordinate.Y; }; shadow.IsComplete=true; return shadow; }

　　var shadowSprite = GetShadow(hero);
　　将影子添加到精灵的 Containet 容器中!
　　hero.Containet.push(shadowSprite);

　　这下生动多了，演示效果：

　　源码下载地址：稍后放出

原创作品，转载请注明作者：翅膀的初衷 出自：http://www.jiniannet.com

演示地址：http://www.jiniannet.com/html5
本文同步发表于博客园

注：原域名iis0已弃用，启用新域名www.jiniannet.com