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

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

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

// 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 2
is.addSpriteToBody(body, o.graphicName)
}

createCross (obstacle) {
// change 3
this.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 7
this.addSpriteToBody(this.ball, ball.className
}

update () {
....
// change 8
var 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()
    }
},

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

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

我们看看相关代码的实现

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)
      }

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

原文发布于微信公众号 - Coding迪斯尼(gh_c9f933e7765d)

原文发表时间:2018-08-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员互动联盟

【专业技术】Win32创建异形窗口

大家都见过在windows下各种气泡窗口、输入法窗口已经其他一些窗口,这些窗口看起来不像传统的windows窗那样,上面是标题栏,下面是窗口的客户区。这...

862110
来自专栏進无尽的文章

UI篇-Layer几个关键点补充

强大的UIView是基于 CALayer实现的,它的重要性不言而喻,相信大家也都有自己的研究和理解,今天这片文章里的内容是几个关键点的补充。

12410
来自专栏Python小屋

Python操作高版本Excel文件:颜色、边框、合并单元格

本文主要颜色Python扩展库openpyxl的一些基本用法,包括创建工作簿、选择活动工作表、写入单元格数据,设置单元格字体颜色、边框样式,合并单元格等等。 f...

63850
来自专栏数据小魔方

数据地图系列10|excel(VBA)数据地图透明度填充法

今天要跟大家分享数据地图系列的第10篇——excel(VBA)数据地图透明度填充法。 这种方法的制作步骤难度与前一篇相比都较低,但是涉及到的VBA代码却要比前一...

86150
来自专栏向治洪

深入理解Android渲染机制

基础知识 CPU: 中央处理器,它集成了运算,缓冲,控制等单元,包括绘图功能.CPU将对象处理为多维图形,纹理(Bitmaps、Drawables等都是一起打包...

47260
来自专栏24K纯开源

用Qt写软件系列五:一个安全防护软件的制作(1)

引言       又有许久没有更新了。Qt,我心爱的Qt,为了找工作不得不抛弃一段时间,业余时间来学一学了。本来计划要写一系列关于Qt组件美化的博文,但是写了几...

24370
来自专栏何俊林

今日力推: Android 高仿哔哩哔哩动画客户端 / Android MD版的花瓣网App

一、CardSwipeLayout 仿探探卡片滑动效果的布局 ? 链接: http://pan.baidu.com/s/1qYApDfQ 密码: fz3q 二、...

41990
来自专栏数据小魔方

leaflet在线地图进阶宝典之——高级辅助特性

本文跟大家分享leaflet在线地图的高级附加属性,这些属性通常来讲仅仅作为我们数据额可视化项目的修饰元素,而并不会影响数据元素。 但是有了这些辅助修饰元素,往...

37640
来自专栏向治洪

深入理解Android渲染机制

基础知识 CPU: 中央处理器,它集成了运算,缓冲,控制等单元,包括绘图功能.CPU将对象处理为多维图形,纹理(Bitmaps、Drawables等都是一起打包...

25660
来自专栏转载gongluck的CSDN博客

GDI透明贴图

网上下载的图片,有一些会有水印。水印的实现可以用透明贴图来做。透明贴图就是让两张图片合并的时候,重叠的部分中使一些颜色不显示,从而达到透明的效果。 如果用GDI...

45060

扫码关注云+社区

领取腾讯云代金券