cocos2dx 3.1.1 Lua常用控件

<pre name="code" class="plain">require "Cocos2d"
require "Cocos2dConstants"

-- cclog
cclog = function(...)
    print(string.format(...))
end

-- for CCLuaEngine traceback
function __G__TRACKBACK__(msg)
    cclog("----------------------------------------")
    cclog("LUA ERROR: " .. tostring(msg) .. "\n")
    cclog(debug.traceback())
    cclog("----------------------------------------")
    return msg
end

local function main()
    collectgarbage("collect")
    -- avoid memory leak
    collectgarbage("setpause", 100)
    collectgarbage("setstepmul", 5000)
cc.FileUtils:getInstance():addSearchResolutionsOrder("src");
cc.FileUtils:getInstance():addSearchResolutionsOrder("res");
    --support debug
    local targetPlatform = cc.Application:getInstance():getTargetPlatform()
    if (cc.PLATFORM_OS_IPHONE == targetPlatform) or (cc.PLATFORM_OS_IPAD == targetPlatform) or 
       (cc.PLATFORM_OS_ANDROID == targetPlatform) or (cc.PLATFORM_OS_WINDOWS == targetPlatform) or
       (cc.PLATFORM_OS_MAC == targetPlatform) then
        cclog("result is ")
--require('debugger')()
        
    end

    ---------------

    local visibleSize = cc.Director:getInstance():getVisibleSize()
    local origin = cc.Director:getInstance():getVisibleOrigin()


    -- create Layer
    local function createUILayer()
        local UILayer = cc.Layer:create()

        --圖片精靈
        local bg = cc.Sprite:create("bg.jpg")
        --使用圖集
        -- local spFrame = display.newSpriteFrame("p1.png")
        -- bg = cc.Sprite:createWithSpriteFrame(spFrame)
        -- bg:setSpriteFrame(display.newSpriteFrame("p1.png"))
     
        bg:setPosition(origin.x + visibleSize.width / 2 + 80, origin.y + visibleSize.height / 2)
        UILayer:addChild(bg)

        ---文字標籤
        local txt = cc.LabelTTF:create("zhong中文123456780", "Arial", 20)  
        txt:setColor( cc.c3b( 255, 255, 255 ) )  
        txt:setAnchorPoint(cc.p(0,0))
        txt:setPosition( cc.p( 350,  20 ) )
        UILayer:addChild(txt)      
        
        --純色精靈
        local boxSprite = cc.Sprite:create()
        boxSprite:setTextureRect(cc.rect(0,0,80,80))
        boxSprite:setAnchorPoint(cc.p(0,0))
        boxSprite:setPosition( cc.p( 350,  40 ) )
        --cocosdx自動默認是白色
        --boxSprite:setColor(cc.c3b(255,255,255))
        UILayer:addChild(boxSprite,8)
        -- boxSprite:setGlobalZOrder(8)

        -- 菜單按鈕
        local menuTools
        local function menuCallbackOpenPopup()
            cclog("ttttttttt")
        end
  
        -- add the left-bottom "tools" menu to invoke menuPopup
        local menuToolsItem = cc.MenuItemImage:create("back.png", "back2.png")
        menuToolsItem:setPosition(0, 0)
        menuToolsItem:registerScriptTapHandler(menuCallbackOpenPopup)
        menuTools = cc.Menu:create(menuToolsItem)
        local itemWidth = menuToolsItem:getContentSize().width
        local itemHeight = menuToolsItem:getContentSize().height
        menuTools:setPosition(350, 80)
        UILayer:addChild(menuTools,15)
        -- menuTools:setlocalZOrder(5)
        -- menuTools

        
        -- Scale9Sprite 9宮格精靈
        local temp=cc.Sprite:create("btntest0.png");
        local size=temp:getContentSize();
        local fullRect=cc.rect(0,0, size.width, size.height)
        local insetRect = cc.rect(20,20,size.width-40, size.height-40);
        local backGround = cc.Scale9Sprite:create("btntest0.png", fullRect, insetRect )
        backGround:setPreferredSize(cc.size(100, 50))
        backGround:setPosition(cc.p(350, 130))
        backGround:setAnchorPoint(cc.p(0,0))
        UILayer:addChild(backGround)


        --進度條精靈
        -- 創建並初始化進度,第一個參數是duration持續時間，100爲進度
        local to1 = cc.ProgressTo:create(2, 100)
        local to2 = cc.ProgressTo:create(1, 100)
        --創建進度條精靈
        local progressSprite=cc.Sprite:create("bgtime2.png")
        progress1=cc.ProgressTimer:create(progressSprite)
        --設置進度條類型爲BAR  
        progress1:setType(cc.PROGRESS_TIMER_TYPE_BAR)--enum  Type { RADIAL, BAR }
        progress1:setPosition(cc.p(200, 150))

        --進度動畫運動方向，可以多試幾個值，看看效果
        --進度條寬高變化//從左到右
        progress1:setMidpoint(cc.p(0, 0))--注意這裏是cc.p  c++中是Vec2
        progress1:setBarChangeRate(cc.p(1, 0))

        --進度條寬高變化//從下到上 
        -- progress1:setMidpoint(cc.p(0, 0))
        -- progress1:setBarChangeRate(cc.p(0, 1))

        -- //進度條寬高變化//從左到右  
        -- progress1:setMidpoint(cc.p(1, 0))
        -- progress1:setBarChangeRate(cc.p(1, 0))

        --  //    //進度條寬高變化//從上到下 
        -- progress1:setMidpoint(cc.p(1, 0))
        -- progress1:setBarChangeRate(cc.p(0, 1))
        progress1:setPercentage(0)--默認是零,可以自行修改
        UILayer:addChild(progress1, 1) 
        --進度條效果設置 方這裏提供了兩種
        --方案1:執行動作
        --需要有這個runAction纔會有動作效果
        -- progress1:runAction(cc.RepeatForever:create(to1))
        --方案2:定時器+setPercentage完成(見後面定時器中可見)
        
        --圓形的進度條1 順時針
        local progress3Sprite = cc.Sprite:create("menu1.png")
        progress3 = cc.ProgressTimer:create(progress3Sprite)
        progress3:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)--設置類型爲圓形  
        progress3:setPosition(cc.p(250, 200))
        progress3:setScale(0.8)  
        progress3:setReverseDirection(false) -- 這是默認的順時針
        progress3:setPercentage(0)--默認是零,可以自行修改
        -- progress3:runAction(cc.RepeatForever:create(to1))
        UILayer:addChild(progress3, 1)
        --如果沒有runAction是可以直接removeFromParent  如果有runAction需要先停掉
        ----相同的action會導致報錯  最好用不同的action
        -- progress3:stopAction(cc.RepeatForever:create(to1))
        -- progress3:removeFromParent(true)



        --圓形的進度條2 逆時針
        local progress2Sprite = cc.Sprite:create("menu1.png")
        progress2 = cc.ProgressTimer:create(progress2Sprite)
        progress2:setType(cc.PROGRESS_TIMER_TYPE_RADIAL)--設置類型爲圓形
        progress2:setPosition(cc.p(200, 200))
        progress2:setScale(0.8)
        progress2:setReverseDirection(true) -- 默認是順時針 這裏設置反向逆時針
        progress2:runAction(cc.RepeatForever:create(to2))
        UILayer:addChild(progress2, 1)

        --[[
        這裏有兩個方法可能是比較容易疑惑的：
        progress:setMidpoint(cc.p(0, 0))
        setMidpoint()函數是設置進度條的起始點，（0,y）表示最左邊，（1,y）表示最右邊，（x,1）表示最上面，（x,0）表示最下面。
        progress:setBarChangeRate(cc.p(1, 0))
        setBarChangeRate()函數是用來設置進度條動畫方向的，（1,0）表示橫方向，（0,1）表示縱方向
        ]]

        --     cc.Label:createWithTTF  -- 添加標籤  cocos ide中可以用   xcode中會報錯
        -- -- 通過初始化文本、字體，字體大小來創建一個Label
        -- local label = cc.Label:createWithTTF("New Renderer", "fonts/arial.ttf", 36)
        -- label:setColor(cc.c3b(255,255,0)) -- 設置顏色爲黃色
        -- UILayer:addChild(label, 1, 10000) -- 第一個參數爲node，第二個參數爲zorder,第三個參數是tag
        -- label:setPosition( cc.p(80, 80))-- 設置位置top,center
      
        --創建一個標籤,顯示進度
        local numsTTF = cc.LabelTTF:create("0", "Thonburi", 18)
        numsTTF:setPosition(cc.p(250, 150))
        UILayer:addChild(numsTTF, 1)

        --Lua 實現定時器功能
        local scheduler = CCDirector:sharedDirector():getScheduler()
        local run_logic = nil
        local x=0
        --函數定義
        local function Update()
            -- print(11)
            if x<100 then
                x=x+5
                progress1:setPercentage(x)--這裏以設置進度條1作爲例子
                progress3:setPercentage(x)
                numsTTF:setString(""..x.."%")  --這裏以設置文字numsTTF的內容作爲例子,注意這裏的x是數字,需要轉換爲字符
            end
        end
        --開始倒計時 每1秒調用一次Update方法
        run_logic = scheduler:scheduleScriptFunc(Update,1,false)  --第一個是調用的函數 第二個參數是時間
        
        --退出界面 卸載定時器
        local function onNodeEvent(event)
           if "exit" == event then
               cc.Director:getInstance():getScheduler():unscheduleScriptEntry(run_logic)
           end
        end
        UILayer:registerScriptHandler(onNodeEvent)

