2D横纵版与斜视角游戏地图开发原理

2D横纵版与斜视角游戏地图开发原理

作者Honghaier

QQ：285421210

日期:2009-12-8开发前提：

1．假设您已经常握了C++语言，并能够熟练使用VC++开发工具。

2．假设您已经能够成功的封装了一个C2DPicture类。它具有以下函数。

//载入图片文件,成功返回一个索引值，失败返回-1

Int LoadImage(const char* szFileName);

//取得纹理

LPDIRECT3DTEXTURE9 GetTexture();

//取得图片信息

Int GetImageWidth();

Int GetImageHeight();

如果您无法做出这样的类，可以参考D3D的可变顶点格式D3DFVF_XYZW,有很多例子。

3. 出于效率的考虑，我认为您应该写一个管理器来管理这些C2DPicture类。假设叫C2DPictureManage.它具有以下函数.

Public:

//载入所有图片,在这里你可以加载图片

BOOL Init();

//取得对应的C2DPicture指针

C2DPicture* GetPicture(int PictureIndex);

Void ShowPicture(int PictureIndex,int Left,int Right,int Width,int Height);

Private:

//在指定位置渲染图片

Void Render(LPDIRECT3DTEXTURE9 pTexture int Left,int Right,int Width,int Height);

注：为什么不在C2DPicture类中做这个函数呢，因为出于效率的考虑，我们可以在C2DPictureManage定义四个顶点就行了，在ShowPicture函数中通过PictureIndex来获取C2DPicture对象指针。然后取得纹理和图片通过Render进行D3D渲染;

原理简述：

2D的横纵版地图：

整个地图由横，纵，二个方向的TILE块组成。每个TILE块即是一层或几层图片。具体多少层看您的游戏设置了，一般来说，一个TILE里可以放三层，最底层是背景，第二层是远建筑，第三层是近建筑。当然，这只是基于拼合关系的TILE图，还有大量的草，树，星星什么的。是不基于拼合关系的。

所以您需要好好设计数据结构，比如这样，分为两种结构，

1．基于拼合的TILE

Struct SMapTile

{

Int mPosX; //在地图中绝对位置X

Int mPosY; //在地图中绝对位置Y

Int Picture[3]; //三层图片的ID

}

;

2．不固定的地图元素

Struct SMapElement

{

Int mPosX; //在地图中绝对位置X

Int mPosY; //在地图中绝对位置Y

Int mPictureIndex; //图片索引

};

图1.1

在这里，我引入了一个典型的2D横纵版场景。每个TILE是45 * 32 像素的。我们这里的TILE三层为别是背景墙，斜桥，近墙，放在SMapTile结构中。不固定元素有草，灯光台。放在SMapElement结构中。

这只是一屏。实际上一个游戏场景需要至少几十屏，也可能上百屏。所以这一屏，只是整个场景中的一小区块。

所以一般我们会定义一个地图类CMap,它可能有以下成员

Private:

Int m_MapWidth; //地图的TILE横向数量

Int m_MapHeight; //地图的TILE纵向数量

Int m_TileWidth; //Tile的像素宽

SMapTile* m_pTileArray; //TILE数组指针

Vector m_MapElementVec[3]; //介与各层间的元素数组

Public:

BOOL CreateNewMap(int vWidth,int vHeight,); //创建地图,动态为TILE数组申请内存并初始化,如m_pTileArray = new SMapTile[vWidth*vHeight];

VOID SetTilePicture(int vTileX,int vTileY,int vLayerIndex,int vPictureIndex); //为指定的TILE的指定层设置图片索引

VOID AddElement(int vLayerIndex,int vPosX,int vPosY,int vPictureIndex); //放入元素

VOID RenderMap(int vLeft,int vTop,int vWidth,int vHeight); //显示场景中处于vLeft, vTop, vWidth, vHeight区块的地图。这个理所应当就是屏幕矩形了。 VOID RenderElement(int vLayerIndex, int vLeft,int vTop,int vWidth,int vHeight); //显示处于对应矩形中的元素

那么，怎么能够显示任意区块呢？这个就是2D场景漫游了。

首先，我们先创建一个地图，假设设为200*100的TILE横纵向数量。并设置TILE像素高，宽为48*48。这样我们就知道场景有多大了。一个屏幕一般为800*600大小。则 200*48 * 100 *48 / (800*600) = 96屏. 嗯，貌似还可以。

我们在RenderMap函数中应能够正确的处理TILE和元素的渲染。下面是实现过程。

我们假设有全局对象C2DPictureManage G_PictureManage;

VOID CMap::RenderMap(int vLeft,int vTop,int vWidth,int vHeight)

