cocos2dx 3.3 scrollView lua 版本幻灯片效果

最新推荐文章于 2023-02-24 18:01:37 发布
最新推荐文章于 2023-02-24 18:01:37 发布
阅读量1k 收藏
点赞数
分类专栏： cocos2dx 文章标签： cocos2dx lua scrollv
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaodong911/article/details/47644353
版权
----- 需求
1.实现很多网站的图片左右循环滚动效果
2.当手移动到上面的时候，自动滑动暂停一段时间
3.当手在图片上移动一段距离的时候，图片跟随翻页（一次切一张图片）。
---- 思路
1. 利用 cocosstudio 拼好界面 生成csb 文件
2. 利用table 表固定好数据格式（可以 策划 excel 生成方便热更新）
3. scrollview 加载每张图片 ，启一个定时器没隔一段时间 scrollview 滑动一张图片的距离
4. 注意scrollview 的算法 (innerContanerSize().width - getContentSize().width) 滑动的总长度
5. 处理边缘情况
6. scrollview 注册点击事件并作相应的处理

第一次发表文章，小白献丑了。。。
轻喷,。。。欢迎大神指正。 

local SlideDialog = class("SlideDialog",function ()
<span style="white-space:pre">	</span>return require("Dialog"):create()
end)

function SlideDialog:ctor()
<span style="white-space:pre">	</span>self._strName = "SlideDialog"
<span style="white-space:pre">	</span>self._pCloseButton = nil 
<span style="white-space:pre">	</span>self._pCCS = nil 
<span style="white-space:pre">	</span>self._pBg = nil
<span style="white-space:pre">	</span>self._pGoBtn = nil
<span style="white-space:pre">	</span>self._pImgPageView = nil 
<span style="white-space:pre">	</span>self._pPageIndexImg = nil 
<span style="white-space:pre">	</span>-----------------------------
<span style="white-space:pre">	</span>-- 当前选中的活动类型
<span style="white-space:pre">	</span>self._nCurActivityType = 0
<span style="white-space:pre">	</span>-- 代表页数的小点(页数)
<span style="white-space:pre">	</span>self._tPageIndexImgs = {}
<span style="white-space:pre">	</span>-- 自动翻页的定时器
<span style="white-space:pre">	</span>self._pSchedulerEntry = nil 
<span style="white-space:pre">	</span>-- 当前页数
<span style="white-space:pre">	</span>self._curPageIndex = 1
<span style="white-space:pre">	</span>-- 每一页的宽度
<span style="white-space:pre">	</span>self._nRenderWidth = 500
<span style="white-space:pre">	</span>-- 点击之后延时
<span style="white-space:pre">	</span>self._nDelaySec = 0
end

function SlideDialog:create()
<span style="white-space:pre">	</span>local dialog = SlideDialog.new()
<span style="white-space:pre">	</span>dialog:dispose()
<span style="white-space:pre">	</span>return dialog
end

function SlideDialog:dispose()
<span style="white-space:pre">	</span>-- add plist 
<span style="white-space:pre">	</span>ResPlistManager:getInstance():addSpriteFrames("AdvertiseMent.plist")
<span style="white-space:pre">	</span>ResPlistManager:getInstance():addSpriteFrames("AdvertiseMentPic.plist")

<span style="white-space:pre">	</span>local function onNodeEvent(event)
<span style="white-space:pre">		</span>if event == "cleanup" then 
<span style="white-space:pre">			</span>self:onExitSlideDialog()
<span style="white-space:pre">		</span>end
<span style="white-space:pre">	</span>end
    <span style="white-space:pre">	</span>self:registerScriptHandler(onNodeEvent)

    <span style="white-space:pre">	</span>self:initUI()
    <span style="white-space:pre">	</span>self:changePageIndex(1)
end

function SlideDialog:initUI()
<span style="white-space:pre">	</span>-- 加载 cocostudio 生成的csb文件（单独写在一个脚本文件里面）
<span style="white-space:pre">	</span>local params = require("AdvertiseMentParams"):create()
<span style="white-space:pre">	</span>self._pCCS = params._pCCS
<span style="white-space:pre">	</span>self._pBg = params._pBackGround
<span style="white-space:pre">	</span>self._pCloseButton = params._pCloseButton
<span style="white-space:pre">	</span>self._pImgPageView = params._pPictureQ
<span style="white-space:pre">	</span>self._pGoBtn = params._pOkButton
<span style="white-space:pre">	</span>self._pPageIndexImg = params._pNowButton
<span style="white-space:pre">	</span>self._tPageIndexImgs[1] = self._pPageIndexImg
<span style="white-space:pre">	</span>self:disposeCSB()

