Quick-cocos2d-x3.3 Study （七）--------- 滚动的背景

滚动的背景

1. 先创建两个背景图片，并添加到一个表中

-- 创建一个滚动的背景
function GameScene:createBackground(  )
    -- body
    -- 创建一个背景1
    local background1 = display.newSprite("image/background/b1.png")
        :align(display.BOTTOM_LEFT, display.left, display.bottom + 10)
        :addTo(self)
    local background2 = display.newSprite("image/background/b2.png")
        :align(display.BOTTOM_LEFT, display.left + background1:getContentSize().width, display.bottom)
        :addTo(self)

    -- 把创建的两个背景添加到表中
    table.insert(self.background, background1)
    table.insert(self.background, background2)

end

2.创建一个滚动背景的函数

-- 创建一个滚动背景的函数
function GameScene:scrollBackground( dt )
    -- body
    -- 判断第二个背景的位置，如果移动到超出屏幕的左边，则将第一个背景显示到屏幕上
    if self.background[2]:getPositionX(  ) <= 0 then
        self.background[1]:setPositionX( 0 )
    end
    -- 设置x轴的位置，一每帧50的速度向右运动
    local x1 = self.background[1]:getPositionX() - 50 * dt
    -- 背景二的图片紧跟背景一的图片
    local x2 = x1 + self.background[1]:getContentSize().width
    -- 设置两个图片的位置
    self.background[1]:setPositionX(x1)
    self.background[2]:setPositionX(x2)

end

3.在crot函数中调用这两个函数，并启动update， (帧事件)实现背景的滚动

function GameScene:ctor(  )
    -- body
    -- 创建一个 table 来存放背景
    self.background = {}

    self:createBackground()

    -- 调用帧事件
    self:addNodeEventListener( cc.NODE_ENTER_FRAME_EVENT, handler( self, self.scrollBackground ) )
    self:scheduleUpdate()

end

 self:unscheduleUpdate()  -- 禁用帧事件，停止整个背景层滚动

其中，addNodeEventListener 方法用于注册帧事件，

scheduleUpdate 方法则启用了帧事件，

只有调用了 scheduleUpdate 后，帧事件才会被触发