学习creator第六天，网上看到实现无限滚动背景都是用两个图轮流滚动拼接的，还有个是用shader的我不会
突发奇想这么做居然成了！(●ˇ∀ˇ●)
markdown代码块老是失败…先放截图吧
`//思路
//图片使用平铺的方式，改变图片宽度，让图片循环
//利用Widget组件让图片始终右对齐
//使用方法
// 1.添加任意图片作为节点
// 2.给节点添加这个脚本
// 3.添加Widget组件
// 4.设置Widget的Right:0
// 5.设置Widget的AlignMode:ALWAYS
const {ccclass, property} = cc._decorator;
@ccclass
export default class FoeverRoll extends cc.Component {
@property
rollSpeed:number = 10;//滚动速度
initWidth:number = 0;//图片本来的宽度
maxWidth:number = 0;//最大宽度，避免宽度无限增加
minWidth:number = 0;//最小宽度，避免穿帮
onLoad () {
this.getComponent(cc.Sprite).type = cc.Sprite.Type.TILED;//图片设置平铺
this.initWidth = this.node.width;//获取原本的宽度
this.minWidth = Math.ceil(cc.director.getScene().getChildByName('Canvas').width / this.initWidth) * this.initWidth;//最少放几个图才能保证覆盖屏幕
this.maxWidth = this.minWidth + this.initWidth - this.rollSpeed;//最大宽度比最小宽度多一个图片宽度,减去一个滚动速度好像可以避免重置宽度的时候不自然
this.node.width = cc.director.getScene().getChildByName('Canvas').width;//把图片初始成屏幕宽度避免穿帮
}
update () {
this.node.width += this.rollSpeed;//增加宽度就会滚动了
if(this.node.width >= this.maxWidth) {
this.node.width = this.minWidth;
}//超过最大宽度就重置一次，避免无限增长，我猜无限增长可能会不好(*^_^*)
}
}
`
需要改进的：本来想把添加和设置Widget步骤写在脚本里的，弄半天失败了，感觉应该是可以的，所以求改进