`
fireDragonpzy
  • 浏览: 454390 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

视差视图CCParallaxNode

阅读更多
“视差”(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)是一种视觉效果设计,常见于网页和移动应用界面中,尤其是用于背景图像处理。这种效果通过让背景元素以不同的速度移动,模拟出深度感,从而给予用户更丰富的三维体验。当用户...

    swift-一个小型Swift库可以帮助您创建一个精彩的视差视图

    在这个特定的场景中,我们关注的是一个名为"PVView"的小型Swift库,它专门用于创建视差视图效果。 视差效果是一种视觉错觉,当背景元素以不同的速度相对于前景元素移动时,可以给用户带来深度感和动态交互体验。...

    Android-用Kotlin编写的Android应用程序的视差视图

    视差视图通常用于滚动视图,如ScrollView或RecyclerView,通过自定义视图组件或者利用现有的库,我们可以实现视差效果。对于初学者来说,理解Kotlin语法和Android UI组件的交互是至关重要的第一步。Kotlin是一种现代...

    Android-Android简易的视差视图用于模拟AppleTVApp图标

    "Android-Android简易的视差视图用于模拟Apple TV App图标"这一项目,便是将Apple TV App图标中引入的视差滚动效果移植到Android应用上的尝试。视差效果是一种视觉现象,当背景和前景元素以不同的速度移动时,可以...

    M6ParallaxController:视差视图和表格视图的视差控制器

    这已停产,请参阅此后续项目M6UniversalParallaxViewController M6视差控制器视差视图和表格视图的视差控制器版本 1.1 完美平滑滚动,但不再完全支持表格部分标题更新示例,包含处理单击顶部视差视图的代码改变高度...

    一个视差滚动视图组件

    视差滚动视图组件是一种常用于增强用户交互体验的前端技术,尤其在移动应用和现代网页设计中。这种组件能够创建深度感和动态效果,使背景以较慢的速度相对于前景内容滚动,从而产生视觉上的差异,即所谓的“视差”...

    ParallaxView,用kotlin编写的android应用程序的视差视图.zip

    ParallaxView是一个开源项目,由Kotlin编程语言编写,专为Android应用程序设计,实现了视差滚动效果。在Android开发中,视差效果是指背景元素相对于前景元素以不同速度移动,通常用于增强用户界面的视觉深度和动态感...

    DRParallaxView多层视差视图

    在iOS开发中,视差效果通常用于滚动视图,如UITableView或UICollectionView,通过自定义Cell或Item的背景视图,实现不同层的元素随滚动速度的不同而产生差异。DRParallaxView则提供了一个更简洁、灵活的方式来实现这...

    ParallaxView:带有视差视图的项目

    "ParallaxView"项目就是一个专门实现这种效果的示例,它使用Objective-C编写,展示了如何在iOS应用中集成视差视图。本文将深入探讨视差视图的概念、实现方式以及在Objective-C中的具体应用。 视差效果源于现实世界...

    FadeTitleDemo:Android 淡出标题栏和视差视图

    `FadeTitleDemo`是一个专门用于实现标题栏淡出效果以及视差视图的示例项目,它通过巧妙地结合动画和布局管理,为用户提供了一种独特的交互体验。这个项目主要关注的是Android UI动态效果的实现,特别是标题栏的淡入...

    视差滚动实例

    视差滚动是一种网页设计技术,它通过创建深度感和立体感来增强用户的浏览体验。当用户滚动页面时,背景图像以较慢的速度移动,而前景元素则以较快的速度移动,这种速度差产生的视觉效果就称为视差滚动。这种技术常...

    YKParallaxHeaderView:UITableView 的视差视图

    YKParallaxHeaderView YKParallaxHeaderView 是用 Swift 编写的 UITableview 的视差标题视图。安装只需将 YKParallaxHeaderView/* 复制到您的项目中。用法 YKParallaxHeaderView ( image : UIImage ( named : " ...

    DVParallaxView:简单的陀螺控制组件,用于将iOS 7主屏幕视差效果添加到您的应用程序视图中

    只需将视图场景添加到DVParallaxView子视图中,就可以将视差视图添加到视差场景中。 只需更改contentOffset属性或在陀螺仪处于打开状态时倾斜设备,即可使用视差移动视图。 子视图层次结构中的视图位置同时是视差...

    Android-在RecyclerView上面实现视差效果的一个适配器

    5. **头部视图**:为了实现头部视差效果,可以在RecyclerView中添加一个固定大小的头部视图,然后在这个头部视图上应用视差动画。 6. **库的使用**:有时候,开发者会选择使用第三方库来简化实现过程,比如`kanytu-...

    成像原理、视差图以及uv视差计算PPT文档及代码

    在IT领域,尤其是在计算机视觉和图像处理中,成像原理、视差图和uv视差是至关重要的概念。这些知识点广泛应用于3D重建、自动驾驶、无人机导航、虚拟现实和增强现实等多个方面。以下是对这些概念的详细解释: 一、...

    视差滚动视图效果

    视差滚动视图效果源码,ParallaxScrollView,实现具有视差滚动(Parallax Scroll)效果的滚动视图。所谓视差滚动,就是屏幕有两层滚动视图,两层滚动视图的滚动速度不一样,一般来说前面的滚动视图的滚动速度比底部...

    从视差图重建3D点云MATLAB

    在两个不同视角的图像(通常称为左视图和右视图)之间,通过匹配特征点,我们可以计算出每个像素的视差,即像素在左右视图中的位置差异。视差与物体的距离有关,因此可以用来恢复3D结构。 MATLAB提供了强大的图像...

Global site tag (gtag.js) - Google Analytics