Quick GUI 实现代码

最新推荐文章于 2019-12-14 21:35:53 发布
原创 最新推荐文章于 2019-12-14 21:35:53 发布 · 745 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了使用Cocos2d-x创建GUI的各种元素，包括添加背景、实现动画、执行动作、处理触摸事件、调度器、音频处理等。详细展示了创建精灵的多种方式，如直接创建、从大图中读取和从精灵帧读取。同时，还涵盖了滑动条、按钮、输入框、复选框和列表视图的实现方法，为游戏或应用的交互设计提供参考。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


local scheduler = require(cc.PACKAGE_NAME .. ".scheduler")--定时器第二种方式（需要引入头文件）

local MainScene = class("MainScene", function()
    return display.newScene("MainScene")
end)

function MainScene:ctor()

    local sp = display.newSprite("ui/game_scene/game_background/game_background_0.png");
    sp:pos(display.cx, display.cy)-- 屏幕中心

    sp:addTo(self)

    --self:addBg();
    --self:testAnimation()
    --self:testAction();
    --self:testTouch()
    --self:testSchedule()
    --self:testAudio()
    --self:createsp();
    --self:testSlider();
    --self:testBtn()
    --self:testUIInput();
    --self:testCheckBox();
    --self:testCheckBoxGroup();
    --self:testScrollView();
    --self:testPageview();
    self:testListView();
end

function MainScene:onEnter()
end

function MainScene:onExit()
end

-----------创建精灵Sprite-------------
function MainScene:addBg()
    local sp = display.newSprite("ui/game_scene/game_background/game_background_0.png");
    sp:pos(display.cx, display.cy)-- 屏幕中心
    sp:addTo(self)

    --------- 2、cocos方法--------
    local sp = cc.Sprite:create("ui/game_scene/game_background/game_background_1.png");
    sp:setPosition(cc.p(display.cx,display.cy));
    self:addChild(sp, 1);
end
------------动画Animation------------
function MainScene:testAnimation()
    local png = "loading.png"
    local plist = "loading.plist"
    display.addSpriteFrames(plist, png);--添加精灵帧
    self._sp =  display.newSprite("#loading_0.png")--创建精灵，从大图创建加上#
    self._sp:pos(display.cx, display.cy)
    self:addChild(self._sp, 1);-- 添加
    -- 公共的字符串家转义字符，起始位置，结束位置
    local frames = display.newFrames("loading_%d.png",0,8);--存储精灵帧
    local animate = display.newAnimation(frames,0.08);--动画切换间隔为0.08妙
    self._sp:playAnimationForever(animate);--播放动画
end
-----------动作Action----------------
function MainScene:testAction()
    local sp = cc.Sprite:create("ui/common/face/face_0.png");
    sp:pos(display.cx, display.cy)
    sp:addTo(self);
    -- c++动作
    -- local moveto = cc.MoveTo:create(2,cc.p(100,100))-- 移动到
    -- sp:runAction(moveto)
    -- local moveby = cc.MoveBy:create(2, cc.p(100,100))-- 移动了
    -- sp:runAction(moveby)
    -- 封装好的动作
    --transition.moveTo(sp, {time =1,x=display.cx-200,y=display.cy})
    --transition.moveTo(sp, {time=1,y=display.bottom})
    -- 设置透明度（淡入淡出）
    --transition.fadeTo(sp, {time=1,opacity =025}) -- 0为全透明，此后将停止所有动作
    -- 旋转
    --transition.rotateTo(sp, {rotate=180,time=1}) --动作执行的对象，table表包含时间与角度

    -- 执行动作
    --[[transition.execute(sp,
        cc.MoveTo:create(2,cc.p(100,200)),
        {
        daley = 1,
        easing = "backut",
        onComplete = function()
        print("动作执行结束")
    end
    }
        );]]
    -- 动作执行结束的回调函数
    -- 序列动作
    local seq = transition.sequence({
        cc.MoveTo:create(2,cc.p(100,100)),
        cc.DelayTime:create(3),
        cc.RotateBy:create(2,90)
        })
    --sp:runAction(seq)
    -- 瞬时动作
    local spwn = cc.Spawn:create({
        cc.MoveTo:create(2,cc.p(100,100)),
        cc.RotateBy:create(2,90)
        })
    sp:runAction(spwn)
