文档章节

Cocos2d-x使用PageView和ScrollView实现游戏首界面

 竹独松
发布于 2017/08/09 20:43
字数 534
阅读 43
收藏 0

需求及分析

竖屏游戏,首界面有多页需要左右滑动翻页,每页需要上下滑动显示内容,且两个方向的滑动不能相互干扰。(参考效果:《部落冲突:皇室战争》)

左右滑动翻页选择PageView组件,上下滑动选择ScrollView界面。主要问题在于两者之间滑动不能相互干扰。

ScrollView是嵌套在PageView中的,PageView的滑动是ScrollView一层层传递上来的。可以考虑根据当前的滑动事件来限制他们的滑动方向。

实现

在PageView上方增加一个滑动层,当滑动距离到达某个阈值的时候判断当前的滑动行为是否为水平方向。如果是,则限制ScrollView的滑动,反之,则限制PageView的滑动。

对于ScrollView,可以通过设置滑动方向来限制滑动。对于PageView,可以通过禁止ScrollView传递触摸事件来限制滑动。

主界面相关代码

-- touchLayer为增加的滑动层,当滑动距离到达某个阈值的时候判断当前的滑动行为是否为水平方向。
local threshold = 5
touchLayer:addTouchEventListener(function(senter, eventType)
	if eventType == ccui.TouchEventType.began then
		self.maskTouchBeganPos = sender:getTouchBeganPosition()
	elseif eventType == ccui.TouchEventType.moved then
		if self.horizontalMoved ~= nil then
			return
		end
		local touchMovePos = sender:getTouchMovePosition()
		local dp = cc.pSub(touchMovePos, self.maskTouchBeganPos)
		if math.abs(dp.x) < threshold and math.abs(dp.y) < threshold then
			return
		end
		self.horizontalMoved = math.abs(dp.x) > math.abs(dp.y)
	elseif eventType == ccui.TouchEventType.ended or eventType == ccui.TouchEventType.canceled then
		self.horizontalMoved = nil
	end
end)

单页相关代码

-- 初始化的时候把主界面传过来并且设置为self.mainPange
scrollView:addTouchEventListener(function(senter, eventType)
	if self.mainPange.horizontalMoved == nil then
		if scrollView:getDirection() ~= ccui.ScrollViewDir.none then
			scrollView:setDirection(ccui.ScrollViewDir.none)
		end
		if scrollView:isPropagateTouchEvents() then
			scrollView:setPropagateTouchEvents(false)
		end
	elseif self.mainPange.horizontalMoved == true then
		if scrollView:getDirection() ~= ccui.ScrollViewDir.none then
			scrollView:setDirection(ccui.ScrollViewDir.none)
		end
		if not scrollView:isPropagateTouchEvents() then
			scrollView:setPropagateTouchEvents(true)
		end
	else
		if scrollView:getDirection() == ccui.ScrollViewDir.none then
			scrollView:setDirection(ccui.ScrollViewDir.vertical)
		end
		if scrollView:isPropagateTouchEvents() then
			scrollView:setPropagateTouchEvents(false)
		end
	end
end

补充

本例的界面是采用CocosStudio 2.x编辑生成的。嵌套的界面,CSLoader生成的是Node而非UIWidget,没有propagateTouchEvent接口,导致ScrollView的触摸事件无法传递到PageView。 解决方式,暴力修改NodeReader中的createNodeWithFlatBuffers方法,默认生成一个空的UIWidget而非Node。

© 著作权归作者所有

共有 人打赏支持
粉丝 2
博文 3
码字总数 1324
作品 0
广州
程序员
Cocos2d-x v3.8 beta0 发布,C++ 游戏开发引擎

Cocos2d-x v3.8 beta0 发布,下载地址:http://www.cocos2d-x.org/filedown/cocos2d-x-3.8beta0.zip 增强UI系统功能 【新增】RadioButton 和 RadioGroup控件 【新增】ScrollView/ListView 滚......

oschina
2015/08/20
2.2K
1
手游开发神器 cocos2d-x editor 教程聚合和代码下载(持续更新中)

一 cocos2d-x editor工具下载和基础教程: 一 手游开发神器 cocos2d-x editor初识 二 手游开发神器 cocos2d-x editor工具下载和安装配置 三 手游开发神器 cocos2d-x editor 之基础工具 inte...

makeapp628
2014/02/11
0
0
购买李宁Cocos2d-x套餐,送最新出的《Cocos2d-x游戏实战指南》签名书一本

活动时间:2016-10-18至2016-11-30 通过本套餐,可完全了解Cocos2d-x 3.x的相关技术,以及掌握C++语言,并具有一定的项目实战经验。 Cocos2d-x游戏开发套餐:http://edu.51cto.com/pack/vie...

androidguy
06/29
0
0
【iOS-Cocos2d游戏开发之十六】添加本地通知(UILocalNotification)以及添加系统组件滚动视图(UIScrollView)!【2011年11月15日更新】

李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/iphone-cocos2d/492.html -------------【11月28日更新解决添加组件Cocos2d动画停止...

迷途d书童
2012/03/19
0
0
cocos2d-x支持c++、js、lua开发

作者:左文 链接:https://www.zhihu.com/question/21130385/answer/21789568 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 纯属个人观点 1 Unity3d支...

壹峰
2017/10/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

RabbitMq异常处理

1.查找指定文件位置 find . -name "*erlang.cookie" 2.Rabbitmq异常 ===========根据提示,应该是Erlang的cookie出现问题 attempted to contact: ['rabbit@DESKTOP-RVK1IHE'] rabbit@DESKTO......

zhaochaochao
20分钟前
2
0
Java虚拟机学习笔记

jconsole的连接 JConsole的远程连接 JConsole远程连接配置(用VisualVM进行远程连接的配置和JConsole是一摸一样滴) JVM之jconsole远程连接配置...

OSC_fly
21分钟前
1
0
区块链教程以太坊源码分析downloader-peer源码分析

  兄弟连区块链教程以太坊源码分析downloader-peer源码分析,区块链行业正逐渐褪去发展之初的浮躁、回归理性,表面上看相关人才需求与身价似乎正在回落。但事实上,正是初期泡沫的渐退,让...

兄弟连区块链入门教程
23分钟前
2
0
ubuntu 自定义记录用户登录以及操作日志

root@ms:~# cd /etc#更改之前先备份,养成良好的习惯,否则肠子都要悔青了root@ms:/etc# cp profile profile.bakroot@ms:/etc# vi profile 在文章末尾加入下列shell脚本 history US...

Marhal
23分钟前
1
0
liunx 下使用rpm进行软件卸载

rpm -qa | grep php 列出所有的php相关的rpm包 rpm -e xxx 删除包

bengozhong
23分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部