cocos2d-x学习（9）：cocos2d-x 无限背景滚动

2012-07-03

cocos2d-x学习（九）：cocos2d-x 无限背景滚动最近在学习飞行射击类游戏的一些开发，学到的东西确实不少，比如，

cocos2d-x学习（九）：cocos2d-x 无限背景滚动

最近在学习飞行射击类游戏的一些开发，学到的东西确实不少，比如，无限背景滚动，子弹的缓冲池，面向组件开发等等！

今天就来总结一下无限背景滚动的实现！

飞行类的游戏都是基于背景的滚动，造成视觉上的假象，认为飞机在飞行，而不是“真正的向前飞”。。。

1.原理

滚动的原理：设定一个速度，在每次调用update(ccTime dt) 时，就根据速度和dt得到移动的偏移量，因为更新频率很快，所以偏移量很小，所以在视觉上认为是连贯的！就形成了滚动效果。

无限滚动的原理：有两个背景，每次调用update(ccTime dt) 时，判断当前这两个背景，如果在屏幕之外了，说明它不在起到显示作用，于是将它放到后面去，其实就像是两条腿走路，一前一后，循环，就向前运动起来了，也就是说只需要两个背景，一张贴在一张后面！（我采用的算法比较懒，就是会对两个背景分别判断位置，而不是记录哪个背景在前，哪个背景在后）！

2.代码实现

这里用了两个景层，一个近景，一个远景，这样看起来效果更逼真！（资源来源于cocos2d-x-html版的飞行demo）

远景用了一个图片精灵，近景用了一个tmx地图

定义了一个背景标签，用来标记是近景还是远景，如果只有一层就可以忽略

<img src="//img.reader8.net/uploadfile/jiaocheng/201401103/2809/2014012819090634625.png" alt="cocos2d-x学习（9）：cocos2d-x 无限背景滚动"><br><br></p><p>不能做成动画，效果看不出来。。。<br><br><br><br></p><p><br></p> </p><div class="aged2"><script type="text/javascript">a("article_content_down");</script></div>
 </div>
<div id="pagebox" >
<a href="/jiaocheng/caozuoxitong/" target="_blank">查看更多</a>
<A href="/jiaocheng/20130420/2215647.html" title="Win7停硬盘安装Debian">下一篇</A></div>
<div id="MainLeftll">
<div id="MainLeftllToolbar">本文网址：<a href="https://www.reader8.net/jiaocheng/20120703/2215651.html">https://www.reader8.net/jiaocheng/20120703/2215651.html</a></div>
<div class="related"><span class="relatedIco1">读书人精选</span>
<ul class="relatedList">
</ul>
</div>
<div class="aged3"><script type="text/javascript">a("article_content_down2");</script></div>
<div class="aged3a"><script type="text/javascript">a("article_content_down3");</script></div>
</div>
</div>
<!-- 文章正文左边结束 -->
<!-- 文章正文右边开始 -->
<div class="leftbox_r">
<div class="aged4"><script type="text/javascript">a("article_right_up");</script></div> 
<div class="Rtitle">
<span class="Rtitle_text">热点排行</span></div>
<div class="RContl">
<ul>
<li><a href="/jiaocheng/20121110/2204322.html" target="_blank">Photoshop鼠绘也许手绘的基础教程</a></li>
<li><a href="/jiaocheng/20120910/2226168.html" target="_blank">Ubuntu 上软件卸载</a></li>
<li><a href="/jiaocheng/20120705/2225963.html" target="_blank">ubuntu上设置tomcat成为启动服务</a></li>
<li><a href="/jiaocheng/20130407/2229113.html" target="_blank">企鹅日志（十五）：例行性工作排程cront</a></li>
<li><a href="/jiaocheng/20120702/2218953.html" target="_blank">网站挂马扫除</a></li>
<li><a href="/jiaocheng/20120920/2227359.html" target="_blank">moodle2.3 centos5.5 上安装</a></li>
<li><a href="/jiaocheng/20120912/2200935.html" target="_blank">iPhone开发-Unresolved Symbols CAKeyfr</a></li>
<li><a href="/jiaocheng/20120902/2229905.html" target="_blank">Ubuntu 上 安装和配置JDK</a></li>
<li><a href="/jiaocheng/20131018/2224218.html" target="_blank">在终端 创办一个cocos2d－x 项目</a></li>
<li><a href="/jiaocheng/20131118/2218001.html" target="_blank">photoshop cs6 登记方法</a></li>
</ul>
</div>
<div class="aged7"><script type="text/javascript">a("article_right_up2");</script></div>
<!-- 文章正文右边结束 -->
</div>
<!--主体结束-->
<script type="text/javascript">a("article_down_up");</script>
<script type="text/javascript">a("foot");</script>
<script type="text/javascript">a("article_down_up2");</script>
<!--主体结束-->
<div style="display:none"> 
<!--百度统计代码--> 
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?d6151f323a57d16696165e47eee86d53";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
</div> 
<script type="text/javascript">a("allbt");</script>
</body>
</html>

操作系统

cocos2d-x学习（9）：cocos2d-x 无限背景滚动