javascript - 为什么 Phaser 游戏在移动设备上滞后

Question

我正在使用 Phaser 创建我的第一个游戏，它在桌面上运行良好。但在 Android 手机上却有些滞后。

谁能告诉我这可能是什么原因？

游戏很小小于 2mb。游戏中使用的图像也是非常小的 png。无论如何，有没有办法找出我的代码中的任何泄漏。

我的主要 js 文件。

var buttetSpwanSpeed;
var bulletSpeed;
var enemySpwanSpeed;
var enemySpeed;
var golis;
var enemies;
var enemyLoop;
var scoreText;
var powers;
var bulletSize;
setStart();
//game phaser
var game=new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS,"gamearea");
var BootState={
    //loding accets
    preload: function(){
        this.load.image('LodingScreen', 'assets/desimulga.png');
        this.load.image('background', 'assets/blue.png');
    },
    create: function(){
        game.state.start("LoadingState");
    },

};

var LoadingState={
    //loding acc
    preload: function(){
        bg=this.game.add.tileSprite(0,0,600,300,'background');
        bg.height = game.height;
        bg.width = game.width;
        LodingScreen=this.game.add.sprite(this.game.world.centerX,this.game.world.centerY,'LodingScreen');
        LodingScreen.anchor.setTo(0.5);
        LodingScreen.scale.setTo(0.5,0.5);
        this.load.image('spaceship', 'assets/player.png');
        this.load.image('goli', 'assets/bullet.png');
        //load ememies
        this.load.image('enemy1', 'assets/enemies/enemy1.png');
        this.load.image('enemy2', 'assets/enemies/enemy2.png');
        this.load.image('enemy3', 'assets/enemies/enemy3.png');
        this.load.image('enemy4', 'assets/enemies/enemy4.png');
        this.load.image('enemy5', 'assets/enemies/enemy5.png');
        this.load.spritesheet('power1', 'assets/power/bulletUp.png',34,33,4);

        this.load.image('restart', 'assets/restart.png');
        this.load.spritesheet('blast', 'assets/explosion.png',400,400,8);
        game.load.audio('fire', 'assets/music/bullet.mp3');
        game.load.audio('killed', 'assets/music/killed.mp3');
        //game.load.audio('bg_music', 'assets/music/background.mp3');
        game.load.audio('death_music', 'assets/music/death.mp3');
        game.load.audio('start_music', 'assets/music/start.mp3');
    },
    create: function(){
        game.time.events.add(Phaser.Timer.SECOND * 2, function(){
            bg.kill();
            LodingScreen.kill();
            game.state.start("PreGameState");
    },this);
    },

};

var PreGameState={
    //loding accets
    create: function(){
        game.scale.refresh();
        bg=this.game.add.tileSprite(0,0,600,300,'background');
        bg.height = game.height;
        bg.width = game.width;
        Startb=this.game.add.text(this.game.world.centerX,this.game.world.centerY, 'TAP TO START' , { fontSize: '32px', fill: 'yellow' });
        Startb.anchor.setTo(0.5);
        Startb.scale.setTo(0.5,0.5);
        ship=this.game.add.sprite(this.game.world.centerX,this.game.world.height*0.4,'spaceship');
        ship.scale.setTo(0.4);
        ship.anchor.setTo(0.5);
        game.physics.arcade.enable(ship);
        bg.inputEnabled=true;

        start_music = game.add.audio('start_music');
        start_music.allowMultiple = true;
        start_music.addMarker('start_music', 0, 30);


        bg.events.onInputDown.add(function(){
            bg.inputEnabled=false;
            Startb.kill();
            start_music.play("start_music");
            // game.physics.arcade.moveToXY(ship, this.game.world.centerX, this.game.world.height*0.8, 300, 3000);
            // game.add.tween(ship).to( { y: game.world.height*0.8 }, 3000, Phaser.Easing.Sinusoidal.InOut, true);
            var tween = game.add.tween(ship).to({
            x: [this.game.world.centerX, this.game.world.width*0, this.game.world.width, this.game.world.centerX],
            y: [this.game.world.height*0.4, this.game.world.height*0.5, this.game.world.height*0.6, this.game.world.height*0.8],
            }, 2000,Phaser.Easing.Quadratic.Out, true).interpolation(function(v, k){
                return Phaser.Math.bezierInterpolation(v, k);
            });

            game.time.events.add(Phaser.Timer.SECOND * 2, function() { 
                bg.kill();
                ship.kill();
                game.state.start("GameState");
            } ,this);

        }, this);
    },

};





