我好像又发现了什么,我们是不是可以用mcY来控制人物的朝向?实际上是动画场景的不同,注意,我们的动画场景一般指一个独立的动画对象,现在我们可以注意到这个动画场景的总长度是3,也就是3帧走路的动画,那么我们可以试试让这个小人动起来,我们对upFrameData函数做如下修改:

         在这里,我们先强行设置了动画帧的长度,和mcY的值,因为人物动画是32*32的,所以我们以mcX做为动画播放的依据,现在的逻辑是3帧循环播放,如果没有出任何问题的话,你的小人现在应该已经行动起来了,细心的你一定发现了什么,没错,我们现在这样写很不方便操作,我们需要把动画的信息提取出去做为一个参数,并且可以手动输入这个值,所以我们需要做一个设计和规则来制定这个动画标准,我们使用mcY来控制动画的上下移动,mcY控制动画的左右移动,并且以3帧为一个循环,所以我们需要设置一个动画帧的播放头,也就是这个动画的起始帧的位置,这个播放头需要2个参数,动画播放头所在的mcX位置和mcY位置,现在让我们添加新的2个成员变量，然后修改upFrameData的逻辑,如下.

看到了吗,实际上我们设置播放头时不需要再关心这个动画的尺寸是多少了,所以我们让播放头乘以动画的宽度和高度,现在让我们回到Main.js,试试在外部修改他们的参数吧.

基于刚才的封装,我们可以毫不关心它的内部逻辑了,我们只要输入动画需要播放的参数即可,现在让我们试试把这个小人添加到整个场景上,并且随机播放某一段动画吧,

因为动画是3帧一段,所以图片的横向排列一共是4段,我们取了一个随机数然后取整再乘以3,纵向排列只需要去8段中的其中一段就好了,现在让我们看看发生了什么.

50个不同动画段的小人运动着,哇,我突然有一个想法,我们加入地图和建筑吧,现在你可能还需要另外一张图片资源,没关系,我也已经给你准备好了,右键查看原图保存吧.

到目前为止,我们只是加载了一张图像资源而已,现在我们可能需要写一个简易的队列加载器允许我们加载N张图片,那么我们只需要在Main.js中加入以下代码.

我们让图像加载完毕后存入imageStart数组方便我们之后的调用,现在我们需要更改一下游戏启动的函数,就像这样.

现在我们的图像资源访问应该改成这样

好了,一切准备就绪,在我们开始拼接地板前,我们可能需要对DisplayObject.js做一点修改,因为目前来说我们把裁切封装成动画专属了,而很多情况下我们是不需要动画的而只是裁切而已,所以我们需要加一个开关,就像这样

默认是开启动画的,而我们不需要是手动关闭,然后裁切的属性又回归我们所有了,为了拼接地面我们新建了一个函数.

关闭了它的动画自动裁切功能,我们手动设置了裁切位置,裁切的宽度和高度为32,位置为0,0因为草地的图片就在原始图像的0,0点,以左上角为原点.然后把它添加到人物初始化之前,因为它的显示层级最低