<span style="white-space:pre">	</span>-- 加载广告图片
<span style="white-space:pre">	</span>self._pageNum =  #TableAdvertiseMent
<span style="white-space:pre">	</span>local s = self._pImgPageView:getInnerContainerSize()
<span style="white-space:pre">	</span>local contentWidth = 0
<span style="font-size: 14px; white-space: pre;">	</span><span style="font-size: 14px;">-- </span><span style="font-family: 'Microsoft YaHei';"><span style="font-size:10px;">TableAdvertiseMent 本地的lua 表 定义图片对应的信息方便热更新</span></span><span style="font-size: 14px;">
</span><span style="font-size: 14px;">
</span><span style="font-size: 14px; white-space: pre;">	</span><span style="font-size: 14px;">for i,advertiseInfo in ipairs(TableAdvertiseMent) do
</span><span style="font-size: 14px; white-space: pre;">		</span><span style="font-size: 14px;">local adImg = cc.Sprite:createWithSpriteFrameName("AdvertiseMentPic/"..advertiseInfo.ResourcesName..".png")
</span><span style="font-size: 14px; white-space: pre;">		</span><span style="font-size: 14px;">contentWidth = contentWidth + self._nRenderWidth 
</span><span style="font-size: 14px; white-space: pre;">		</span><span style="font-size: 14px;">adImg:setAnchorPoint(cc.p(1, 0.5))
</span><span style="font-size: 14px; white-space: pre;">		</span><span style="font-size: 14px;">adImg:setPosition(cc.p(contentWidth,s.height/2))
</span><span style="font-size: 14px; white-space: pre;">		</span><span style="font-size: 14px;">self._pImgPageView:addChild(adImg)
</span><span style="font-size: 14px; white-space: pre;">	</span><span style="font-size: 14px;">end
<span style="white-space:pre">	</span>if contentWidth > s.width then
        <span style="white-space:pre">	</span>self._pImgPageView:setInnerContainerSize(cc.size(contentWidth,s.height))
<span style="white-space:pre">	</span>end
<span style="white-space:pre">	</span>s = self._pImgPageView:getInnerContainerSize()

    <span style="white-space:pre">	</span>local gapX = self._pPageIndexImg:getContentSize().width
    <span style="white-space:pre">	</span>-- 加载对应按钮
    <span style="white-space:pre">	</span>for i = 1, #TableAdvertiseMent do
    <span style="white-space:pre">		</span>if i == 1 then 
    <span style="white-space:pre">			</span>self._tPageIndexImgs[1]:setVisible(true)
    <span style="white-space:pre">		</span>end
    <span style="white-space:pre">		</span>self._tPageIndexImgs[i] = self._pPageIndexImg:clone()
    <span style="white-space:pre">		</span>self._tPageIndexImgs[i]:setPositionX(self._tPageIndexImgs[i]:getPositionX() + gapX *( i - 1))
   	<span style="white-space:pre">	</span>self._pBg:addChild(self._tPageIndexImgs[i])
    <span style="white-space:pre">	</span>end

    <span style="white-space:pre">	</span>-- 幻灯片特效
    <span style="white-space:pre">	</span>local function slideAni ()
    <span style="white-space:pre">		</span>if self._nDelaySec > 0 then 
    <span style="white-space:pre">			</span>self._nDelaySec = self._nDelaySec - 1
   <span style="white-space:pre">			</span>return
    <span style="white-space:pre">		</span>end
    <span style="white-space:pre">		</span>self:changePageIndex(self._curPageIndex + 1)
   <span style="white-space:pre">	</span> end
    <span style="white-space:pre">	</span>self._pSchedulerEntry = cc.Director:getInstance():getScheduler():scheduleScriptFunc(slideAni,1.0,false)
   
    <span style="white-space:pre">	</span>self:initTouchEvent()
end

function SlideDialog:changePageIndex(index)
   if index == self._pageNum + 1 then 
      self._pImgPageView:jumpToLeft()
      self._tPageIndexImgs[1]:loadTexture("AdvertiseMentRes/Button002.png",ccui.TextureResType.plistType)
      self._tPageIndexImgs[self._pageNum]:loadTexture("AdvertiseMentRes/button001.png",ccui.TextureResType.plistType)
      self._curPageIndex = 1
      return
   else</span>