</pre><pre name="code" class="plain">

</pre><pre name="code" class="plain">        -- 輸入框
        EditName = cc.EditBox:create(cc.size(180, 40), cc.Scale9Sprite:create("btntest0.png"))
        --   EditName = cc.EditBox:create(editBoxSize, cc.Scale9Sprite:create("btntest0.png"))
        EditName:setPosition(240, 100)
        -- --密碼輸入模式
        -- EditName:setInputFlag(cc.EDITBOX_INPUT_FLAG_PASSWORD)
        -- --單行輸入
        -- --EditName:setInputMode(cc.EDITBOX_INPUT_MODE_SINGLELINE)
        UILayer:addChild(EditName)
        --         -- 開啓委託
        --         -- EditName:setDelegate(UILayer)
        -- -- local targetPlatform = cc.Application:getInstance():getTargetPlatform()
        -- -- if kTargetIphone == targetPlatform or kTargetIpad == targetPlatform then
        -- --    EditName:setFontName("Paint Boy")
        -- -- else
        -- --     EditName:setFontName("fonts/Paint Boy.ttf")
        -- -- end
        -- --輸入字符個數
        -- -- EditName:setMaxLength(10)
        -- -- EditName:setMaxLength(6)
        -- --輸入字體尺寸
        EditName:setFontSize(25)
        -- EditName:setFontSize(50)
        -- --輸入字體顏色
        -- -- EditName:setFontColor(cc.c3b(255,0,0))
        -- EditName:setFontColor(cc.c3b(0,255,0))
        -- -- EditName:setFontColor(cc.c3b(5, 4, 10))
        -- --設置editBox輸入爲空時的顯示狀態
        -- EditName:setPlaceHolder("Nameiiiiiiiiii:")
        -- -- EditName:setPlaceHolder("點擊輸入姓名") 
        -- --輸入前默認顯示字體顏色
        -- EditName:setPlaceholderFontColor(cc.c3b(255,255,255))
        -- -- EditName:setMaxLength(8)
        -- EditName:setReturnType(cc.KEYBOARD_RETURNTYPE_DONE )
        -- -- --Handler--事件響應
        -- -- EditName:registerScriptEditBoxHandler(editBoxTextEventHandle)



        return UILayer
    end

    -- run場景 add圖層
    local sceneGame = cc.Scene:create()
    sceneGame:addChild(createUILayer())

   
    if cc.Director:getInstance():getRunningScene() then
         cc.Director:getInstance():replaceScene(sceneGame)
    else
        cc.Director:getInstance():runWithScene(sceneGame)
    end
end

local status, msg = xpcall(main, __G__TRACKBACK__)
if not status then
    error(msg)
end

 

 

 

 

_________

注意如果圖片使用某文件夾下的,需要放到res中,並且路徑名字寫到res,例如

        local bgBox = cc.Sprite:create("res/RoleSelection/bgBox.png")

        bgBox:setPosition(cc.p(origin.x + visibleSize.width*0.2, origin.y + visibleSize.height*0.45-150))

        UILayer:addChild(bgBox)