对Box2D的物理世界进行图像美化和关卡选择设计

我们用Box2D绘制了很多几何图形，例如圆形，矩形，复杂一点就是两个矩形交叉的合在一起，中间再加个圆形。显然这种界面“太素”了，一个丰富多彩，五彩斑斓的游戏世界显然不可能那么简陋，本节我们就看看如何让我们当前看似极简的游戏变得“声色犬马”起来。

屏幕快照 2018-08-20 下午3.37.04.png

我们将使用上面的图案替换掉原来单调的集合图形，例如十字交叉的旋转障碍物将会被上图右下角的十字架给替换掉。我们看看代码是如何实现的:

// change 1
      addSpriteToBody (body, spriteName, index) {        var SpriteObj = this.assetsLib[spriteName]        if (SpriteObj === undefined) {          console.log('sprite obj: ' + SpriteObj + 'name:' + spriteName)
        }        var sprite = new SpriteObj()
        sprite.x = -99
        if (index !== undefined) {          this.stage.addChildAt(sprite, index)
        } else {          this.stage.addChild(sprite)
        }
        body.SetUserData(sprite)
      }

上面函数根据物体名字将物体对应的图片资源加入到页面，接下来我们在创建各个物体的地方调用该函数，把物体对应的图片资源加载进来：

createObstacles (level) {
...// change 2is.addSpriteToBody(body, o.graphicName)
}

createCross (obstacle) {// change 3this.addSpriteToBody(cross, obstacle.graphicName)
}

createHoop (level) {
    ....
    var body = this.world.CreateBody(bodyDef)
    body.CreateFixture(fixDef)    // change 3
    this.addSpriteToBody(body, 'HoopSquare')
    ....
    body = this.world.CreateBody(bodyDef)
    body.CreateFixture(fixDef)    // change 4
    this.addSpriteToBody(body, 'HoopSquare')
    ....
    var board = this.world.CreateBody(bodyDef)
    board.CreateFixture(fixDef)   // change 5
   this.addSpriteToBody(board, 'HoopBoard')
   ....   // change 6
   this.addSpriteToBody(body, 'HoopSensor', 0)
}

spawnBall () {
....// change 7this.addSpriteToBody(this.ball, ball.className
}

update () {
....// change 8var body = this.world.GetBodyList()while (body) {   var sprite = body.GetUserData()    if (sprite) {        var position = body.GetWorldCenter()
        sprite.x = position.x * this.pxPerMeter
        sprite.y = position.y * this.pxPerMeter
        sprite.rotation = body.GetAngle() * 180 / Math.PI
    }
        body = body.GetNext()
    }
},

上面代码完成后，我们可以看到界面变得丰富起来：

屏幕快照 2018-08-20 下午4.45.39.png

接着我们实现关卡选择界面，我们要完成的功能如下，一旦游戏页面加载后，会有一个关卡选择界面，用户通关点击左右箭头选择他想玩的关卡：

屏幕快照 2018-08-21 下午4.03.30.png

我们看看相关代码的实现

start () {
....// change 14
        var levelSelection = new this.assetsLib.LevelSelection()        this.stage.addChild(levelSelection)
        levelSelection.levels.stop()

        levelSelection.rightButton.on('click', this.levelRightButton)
        levelSelection.leftButton.on('click', this.levelLeftButton)        this.isPlaying = false
        levelSelection.playButton.on('click', this.playButtonClick)        this.levelSelection = levelSelection
      }

LevelSelection对应的正是上图所示的窗口，它有两个箭头按钮，以及一个中间按钮，代码分别实现了三个按钮点击时的响应函数，其实现如下：

levelRightButton () {        console.log('right button: ', this.levelSelection.levels)        var next = this.levelSelection.levels.currentFrame + 1
        this.levelSelection.levels.gotoAndStop(next)
      },
      levelLeftButton () {        var prev = this.levelSelection.levels.currentFrame - 1
        this.levelSelection.levels.gotoAndStop(prev)
      },
      playButtonClick () {        this.levelSelection.parent.removeChild(this.levelSelection)        this.score = 0
        this.currentLevel = this.levels[this.levelSelection.levels.currentFrame]        console.log('play button click: ', this.levelSelection.levels.currentFrame)        this.showScoreBoard()        this.isPlaying = true
        this.createGameLevel()
      },

最后，我们还需要把关卡界面窗口中使用到的图片给加载到页面中，因此像上一个项目那样启动一个图片加载函数：

load () {        var loader = new this.cjs.LoadQueue(false)
        loader.addEventListener('fileload', function (e) {          if (e.item.type === 'image') {            this.images[e.item.id] = e.result
          }
        }.bind(this))
        loader.addEventListener('complete', this.start)
        loader.loadManifest(this.assetsLib.properties.manifest)
      }

完成上面代码后，我们整个游戏的设计基本就完成了。

作者：望月从良
链接：https://www.jianshu.com/p/9fc72dd5e938