首页 > 代码库 > HTML5 2D平台游戏开发——地图绘制篇

HTML5 2D平台游戏开发——地图绘制篇

2024-09-30 23:32:39   217人阅读

<style></style>

　　此前已经完成了一部分角色的动作，现在还缺少可以交互的地图让游戏看起来能玩。不过在开始之前应当考虑清楚使用什么类型的地图，就2D平台游戏来说，一般有两种类型的地图，Tile-based和Art-based，即基于瓦片风格和美术风格两种。Tile-based的典型代表是《Super Mario》(超级马里奥)，Art-based记不太清楚了，能够回想起来的是去年出的一款叫做《Owlboy》(猫头鹰男孩)的游戏。

 技术分享 技术分享
 Super Mario Owlboy

由于Art-based的实现需要一款较为专业的可视化游戏开发工具，因此我选择较为传统的Tile-based。

 

  • 瓦片尺寸的选择

 　　通常可选的瓦片尺寸有16X16、32X32、64X64、128X128等，都是2的N次方。原因之一当然是比较好计算，另外一个原因是计算机对2的倍数计算速度有比较明显的优化。这里采用32X32的尺寸。

技术分享
游戏中暂时用到的瓦片集合

 

  • 将瓦片集合制作成地图

 　　Tiled Map Editor是一款非常强大的地图编辑软件，体积不大而且还是开源的，是地图编辑的首选。

技术分享

 

编辑中的地图

可以添加多个图层来表现游戏地图的层次，这里使用两个图层，背景层和地面层。经过考虑，我暂时不打算使用对象层，故而上面的勾去掉了。虽然添加这个层可以很方便地得到碰撞数据，但需要对每个碰撞的部分建立包围盒，当地图很大并且很多的时候就十分耗费时间去添加和维护，后期会在添加角色出生点或者寻路时才使用它。

 

  • 导出地图数据

　　将地图数据导出为JSON格式，得到类似下面的数据：

layers:[    [3, 3, 3, 8, 9, 3, 3, 3, 3, 3, 3, 3...],//背景层    [-1, -1, -1, -1, -1, -1,-1, -1, 10...]//地面层]

其中的数字代表瓦片在瓦片集合中的索引，不过需要注意索引是从1开始的，而一般我们计算时都喜欢从0开始，可以在代码中将其减去1或者用数组的map方法处理一下并覆盖原始数据。同时建立一个列表来标注瓦片的类型：

MAPCONFIG.FIELDTYPE = {    ‘solid‘: [0, 1, 2, 13, 14, 15, 26, 27, 28, 30, 31, 32, 33, 34, 35],    ‘null‘: [3, 5, 6, 7, 8, 9, 11, 12, 16, 17, 18, 19, 22, 23]};

根据瓦片的数字来判断它是否需要建立碰撞包围盒，这样就省去了上述建立对象层的步骤。

 

  • 在画布上绘制地图

　　上面已经得到了地图数据，可以开始进行地图的绘制了。新建一个地图管理函数MapManager()：

class MapManager {    constructor(level, ctx, assets) {        this.spriteSheet = assets.image;        //416,96 所采用图片资源的宽高        this.dimensions = {w: assets.w, h: assets.h};        this.level = level;        this.layerLength = this.level.layers.length;        this.ctx = ctx;    }    //prototype ...}

接下来需要一个获取瓦片代表数字的方法getTile()，这个方法返回像3,5,-1这样的数字，即瓦片在图片上的索引。

//layerIndex 图层索引//col 瓦片所在列的编号//row 瓦片所在行的编号getTile(layerIndex, col, row) {    //this.level.cols为整个地图的列数    return this.level.layers[layerIndex][row * this.level.cols + col];}

_drawLayer()方法绘制一个层：

let startCol = 0,//起始列endCol = 40,//结束列startRow = 0,//开始行endRow = 20,//结束行tileSize = MAPCONFIG.TILESIZE;//32for (let r = startRow; r < endRow; r++) {    for (let c = startCol; c < endCol; c++) {        let tile = this.getTile(layerIndex, c, r),        x = (c - startCol) * tileSize, //瓦片的x坐标        y = (r - startRow) * tileSize; //瓦片的y坐标        if (tile !== -1) {//-1代表空瓦片不绘制            this.ctx.drawImage(
　　　　　　　　this.spriteSheet, 
　　　　　　　　tile * tileSize % this.dimensions.w, //瓦片精灵图上的x坐标            　Math.floor(tile * tileSize / this.dimensions.w) * tileSize, //瓦片精灵图上的y坐标　　　　　　　　tileSize, tileSize, 
　　　　　　　　Math.round(x), Math.round(y), 
　　　　　　　　tileSize, tileSize
　　　　　　　);        }    }}

_drawMap()方法绘制多个层：

_drawMap() {　　this.level.layers.forEach((layer, index) => this._drawLayer(index));}

