调用stage.update时CreateJS FPS下降

时间:2015-03-02 16:57:09

标签: javascript html5 canvas createjs

我正在使用CreateJS制作游戏。在桌面上我的FPS很好但是当我尝试在移动设备上玩这个游戏时(例如:iPhone 4),FPS严重下降。

我试图找出原因,但

一些代码

我的画布

 <canvas id="gameCanvas"></canvas>

设置

 this.canvas = "gameCanvas";    
 this.stage = new createjs.Stage(this.canvas);
 var context = this.stage.canvas.getContext("2d");
 context.imageSmoothingEnabled = false;
 createjs.Ticker.setFPS(30);
 this.gameLoopBind = this.gameLoop.bind(this);
 createjs.Ticker.addEventListener('tick', this.gameLoopBind); 

GameLoop

// some extra code 
this.stage.update();

当我评论代码'this.stage.update()'时我在手机/平板电脑上的FPS很好......

我不知道我做错了什么......

EXTRA CODE 在这里玩游戏=&gt; f.cowb.eu/mora/chick-ins

Gameloop功能

 Game.prototype.gameLoop = function (e) {


    if (this.running) {
        this.timer++;
        this.timer2++;

        if (this.timer2 > 30) {
            if (this.lastSnack + this.timeBewteen < this.stopwatch.seconds) {

                var height = (this.topSnack) ? 150 : 300;
                this.lastSnack = this.stopwatch.seconds;
                new Snack(this, this.timer, height);
                this.topSnack = this.topSnack ? false : true;
            }

            if (this.timer > (this.lastPostive + 300)) {
                this.lastPostive = this.timer;
                publisher.publish('showMessage',
                    this.positiveImages[Math.floor(Math.random() * this.positiveImages.length)],
                    common.lang,
                    'right');
            }
            this.timer2 = 0;
        }
    }

    this.stage.update();
};

新的小吃  你可以在这里找到创建新零食的代码=&gt; http://jsfiddle.net/9ofpqq3z/

在这里,我们制作一个新的零食并为其制作动画。

1 个答案:

答案 0 :(得分:0)

从观看游戏的架构,我建议你在单独的画布上绘制游戏元素,而不是现在的方式,一切都在一块画布上。

将经常(或根本没有)重绘的电视部分放在一个画布上,然后将移动的元素放在另一个画布上。

这应该有助于提高帧速率。

此外,您还可以查看以下一组幻灯片,了解如何在使用画布时提高移动设备的性能: http://www.slideshare.net/DavidGoemans/html5-performance-optimization