文档章节

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

 竹独松
发布于 2017/08/09 20:43
字数 534
阅读 3.2K
收藏 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
广州
程序员
私信 提问
加载中
请先登录后再评论。
用vertx实现高吞吐量的站点计数器

工具:vertx,redis,mongodb,log4j 源代码地址:https://github.com/jianglibo/visitrank 先看架构图: 如果你不熟悉vertx,请先google一下。我这里将vertx当作一个容器,上面所有的圆圈要...

jianglibo
2014/04/03
3.9K
3
Flappy Bird(安卓版)逆向分析(一)

更改每过一关的增长分数 反编译的步骤就不介绍了,我们直接来看反编译得到的文件夹 方法1:在smali目录下,我们看到org/andengine/,可以知晓游戏是由andengine引擎开发的。打开/res/raw/at...

enimey
2014/03/04
5.9K
18
SQLServer实现split分割字符串到列

网上已有人实现sqlserver的split函数可将字符串分割成行,但是我们习惯了split返回数组或者列表,因此这里对其做一些改动,最终实现也许不尽如意,但是也能解决一些问题。 先贴上某大牛写的s...

cwalet
2014/05/21
9.6K
0
CDH5: 使用parcels配置lzo

一、Parcel 部署步骤 1 下载: 首先需要下载 Parcel。下载完成后,Parcel 将驻留在 Cloudera Manager 主机的本地目录中。 2 分配: Parcel 下载后,将分配到群集中的所有主机上并解压缩。 3 激...

cloud-coder
2014/07/01
6.8K
1
在多个浏览器上运行脚本--Queen

假设你想和朋友们玩这么个游戏:你写下某个数字,然后让朋友们猜你写的是什么数字。你的朋友们将不断的给你一些猜测的数字,直到猜中为止。 现在想象你的朋友都是使用的浏览器,这个游戏就相...

匿名
2013/01/24
4.4K
1

没有更多内容

加载失败,请刷新页面

加载更多

Java中使用OpenSSL生成的RSA公私钥进行数据加解密

当前使用的是Linux系统,已经按装使用OpenSSL软件包, 一、使用OpenSSL来生成私钥和公钥 1、执行命令openssl version -a 验证机器上已经安装openssl openssl version -a 运行结果: 2、生成...

osc_1psr53ow
22分钟前
7
0
计算机毕业设计之springboot+vue.js点餐小程序 点餐系统

功能 后台: 1. 超级管理员(具有该系统所有权限)登录 查看系统所有管理员 操作:可新添加管理员并分配系统已有角色; 可对已有管理员进行信息编辑; 可对除超管外的其他管理员账号禁用/启用...

osc_x4ot1joy
23分钟前
6
0
MATLAB数学建模

链接:https://pan.baidu.com/s/1WA2ltwyMZuKeo7OC9XAIvw 提取码:tmy2 记录matlab参加建模比赛时所用的书籍,避免忘记 链接:https://pan.baidu.com/s/1WA2ltwyMZuKeo7OC9XAIvw 提取码:tmy...

osc_oa6qrgun
24分钟前
6
0
Python中可以使用静态类变量吗? - Are static class variables possible in Python?

问题: Is it possible to have static class variables or methods in Python? Python中是否可以有静态类变量或方法? What syntax is required to do this? 为此需要什么语法? 解决方案:...

技术盛宴
55分钟前
17
0
如何在Android中以像素为单位获取屏幕尺寸 - How to get screen dimensions as pixels in Android

问题: I created some custom elements, and I want to programmatically place them to the upper right corner ( n pixels from the top edge and m pixels from the right edge). 我创建......

javail
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部