end
-------------触摸--------------------
function MainScene:testTouch()
    local sp = cc.Sprite:create("ui/common/face/face_3.png");
    sp:pos(display.cx, display.cy)
    sp:addTo(self);
    -- 设置可以点击
    sp:setTouchEnabled(true);
    -- 设置吞噬事件
    sp:setTouchSwallowEnabled(false);
    -- 设置监听事件
    sp:addNodeEventListener(cc.NODE_TOUCH_EVENT,
        function(event)-- 回调函数
            if event.name == "began" then
                print("touch begin")
                -- 实现场景切换
                local GameScene = require("app.scenes.GameScene");
                local scene = GameScene:new();
                -- 切换动画
                local  trans = display.wrapSceneWithTransition(scene,"fade",0.5);
                -- 实现场景切换
                display.replaceScene(trans);
                return true;-- 说明触摸已经生效
                elseif event.name == "moved"then
                    print("touch moved")
                elseif event.name == "ended"then
                    print("touch ended")
                else 
                    print("touch moved")
            end
        end
        )
end
-----------时间调度器-----------------
function MainScene:testSchedule()
--[[
    local scheduleId ;
    -- 获取定时器的管理器
    shareScheduler = cc.Director:getInstance():getScheduler();
    scheduleId = shareScheduler:scheduleScriptFunc(
        function()
            print("定时器")
        end
        ,1,false);-- 每隔一秒调用一次，若为0则表示每帧都会调用
    ]]

    -- 第二种定时器
    local function update(dt)
        print(dt)
    end
    local schedule = scheduler.scheduleGlobal(update,0.5);
    scheduler.unscheduleGlobal(schedule)
end
----------音频处理Audio---------------
function MainScene:testAudio()
    -- 预加载音乐文件
    audio.preloadSound("music/bg3.mp3");
    -- 播放音乐（路径，是否循环播放）
    audio.playMusic("music/bg3.mp3",true);
    -- 播放音效（路径，是否循环播放）
    audio.playSound("music/click.mp3",false);
    -- 设置音乐音量大小0~1（与音效无关）
    audio.setMusicVolume(0.5);
end
----------创建精灵的3种方式------------
function MainScene:createsp()
    -- 1、直接创建
    local sp = display.newSprite("ui/common/face/face_5.png")
    sp:pos(100, 100);
    sp:addTo(self);
    -- 2、从大图中读取
    display.addSpriteFrames("loading.plist","loading.png")
    self._sp = display.newSprite("#loading_0.png");
    self._sp:pos(200, 200)
    self._sp:addTo(self);
    -- 3、从精灵帧读取SpriteFrame
    local spriteFrame = cc.SpriteFrame:create ("loading_0.png",cc.rect(300,300,100,100));
    --local spriteFrame = cc.SpriteFrameCache:getInstance():getSpriteFrame("loading_5.png");
    local spf = display.newSprite(spriteFrame)
    spf:pos(300, 300)
    spf:addTo(self);
end

----------创建滑动条Slider-------------
MainScene.SLIDER_IMAGES = {
    bar = "SliderBar.png",
    button = "SliderButton.png"
}
function MainScene:testSlider()
    local barHeight = 40
    local barWith = 400
    -- 显示方式从左到右
    local slider = cc.ui.UISlider.new(display.LEFT_TO_RIGHT,
        MainScene.SLIDER_IMAGES,
        {scale9 = true})
    --slider:setAnchorPoint(cc.p(0.5,0.5))
    -- 设置位置
    --slider:pos(display.cx-200, display.cy)
    slider:align(display.CENTER, display.cx, display.cy)

    -- 设置Slider的内容大小
    slider:setSliderSize(barWith, barHeight)
    -- 设置Slider的默认值
    slider:setSliderValue(75)
    -- 设置滑动回调事件
    slider:onSliderValueChanged(function (event)
        local value = event.value;
        print(value);
        audio.setMusicVolume(value/100);
    end)
    slider:addTo(self)
