文档章节

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

 竹独松
发布于 2017/08/09 20:43
字数 534
阅读 33
收藏 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套餐,送最新出的《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
手游开发神器 cocos2d-x editor 教程聚合和代码下载(持续更新中)

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

makeapp628
2014/02/11
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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

InvalidKeyException: Illegal key size

Caused by: java.lang.RuntimeException: java.security.InvalidKeyException: Illegal key size 解决方案:去官方下载JCE无限制权限策略文件。 jdk 5: http://www.oracle.com/technetwork/j......

自由的开源
15分钟前
0
0
JAVA秒杀实现以及优化原理

秒杀与其他业务最大的区别在于:秒杀的瞬间, (1)系统的并发量会非常的大 (2)并发量大的同时,网络的流量也会瞬间变大。 关于(2),最常用的办法就是做页面静态化,也就是常说的前后端分...

小贱是个程序员
19分钟前
1
0
Spring Aop之Advisor解析

在上文Spring Aop之Target Source详解中,我们讲解了Spring是如何通过封装Target Source来达到对最终获取的目标bean进行封装的目的。其中我们讲解到,Spring Aop对目标bean进行代理是通过Ann...

爱宝贝丶
21分钟前
0
0
Java高级工程师面试阿里,阿里云,天猫,菜鸟,涉及到的知识点

前言: 分享 Java高级工程师面试阿里,阿里云,天猫,菜鸟,涉及到的知识点,文章有点长,但比较全面,阅读时间15分钟左右,干货满满。 一、HashMap的那些事 1.1、HashMap的实现原理 1.1.1、...

Java大蜗牛
46分钟前
2
0
nginx模块学习五 expires 浏览器缓存

缓存原理 语法 Syntax: expires [modified] time;expires epoch | max | off;Default: expires off;Context: http,server,location,if in location 例/etc/nginx/conf.d/default.con......

Romanceling
57分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部