好久没用cocoscreator，有点手生，做个小项目练练手。
项目已经上传至github，地址：
https://github.com/ccffee-jc/CocosCreatorDemo
也可以在微信公众号获取（发送FlappyBird）：
图片素材在上面有。
cocoscreator版本：2.3.2
正文
新建一个项目，项目，打开。
如上图，1是放元素的地方，2是放资源的地方，3是游戏的主视图，4是消息栏，5是设置元素属性的地方。
先别管那么多，上手要紧。
设置屏幕方向
默认项目是横屏，我们做像素鸟的话得用竖屏。
点击上图左上角1，这个是整个项目的根节点，设置这个节点的属性可以改变屏幕的宽高。
设置上图右边2的W和H，默认是960640，我们要让屏幕竖过来，所以这边设置640960就行。
设置好之后就可以看到中间的框变竖着了。
在3处上面的assets处右键-新建-文件夹，名字输入Scenes，然后ctrl+s保存，把途径设置成这个文件夹。这个文件夹用于存放场景，每一个场景对应一个游戏的界面，比如橡树鸟，要设置两个场景，一个主场景，一个开始场景（点开始，跳到主场景），那么这边就需要两个场景，当然这个只是假设，后面也不一定做，先写的好。
设置背景节点
这篇博只做一个轮转着跑的背景。
下面先导入一下素材。
打开项目目录，把下载到的素材放到和刚刚新建的Scenes文件夹同级的目录下，再打开项目应该就有东西了。（素材在文章开头github里面有）
开始布置场景
将上图中的1的图片拖至2的节点上，然后改名，右键复制，复制5个出来，名字随意，我这边是bg_1-5，然后修改每个图片的大小和位置，修改3中的size，把W和H都设置成原来的两倍，然后修改图片位置，也就是3中的position属性，有一个节点设置为（0，0）然后其他节点分别以（0，0）点的节点为基准，位移图片width这么长的x，左边两个右边两个，如果设置的和我一样的话，坐标从左到右应该是：
（-1132，0）（-566，0）（0，0）（566，0）（1132，0）
设置完成之后，图片应该就和上面一样了。
写脚本，让背景图片无限滚动
先说下原理：这种背景图片一直滚动是因为在屏幕看不到的地方，又把图片挪到了开始的地方，继续滚动。
新建脚本文件：在Scenes目录同级下新建一个文件夹，名字叫Script，用于存放脚本，在该目录下新建一个javascript脚本文件，名字随意，我叫的是bg，打开。我这边用的编辑器是vscode，可以有补全提醒，推荐使用，编辑器请自行百度，或者你也可以留个言我看看能不能帮忙。
打开之后，把注释的代码都删了，除了最后的update，把这个的注释去了，应该是下面这个样子的：
开始写代码，先把元素引用进来，让元素能在代码中被访问到：
这边代码的用处是将刚刚新建的五个节点引入代码。
properties这边是用来应用外部参数的地方，在这个框框里面按规范（和我一样就行，可以改bg_1之类的名字）填写之后，在应用脚本的节点上，就可以设置属性，这个属性就可以用着里面的名字（bg_1）访问到。
引入节点之后，之间写背景轮转的逻辑，在update的函数里面这样写：
update这个函数会每帧执行，在这个函数里面设置刚刚引入的bg_1的x坐标就能改变背景的位置，将五个背景位置同时改变，画面就会很平滑了。
在图片位移到最后的坐标，也就是x=-1135的位置之后，我们需要把图片放到最开始的地方，也就是1135的位置，所以在上面有5个if，分别对应每个背景位移到最开始的逻辑。
整个脚本的代码：
cc.Class({
extends: cc.Component,
properties: {
bg_1:{
default: null,
type: cc.Node
},
bg_3:{
default: null,
type: cc.Node
},
bg_2:{
default: null,
type: cc.Node
},
bg_4:{
default: null,
type: cc.Node
},
bg_5:{
default: null,
type: cc.Node
}
},
start () {
},
update (dt) {
this.bg_1.x-=3;
this.bg_2.x-=3;
this.bg_3.x-=3;
this.bg_4.x-=3;
this.bg_5.x-=3
if(this.bg_1.x <= -1135)this.bg_1.x = 1135;
if(this.bg_2.x <= -1135)this.bg_2.x = 1135;
if(this.bg_3.x <= -1135)this.bg_3.x = 1135;
if(this.bg_4.x <= -1135)this.bg_4.x = 1135;
if(this.bg_5.x <= -1135)this.bg_5.x = 1135;
},
});
这样代码就写好了。配置一些跑跑吧。
配置脚本
点击2的Main Camera节点，把1中的脚本拖入3的框框位置处，脚本就算挂载到了Main Camera这个节点上面了，然后将2处的节点对应着3处的Bg设置框，每个都设置进去。
配置好了，点击4处的小三角，代码就能跑起来了。