我对Phaser 3非常陌生,我一直在try 创建一个实例,其中玩家精灵与将玩家带到另一个 map 的游戏对象发生碰撞.现在我正试图让玩家将场景从1号房子切换到2号房子,但当我将玩家的精灵移动到游戏对象上时,没有任何react .不会出现错误,告诉我有些东西没有定义或任何东西.这就像改变场景的触发器从来不存在一样.

以下是player.js文件

export default class Player {
  constructor(scene, x, y) {
    this.scene = scene;

    const anims = scene.anims;
        anims.create({
            key: 'turn1',
            frames: [ { key: 'dude', frame: 32 } ],
            frameRate: 20
        });
        anims.create({
            key: 'rdown',
            frames: anims.generateFrameNumbers('dude', { start: 0, end: 7 }),
            frameRate: 16,
            repeat: -1
        });
        anims.create({
            key: 'rright',
            frames: anims.generateFrameNumbers('dude', { frames: [ 8, 9, 10, 11, 12, 13, 14, 15 ] }),
            frameRate: 16,
            repeat: -1
        });
        anims.create({
            key: 'rup',
            frames: anims.generateFrameNumbers('dude', { frames: [ 16, 17, 18, 19, 20, 21, 21, 23 ] }),
            frameRate: 16,
            repeat: -1
        });
        anims.create({
            key: 'rleft',
            frames: anims.generateFrameNumbers('dude', { frames: [ 24, 25, 26, 27, 28, 29, 30, 31 ] }),
            frameRate: 16,
            repeat: -1
        });

    this.sprite = scene.physics.add.sprite(x, y, "dude", 0).setSize(16, 16).setOffset(0, 8);

    this.sprite.anims.play("rdown");

    this.gamepad = scene.input.gamepad.once('down', function (pad, button, index) {
        this.gamepad = pad;
    }, this);
  }

  update() {
    const gamepad = this.gamepad;
    const sprite = this.sprite;
    const speed = 90;
    const prevVelocity = sprite.body.velocity.clone();
    sprite.body.setVelocity(0);
    if (gamepad.right && gamepad.up) {
      sprite.body.setVelocityX(speed);
      sprite.body.setVelocityY(-speed);
    } else if (gamepad.right && gamepad.down) {
      sprite.body.setVelocityX(speed);
      sprite.body.setVelocityY(speed);
    } else if (gamepad.left && gamepad.up) {
      sprite.body.setVelocityX(-speed);
      sprite.body.setVelocityY(-speed);
    } else if (gamepad.left && gamepad.down) {
      sprite.body.setVelocityX(-speed);
      sprite.body.setVelocityY(speed);
    } else if (gamepad.left) {
      sprite.body.setVelocityX(-speed);
    } else if (gamepad.right) {
      sprite.body.setVelocityX(speed);
    } else if (gamepad.up) {
      sprite.body.setVelocityY(-speed);
    } else if (gamepad.down) {
      sprite.body.setVelocityY(speed);
    }
    sprite.body.velocity.normalize().scale(speed);
    if (gamepad.left) {
      sprite.anims.play("rleft", true);
    } else if (gamepad.left && gamepad.down) {
      sprite.anims.play("rleft", true);
    } else if (gamepad.left && gamepad.up) {
      sprite.anims.play("rleft", true);
    } else if (gamepad.right && gamepad.down) {
      sprite.anims.play("rright", true);
    } else if (gamepad.right && gamepad.up) {
      sprite.anims.play("rright", true);
    } else if (gamepad.up) {
      sprite.anims.play("rup", true);
    } else if (gamepad.right) {
      sprite.anims.play("rright", true);
    } else if (gamepad.down) {
      sprite.anims.play("rdown", true);
    } else {
      sprite.stopOnFrame(sprite.anims.currentAnim.getFrameAt(0))
    }
  }
}

以下是TestLevel.js文件

import Player from "./Player.js";
import TestRoom2 from "./TestRoom2.js";

export default class TestRoom extends Phaser.Scene {
  map;
  player;
    constructor() {
        super()
    }
    
    text;
    
