`
wangweike
  • 浏览: 66503 次
  • 性别: Icon_minigender_1
  • 来自: Mars
社区版块
存档分类
最新评论

无限滚屏效果,高级视差滚屏

 
阅读更多
CCParallaxNode不适用于生成无限滚屏效果。

使用CCSpriteBatchNode来提高背景图片的渲染速度。

单独的层文件:
滚屏效果中的所有单独的条纹文件都是480x320像素的,乍看起来很浪费,但是并不是要把这些单独的文件加载到游戏中去,而是要把它们放到纹理贴图集中去。Zwoptex可以移除每个图片的透明部分,但Zwoptex不能清除一张图片上图像之间存在的大块空间,所以
对于上述类型的图片最好分成单独的文件,以后透明部分暴露出来给zwoptex。避免了“全景渲染造成的浪费”(overdraw),图片之间很少重叠,有效降低重复绘制的像素,提高帧率。

这些图片都是以480x320尺寸保存的,Zwoptext知道它们之间的间距。我们要做的就是把所有的图片放在Zwoptex画布中央,软件会把图片放到正确的位置上。


调用一个保存在成员变量里的节点比通过getNodeByTag方法来调用要来的快。如果在每一帧中都这样做的话,就可以省下几个CPU处理周期。但是,如果要保存几十甚至上百个这样的成员变量的话,那就不值得这样做了。

CCTexture2D* gameArtTexture = [[CCTextureCache sharedTextureCache] addImage:@"game-art.png"];
把相同一张贴图 再次添加到CCTextureCache中是唯一一个获取已被缓存的贴图的方法。第二次调用这个操作不会将贴图再次加载;CCTextureCache这个单例知道这个贴图已被加载过, 会直接调用已被缓存的版本,这个操作速度很快。为什么没有一个像getTextureByName这样的方法来调用已经被缓存的贴图,不过现在确实是没有这样的方法可用。

用一个相同数量大小的数组来存储对应每一层的移动速度因子,相似层的速度应该相同。


续屏:
方法是把每一种背景条纹图片再加一个到原先图片的右边,与原先图片的尾部相接。这就让原先的背景条纹图片的长度增加了一倍,满足了无限滚屏的要求。根据不同的背景图片,可以选择对图片平铺还是翻转。
把第二组的各个背景图片水平翻转过来:这样做可以在视觉上把左右两个背景条纹图片无缝连接起来,以避免产生任何显眼的边界。
前面一组的图片完全超出屏幕后,把它们定位到后面,来实现无限滚动效果。


重复贴图
可以在一块指定大小的正方形区域里让贴图重复出现。如果你把这块指定的正方形区域设置的够大,你可以达到让背景无限滚屏的效果。至少可以用重复的贴图覆盖几千个像素或者几十个屏幕大小的区域,而不至于影响游戏的运行效率和内存占用率。
要用到的是OpenGL支持的GL_REPEAT贴图参数。不过这个方法只适用于正方形的区域,而且要满足“2的n次方”规则,比如32x32或者128x128像素。
例:用GL_REPEAT重复背景贴图 
CGRect repeatRect = CGRectMake(-5000, -5000, 5000, 5000);
CCSprite* sprite = [CCSprite sp riteWithFile:@”square.png” rect:repeatRect];
ccTexParams params =
{
GL_LINEAR,
GL_LINEAR,
GL_REPEAT,
GL_REPEAT
};
[sprite.texture setTexParameters:&params];
重复贴图可以使一片图片由小图片平铺而成,但它不能解决无限滚屏。
分享到:
评论

相关推荐

    视差滚屏效果

    视差滚屏效果是一种在2D游戏或者网页设计中常用的技术,它通过模拟深度感,为用户带来更生动、更具沉浸感的视觉体验。在移动游戏领域,特别是使用Cocos2d-x框架开发的游戏,视差滚动能显著提升游戏场景的层次感和...

    无限滚屏与分页展示优缺点共9页.pdf.zip

    "无限滚屏"和"分页展示"是两种常见的数据展示方式,各有其特点和适用场景。以下是这两种方法的详细解析。 无限滚屏,又称为无限滚动或自动加载,是一种让用户在浏览时不断向下滚动页面,新内容会自动加载的设计模式...

    单页视觉差滚屏

    单页视觉差滚屏是一种网页设计技术,它在滚动页面时创造出一种深度效果,使得背景元素与前景元素的运动速度不同,从而产生立体感和动态视觉冲击力。这种技术常见于现代网页设计中,用于提升用户体验,特别是对于展示...

    js+css3实现手机端滚屏效果.zip

    "js+css3实现手机端滚屏效果.zip" 文件包含的资源旨在帮助开发者利用JavaScript和CSS3技术来优化手机端网页的滚动功能。接下来,我们将深入探讨这些技术如何协同工作以实现这一目标。 首先,CSS3引入了许多新的动画...

    仿创客贴官网网站(滚屏).rar

    滚屏效果的具体实现可能包括以下技术: 1. 响应式设计:确保网站在不同设备和屏幕尺寸上都能良好展示,这通常通过媒体查询(Media Queries)和百分比布局来实现。 2. 视差滚动:不同的内容层以不同的速度滚动,创造...

    视差滚动浏览.rar

    这些图片通常被用作背景,当用户滚动页面时,它们会以不同的速度移动,从而营造出视差效果。例如,可以设置一个缓慢移动的山景图作为背景,而前景中的文本或元素则快速滚动,这样就形成了一种深度感。 3. **js**:...

    html5-页面滚动展示效果-js大屏页面特效

    这种效果通常被称为视差滚动,它让背景元素以较慢的速度移动,与前景元素形成视觉差异,营造出深度感和动态效果。 首先,HTML5在其中起到了基础框架的作用。HTML5提供了许多新的标签和API,如`<section>`、`...

    如何使用cocos2d 2.x制作一个多向滚屏射击游戏-第一部分源代码

    这通常涉及到使用CCParallaxNode来实现视差滚动效果,给予玩家深度感。你可以通过加载多个背景图片,并以不同的速度移动它们,以创建出层次感。 接下来,我们需要创建坦克模型。这可以通过CCSprite或自定义CCNode来...

    蓝色全屏页面滚动个人简历网站模板

    2. **全屏滚动效果**:利用HTML5和CSS3,实现页面随着用户滚动而逐屏显示内容,这种效果常被称为“视差滚动”,可以增加用户的沉浸感。 3. **CSS3动画**:CSS3的过渡(transition)、动画(animation)和3D转换等...

    一些jQuery控件

    3. **滚屏**:滚屏效果可能是指页面滚动时的平滑过渡,比如jQuery的.fullPage.js或skrollr.js。这些插件可以让用户在浏览长页面时感受到流畅的滚动体验,同时还可以实现全屏滚动和视差滚动等特效。 4. **时间控件**...

    全屏整屏滚动组件fullPage

    fullPage.js还支持许多高级功能,如锚点链接、导航条、滑块控制、视差滚动、回顶部按钮等。通过深入学习其API文档,你可以自定义更多细节,以满足各种复杂的需求。 在实际项目中,需要注意的是,由于fullPage.js...

    动画场景页面css3+html5

    CSS3的动画模块是实现移动滚屏动画场景的关键。通过`@keyframes`规则,我们可以定义动画的不同阶段,然后使用`animation`属性将这些定义应用于元素,让其在时间轴上平滑地过渡。此外,CSS3还提供了许多过渡和变换...

Global site tag (gtag.js) - Google Analytics