end
----------按钮UIPushButton------------
function MainScene:testBtn()
    -- 资源路径，设置是否可以九宫格拉伸
    local btn = cc.ui.UIPushButton.new("GreenButton.png",{scale9=true})
    -- 设置Button大小
    btn:setButtonSize(240, 60)
    -- 设置button正常状态下的标题（状态，对应的label）
    btn:setButtonLabel("normal",cc.ui.UILabel.new({
        UILableType = 2,
        text = "This is PushButton",
        size = 18
        }))
    -- 设置button点击状态下的标题（状态，对应的label）
    btn:setButtonLabel("pressed",cc.ui.UILabel.new({
        UILableType = 2,
        text = "Pressed",
        size = 18
        }))
    -- 设置锚点与位置
    btn:align(display.CENTER, display.cx, display.cy)
    btn:addTo(self)

    -- 点击回调函数
    btn:onButtonClicked(function(event)
        print("Click");
    end)
    -- 注意点击与按下的区别
    btn:onButtonPressed(function(event)
        print("Pressed");
    end)
end
----------输入框UIInput----------------
function MainScene:testUIInput()
    -- 输入框回调函数(监听器)
    local function onEdit(event,editBox)
        if event == "began" then
            print("开始输入")
            elseif event == "changed" then
            print("内容发生改变")
            -- 获取编辑框内容
            local text = editBox:getText();
            print(text);
            elseif event == "ended" then
            print("输入结束")
            elseif event == "return" then
            print("输入返回")
        end
    end 

    local input = cc.ui.UIInput.new({
        image = "GreenButton.png",
        listener = onEdit,-- 监听函数
        x = display.cx,
        y = display.cy,
        size = cc.size(400, 80)
        })

    input:addTo(self);
    -- 设置提示语
    input:setPlaceHolder("请输入密码：");
    -- 设置内容显示方式 0:密文格式 
    input:setInputFlag(0);
end
----------复选框CheckBox----------------
MainScene.CHECKBOX_BUTTON_IMAGES={
    off = "CheckBoxButtonOff.png",
    on = "CheckBoxButtonOn.png"
}
function MainScene:testCheckBox()
    local checkbox = cc.ui.UICheckBoxButton.new(MainScene.CHECKBOX_BUTTON_IMAGES)
    -- 设置标题（创建颜色是cc.c3b,位置cc.p,大小是cc.size）

    checkbox:setButtonLabel(
    cc.ui.UILabel.new({
        text = "复选框",
        size = 22,
        color = cc.c3b(255, 0, 0)}));
    -- 设置标题的偏移位置
    checkbox:setButtonLabelOffset(0, -40);
    -- 设置标题的对齐方式
    checkbox:setButtonLabelAlignment(display.CENTER)
    --设置锚点及位置
    checkbox:align(display.LEFT_CENTER, display.cx, display.cy)
    --设置回调函数

    tag = true -- 标记
    checkbox:onButtonStateChanged(
        function (event)
            if tag then
                print("true")
                else print("false")
            end
        end)

    checkbox:addTo(self);
