cocos-js实现背景图的滚动

本文介绍如何利用cocos-js实现背景图的滚动,通过创建自定义层类来控制两张背景图的移动,确保它们在屏幕上的平滑过渡。通过调整位置和触发条件,实现动态的滚动效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

cocos-js实现背景图的滚动

var ShuffLayer = cc.Layer.extend({
    _turnImg1:null,
    _turnImg2:null,
    init:function(){
        var bRef = false;
        if(this._super()){
            this.steupView(sRes.backgroud);
            bRef = true;
        }
        return bRef;
    },
    steupView:function(fileName){
        this._turnImg1 = new cc.Sprite(fileName);
        this._turnImg1.setPosition(cc.p(this._turnImg1.getContentSize().width/2,this._turnImg1.getContentSize().height/2));
        this.addChild(this._turnImg1);
 
        this._turnImg2 = new cc.Sprite(fileName);
        this._turnImg2.setPosition(cc.p(this._turnImg2.getContentSize().width * 1.5,this._turnImg2.getContentSize().height /2));
        this.addChild(this._turnImg2);
    },
    onEnter:function(){
        this._super();
        this.scheduleUpdate();
    },
    update:function(dt){
        //如果第一张背景图的中点到达屏幕下方背景图高度的一半的时候(也就是第一张图片移除图片下面的时候)重新设置他的位置到屏幕上面,图片下边缘跟手机屏幕上边缘重合-1个像素
        if (this._turnImg1.getPositionX()<=-this._turnImg1.getContentSize().width/2) {          this._turnImg1.setPosition(cc.p(this._turnImg1.getContentSize().width * 1.5 -1 , this._turnImg1.getContentSize().height/2));
        }else{//如果还没需要换位置就让他向下移动一个像素       this._turnImg1.setPosition(cc.pAdd(this._turnImg1.getPosition(), cc.p(-1,0)));
        }
        //如果第二张背景图移出屏幕最下方则重新设置他的位置在屏幕的最上方
        if (this._turnImg2.getPositionX() <= -this._turnImg2.getContentSize().width / 2) {
            this._turnImg2.setPosition(cc.p(this._turnImg2.getContentSize().width * 1.5 -1, this._turnImg2.getContentSize().height / 2));
        }else{//向下移动          this._turnImg2.setPosition(cc.pAdd(this._turnImg2.getPosition(), cc.p(-1,0)));
        }
    }
});
ShuffLayer.create = function () {
    var ly = new ShuffLayer();
    if(ly && ly.init()){
        return ly;}
    return null;}; 
ShuffLayer.scene = function () {
    var sc = new cc.Scene();
    sc.addChild(ShuffLayer.create());
    return sc;};
函数源码cc.pAdd = function (v1, v2) {

    return cc.p(v1.x + v2.x, v1.y + v2.y);};

函数源码cc.pSub = function (v1, v2) {

    return cc.p(v1.x - v2.x, v1.y - v2.y);};

实战代码练习

ctor:function(){

this._super();

size=cc.winSize;

sprite=new cc.Sprite(res.runbg);

sprite.attr({

x:sprite.getContentSize().width/2,

y:sprite.getContentSize().height/2

});

this.addChild(sprite,1);

sprite2=new cc.Sprite(res.runbg2);

sprite2.attr({

x:sprite2.getContentSize().width*1.5,

y:sprite2.getContentSize().height/2

});

this.addChild(sprite2,0);

this.schedule(this.SpriteMove, 0.1);},

SpriteMove:function(){

if (sprite.getPositionX()<=-sprite.getContentSize().width/2) {sprite.setPositionX(sprite.getContentSize().width*1.5-18);}

else{

sprite.setPositionX(sprite.getPositionX()-10);}

if (sprite2.getPositionX()<=-sprite2.getContentSize().width/2) {

sprite2.setPositionX(sprite.getContentSize().width*1.5);}else {sprite2.setPositionX(sprite2.getPositionX()-10);}}

在运行的过程中,图片的尺寸设计容易出现问题,要根据图片的像素大小对其进行更改!!!!


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值