var GameState={
    //loding accets
    preload: function(){


    },
    create: function(){
        //background
        this.background=this.game.add.tileSprite(0,0,600,300,'background');
        this.background.height = game.height;
        this.background.width = game.width;
        this.background.inputEnabled=true;
        this.background.input.enableDrag(true);
        this.background.input.startDrag = function(pointer) {
            pointer.shipStart = new Phaser.Point(GameState.ship.x, GameState.ship.y);
            Phaser.InputHandler.prototype.startDrag.call(this, pointer);
        };
        this.background.input.updateDrag = function(pointer) {
            GameState.ship.x = pointer.shipStart.x - pointer.positionDown.x + pointer.x;
            GameState.ship.y = pointer.shipStart.y - pointer.positionDown.y + pointer.y;
            GameState.background.x=0;
            GameState.background.y=0;
        };
        //ship
        this.ship=this.game.add.sprite(this.game.world.centerX,this.game.world.height*0.8,'spaceship');
        this.ship.scale.setTo(0.4);
        this.ship.anchor.setTo(0.5);
        game.physics.arcade.enable(this.ship);
        // this.ship.inputEnabled=true;
        // this.ship.input.enableDrag(true);
        //score
        this.scoreText = this.game.add.text(16, 16, 'Kills: 0', { fontSize: '32px', fill: '#fff' });
        //background Music
        // music = game.add.audio('bg_music');
        //music.play('', 0, 1, true);
        //bullet sound
        bullet_sound = game.add.audio('fire');
        bullet_sound.allowMultiple = true;
        bullet_sound.volume=0.5;
        bullet_sound.addMarker('fire', 0, 0.5);
        //Killed sound
        killed_sound = game.add.audio('killed');
        killed_sound.allowMultiple = true;
        killed_sound.addMarker('killed', 0, 0.5);
        //death music
        death_music = game.add.audio('death_music');
        death_music.allowMultiple = true;
        death_music.addMarker('death_music', 0, 10);
        //groups of bullets and enemies
        golis=game.add.group();
        enemies=game.add.group();
        powers=game.add.group();
        //fire bullet loop
        fireLoop=game.time.events.loop(Phaser.Timer.SECOND*1/buttetSpwanSpeed, fireBullet, this);
        //this.game.input.onTap.add(fireBullet, this);
        //create ememy loop
        enemyLoop=game.time.events.loop(Phaser.Timer.SECOND*1/enemySpwanSpeed, createEnemy, this);
        //change ememy speed and enemy spwan speed loop
        enemySpeedLoop=game.time.events.loop(Phaser.Timer.SECOND*1.5, changeEnemySpeed, this);
        //give powerup
        powerUp=game.time.events.loop(Phaser.Timer.SECOND*20, powerFun, this);      
    },
    update: function(){
        //scrolling background
        this.background.tilePosition.y+=2;

        //keybord control
        if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
        {
            this.ship.y-=2;
        }
        if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
        {
            this.ship.y+=2;
        }
        if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
        {
            this.ship.x+=2;
        }
        if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
        {
            this.ship.x-=2;
        }

        //dont go out
        if(this.ship.y<0+this.ship.height/2)
        {
            this.ship.y=0+this.ship.height/2;
        }
        if(this.ship.y>this.game.world.height-this.ship.height/2)
        {
            this.ship.y=this.game.world.height-this.ship.height/2;
        }

        if(this.ship.x<0+this.ship.width/2)
        {
            this.ship.x=0+this.ship.width/2;
        }
        if(this.ship.x>this.game.world.width-this.ship.width/2)
        {
            this.ship.x=this.game.world.width-this.ship.width/2;
        }
        //check for collisions 
        game.physics.arcade.overlap(golis,enemies,b_e_collide,null,this);
        game.physics.arcade.overlap(this.ship,enemies,s_e_collide,null,this);
        game.physics.arcade.overlap(this.ship,powers,s_power1_collide,null,this);




    },
};


//setting start game conditions
function setStart(){
    buttetSpwanSpeed=2;
    bulletSpeed=2000;
    enemySpwanSpeed=1;
    enemySpeed=300;
    score=0;
    bulletSize=1.2
}

//fire bullet function
function fireBullet(){
    goli=this.game.add.sprite(this.ship.x,this.ship.y-this.ship.height/2,'goli');
    goli.anchor.setTo(0.5);
    goli.scale.setTo(bulletSize,1);
    goli.checkWorldBounds = true;
    goli.outOfBoundsKill = true;
    //adding to group
    golis.add(goli);
    game.world.moveDown(goli);
    game.physics.arcade.enable(goli);
    goli.body.collisonWorldBounds=true;
    goli.body.velocity.y=-bulletSpeed;
    bullet_sound.play("fire");
}
//create enemy function
function createEnemy(){
    enemyNo=game.rnd.integerInRange(1, 5);
    x1=game.rnd.integerInRange(0,this.game.world.width);
    x2=game.rnd.integerInRange(0,this.game.world.width);
    enemy=this.game.add.sprite(x1,10,'enemy'+enemyNo);
    enemy.anchor.setTo(0.5);
    enemy.scale.setTo(0.4);
    enemy.checkWorldBounds = true;
    enemies.add(enemy);
    enemy.outOfBoundsKill = true;
    game.physics.arcade.enable(enemy);
    enemy.body.collisonWorldBounds=true;
    enemy.angle=90;
    enemy.no=enemyNo;

    //moving enemy
    angleRedian=game.physics.arcade.moveToXY(enemy, x2, this.game.world.height+enemy.height, enemySpeed,0);
    angleDegree=angleRedian*57.2958;
    enemy.angle=90+angleDegree;

}