end
----------复选框组CheckBoxGroup----------------
MainScene.RADIO_BUTTON_IMAGES = {
    off = "RadioButtonOff.png",
    on = "RadioButtonOn.png"
}
function MainScene:testCheckBoxGroup()
    -- 排列方式
    local group = cc.ui.UICheckBoxButtonGroup.new(display.TOP_TO_BOTTOM)
    -- 添加复选框
    local checkBtn1 = cc.ui.UICheckBoxButton.new(MainScene.RADIO_BUTTON_IMAGES);
    -- 设置复选框Label
        checkBtn1:setButtonLabel(cc.ui.UILabel.new({
            text = "option 1",
            color = display.COLOR_RED
            }))
    -- 设置标题偏移量
        checkBtn1:setButtonLabelOffset(20, 0)
        checkBtn1:align(display.LEFT_CENTER)

        -- 添加复选框
    local checkBtn2 = cc.ui.UICheckBoxButton.new(MainScene.RADIO_BUTTON_IMAGES);
    -- 设置复选框Label
        checkBtn2:setButtonLabel(cc.ui.UILabel.new({
            text = "option 2",
            color = display.COLOR_RED
            }))
    -- 设置标题偏移量
        checkBtn2:setButtonLabelOffset(20, 0)
        checkBtn2:align(display.LEFT_CENTER)

        -- 添加复选框
    local checkBtn3 = cc.ui.UICheckBoxButton.new(MainScene.RADIO_BUTTON_IMAGES);
    -- 设置复选框Label
        checkBtn3:setButtonLabel(cc.ui.UILabel.new({
            text = "option 3",
            color = display.COLOR_RED
            }))
    -- 设置标题偏移量
        checkBtn3:setButtonLabelOffset(20, 0)
        checkBtn3:align(display.LEFT_CENTER)

    -- 设置间距
    group:setButtonsLayoutMargin(10, 10, 10, 10)
    -- 设置复选框组锚点和位置
    group:align(display.LEFT_CENTER, display.left+40, display.top-240)
    -- 添加到复选框组中
    group:addButton(checkBtn1);
    group:addButton(checkBtn2);
    group:addButton(checkBtn3);
    -- 设置第二个按钮默认被选中
    group:getButtonAtIndex(2):setButtonSelected(true);

    -- 设置回调事件
    group:onButtonSelectChanged(function (event)
        printf("Option %d selected",event.selected)
        group:removeButtonAtIndex(event.selected);--删除选中的按钮
    end)
    group:addTo(self);
end
----------滚动视图ScrollView----------------
function MainScene:testScrollView()
    local spr = display.newScale9Sprite("sunset.png")
    spr:setContentSize(300, 200)
    spr:pos(display.cx, display.cy) 

    --节点node
    local emptyNode = cc.Node:create();
    emptyNode:addChild(spr);

    -- 矩形框
    local bound = spr:getBoundingBox()
    bound.width = 1000;
    bound.height = 200;
    -- 创建滑动视图
    local scrollView = cc.ui.UIScrollView.new({
        viewRect = bound,
        bgColor = cc.c4b(0, 255, 0, 255)
        })
    -- 增加滑动内容
    scrollView:addScrollNode(emptyNode)
    -- 增加滑动方向
    scrollView:setDirection(cc.ui.UIScrollView.DIRECTION_HORIZONTAL)
    -- 滑动回调函数
    scrollView:onScroll(handler(self,self.scrollListener))
    scrollView:addTo(self)
end
function MainScene:scrollListener()
    print("滑动了")
end
----------翻页视图UIPageView----------------
function MainScene:testPageview()
    -- pageview与cocos中的不同在于他是item自动排列生成，
    -- 根据定义的行列数一页一页的排布，不够会重新开辟一页
    -- cocos中则是每一页由layout组成，页码数是确定的
    local page = cc.ui.UIPageView.new({
        -- bgColor = cc.c4b(255,0,0,125),  -- 已被弃用
        -- bg = "sunset.png",
        viewRect = cc.rect(80,80,780,480),
        column = 2,                          -- 列
        row =3,                                 -- 行
        padding = {left = 20,right =20,top = 20,bottom =20},
        columnSpace =10,
        rowSpace =10
        })    
    for i=1,18 do
        -- 创建一个条目
        local item = page:newItem();
        -- 创建一个layercolor
        local content = cc.LayerColor:create(
            cc.c4b(math.random(250),
            math.random(250),
            math.random(250),
            251))
        -- 设置内容大小
        content:setContentSize(240,140)
        -- 设置不可点击
        content:setTouchEnabled(false)
        item:addChild(content)
        page:addItem(item)
    end
    page:reload();-- 重新刷新界面
    page:addTo(self)
