“视差”(Parallaxing)是2D游戏中通过让不同层上的图片用不同的速度移动,来创造视觉深度的方法。前景的图片移动的比背景图片要快。cocos2d中CCParallaxNode就是这样一个节点。
如果我们的游戏中有地图的移动,就无法避免滚动视差。也就是说离实现越远的地方移动速度越慢,这样才可以形成景深不一样的视觉效果。
如果使用cocos2d,那我们可以很简单的实现。因为已经存在了这样一个“容器”:CCParallaxNode。对的,它肯定继承于CCNode,加入到CCParallaxNode的元素都会有一个parallaxRatio,用来决定移动的快慢。
1:构造CCParallaxNode:
和构造CCNode没有什么不同
CCParallaxNode *parallaxNode = [CCParallaxNode node];
2:向CCParallaxNode添加元素:
CCSprite *background = [CCSprite spriteWithFile:@"background.png"];//最远的背景
CCSprite *map = [CCSprite spriteWithFile:@"map.png"];//中间的地图元素
CCSprite *topImage = [CCSprite spriteWithFile:@"powered.png"];//最前景
// background image is moved at a ratio of 0.4x, 0.5y
[parallaxNode addChild:background z:-1 parallaxRatio:ccp(0.4f,0.5f)
positionOffset:CGPointZero];
// map are moved at a ratio of 2.2x, 1.0y
[parallaxNode addChild:map z:1 parallaxRatio:ccp(2.2f,1.0f)
positionOffset:ccp(0,-200)];
// top image is moved at a ratio of 3.0x, 2.5y
[parallaxNode addChild:cocosImage z:2 parallaxRatio:ccp(3.0f,2.5f)
positionOffset:ccp(200,800)];
3:解析:
parallaxRatio其实就是相对于CCParallaxNode的移动速度的比例,比如background的parallaxRatio为ccp(0.4,0.5),表示CCParallaxNode的X轴和Y轴分别移动一个点,则background分别移动0.4,0.5个点。这样看起来远背景移动的速度就慢一些了。
4:内部实现:
CCParallaxNode的内部实现其实也很简单,只需要根据parallaxRatio重新计算每个Child的位置即可。
摘自:
http://blog.csdn.net/a287971/article/details/7624987
分享到:
相关推荐
在IT行业中,视差视图(Parallax View)是一种视觉效果设计,常见于网页和移动应用界面中,尤其是用于背景图像处理。这种效果通过让背景元素以不同的速度移动,模拟出深度感,从而给予用户更丰富的三维体验。当用户...
在这个特定的场景中,我们关注的是一个名为"PVView"的小型Swift库,它专门用于创建视差视图效果。 视差效果是一种视觉错觉,当背景元素以不同的速度相对于前景元素移动时,可以给用户带来深度感和动态交互体验。...
视差视图通常用于滚动视图,如ScrollView或RecyclerView,通过自定义视图组件或者利用现有的库,我们可以实现视差效果。对于初学者来说,理解Kotlin语法和Android UI组件的交互是至关重要的第一步。Kotlin是一种现代...
"Android-Android简易的视差视图用于模拟Apple TV App图标"这一项目,便是将Apple TV App图标中引入的视差滚动效果移植到Android应用上的尝试。视差效果是一种视觉现象,当背景和前景元素以不同的速度移动时,可以...
这已停产,请参阅此后续项目M6UniversalParallaxViewController M6视差控制器视差视图和表格视图的视差控制器版本 1.1 完美平滑滚动,但不再完全支持表格部分标题更新示例,包含处理单击顶部视差视图的代码改变高度...
视差滚动视图组件是一种常用于增强用户交互体验的前端技术,尤其在移动应用和现代网页设计中。这种组件能够创建深度感和动态效果,使背景以较慢的速度相对于前景内容滚动,从而产生视觉上的差异,即所谓的“视差”...
ParallaxView是一个开源项目,由Kotlin编程语言编写,专为Android应用程序设计,实现了视差滚动效果。在Android开发中,视差效果是指背景元素相对于前景元素以不同速度移动,通常用于增强用户界面的视觉深度和动态感...
在iOS开发中,视差效果通常用于滚动视图,如UITableView或UICollectionView,通过自定义Cell或Item的背景视图,实现不同层的元素随滚动速度的不同而产生差异。DRParallaxView则提供了一个更简洁、灵活的方式来实现这...
"ParallaxView"项目就是一个专门实现这种效果的示例,它使用Objective-C编写,展示了如何在iOS应用中集成视差视图。本文将深入探讨视差视图的概念、实现方式以及在Objective-C中的具体应用。 视差效果源于现实世界...
`FadeTitleDemo`是一个专门用于实现标题栏淡出效果以及视差视图的示例项目,它通过巧妙地结合动画和布局管理,为用户提供了一种独特的交互体验。这个项目主要关注的是Android UI动态效果的实现,特别是标题栏的淡入...
YKParallaxHeaderView YKParallaxHeaderView 是用 Swift 编写的 UITableview 的视差标题视图。安装只需将 YKParallaxHeaderView/* 复制到您的项目中。用法 YKParallaxHeaderView ( image : UIImage ( named : " ...
只需将视图场景添加到DVParallaxView子视图中,就可以将视差视图添加到视差场景中。 只需更改contentOffset属性或在陀螺仪处于打开状态时倾斜设备,即可使用视差移动视图。 子视图层次结构中的视图位置同时是视差...
5. **头部视图**:为了实现头部视差效果,可以在RecyclerView中添加一个固定大小的头部视图,然后在这个头部视图上应用视差动画。 6. **库的使用**:有时候,开发者会选择使用第三方库来简化实现过程,比如`kanytu-...
在IT领域,尤其是在计算机视觉和图像处理中,成像原理、视差图和uv视差是至关重要的概念。这些知识点广泛应用于3D重建、自动驾驶、无人机导航、虚拟现实和增强现实等多个方面。以下是对这些概念的详细解释: 一、...
在两个不同视角的图像(通常称为左视图和右视图)之间,通过匹配特征点,我们可以计算出每个像素的视差,即像素在左右视图中的位置差异。视差与物体的距离有关,因此可以用来恢复3D结构。 MATLAB提供了强大的图像...
视差滚动视图效果源码,ParallaxScrollView,实现具有视差滚动(Parallax Scroll)效果的滚动视图。所谓视差滚动,就是屏幕有两层滚动视图,两层滚动视图的滚动速度不一样,一般来说前面的滚动视图的滚动速度比底部...
视差效果通常应用于滚动视图,如UITableView或UICollectionView。通过调整背景视图与内容视图的滚动速度,可以创造出富有层次感的动画效果。例如,当用户在列表中上下滑动时,背景图片会比列表内容以更慢的速度移动...