Cocos2d-js:在从一个应用程序移动到另一个应用程序时对浏览器上运行的cocos2d-js应用程序产生影响

时间:2014-09-03 06:16:34

标签: cocos2d-x collision-detection game-physics cocos2d-js

我正在浏览器上的cocos2d网站上运行跑酷游戏。一切都工作正常,但当我从我的浏览器移动到崇高的文本并返回到我的浏览器时,正在运行的播放器开始显示一些意外的行为,播放器从其位置消失,并在几秒后它落在地上然后开始再次运行。每当我从一个应用程序移动到另一个应用程序时,它就会发生。

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

这是动画层的代码: -

       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 个答案:

答案 0 :(得分:1)

好吧,这可能会或可能不会在某些情况下解决问题,但在深入研究之后,最大的嫌疑人似乎是在帧率降低时(当你调整大小时似乎发生在Chipmunk的计算中缺乏步骤)或最小化/最大化屏幕)。

我发现的最接近修复的内容来自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以下,物理模拟也会正确更新,这个问题不应再发生了。