end
----------列表视图UIListView----------------
function MainScene:testListView()
    local lv = cc.ui.UIListView.new({
        bgColor = cc.c4b(0,0,125,255),
        viewRect = cc.rect(40,80,120,400),
        direction = cc.ui.UIScrollView.DIRECTION_VERTICAL,
        scrollbarImgV = "bar.png"
        })

    for i=1,20 do
        local item = lv:newItem();
        local content 

            content = cc.ui.UILabel.new({
                text = "Item"..i,
                size = 20,
                align = cc.ui.TEXT_ALIGN_CENTER,
                color = display.COLOR_RED
                })
            content:pos(0,40*i)
            item:addContent(content)
            item:setItemSize(120, 40)
            lv:addItem(item)
    end
    lv:reload()
    lv:addTo(self)
end
return MainScene 
自助取款机系统(python+mysql+GUI)
YANSHUOXU的博客
12-16 2450
为了完成学校的实践，做了一个类似于自助取款机的系统。。。 应用语言：python 核心控件：pymysql (数据库)，wxpython(GUI) 主要功能： 登录功能：通过python访问数据库，对用户输入的账号密码进行验证。 存款/取款功能：根据用户登录时输入的账号在card表中进行查找，找到该账号所对应的的信息，如果操作为存款则 余额=余额+（存款金额），如果为取款先判断余额是否大...
快速：真正的基于快Qt5的ClicK gUI生成器
02-10
快 一个真正的快速GUI生成器。 受启发， 是经典Python基于argparse的命令行程序的GUI生成器。 安装 python setup.py install 用法 总览 打开终端，进入下载的源文件夹并输入 python test . py 然后点击“运行”按钮。 您会看到类似这样的内容。 打开test.py以查看原始的基于点击的程序的外观。 基本用法 该软件包可以使用非常简单的功能gui_it为基于单击的CLI程序绘制gui。 用法是像gui_it(example_cmd)一样包装命令函数example_cmd() gui_it(example_cmd) 。 完整的示例是这样的。 from quick import gui_it import click @ click . command () @ click . option ( "--hello" , default =
quick framework.display
学习记录
07-16 1741
framework.display 与显示图像、场景有关的功能 display 模块封装了绝大部分与显示有关的功能，并负责根据 config.lua 中定义的分辨率设定计算屏幕的设计分辨率。 关于设计分辨率，请参考 自适应多种分辨率 。 框架初始化后，display 模块提供下列属性： display.sizeInPixels.width, displa
基于Linux的嵌入式POS的GUI及数据库研究
10-26
目前使用最广泛的POS机接入方式是有线接入方式,而有线接入方式主要有两种:一是基于电话网的点到点拨号接入方式和基于DDN的专线接入方式。无线POS机是目前POS机行业的一项新技术,移动性强,平均交易时间短,并能随身携带。目前在全国各大商场和超市内随处可见POS刷卡机,但它们大多都是通过电话线联网进行通信,移动性差,不灵活,限制了业务发展。无线POS机成功的解决了这一难题,它通过一个POS和无线调制解调器的一体机在GPRS/CDMA网上联网传输信息。
（八）动画与动作
wtuetnsrmh的专栏
08-25 597
动画与动作，在Quick中都有对其封装，所以我们还是来看一下吧。 总的来说，对于帧动画，Quick封装的方法我们可以经常使用，这是非常方便的，下面直接上代码来直观感受下。比如，14张帧图片，采用Cocos2d-x Lua的方法来写是这样的： 1 2 3 4 5 6 7 8 9 10 11
lablqml：实现OCaml与QtQuick GUI交互的接口工具
它允许开发者使用OCaml或Reason（一种基于OCaml的语法糖语言）编写QML/QtQuick图形用户界面（GUI）。这种方式可以将QtQML的快速应用开发能力与OCaml的编程效率和安全特性结合起来，为开发跨平台的桌面应用程序提供了...
C++ GUI Qt5编程实战-源代码
03-11
"C++ GUI Qt5编程实战-源代码"这个资源是针对C++和Qt5开发者的实践指导，通过一系列的源代码实例，深入解析了Qt5库的应用。 Qt5的主要特性包括： 1. **模块化**：Qt5对库进行了模块化重构，开发者可以根据需求选择...
使用qmlrs在Rust中实现QtQuick绑定与GUI开发
QML强调的是界面布局的简洁与高效，能够与JavaScript及C++后端代码相结合，以实现丰富的交互效果和应用逻辑。 2. Rust编程语言概述: Rust是一种系统编程语言，由Mozilla研究院推出，以其性能、安全性和并发性而闻名...
基于QT quick实现三维模型的动态添加和删除渲染
最新发布
04-06
在探讨如何基于QT Quick实现三维模型的动态添加和删除渲染技术时，我们首先需要了解QT和QML的基础知识。QT是一个跨平台的C++应用程序框架，广泛用于开发图形用户界面程序以及非GUI程序，如命令行工具和服务器。QT ...
QT5 C++ GUI 编程指南
08-27
对于GUI设计，QT5提供了样式表（QSS）功能，类似于网页CSS，可以方便地实现界面的样式定制，达到一致且美观的视觉效果。此外，QT还支持国际化和本地化，帮助开发者轻松创建多语言应用。 在QT5.9版本中，还引入了...
【COCOS2DX-游戏开发之二四】 quick-cocos2dx
Teng's world
12-13 8922
初窥 Quick-cocos2d-x quick-cocos2d-x（后文简称 quick）与 cocos2d-x 的关系，用一句话概括：quick 是 cocos2d-x 针对 Lua 的豪华套装威力加强版。 项目地址：quick-cocos2d-x 项目 Wiki: wiki 那 quick 与 cocos2d-x 相比到底有什么区别，又有什么加强呢？这篇文章就是答案：
Cocos2d-x学习之路(二)
StrangeNightmare的博客
05-12 628
例行废话     我感觉我好像走了弯路了。上一节跟着极客学院的大牛捯饬的是C++的环境，我还跟着大牛学了一周的C++，我已经快要吐了。我不喜欢C，也不喜欢C++。上一节配置好的XCode的环境就那么先扔着吧。说不上以后用得到。因为一个很重要的问题，我发现我们公司开发游戏用的Cocos2dx+lua的配置，所以我又跑来折腾lua的配置开发。这样呢，我就必须要去下载 quick-cocos2d-x这
lua播放帧动画
想要马儿跑，想要马儿不吃草。
11-29 952
--帧动画熊猫 display.addSpriteFrames("plist/panda_happy.plist", "plist/panda_happy.png") local sprite = display.newSprite("#qiqi_happy1.png") sprite:align(display.CENTER,display.cx,display.c
入门GUI框架
weixin_39868387的博客
12-14 1096
1、什么是GUI 2、常用的GUI框架 官方网址：https://www.wxpython.org 3、安装wxPython 步骤： 1、cmd窗口，执行命令：pip install -U wxpython 解决问题，执行一条命令： pip install -i https://pypi.doubanio.com/simple/ --trusted-host pypi.dou...
quick-cocos2d-x教程13:实现帧动画
dahuichen的专栏
02-02 2812
帧动画是个常见功能，我把这个封装成一个函数。 --帧动画 function MainScene:newFrameAnimation()     display.addSpriteFramesWithFile("loading.plist", "loading.png")     local frames = display.newFrames("loading%04d.
wxpython GUI初探
salmonwilliam的博客
04-05 224
import wx app=wx.App() win=wx.Frame(None,title='simple win',size=(410,335)) win.Show() loadBtn=wx.Button(win,label='open',pos=(225,5),size=(80,25)) saveBtn=wx.Button(win,label='save',pos=(315,5),size...
cocos lua 帧动画
twicetwice的博客
09-25 562
display.addSpriteFrames("res/shenqi/light_flash.plist", "res/shenqi/light_flash.png") local frames = display.newFrames("%d.png", 1, 18) local animation = displ...
Cocos2dx 2.x + lua 代码动画
lvyan1994的博客
09-11 570
动画在我这里分两种，一种帧动画，一种是精灵动作 1.帧动画 local frames = display.newFrames("coinSpin%02d.png", 1, 8) local animation = display.newAnimation(frames, 0.4/8) --播放动画共0.4秒，共八张图片 display.setAnimationCache("coin", an...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值