//runs when bullet collide to enemy
function b_e_collide(goli,enemy){
    //blast
    blast=this.game.add.sprite(enemy.x,enemy.y,'blast');
    blast.anchor.setTo(0.5);
    blast.scale.setTo(0.5);
    var explosion=blast.animations.add('explosion');
    blast.animations.play('explosion',30,false,true);

    //killing
    goli.kill();
    enemy.kill();

    //update scores
    if(enemy.no<4)
    {
        score+=1;
        killed_sound.play('killed');
    }
    this.scoreText.text = 'Kills: ' + score;
}
//runs when ship collide to enemy
function s_e_collide(ship,enemy){

    blast=this.game.add.sprite(enemy.x,enemy.y,'blast');
    blast.anchor.setTo(0.5);
    blast.scale.setTo(0.5);
    var explosion=blast.animations.add('explosion');
    blast.animations.play('explosion',10,false,true);
    ship.kill();
    enemy.kill();
    //music.stop();
    this.scoreText.kill();
    death_music.play("death_music");
    game.time.events.remove(fireLoop);
    game.time.events.add(Phaser.Timer.SECOND * 2, function() {    
        fianlScore = this.game.add.text(this.game.world.centerX,this.game.world.centerY, 'KILL: '+score, { fontSize: '32px', fill: 'yellow' });
        fianlScore.anchor.setTo(0.5);
        gameOverText = this.game.add.text(this.game.world.centerX,this.game.world.centerY - fianlScore.height, 'GAME OVER', { fontSize: '32px', fill: 'red' });
        gameOverText.anchor.setTo(0.5);
        //restart button
        restart=this.game.add.sprite(this.game.world.centerX,this.game.world.centerY + fianlScore.height+10,'restart');
        restart.anchor.setTo(0.5);
        restart.scale.setTo(0.05,0.05);
        restart.inputEnabled = true;
        restart.events.onInputDown.add(restartGame, this);
        game.time.events.stop();
    }, this);

}
//runs when ship collide power1
function s_power1_collide(ship,power){
    power.kill();
    game.time.events.remove(fireLoop);
    fireLoop=game.time.events.loop(Phaser.Timer.SECOND*1/10, fireBullet, this);
    game.time.events.add(Phaser.Timer.SECOND * 10, function(){
        game.time.events.remove(fireLoop);
        fireLoop=game.time.events.loop(Phaser.Timer.SECOND*1/buttetSpwanSpeed, fireBullet, this);
    },this);



}


function changeEnemySpeed()
{   
    if(enemySpeed<=900)
    {
        enemySpeed+=5;
    }
    if(enemySpwanSpeed<=3)
    {
        enemySpwanSpeed+=0.025;
    }
    enemyLoop.delay=Phaser.Timer.SECOND*1/enemySpwanSpeed;
}

//send power up
function powerFun()
{
    x1=game.rnd.integerInRange(0,this.game.world.width);
    x2=game.rnd.integerInRange(0,this.game.world.width);
    power=this.game.add.sprite(x1,10,'power1');
    power.anchor.setTo(0.5);
    var shine=power.animations.add('shine');
    power.animations.play('shine',5,true,true);
    power.checkWorldBounds = true;
    power.outOfBoundsKill = true;
    powers.add(power);
    game.physics.arcade.enable(power);
    power.body.collisonWorldBounds=true;
    game.physics.arcade.moveToXY(power, x2, this.game.world.height+power.height, 400,0);
    powerDelay=game.rnd.integerInRange(20,35);
    powerUp.delay=Phaser.Timer.SECOND*powerDelay;
}



function restartGame(){
    setStart();
    game.time.events.start();
    game.state.start("PreGameState");   
}



game.state.add("GameState",GameState);
game.state.add("BootState",BootState);
game.state.add("LoadingState",LoadingState);
game.state.add("PreGameState",PreGameState);
game.state.start("BootState");

由于游戏体积很小，我认为它应该可以在移动设备上流畅运行。它在一些高端移动设备上运行良好，但随着时间的推移变得缓慢。这是我的第一款游戏，所以我不太擅长游戏设计概念。

Answer 1

您好，我目前已经为我的跨平台游戏解决了这个问题。

我所做的事情是

在我的主屏幕/或加载屏幕上加载所有 Sprite 如果您有可重用的 Sprite ，请使用命令 .kill() 而不是 .destory()，这将需要更多内存来重新加载 Sprite ，除非 Sprite 不会返回屏幕，然后就可以销毁。回收所有东西，假设你使用一颗子弹，当它击中墙壁时，它会爆炸并把它拿回来。

令人悲伤的是，在某些情况下，即使有时这样做，它仍然会滞后，并且到处都会出现一些小故障，你只需要看看发生了什么。使用断点来准确查看是什么 Sprite 导致了它，并考虑图像是否不具有透明度以使用 .jpeg

祝你好运，希望这有帮助