用cocos2dx开发斜45度社交游戏（一）地图的设计



无论什么项目的开发都要有一定的技术积累和实施步骤，就像楼房的建设也是从最基本的地基开始的，地基打不好，大楼盖装饰的再漂亮也只是一个失败的作品。好吧，闲话还是少说，来点实际的，先来介绍一下此系列教程的大致流程：前面几节我会主要介绍一些前期的技术积累，后面的章节我会把我的优化过程等等分享出来。注：本人第一次开发此类游戏，当然所有的资料都来源于互联网和一些开源工程，知道出处的我会尽量注明出处，不知道的也就没有办法了。

         首先，在开始前你应该知道游戏中的地图是拼接起来的，关于为什么是拼接起来的我想不用我来废话，看下图就知道了：拼接使我们节约了内存（下图引子手机游戏开发全书）

 

如果还是不明白，那就直接从网上下载pdf看看吧！

上图为正视角的情况，而我们的地图是斜45度地图，那么这里你首先要对这个角度有所理解（一下来自一个叫杜宇欣的哥们的文章，2000年的文章，12年了啊，老古董不过很有用）：

我们已经可以感觉到该图体现的视觉效果并不是从空中垂直向下看，而是视线和地面之间有一个角度，这个角度就是斜视角游戏中的视角。在不同的游戏中，这个角度的大小可以是不同的。现在你应该知道斜视角中度数到底指的是什么了。

 

知道了这些你可能就会问了，地图如何去拼接？图片是菱形的怎么处理？

想进一步了解就接着看吧！

计算机中处理的图片都是矩形的，也就是说只能使用矩形的图片来存放菱形的瓦块。这样就出现了一个问题，如何对存放tile图片进行拼接，才能呈现出无缝的连接？以及拼接后重叠部分要如何处理！两种策略：一种方法是在制作每个tile图片是将多余的部分使用黑色 (颜色值为 0) 填充，在将tile绘制到屏幕上前将整个地图区域也使用黑色填充，然后使用异或方式将每幅tile图片绘制到屏幕上，也就是绘制前先让tile图片中的每个像素和屏幕上对应像素进行异或运算。另一种大家都懂的，直接把菱形外的部分设置为透明。

那么下面给出地图的拼接的思路：

现在引入绝对坐标系，绝对坐标系是为了方便地确定游戏中各种图片在屏幕上的显示位置和解决物体遮挡问题而引入的一个坐标系。下面首先结合图5.6来说明确定tile图片在屏幕中显示位置的方法。在绝对坐标系中使用像素作为刻度单位，坐标原点就是地图坐标为 (0, 0)的tile的图片的左上角，即图中的A点，X和Y坐标轴 (图中没有标出) 就是穿过A点的水平直线和垂直直线，X轴的正方向是水平向右，而Y轴的正方向是垂直向下。由图中可以看出，地图横坐标(X)每增加一个单位，tile图片的输出位置就在水平方向上增加width/2个像素，在垂直方向上增加height/2个像素；而地图纵坐标(Y)每增加一个像素，tile图片的输出位置就在水平方向上减少width/2个像素，在垂直方向上增加height/2个像素。所以，地图坐标为 (x,y) 的tile的图片在绝对坐标系中的输出位置(ax, ay)可以用下面的公式得到：

ax = (width / 2) * (x – y)，ay = (height / 2) * (x + y)

如图中灰色tile的图片在绝对坐标系中的输出位置B点的坐标为：

Bx = (width / 2) * (3 – 1) = width，By = (height / 2) * (3+1) = height * 2

为了计算出tile图片在屏幕上的输出位置，还必须记录每个时刻屏幕区域 (视口) 在绝对坐标上的位置。假设当前视口的左上角的绝对坐标为 (vleft, vtop)，那么tile图片在屏幕上的输出位置 (px, py) 就是：

px = ax – vleft，py = ay – vtop

 

好了拼接思路有了，那么现在行动！

在这里，我用一个CCSpriteBatchNode作为左右地面瓦块的渲染类，关于为什么用它，很明显提高渲染速度，因为CCSpriteBatchNode是将其内部的所有子节点一次绘制屏幕，而相对每个精灵的单独绘制，这样会节约绘制函数调用次数提高渲染速度。

for (int i=0; i

        for (int j=0; j

            int xPos=originPosition.x+(i-j)*halfWidth;

            int yPos=originPosition.y-(i+j)*halfHeight;

            TileItem * tileItem = this->tileItemAtTile(ccp(i,j));

            char * tName=(char*)TileImageNames[tileItem->m_iImageID];

            CCTexture2D*t2D=CCTextureCache::sharedTextureCache()->textureForKey(tName);

            CCSprite * spriteBack=CCSprite::createWithTexture(t2D);

            spriteBack->setPosition(ccp(xPos, yPos));

            groundBatchSprite->addChild(spriteBack);

        }

    }

对于拼接效果我就不上图了，对了我，我是按原点（0，0），坐标轴正方向递减来做的！