<span style="font-size: 14px;">      -- 此处写的时候比较纠结 scrollview 的滑动算法看一下源码就知道了
      local percent = (index - 1) / (self._pageNum - 1)
      self._pImgPageView:scrollToPercentHorizontal(math.floor(percent * 100),0.5,false)
      self._curPageIndex = index
   end

   for i,v in ipairs(self._tPageIndexImgs) do
       local imgName = "AdvertiseMentRes/button001.png"
       if i == index then 
            imgName = "AdvertiseMentRes/Button002.png"
       end
      v:loadTexture(imgName,ccui.TextureResType.plistType)
   end
end

function SlideDialog:initTouchEvent()
     -- 触摸注册
    local function onTouchBegin(touch,event)
        --local location = touch:getLocation()
       	self._nDelaySec = 3
        return true
    end
    local function onTouchMoved(touch,event)
    <span style="white-space:pre">	</span>self._nDelaySec = 3
    end
    local function onTouchEnded(touch,event)
       	self._nDelaySec = 3
        local startLocationX = touch:getStartLocation().x
        local locationX = touch:getLocation().x
        if math.abs(locationX - startLocationX) >= 100 then 
            if locationX - startLocationX < 0 then  --表示向左滑动
                if self._curPageIndex ~= self._pageNum then
                    self._curPageIndex = self._curPageIndex + 1
                else
                    self._curPageIndex = 1
                end
        else 
                if self._curPageIndex == 1 then 
                    self._curPageIndex = self._pageNum
                else
                    self._curPageIndex = self._curPageIndex - 1
                end
            end
            self:changePageIndex(self._curPageIndex)
        end
    end

    local function onTouchCancelled(touch,event)
    <span style="white-space:pre">	</span>self._nDelaySec = 3
    end

    -- 添加监听器
    self._pTouchListener = cc.EventListenerTouchOneByOne:create()
    self._pTouchListener:setSwallowTouches(true)
    self._pTouchListener:registerScriptHandler(onTouchBegin,cc.Handler.EVENT_TOUCH_BEGAN )
    self._pTouchListener:registerScriptHandler(onTouchMoved,cc.Handler.EVENT_TOUCH_MOVED )
    self._pTouchListener:registerScriptHandler(onTouchEnded,cc.Handler.EVENT_TOUCH_ENDED )
    self._pTouchListener:registerScriptHandler(onTouchCancelled,cc.Handler.EVENT_TOUCH_CANCELLED )
    
    self:getEventDispatcher():addEventListenerWithSceneGraphPriority(self._pTouchListener, self._pImgPageView)
end

function SlideDialog:onExitSlideDialog()
     self:onExitDialog()
     if self._pSchedulerEntry ~= nil then
        cc.Director:getInstance():getScheduler():unscheduleScriptEntry(self._pSchedulerEntry )
        self._pSchedulerEntry = nil
    end  
    ResPlistManager:getInstance():removeSpriteFrames("AdvertiseMent.plist")
    ResPlistManager:getInstance():removeSpriteFrames("AdvertiseMentPic.plist") 
end

return SlideDialog



TableAdvertiseMent
{
    { ID = 1.0, ResourcesName = 'advertisement01', ActivityType = 1.0, },
    { ID = 2.0, ResourcesName = 'advertisement02', ActivityType = 2.0, },
    { ID = 3.0, ResourcesName = 'advertisement03', ActivityType = 3.0, },
}
</span>