    preload() {
        this.load.image('tiles', 'assets/tilemaps/tiles/house1.png');
        this.load.spritesheet('dude', 'assets/images/link.png', { frameWidth: 16, frameHeight: 24 });
        this.load.tilemapTiledJSON('map', 'assets/tilemaps/maps/TestRoom.json');
        this.load.image('exit', 'assets/tilemaps/tiles/exit.png');
    }
create()
{
    this.map = this.make.tilemap({ key: 'map' });
    this.map.landscape = this.map.addTilesetImage('house', 'tiles');
    this.map.createLayer("ground", [this.map.landscape], 0, 0);
    this.player = new Player(this, 128, 112);
    this.map.createLayer("above", [this.map.landscape], 0, 0);
    this.cameras.main.setSize(256,224);
    this.cameras.main.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels);
    this.cameras.main.startFollow(this.player.sprite);
    this.cameras.main.setDeadzone(4,4);
    this.exited = this.physics.add.sprite(112, 220, 'exit').setOrigin(0,0);
    this.exitBox= this.physics.add.group({
            key: 'exit'});
    this.physics.add.collider(this.player, this.exitBox, function(player, exitBox) { this.scene.start('TestRoom2')});
  }
update() {
this.player.update();
    this.physics.collide(this.player, this.exitBox, function(player, exitBox) { this.scene.start('TestRoom2')});
    
  }
}

另一个映射是相同的,但TestRoom替换了TestRoom2.

以下是具有游戏配置的主要场景

import TestRoom from "./TestRoom.js";
import TestRoom2 from "./TestRoom2.js";

var config = {
    type: Phaser.AUTO,
    width: 256,
    height: 224,
    backgroundColor: '#000000',
    pixelArt: true,
    input: {
      gamepad: true
    },
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            debug: true
        }
    },
    scene: TestRoom, TestRoom2
};
var game = new Phaser.Game(config);

一切都很正常.唯一不起作用的是启动场景切换.

我能做些什么来解决这个问题?

推荐答案

首先,config不是config%正确的,所有场景都必须在一个数组中(或者稍后手动添加).这里缺少方括号[]

var config = {
    type: Phaser.AUTO,
    width: 256,
    height: 224,
    ...
    scene: [TestRoom, TestRoom2] // <-- missing brackets
};

接下来,您可以从update函数中go 掉103,create函数中的collider就足够了:

// remove this line from "update" function
this.physics.collide(this.player, this.exitBox, function(player, exitBox) { this.scene.start('TestRoom2')});

create函数中,更改以下行以传递回调函数(Link to documentation)的上下文:

// added to parameters ( for details check documnetation )
this.physics.add.collider(this.player, this.exitBox, function(player, exitBox) { this.scene.start('TestRoom2')}, null, this);

或使用arrow function (100):

// altered with to an arrow function
this.physics.add.collider(this.player, this.exitBox, (player, exitBox) => { this.scene.start('TestRoom2')});

我认为,通过阅读代码,这应该涵盖了我能找到的所有错误.

btw.:判断浏览器控制台是否有错误,这有助于发现和解决问题.

Update:

我认为create函数中的线应该是exited而不是exitBox,因为empty组永远不会与玩家发生冲突:

this.physics.add.collider(this.player, this.exited, (player, exited) => { this.scene.start('TestRoom2')});

You could checkout the example of 100 to see a short working example of player/scene switching.

Javascript相关问答推荐

布局样式在刷新时不持续

成帧器运动中的运动组件为何以收件箱开始?

从实时数据库(Firebase)上的子类别读取数据

使用axios.获取实时服务器时的404响应

使用续集和下拉栏显示模型属性

django无法解析余数:[0] from carray[0]'

如何在Connect 4游戏中 for each 玩家使用位板寻找7形状?

判断表格单元格中是否存在文本框

将字符串UTC Date转换为ngx—counting leftTime配置值的数字

在带有背景图像和圆形的div中添加长方体阴影时的重影线

获取Uint8ClampedArray中像素数组的宽度/高度

JSDoc创建并从另一个文件导入类型

如何在Vue 3中创建自定义 Select 组件,并将选项作为HTML而不是props 传递?

S文本内容和值不必要的不同

在HTML语言中调用外部JavaScript文件中的函数

使用js构造一个html<;ath&>元素并不能使其正确呈现

未加载css colored颜色 ,无法将div设置为可见和不可见

如何在一个对象Java脚本中获取不同键的重复值?

如何使用画布在另一个内部绘制一个较小但相同的形状,同时保持恒定的边界厚度?

正在发出错误的URL请求