代码之家  ›  专栏  ›  技术社区  ›  Rakesh Sharma

Cocos2d-js:当从一个应用程序移动到另一个应用时,对浏览器上运行的Cocos2d-j应用程序的影响

  •  1
  • Rakesh Sharma  · 技术社区  · 11 年前

    我在浏览器上运行cocos2d网站上提供的跑酷游戏。一切都很好,但当我从浏览器移到premium文本并返回浏览器时,正在运行的播放器开始出现一些意外行为,播放器从其位置消失,几秒钟后,它掉在地上,然后再次开始运行。每当我从一个应用程序移到另一个应用时,就会发生这种情况。

    我不知道为什么会这样。有人能告诉我如何防止这种情况发生吗?

    下面是动画层的代码:-

           var AnimationLayer = cc.Layer.extend({
    spriteSheet: null,
    runningAction: null,
    sprite: null,
    space:null,
    body:null,
    shape:null,
    
    ctor:function (space) {
        this._super();
        this.space = space;
        this.init();
    
        this._debugNode = cc.PhysicsDebugNode.create(this.space);
        this._debugNode.setVisible(false);
        // Parallax ratio and offset
        this.addChild(this._debugNode, 10);
    },
    init:function () {
        this._super();
    
        // create sprite sheet
        cc.spriteFrameCache.addSpriteFrames(res.runner_plist);
        this.spriteSheet = cc.SpriteBatchNode.create(res.runner_png);
        this.addChild(this.spriteSheet);
    
    
        // init runningAction
        var animFrames = [];
        for (var i = 0; i < 8; i++) {
            var str = "runner" + i + ".png";
            var frame = cc.spriteFrameCache.getSpriteFrame(str);
            animFrames.push(frame);
        }
    
        var animation = cc.Animation.create(animFrames, 0.1);
        this.runningAction = cc.RepeatForever.create(cc.Animate.create(animation));
    
    
        //create runner through physic engine
        this.sprite = cc.PhysicsSprite.create("#runner0.png");
        var contentSize = this.sprite.getContentSize();
        // init body
        this.body = new cp.Body(1, cp.momentForBox(1, contentSize.width, contentSize.height));
        this.body.p = cc.p(g_runnerStartX, g_groundHight + contentSize.height / 2);
        this.body.applyImpulse(cp.v(150, 0), cp.v(0, 0));//run speed
        this.space.addBody(this.body);
        //init shape
        this.shape = new cp.BoxShape(this.body, contentSize.width - 14, contentSize.height);
        this.space.addShape(this.shape);
    
        this.sprite.setBody(this.body);
        this.sprite.runAction(this.runningAction);
    
        this.spriteSheet.addChild(this.sprite);
    
        this.scheduleUpdate();
    },
    
    getEyeX:function () {
        return this.sprite.getPositionX() - g_runnerStartX;
    }});
    

    这是playScene.js的代码:-

        var PlayScene = cc.Scene.extend({
    space:null,
    gameLayer:null,
    // init space of chipmunk
    initPhysics:function() {
        this.space = new cp.Space();
        // Gravity
        this.space.gravity = cp.v(0, -350);
        // set up Walls
        var wallBottom = new cp.SegmentShape(this.space.staticBody,
            cp.v(0, g_groundHight),// start point
            cp.v(4294967295, g_groundHight),// MAX INT:4294967295
            0);// thickness of wall
        this.space.addStaticShape(wallBottom);
    },
    onEnter:function () {
        this._super();
        this.initPhysics();
    
    
    
        this.gameLayer = cc.Layer.create();
    
        //add three layer in the right order
        this.gameLayer.addChild(new BackgroundLayer(), 0, TagOfLayer.background);
        this.gameLayer.addChild(new AnimationLayer(this.space), 0, TagOfLayer.Animation);
        this.addChild(this.gameLayer);
        this.addChild(new StatusLayer(), 0, TagOfLayer.Status);
    
        this.scheduleUpdate();
    
    },
    update:function (dt) {
        // chipmunk step
        this.space.step(dt);
        var animationLayer = this.gameLayer.getChildByTag(TagOfLayer.Animation);
        var eyeX = animationLayer.getEyeX();
    
        this.gameLayer.setPosition(cc.p(-eyeX,0));
    }
    

    });

    1 回复  |  直到 11 年前
        1
  •  1
  •   Sebastián Vansteenkiste    11 年前

    好吧,这可能会或可能不会解决某些场景中的问题,但深入研究后,最大的疑点似乎是当帧速率下降时(当您调整屏幕大小或最小化/最大化屏幕时)花栗鼠的计算缺乏步骤。

    我找到的最接近修复的东西来自于 this post in the forums ,而我是这样改编的: this.space.step(dt); 在更新函数中,将其更改为:

    var timeWindow = 1/60; //replace by your configured FPS rate if it's not 60
    var steps = Math.ceil(dt / timeWindow);
    var i = 0;
    for (; i < steps; i++) {
      this.space.step(timeWindow);
    }
    

    这将确保即使应用程序降至60fps以下,物理模拟也将正确更新,并且该问题不会再发生。