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的像素宽

Int
m_TileHeight; //Tile的像素高


SMapTile* m_pTileArray;
//TILE数组指针

Vector<SMapElement> 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 I = 0 ;
I < TileNumY; I ++)

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度移动。这样就能产生立体感了。


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


好了，基本的原理都讲解完了，看起来不难。但需要您亲自动手来实现它。开始吧,祝好运!