本文作者: 射手座团队 蟹老板

在《猎头专家》里,站得高不一定是好事,掉坑里也不一定是坏事,大家应该都体会到了,地形的重要性不言而喻,今天就来聊聊地形在《猎头专家》里的实现。

设计目标

  • 实现容易(简单)
  • 生成灵活(新奇)
  • 难度可控(又好玩)

设计思路

地形在游戏的战斗场景中长度固定且需要考虑画面外的碰撞,所以我们的地形没有使用渐进式生,而是在战斗场景初始化时就全部生成完成,在线对战时,会预先生成地形数据发送给双方。

地形的组成

对于 size 这个单位,1 代表 128x128 像素的矩形贴图。

  1. 平路:type=0,size:1x1,插件:RigidBody, PhysicsBoxCollider
  2. 小坡:type=1,size:3x2,插件:RigidBody, PhysicsPolygonCollider 红色的圆点是顶点,组成多边形碰撞盒,顶点越多越平滑,当然性能也会受影响
  3. 大坡:type=2,size:4x3,插件:RigidBody, PhysicsPolygonCollider 红色的圆点是顶点,组成多边形碰撞盒,顶点越多越平滑,当然性能也会受影响

地形的组成

我们游戏中的地形仅使用了Box2D自带的插件,没有使用第三方插件,小坡与大坡的原理是一样的,主要是视觉上的差别,如果你愿意可以做出更复杂的地形。

坡路的设计思路

  1. 坡的角度为45度,这样保证了物体滑落时的感觉比较自然。
  2. 坡底和坡顶拐角处都包含了一块平路并且设置了2个顶点,确保物体滑落时的平滑感。
  3. 坡度和坡顶都是平路可以和”平路“地形无缝连接。

地形数据格式

从下面的配置文件片段中可以看出,如果type为负值,则表示翻转,那么 上坡 素材就会变成 下坡 素材。

[
  {"type": 0, "x": 0, "y": 0},
  {"type": 0, "x": 28, "y": 0},
  {"type": 0, "x": 256, "y": 0},
  {"type": 1, "x": 384, "y": 0},
  {"type": 0, "x": 768, "y": 128},
  {"type": -1, "x": 896, "y": 0}
]
````

## 地形的控制

地形组件有一下几个参数:

1. 战场宽度:目前是一个固定宽度8000px
1. 最大高度:地形顶部可触及高度
1. 最小高度:地形底部最低高度
1. 最大连续平路:连续平路的最大数量
1. 最小连续平路:连续平路的最小数量

参数2、3控制地形的最大落差,落差越大越可能出现大坑。

参数4、5控制平路的最小与最大长度,平路少,则容易掉沟里,有利有弊吧,这两组参数决定了地形的难度,坡路地形会根据高度的变化自动翻转,实现上坡和下坡的无缝连接。

## 地形的美化

刚才提到的地形生成,仅仅填充了角色脚下的那一排地面。还有很多空白区块需要填充,我们用一个 `size 1x1` 的地形同色纹理来补充,并随机补上一些装饰用的纹理。

不管是地形组件还是地形纹理,都按颜色风格分组为多个plist,在战场生成时,随机调用。

## 最后附上战场地形实现示意图

**初始地图:没有经过纹理填充时**

![初始地图][map2]

**美化过的地图**

为优化填充性能,填充是按自上而下找出整块区域使用平铺的方式填充,以节省Sprite的使用数量。

![美化过的地图][map3]

## gound.ts 部分代码实现

typescript @ccclass export default class Ground extends cc.Component { // 纹理的 plist atlas: cc.SpriteAtlas = null // 纹理组件 tile: cc.Prefab = null // 平路组件 flat: cc.Prefab = null // 小坡组件 ramp1: cc.Prefab = null // 大坡组件 ramp2: cc.Prefab = null

@property(cc.Integer) sceneWidth: number = 8000 @property(cc.Integer) maxHeight: number = 5 @property(cc.Integer) minHeight: number = -2 @property(cc.Integer) maxStraightParts: number = 4 @property(cc.Integer) minStraightParts: number = 2 // 起始方向:1为朝右(正),-1为朝左(反) @property(cc.Integer) direction: number = 1 // 起始高度(台阶) @property(cc.Integer) stairs: number = 0

// 每个体积单位的实际像素 sizeUnit = 128

onLoad () { // 地形使用了缓存类管理(内部使用的是cc.NodePool) this._nodeCacheManager = new NodeCacheManager() }

// 设置纹理主题(配合背景),之后动态更换组件的 spriteFrame setAtlas (atlas) { this.atlas = atlas }

// 根据server发来的地形数据动态生成 onSyncGround (groundData: any[]) { for (let i = 0; i < groundData.length; i++) { // 取出每一块的数据 let prefabData = groundData[i] // 根据地形类型取出组件并实例化到界面上 let prefab = this._getPrefab(prefabData.type) let node = cc.instantiate(prefab).addTo(this.panel, -1) node.getComponent(cc.Sprite).spriteFrame = this.atlas.getSpriteFrame(prefabData.type) // 坡路可能需要翻转 if (prefab.size.h > 0) { node.scaleX = prefabData.type > 0 ? 1 : -1 } node.x = prefabData.x node.y = prefabData.y

  // 每铺一块地形,计算出下块地形坐标
  this.startX += prefab.width * this.sizeUnit
  // 如果是反向,则坡路由于锚点问题会造成偏移,所以此处修正一下
  if (this.direction < 0 && prefab.size.h > 0) {
    node.x = this.startX
  }
  // 根据当前地形坐标及大小创建它下面的装饰纹理
  this.createTiles(prefab.size.w, prefab.size.h, node.x, node.y)
  // 超过屏幕宽度后退出
  if (this.startX > this.sceneWidth) {
    break
  }
}
// 地形创建完成后清除缓存
this._nodeCacheManager.clear()

}

// 平铺空白处 createTiles (w, h, x, y) { // 在每块地形底部向下铺一块纹理(不超过minHeight) // … // 随机创建其它风格样式砖块 // … }

// 以地形最底部的y点(即 minHeight 之下)算出最大平铺纹理区域 private _createMainTile (y: number = 0) { let stails: number = Math.floor(y / 128) let mainTile = this._nodeCacheManager.createNode(this.tile) let sprite = mainTile.getComponent(cc.Sprite) sprite.spriteFrame = this.atlas.getSpriteFrame(‘tile’) let height: number = (5 + stails) * this.sizeUnit mainTile.setContentSize(cc.size(this.sceneWidth, height)) mainTile.x = 0 mainTile.y = y + this.minHeight * this.sizeUnit - height this.panel.addChild(mainTile, -2) } } ```

全文完