南深井冰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Cocos2dx-lua ScrollView[一]基础篇
ellis1970的博客
02-15 943
cocos游戏中ScrollView控件大量使用，95%以上的项目都会使用ScrollView，个别游戏可能全部使用翻页的滑动效果。如果想要精通Cocos的UI开发，精通ScrollView控件非常关键，因此对ScrollView的使用进行总结很有必要
cocos2dx scrollview优化
09-07
cocos2dx scrollview优化
cocos2d-x lua 中 ListView scrollView tableView pageView 使用例子
哲学天空的博客
05-09 1579
1. ListView 使用local MainScene = class("MainScene", cc.load("mvc").ViewBase) function MainScene:onCreate() -- 测试ListView --[[ 注: 1.子节点如果是RichText，或是文本信息。 设置setVerticalSpace()，高度间隔。ad...
cocos2dx Lua利用scrollview实现自动滚动效果动画
u014206831的博客
07-07 3979
function UIFlowerFish:ctor() self.rootWidget  = cc.CSLoader:createWidget("UI/flowerFish.csb"); --获取scrollview控件： local scroll_view = ccui.Helper:seekWidgetByName(self.rootWidget,"ScrollView_1"); --设置s...
cocos2dx+lua学习笔记：UIScrollView的使用
孙君的空间站
02-24 1172
Lua篇cocos2dx中UIScrollView的相关内容
cocos2dx-lua ScrollView的第一次编写
open0728的博客
08-02 2751
cocos2dx里的滚动层 ScrollView！第一次写，终于能正常用了，后面可能需要完善
只为菜鸟 cocos2dx-lua 实现Scrollview （vs2013）
miracle_yes的博客
05-06 9681
以前自己是学quick lua的 现在改用原型的lua了 所以整理一些资料，为初学者提供方便。当然你也可以去看lua-tests里面也很详细。 首先创建scrollview local scrollview=ccui.ScrollView:create() scrollview:setTouchEnabled(true) –scrollview:setBoun
Cocos2d-lua示例（一）排行榜之ScrollView
小飞飞的博客
11-01 5144
游戏都会有排行榜，人都有虚荣，竞争之心，为了挤入排行榜，玩家得费大量时间，大量金钱。我觉得玩游戏就是消遣时间，但不能在游戏中迷失自我，现实和虚幻得分开，这是对大家的忠告。这篇主要讲排行榜的开发，排行榜是比较简单的，任何界面都是数据+显示。首先我们得准备排行榜的数据，数据从哪里？是从服务器请求来的。数据准备好了，我们就通过某种形式表现出来，比如列表，网格表现。效果如下： 一
cocos2dx3.2的ScrollView改良
09-24
基于cocos2dx3.2的ScrollView改良版，...由于cocos库太大，压缩包里已经移除cocos核心库，需要自行下载安装cocos2dx 3.2版本，并任意生成一个cocos2dx项目，把里面的cocos文件夹复制到ScrollViewDemo文件夹下即可。
quick cocos2dx lua -v3.3
04-03
quick cocos2dx lua -v3.3
cocos2d-x ScrollView与tableView的使用范例
05-25
cocos2d-x ScrollView与tableView的使用范例
cocos2dx+lua实现橡皮擦功能
10-17
主要为大家详细介绍了cocos2dx+lua实现橡皮擦功能，类似刮刮乐效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
quick-cocos2d-x3.3 lua开发曹操传源码
11-27
quick-cocos2d-x3.3 lua开发曹操传源码,可编译通过 引擎版本：Cocos2dx-lua 3.3 语言：纯lua实现，逻辑代码大约2W多行，剧情脚本+数据大约7W多行（采用脚本进行转换的）
lua 创建scrollview
过期的码农
02-21 2774
一、创建滚动层 function create_Scrollview() --infolayer为整个滚动层 有什么元素都加到上面去 local infoRect =  CCRectMake(45, 105, 260, 370) infolayer = CCLayerColor:layerWithColorWidthHeight(ccc4(0, 128, 128, CORLORLAY
lua-使用滚动容器ScrollView
xiaowenliuwen的博客
06-30 5265
ScrollView是cocos2dx ui里面封装的一个控件，首先看下C++中创建ScrollViewusing namespace cocos2d::ui;//首先要使用ui命名空间 ui::ScrollView* scrollView = ui::ScrollView::create(); scrollView->setContentSize(Size(280.0f, 100.0f)); sc
Cocos2d-lua嵌套使用ScrollView的方案
04-20 2094
Cocos2d-x嵌套使用ScrollView的方案 比较典型的是皇室战争的UI设计，上下可以滚动，左右可以翻页 假设我们做一个PageView内嵌套ScrollView的UI，直接使用组件，会产生PageView和ScrollView同时发生位移的问题。 经过试验，只需要在UIScrollView.cpp的onTouchMove中 增加一句，通过_direction控制scrollv
Cocos2d lua 之 ScrollView重用item
继续激情，继续奋斗。
05-21 2447
cocos2d ScrollView 重用item
自动驾驶运动规划(Motion Planning).pdf
最新发布
04-26
自动驾驶运动规划(Motion Planning)问题分析
cocos2dx-lua ScrollView列队加载
06-09
在cocos2dx-lua中，使用ScrollView进行列队加载可以通过以下步骤实现： 1. 创建一个ScrollView，并设置其大小和位置。 ```lua local scrollView = ccui.ScrollView:create() scrollView:setContentSize(cc.size...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值