“视差”(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
分享到:
相关推荐
视差视图(parallax)的工程图片,放在imageView上滚动的图片。
一个小型Swift库,可以帮助您创建一个精彩的视差视图
Android简易的视差视图用于模拟Apple TV App图标
ParallaxView,用kotlin编写的android应用程序的视差视图.zip
这已停产,请参阅此后续项目M6UniversalParallaxViewController M6视差控制器视差视图和表格视图的视差控制器版本 1.1 完美平滑滚动,但不再完全支持表格部分标题更新示例,包含处理单击顶部视差视图的代码改变高度...
一个(视差)滚动视图组件
查看对其内容应用视差效果的容器。 如果你使用两个容器,你可以甚至实现3D效果,一个在另一个容器之上。
视差视图 带有视差视图的项目
作者dimkah,代码DRParallaxView。 介绍:DRParallaxView 是 iOS 多层视差视图(类似 tvOS 应用程序图标)。
视差滚动 JS+css视察滚动 视差滚动 JS+css视察滚动 视差滚动 JS+css视察滚动
YKParallaxHeaderView YKParallaxHeaderView 是用 Swift 编写的 UITableview 的视差标题视图。安装只需将 YKParallaxHeaderView/* 复制到您的项目中。用法 YKParallaxHeaderView ( image : UIImage ( named : " ...
只需将视图场景添加到DVParallaxView子视图中,就可以将视差视图添加到视差场景中。 只需更改contentOffset属性或在陀螺仪处于打开状态时倾斜设备,即可使用视差移动视图。 子视图层次结构中的视图位置同时是视差...
视差滚动视图效果源码,ParallaxScrollView,实现具有视差滚动(Parallax Scroll)效果的滚动视图。所谓视差滚动,就是屏幕有两层滚动视图,两层滚动视图的滚动速度不一样,一般来说前面的滚动视图的滚动速度比底部...
视差滚动切换视图效果,实现视差滑动效果特别棒的滚动视图切换视图效果。手指滑动视图时,新视图的滑动进来的速度高于当前视图滑动出去的速度,所以整个视图切换效果给人十分流畅和谐的感觉。其实这份代码还实现了...
RealParallaxAndroid, RealParallaxAndroid是一个具有真正视差效果的视图寻呼机 == =RealParallaxAndroid是一个具有真正视差效果的视图寻呼机 用法<com.github.hmallet.realparallaxandroid.RealHorizontalScro
资源中主要是两个ppt:相机成像原理和视差图、uv视差图,另外含有计算uv视差的代码。因为ppt里涉及到一些图和动画,本人不是ppt高手,做的很辛苦,所以象征性地收 个资源分~
FadeTitleDemo ##说明 差动视图+淡入标题效果 使用Gradle构建,如果使用Eclipse请手动添加support-v7-appcompat库作为依赖. ##效果展示
计算视差 opencv2.1 对左右视图的左边进行边界延拓,以获取与原始视图相同大小的有效视差区域
利用python实现SGBM算法,实现对视频的读取显示,计算左右视差图,将其播放出来