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的像素，那拉伸和缩小就没有问题。