{

Int TileX = vLeft / m_TileWidth ; //计算格子位置

Int TileIY = vTop / m_ TileHeight;

Int OffSetX = vLeft% m_TileWidth; //计算偏移

Int OffSetY = vTop % m_ TileHeight;

//计算从哪开始贴图

Int Left = OffSetX > 0 ? (OffSetX - m_TileWidth) : 0;

Int Top = OffSetY > 0 ? (OffSetY - m_TileHeight) : 0;

//计算总共多少TILE

Int TileNumX = OffSetX > 0 ? (vWidth / m_TileWidth +1) : (vWidth / m_TileWidth;)

Int TileNumY = OffSetY > 0 ? (vHeight / m_ TileHeight +1) : (vHeight / m_ TileHeight;)

//背景

For(int J = 0 ; j < TileNumX ; j ++)

{

Int TileIndex = I * m_MapWidth + j;

Int PictureIndex = m_pTileArray[TileIndex]. Picture[0];

If(PictureIndex >= 0)

{

G_PictureManage. ShowPicture (PictureIndex, Left + j* m_TileWidth , Top + i* m_TileHeight, m_TileWidth, m_TileHeight); }

}

//背间与远建筑层间元素

RenderElement(0, vLeft, vTop, vWidth, vHeight);

//远建筑层

For(int I = 0 ; I < TileNumY; I ++)

For(int J = 0 ; j < TileNumX ; j ++)

{

Int TileIndex = I * m_MapWidth + j;

PictureIndex = m_pTileArray[TileIndex]. Picture[1];

If(PictureIndex >= 0)

{

G_PictureManage. ShowPicture (PictureIndex, Left + j* m_TileWidth , Top + i* m_TileHeight, m_TileWidth, m_TileHeight); }

}

//远建筑层与近建筑层间元素

RenderElement(1, vLeft, vTop, vWidth, vHeight);

//近建筑层

For(int I = 0 ; I < TileNumY; I ++)

For(int J = 0 ; j < TileNumX ; j ++)

{

Int TileIndex = I * m_MapWidth + j;

PictureIndex = m_pTileArray[TileIndex]. Picture[2];

If(PictureIndex >= 0)

{

G_PictureManage. ShowPicture (PictureIndex, Left + j* m_TileWidth , Top + i* m_TileHeight, m_TileWidth, m_TileHeight); }

}

//近建筑层上元素

RenderElement(2, vLeft, vTop, vWidth, vHeight);

}

//显示处于对应屏幕矩形中的元素

VOID CMap::RenderElement(int vLayerIndex, int vLeft,int vTop,int vWidth,int vHeight)

{

//取得数量

Int size = m_MapElementVec[vLayerIndex].size();

For(int I = 0 ; I < size ; i++)

{

//图片索引

Int PictureIndex = m_MapElementVec[vLayerIndex][i]. mPictureIndex;

If(PictureIndex > 0)

{

C2DPicture* tpPicture = G_PictureManage.GetPicture(PictureIndex);

If(tpPicture)

{

Int Left = m_MapElementVec[vLayerIndex][i].mPosX;

Int Top = m_MapElementVec[vLayerIndex][i].mPosY;

Int Right = Left + tpPicture-> GetImageWidth();

Int Bottom = Top + tpPicture-> GetImageHeight ();

//判断与格子是否有交集

If(Left > (vLeft + vWidth))continue;

If(Top > (vTop + vHeight))continue;

If(Right < (vLeft))continue;

If(Bottom < (vTop))continue;

//如果有交集，则渲染

G_PictureManage. ShowPicture (PictureIndex, m_MapElementVec[vLayerIndex][i].mPosX - Left , m_MapElementVec[vLayerIndex][i].mPosY - Top);

}

}

}

}

以上是核心显示代码，为了测试，您可以写一个MFC程序并完善SetTilePicture，AddElement等函数。通过鼠标消息处理来增加对应的TILE和元素，并通过键盘移动来改变屏幕的矩形。来制做一个可以漫游的简单的场景编辑器。

OK,2D横纵版的场景原理讲述完了。

斜视角的地图：

斜视角地图一般分为两类:45度角和30度角的。理解起来就是45度角的TILE是正方形， 30度角的TILE是宽高比为2：1. 45度角的斜视角拼合会感觉眼角立体感陡一些，用得较少，一般都是30度的，

图1.2

如图所示，所有的TILE中图片都是斜30度的。

其实从绘制上与之前讲的横纵绘制并没有什么不同，算法不需要什么大的改动。但是在场景移动时。加上向左上30度移动。向左下30度移动。向右下30度移动，向右上30度移动。这样就能产生立体感了。

一般视角会随着主角人物的移动来漫游，人物移动，带动屏幕矩形移动。如果要实现斜视角。则一般为人物八个方向的图片。然后在移动时通过人物的位置来取得屏幕在整个地图的矩形位置，然后绘制地图就行了。