文档章节

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

 竹独松
发布于 2017/08/09 20:43
字数 534
阅读 19
收藏 0
点赞 0
评论 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 ⋅ 1

手游开发神器 cocos2d-x editor 教程聚合和代码下载(持续更新中)

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

makeapp628 ⋅ 2014/02/11 ⋅ 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 ⋅ 2016/10/17 ⋅ 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

十三 手游开发神器 cocos2d-x editor 之选关滑动界面(ScrollView)

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

makeapp628 ⋅ 2014/01/25 ⋅ 0

【iOS-Cocos2d游戏开发之十六】添加本地通知(UILocalNotification)以及添加系统组件滚动视图(UIScrollView)!

————-【11月28日更新解决添加组件Cocos2d动画停止播放的BUG】——– 【iOS-Cocos2d游戏开发之七】在cocos2d中添加/删除系统组件,并解决View设置透明会影响View中的其他组件的问题【11月...

junwong ⋅ 2012/03/02 ⋅ 0

【cocos2d-x】利用CCScrollView, 实现帮助界面

Cocos2d-x 2.0.1里面 集成了一些以前需要自己添加的控件,极大的方便作为开发者的我们。 今天给大家带来一个用CCScrollView 实现的帮主页面。 最终结果是这样的: 首先CCScrollView 在 Coco...

toss156 ⋅ 2012/08/19 ⋅ 0

Cocos2d 开源社区进军 Windows Phone 7: Cocos2d-x for XNA游戏引擎发布

2012 年 2 月 17 日,著名的开源社区 Cocos2d 发布 Cocos2d-X for XNA 版本。该游戏引擎针对微软最新移动操作系统 Windows Phone 7 平台,开发者可以采用 C# 语言开发基于 Windows Phone 平台...

红薯 ⋅ 2012/02/17 ⋅ 4

Cocos2d-x游戏开发之图片元素

[Cocos2d-x相关教程来源于红孩儿的游戏编程之路 CSDN博客地址:http://blog.csdn.net/honghaier] 红孩儿Cocos2d-X学习园地QQ群:249941957 加群写:Cocos2d-x 本章为我的Cocos2d-x教程一书初...

长平狐 ⋅ 2013/03/19 ⋅ 0

Cocos2d-x游戏引擎

1.场景 场景类在Cocos2d-x中用CCScene表示,单独的一个场景实际上只是一个空壳,里面什么东西都没有,我们需要向里面加入层,精灵,菜单等元素。我们都玩过一些手机或电脑游戏,在进入游戏之...

1415699306 ⋅ 2014/10/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

6. Shell 函数 和 定向输出

Shell 常用函数 简洁:目前没怎么在Shell 脚本中使用过函数,哈哈,不过,以后可能会用。就像java8的函数式编程,以后获取会用吧,行吧,那咱们简单的看一下具体的使用 Shell函数格式 linux ...

AHUSKY ⋅ 9分钟前 ⋅ 0

MySQL 内核深度优化

MYSQL数据库适用场景广泛,相较于Oracle、DB2性价比更高,Web网站、日志系统、数据仓库等场景都有MYSQL用武之地,但是也存在对于事务性支持不太好(MySQL 5.5版本开始默认引擎才是InnoDB事务...

OSC_cnhwTY ⋅ 16分钟前 ⋅ 0

单片机软件定时器

之前写了一个软件定时器,发现不够优化,和友好,现在重写了 soft_timer.h #ifndef _SOFT_TIMER_H_#define _SOFT_TIMER_H_#include "sys.h"typedef void (*timer_callback_function)(vo...

猎人嘻嘻哈哈的 ⋅ 18分钟前 ⋅ 0

好的资料搜说引擎

鸠摩搜书 简介:鸠摩搜书是一个电子书搜索引擎。它汇集了多个网盘和电子书平台的资源,真所谓大而全。而且它还支持筛选txt,pdf,mobi,epub、azw3格式文件。还显示来自不同网站的资源。对了,...

乔三爷 ⋅ 26分钟前 ⋅ 0

Debian下安装PostgreSQL的表分区插件pg_pathman

先安装基础的编译环境 apt-get install build-essential libssl1.0-dev libkrb5-dev 将pg的bin目录加入环境变量,主要是要使用 pg_config export PATH=$PATH:/usr/lib/postgresql/10/bin 进......

玛雅牛 ⋅ 27分钟前 ⋅ 0

inno安装

#define MyAppName "HoldChipEngin" #define MyAppVersion "1.0" #define MyAppPublisher "Hold Chip, Inc." #define MyAppURL "http://www.holdchip.com/" #define MyAppExeName "HoldChipE......

backtrackx ⋅ 56分钟前 ⋅ 0

Linux(CentOS)下配置php运行环境及nginx解析php

【part1:搭建php环境】 1.选在自己需要安装的安装包版本,wget命令下载到服务器响应目录 http://php.net/releases/ 2.解压安装包 tar zxf php-x.x.x 3.cd到解压目录执行如下操作 cd ../php-...

硅谷课堂 ⋅ 今天 ⋅ 0

Nginx服务架构初探(四):nginx服务器的rewrite功能

nginx服务器的rewrite功能 1.nginx后端服务器组的配置 1>upstream name {…} name是给服务器组限的组名 2>server address [parameters]; address为服务器地址 parame......

余温灬未存 ⋅ 今天 ⋅ 0

layer.prompt使文本框为空的情况下也能点击确定

最近一直在使用layui,但是用到弹出层layer.prompt时,如果文本框是空的话点击确定没有反应,不能向下执行。 但是我又需要空值,看看我原来的代码。 123456789 layer.prompt...

孟飞阳 ⋅ 今天 ⋅ 0

Linux普通文件压缩工具gzip、Bzip2、xz

第六章 文件压缩和打包 6.1 压缩打包介绍 Linux环境常见压缩文件类型: .zip,.gz,.bz2,.xz, .tar.gz,.tar.bz2,.tar.xz 压缩打包的目的 方便文件传输 节省磁盘空间 减少传输花费的时间 ...

弓正 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部