首页 > 代码库 > quick-cocos2d-x教程10:实现血条效果。

quick-cocos2d-x教程10:实现血条效果。

血条是常见功能,可以通过一个血条背景和一个不断改变的血条宽度,来实现少血。

在MainScence.lua中,先改代码:

function MainScene:ctor()
    local bg = display.newSprite("bg01.jpg")
    bg:setPosition(display.cx, display.cy)
    self:addChild(bg)
    --
    local barBg = display.newSprite("barBg.png")
    barBg:setPosition(display.cx, display.cy)
    self:addChild(barBg)
    --血条的原始尺寸,是185*100,可以定时改宽度185的值
    local barBlood = display.newScale9Sprite("barBlood.png",0,0,CCSize(185, 10))
    barBlood:setPosition(display.cx, display.cy)
    self:addChild(barBlood)
end

  • bg01.jpg是背景图,上个例子已经写了
  • barBg.jpg血条的背景图,主要是美观好看。
  • barBlood是绿色的血条,注意他是九宫格的图,就是可以拉升不变形的
  • 我们看下display.lua中的例子:
  • ~~~ lua

    -- 创建一个 Scale9 图像,并拉伸到 400, 300 点大小
    local sprite = display.newScale9Sprite("Box.png", 0, 0, CCSize(400, 300))

    ~~~

    @param string filename 图像名
    @param integer x
    @param integer y
    @param CCSize size

    @return CCSprite9Scale CCSprite9Scale显示对象

    ]]
    function display.newScale9Sprite(filename, x, y, size)
        return display.newSprite(filename, x, y, {class = CCScale9Sprite, size = size})
    end

  • 我们可以把CCSize(185, 10)宽度调整,比如改成CCSize(90, 10),然后每次被击中,就动态改这个值,就实现血条功能。
  • 注意,如果这个血条原始图片过长,但你压缩成一半的尺寸,会出现不缩小的情况。如果我们把这个血条的尺寸改成宽1的像素,那拉伸和缩小就没有问题。