用cocosBuilder实现<乱斗堂>风格主界面

最近做了个类似乱斗堂风格的主界面   主要是场景图片是可滚动的模式   各主功能按钮也可随之滚动   

主场景是一个半球状的东东  想实效果用旋转比较好实现

效果如下图：

说下大致的实现方法  其实取巧一点用cocosbuilder编辑器将几幅大场景图拼好  每个尺寸都是屏幕尺寸   然后显示的主场景图放在正中  并作为父节点  其它图作为子节点add上去  再通过  touchBegan，move，end的触碰机制对该mainBG进行旋转即可  touch响应事件在layer上处理更好  不要用在背景图上哦

如图所示：选中的那个sprite即mainBG 处理时只需要对它进行旋转

 

实现后的效果如下图：我们只是说后面那个场景包括浮动起来的CCMenuItem按钮喔  其它控件别理哈

 

在代码中导入相应的 ccbi，然后处理触碰的相应消息。 手感问题需要判断下触碰时间长短  短短的划一下就自动让它旋转一点播个动画  记得上面浮动的按钮也要一起转哦   时间略久的就可以跟着手指一起动  并停在某位置不需要再多滑动一段距离  另外浮起的按钮可以略微加下动画有点浮动的呼吸感  可以试着让它们的值按摆件大小进行调整 

 

直接上代码吧  项目用的quick-cocos2d-x

    local  proxy = CCBProxy:create()
        
        local MainMenuLayer = MainMenuLayer or {}
        ccb["MainMenuLayer"] = MainMenuLayer
        local  bg  = CCBuilderReaderLoad(Resource.CCBI.MainScene,proxy,MainMenuLayer)
        local layer = tolua.cast( bg, "CCLayer")
        local menu = tolua.cast(MainMenuLayer["mMenu"], "CCMenu")

        local bgSprite = tolua.cast( MainMenuLayer["mainBG"], "CCSprite")
        bgSprite:setTouchEnabled( true )
        local beginX = 0
        local prevX,prevY = 0,0
        local touchTime = 0

        local function onTouchEvent( eventType, x, y )
            if eventType == "began" then
                beginX = x
                curY = y
                prevX,prevY = x,y
                touchTime = os.clock()
                -- echoInfo("######### on touch begin x:%d y:%d ##########", x, y )
                return true
                elseif eventType == "moved" then 
                    echoInfo("x:%.2f,y:%.2f", prevX - x,prevY - y) 
                    local prevRot = bgSprite:getRotation() 
                    bgSprite:setRotation(prevRot - (prevX - x)*0.05) 

                    if bgSprite:getRotation() > 50 then
                        bgSprite:setRotation(50)
                    end
                    if bgSprite:getRotation() < -50 then
                        bgSprite:setRotation(-50)
                    end
                    menu:setRotation(bgSprite:getRotation()*1.1) 
                    prevX,prevY = x,y
                    elseif eventType == "ended" then
                    echoInfo(" ##########end ############") 
                    bgSprite:stopAllActions()
                    menu:stopAllActions()

                    endTime = os.clock()
                    touchTime = endTime - touchTime
                    echoInfo(" ########## touchTime:%f  ############", touchTime ) 
                    if touchTime  < 0.1 then
                        local offset = ( x - beginX ) * 0.12
                        local time = 1.0
                        local action = CCRotateTo:create( time, bgSprite:getRotation() + offset )
                        local action1 = CCRotateTo:create( time, menu:getRotation() + offset )
                        if bgSprite:getRotation() + offset > 50 then
                            action = CCRotateTo:create( time, 50 )
                            action1 = CCRotateTo:create( time, 50 )
                            elseif bgSprite:getRotation() + offset  < -50 then
                                action = CCRotateTo:create( time, -50 )
                                action1 = CCRotateTo:create( time, -50 )
                            end
                            action = CCEaseOut:create( action, 4 )
                            action1 = CCEaseOut:create( action1, 4 )
                            bgSprite:runAction( action )
                            menu:runAction( action1 )
                        end
                    end
                end
                bgSprite:registerScriptTouchHandler( onTouchEvent )

                dump(MainMenuLayer,"MainMenuLayer:")

                local menuItems = {}        
           --mail    
           local mailMenuItem = tolua.cast(MainMenuLayer["mailBox"], "CCMenuItemImage")
           mailMenuItem:registerScriptTapHandler( onMailbox )
           --pvp
           local pvpMenuItem = tolua.cast(MainMenuLayer["PVP"], "CCMenuItemImage")
           pvpMenuItem:registerScriptTapHandler( onPVPOpen )
           table.insert( menuItems, pvpMenuItem )
           --pve
           local pveMenuItem = tolua.cast(MainMenuLayer["PVE"], "CCMenuItemImage")
           pveMenuItem:registerScriptTapHandler( function()
               self:onPVEOpen()
               end )
           table.insert( menuItems, pveMenuItem )
           
           --shop
           local shopMenuItem = tolua.cast(MainMenuLayer["shop"], "CCMenuItemImage")
           shopMenuItem:registerScriptTapHandler( onShopOpen )
           table.insert( menuItems, shopMenuItem )
           --bar
           local barMenuItem = tolua.cast(MainMenuLayer["bar"], "CCMenuItemImage")
           barMenuItem:registerScriptTapHandler( onBarOpen )
           table.insert( menuItems, barMenuItem )

           local duration = 1.0
           local durations = { 8.0, 7.0, 8.0, 7.0 }
           local offsetY = {  35, 35, 40, 40 }
           for i, menuItem in ipairs( menuItems ) do
               local x, y = menuItem:getPosition()
               local param = 2.0
               local action = CCMoveBy:create( durations[i] or duration, CCPoint( 0,  offsetY[i] ))
               action = CCEaseInOut:create(action,param)
               local rev = CCMoveBy:create( durations[i] or duration, CCPoint( 0,  -offsetY[i] ))
               local reverseAction = CCEaseInOut:create(rev, param)
               local action_arr = CCArray:create()
               action_arr:addObject( action )
               action_arr:addObject( reverseAction )
               local seq = CCSequence:create( action_arr )
               menuItem:runAction( CCRepeatForever:create( seq ))
           end

        bgLayer:addChild( layer ) 

View Code

 

同理可以实现类似保卫萝卜2的推地图方式  主场景背景图采取拼接方式  然后直接setPosition

如图：拼图容易有裂缝哈   只是测试  请忽略吧

转载于:https://www.cnblogs.com/serenity/p/3675768.html