最后使用render()方法进行绘制：

render() {    this._drawMap();}

最终得到下面的地图：

技术分享

这类绘制地图的方法在很多游戏中也通用，我曾经在《使用HTML5制作简单的RPG游戏》里也使用了同样的地图数据格式，不过那时是依靠框架完成的，里面具体发生了什么自己并不清楚，现在正好回顾和总结一下。

 

  • 处理地图与角色的碰撞

　　现在地图还只是单纯的视角效果，并不能与角色产生交互，需要将各个瓦片进行标注，以表明它到底是不能通过的固体还是可以通过的空瓦片。在此之前，需要先了解一个概念，即axis-aligned bounding box，翻译过来就是轴对齐边界盒子，简称AABB。通过为瓦片与角色建立AABB，可以很方便地检测它们之间是否碰撞，这一概念在之前写过的一篇文章《Chrome自带恐龙小游戏的源码研究(七)》中也有涉及到。至于更为复杂的碰撞检测，比如SAT，现在还没有深入研究，后续会逐步加入游戏中。

AABB的实现代码：

class AABB {    /**     * 碰撞盒子     * @param x    {number} 盒子x坐标     * @param y    {number} 盒子y坐标     * @param w    {number} 盒子宽度     * @param h    {number} 盒子高度     */    constructor(x,y,w,h) {        this.pos = new Vector(x,y);        this.size = new Vector(w,h);        this.center = new Vector(this.pos.x + w / 2,this.pos.y + h / 2);        this.halfSize = new Vector(this.size.x / 2,this.size.y / 2);    }}

其中又涉及到向量的概念(累??)，向量在2D和3D游戏中都有着大量的应用，属于硬知识。下面为瓦片添加AABB，回顾MapManager方法，为其添加一个存储AABB的数组：

constructor(level, ctx, assets) {    this.gridForAABB = [];    //......}_drawLayer(layerIndex) {    let startCol = 0,   //起始列        endCol = 40,    //结束列        startRow = 0,   //开始行        endRow = 20,    //结束行        tileSize = MAPCONFIG.TILESIZE,        isSolidLayer = layerIndex === (this.layerLength - 1),        grid = [];    for(let r = startRow; r < endRow; r++) {        for (let c = startCol; c < endCol; c++) {            let tile = this.getTile(layerIndex, c, r),                x = (c - startCol) * tileSize,  //瓦片的x坐标                y = (r - startRow) * tileSize;  //瓦片的y坐标            //......            if (isSolidLayer) {                //如果遇到的瓦片是固体                if (MAPCONFIG.FIELDTYPE[‘solid‘].includes(tile)) {                    //为其建立AABB                    grid.push(new AABB(c, r, 1, 1));                } else grid.push(tile);  //存入普通瓦片                    }        }    }    //将所有瓦片的AABB数据保存起来    if (isSolidLayer) this.gridForAABB = grid;}

如同上面的getTile()方法一样，得到一个瓦片的AABB可以用如下代码：

gridForAABB[row * this.level.cols + col]

最后，需要将其与角色的位置联系起来。

 

  • 获取影响角色位置的瓦片

　　首先观察一张图

技术分享

假设玩家在地图里向右移动，此时角色占据的空间为蓝色部分区域，因此需要在这个范围内查找有没有障碍物阻止角色移动，在MapManager()函数中新增一个方法：

    obstacleAt(layerIndex, pos, size) {        let startCol = Math.floor(pos.x), //player‘s x position             endCol = Math.ceil(pos.x + size.x), //pos.x plus player‘s width             startRow = Math.floor(pos.y),             endRow = Math.ceil(pos.y + size.y);        for (let c = startCol; c < endCol; c++) {            for (let r = startRow; r < endRow; r++) {                let tile = this.getTile(layerIndex, c, r),                    fieldType = null;                if (MAPCONFIG.FIELDTYPE[‘solid‘].includes(tile)) {                    fieldType = ‘solid‘;                }                if (fieldType) return {col: c, row: r, fieldType: fieldType};            }        }        return null;    }

一旦在这个区域找到障碍物，立即返回它。

接下来需要处理角色与障碍物的碰撞：

技术分享

假设角色在移动中碰到了右边的障碍物(橘色部分)，此时应当修正角色的位置避免继续碰撞：

技术分享

以下是测试中的效果：

技术分享

不过一些细节还需要调整，有时间的话会继续更新。

 

更新日志

　　2017/04/09  更新角色跳跃

　　2017/04/21  更新角色冲刺

　　2017/05/01  更新角色状态机

　　2017/05/16  更新角色攻击动画

　　2017/05/22  更新角色移动攻击动画

　　2017/05/24  更新角色跳跃攻击动画

　　2017/06/04  更新地图绘制

HTML5 2D平台游戏开发——地图绘制篇


联系
我们