文档章节

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

 竹独松
发布于 2017/08/09 20:43
字数 534
阅读 61
收藏 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.3K
1
手游开发神器 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套餐,送最新出的《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 之选关滑动界面(ScrollView)

这一节,我将实现游戏的选关界面,游戏50关,每一屏15关,总共4屏,左滑动可切换到上一屏,右滑动可切换到下一屏; 效果如下; 开始进入选关界面; 滑动到最后一屏; 点击关卡,进入主界面;...

makeapp628
2014/01/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

EOS官方钱包keosd

EOS官方钱包的名称是keosd,它负责管理你的私钥,并且帮你进行交易的签名。 不过不幸的是,keosd钱包对普通用户并不友好,它是一个命令行程序,目前还没有像以太坊的mist那样的图形化界面,而...

汇智网教程
今天
25
0
ArrayList的实现原理以及实现线程安全

一、ArrayList概述 ArrayList是基于数组实现的,是一个动态的数字,可以自动扩容。 ArrayList不是线程安全的,效率比较高,只能用于单线程的环境中,在多线程环境中可以使用Collections.syn...

一看就喷亏的小猿
今天
34
0
Netty 备录 (一)

入职新公司不久,修修补补1个月的bug,来了点实战性的技术---基于netty即时通信 还好之前对socket有所使用及了解,入手netty应该不是很难吧,好吧,的确有点难,刚看这玩意的时候,可能都不知道哪里...

_大侠__
昨天
40
0
Django简单介绍和用户访问流程

Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。 Django是一个开放源代码的Web应用框架,由Python写成。 Django遵守BSD版权,初...

枫叶云
昨天
52
0
Spring Cloud Stream消费失败后的处理策略(四):重新入队(RabbitMQ)

应用场景 之前我们已经通过《Spring Cloud Stream消费失败后的处理策略(一):自动重试》一文介绍了Spring Cloud Stream默认的消息重试功能。本文将介绍RabbitMQ的binder提供的另外一种重试...

程序猿DD
昨天
25
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部