《Cocos2d-x-3.2 Lua-tests》文件详解 之 视差Parallax

要提前用到这个效果，所有就先把这个了解了，先贴上来共享下。

--[[
        视差：从有一定距离的两个点上观察同一个目标所产生的方向差异。
        从目标看两个点之间的夹角，叫做这两个点的视差，两点之间的距离称作基线。
        只要知道视差角度和基线长度，就可以计算出目标和观测者之间的距离。
        
    所有的這些特性，Cocos2d-x已經封裝到了ParallaxNode中，所以实现起来非常简单~！！
--]]

local    kTagNode = 0
local    kTagGrossini = 1

local function createParallaxLayer(title, subtitle)
    local layer = cc.Layer:create()
    Helper.initWithLayer(layer)
    local titleStr = title == nil and "No title" or title
    local subTitleStr = subtitle  == nil and "" or subtitle
    Helper.titleLabel:setString(titleStr)
    Helper.subtitleLabel:setString(subTitleStr)
    return layer
end
--------------------------------------------------------------------
-- Parallax1
--------------------------------------------------------------------
local function Parallax1()
    local ret = createParallaxLayer("Parallax: parent and 3 children")
    -- 顶层，一个Sprite
    local  cocosImage = cc.Sprite:create(s_Power)
    -- 对Sprite进行缩放
    cocosImage:setScale( 2.5 )
    -- 锚点位置为(0,0)
    cocosImage:setAnchorPoint( cc.p(0,0) )

    -- 中间层，一个瓦片地图Tiled Map - 读取瓦片地图的方法:cc.TileMapAtlas:create(png,tmx,width,height)
    local tilemap = cc.TileMapAtlas:create(s_TilesPng, s_LevelMapTga, 16, 16)
    tilemap:releaseMap()

    --设置锚点(0,0)
    tilemap:setAnchorPoint( cc.p(0, 0) )

    --地图纹理抗锯齿
    tilemap:getTexture():setAntiAliasTexParameters()

    -- 底层，另一个Sprite
    local  background = cc.Sprite:create(s_back)
    background:setScale( 1.5 )
    background:setAnchorPoint( cc.p(0,0) )

    --创建父节点：视差节点
    local  voidNode = cc.ParallaxNode:create()

    --将3个层都添加到视差节点中
    --参数：子节点，层级，位移比例，在视差节点中的初始位置
    voidNode:addChild(background, -1, cc.p(0.4,0.5), cc.p(0,0))
    voidNode:addChild(tilemap, 1, cc.p(2.2,1.0), cc.p(0,-200) )
    voidNode:addChild(cocosImage, 2, cc.p(3.0,2.5), cc.p(200,800) )

    -- now create some actions that will move the 'void' node
    -- and the children of the 'void' node will move at different
    -- speed, thus, simulation the 3D environment
    local  goUp = cc.MoveBy:create(4, cc.p(0,-500) )
    local  goDown = goUp:reverse()
    local  go = cc.MoveBy:create(8, cc.p(-1000,0) )
    local  goBack = go:reverse()
    local  seq = cc.Sequence:create(goUp, go, goDown, goBack)
    voidNode:runAction( (cc.RepeatForever:create(seq) ))

    ret:addChild( voidNode )
    return ret
end
--------------------------------------------------------------------
-- Parallax2
--------------------------------------------------------------------
local function Parallax2()
    local ret = createParallaxLayer("Parallax: drag screen")

    local  cocosImage = cc.Sprite:create(s_Power)
    cocosImage:setScale( 2.5 )
    cocosImage:setAnchorPoint( cc.p(0,0) )

    local  tilemap = cc.TileMapAtlas:create(s_TilesPng, s_LevelMapTga, 16, 16)
    tilemap:releaseMap()

    tilemap:setAnchorPoint( cc.p(0, 0) )

    tilemap:getTexture():setAntiAliasTexParameters()

    local  background = cc.Sprite:create(s_back)
    background:setScale( 1.5 )
    background:setAnchorPoint( cc.p(0,0) )

    local  voidNode = cc.ParallaxNode:create()
    voidNode:addChild(background, -1, cc.p(0.4,0.5), cc.p(0, 0))
    voidNode:addChild(tilemap, 1, cc.p(1.0,1.0), cc.p(0,-200) )
    voidNode:addChild( cocosImage, 2, cc.p(3.0,2.5), cc.p(200,1000) )
    ret:addChild(voidNode, 0, kTagNode)

    local function onTouchesMoved(touches, event)
        local diff = touches[1]:getDelta() --获取移动的任何时刻产生的位移差。
    
        local node = ret:getChildByTag(kTagNode) --用标签获取 视差节点voidNode
        local currentPosX, currentPosY = node:getPosition()
        --将移动所产生的位移差加到 视差节点 的坐标上，产生移动和视差效果
        node:setPosition(cc.p(currentPosX + diff.x, currentPosY + diff.y)) 
    end
    local listener = cc.EventListenerTouchAllAtOnce:create()  --单点触摸事件侦听器
    listener:registerScriptHandler(onTouchesMoved,cc.Handler.EVENT_TOUCHES_MOVED ) --只响应触摸拖动事件
    local eventDispatcher = ret:getEventDispatcher()
    eventDispatcher:addEventListenerWithSceneGraphPriority(listener, ret)
    return ret
end

--[[
    总结：视差实现的思路很简单
    1、创建N（N>=2）个你要表现的Sprite，tilemap,whatever总之可视的，最好设置缩放值和锚点
    2、创建视差节点cc.ParallaxNode:create()
    3、将创建的东西添加到视差节点的显示列表中:addChild(node,层级,位移比例,初始位置)
    4、用随便什么方法让视差节点移动起来，就可以看到视差效果了
--]]

function ParallaxTestMain()
    cclog("ParallaxMain")
    Helper.index = 1
    cc.Director:getInstance():setDepthTest(true)
    local scene = cc.Scene:create()

    Helper.createFunctionTable = {
        Parallax1,
        Parallax2
    }
    scene:addChild(Parallax1())
    scene:addChild(CreateBackMenuItem())
    return scene
end