当我将 sockets 实现到我的 Phaser3 代码中时，为什么我的平铺地图返回“不是函数”错误？

Question

我正在为我的游戏创建一个节点服务器，这样我就可以使用 sockets 实现在线多人游戏模式，为了测试它，我一直在尝试让我的单人游戏模式在服务器上运行。 我已经设法让我的主菜单场景加载并通过一个按钮转移到我的单人游戏场景。 但我现在没有像以前那样在添加 sockets 之前加载磁贴 map，而是收到控制台错误消息“this.skymap.createLayer 不是函数”

这是 server.js 代码

 var express = require('express'); var app = express(); var server = require('http').Server(app); var io = require('socket.io')(server); app.use(express.static(__dirname + '/public')); app.get('/', function (req, res) { res.sendFile(__dirname + '/public/index.html'); }); io.on('connection', function (socket) { console.log('a user connected'); socket.on('disconnect', function () { console.log('user disconnected'); }); }); server.listen(8081, function () { console.log(`Listening on ${server.address().port}`); });

下面是主菜单的代码。

 class mainMenu extends Phaser.Scene{ constructor(){ super('menu') } preload(){ this.load.image('mainMenu','assets/mainMenu.png') this.load.image('timeTrialButton','assets/timeTrialButton.png') this.load.image('multiPlayerButton','assets/multiPlayerButton.png') } create(){ this.socket = io.connect(); this.registry.set("socket",this.socket) this.add.image(640,480,'mainMenu') const timeTrialButton = this.add.image(100,800,'timeTrialButton').setInteractive() const multiPlayerButton = this.add.image(1180,800,'multiPlayerButton').setInteractive() timeTrialButton.on('pointerdown', () => { this.scene.launch('gamescene').stop() }); // multiPlayerButton.on('pointerdown', () => { // game.scene.add('gameScene', gameScene, true, { x: 1280, y: 960 }); // game.scene.remove('timeTrialEnd'); // console.log('loaded') //}); } }

下面是游戏单人场景的代码

 class gameScene extends Phaser.Scene { constructor(){ super('gamescene') } preload(){ this.k=0 this.velocity = 0 this.endReached = false this.facingLeft=false this.facingRight=false //load stage and tileset this.load.image('tiles', 'assets/skyTileset.png'); this.load.image('goalFlag','assets/goalFlag.png') this.load.tilemapTiledJSON('sky', 'assets/bouncy_shrooms.json'); //loading assets into game this.load.spritesheet('player', 'assets/player.png', { frameWidth: 16, frameHeight: 16 } ); }; create(){ this.socket = this.registry.get("socket",this.socket)// connecting every scene to the socket connection console.log('game scene loaded') // timer function (with help from @winner_joiner on stack overflow) this.seconds = 0; this.interval = setInterval( () => { this.seconds = this.seconds + 1 this.timerText.setText(this.seconds) },1000); //create assets within the game this.skyMap = this.make.tilemap({key: 'sky'}); this.tileset = this.skyMap.addTilesetImage('skyShrooms','tiles'); this.background = this.skyMap.createLayer('sky', this.tileset,); this.platforms = this.skyMap.createLayer('platforms', this.tileset,); this.stems = this.skyMap.createLayer('stems', this.tileset,); this.platforms.setCollisionByExclusion([-1]); this.goal = this.physics.add.sprite(1200, 87, 'goalFlag') this.goal.setScale(0.1) this.goal.body.setAllowGravity(false); this.goal.setImmovable(true) this.physics.world.setBounds(0,0,1280,960) //loading the player sprite as a physics based sprite. this.player = this.physics.add.sprite(50,850,"player"); //this.player = this.physics.add.sprite(1000,50,"player"); this.player.setScale(1.75) this.player.setCollideWorldBounds(true) this.physics.add.collider(this.player, this.platforms); this.timerText = this.add.text(this.player.x+50, this.player.y-50, { fontSize: '16px', fill: '#fff' }); this.timerText.setText(0); //player animations this.anims.create({ key: "left-idle", frames: this.anims.generateFrameNumbers('player', { start: 1, end: 1 }), frameRate: 0, repeat: -1 }) this.anims.create({ key: "right-idle", frames: this.anims.generateFrameNumbers('player', {start: 0, end: 0}), frameRate: 0, repeat: -1 }) this.anims.create({ key:"left-walk", frames: this.anims.generateFrameNumbers('player', {start: 6, end: 9}), frameRate: 8, repeat: -1 }) this.anims.create({ key:"right-walk", frames: this.anims.generateFrameNumbers('player', {start: 2, end: 5}), frameRate: 8, repeat: -1 }) this.anims.create({ key:"right-jump", frames: this.anims.generateFrameNumbers('player', {start: 10, end: 10}), frameRate: 0, repeat: -1 }) this.anims.create({ key:"right-fall", frames: this.anims.generateFrameNumbers('player', {start: 11, end: 11}), frameRate: 0, repeat: -1 }) this.anims.create({ key:"left-jump", frames: this.anims.generateFrameNumbers('player', {start: 12, end: 12}), frameRate: 0, repeat: -1 }) this.anims.create({ key:"left-fall", frames: this.anims.generateFrameNumbers('player', {start: 13, end: 13}), frameRate: 0, repeat: -1 }) //camera this.cameras.main.startFollow(this.player); this.cameras.main.setBounds(0,0,1280,960); };

如果您需要更多信息，请告诉我。 任何和所有帮助将不胜感激:)

编辑 1：有人要求提供完整的错误消息，所以在这里

编辑 2：我将 createLayer 更改为 createDynamicLayer 并且现在加载了舞台 :) 但是现在我收到错误消息，将我的标志设置为不受重力影响 through.setAllowGravity(false) 有什么想法吗？ 下面的错误信息

Answer 1

如果没有其他错误消息，问题可能是您使用的是旧版本的移相器：

在 v3.50.0 之前，此方法称为createDynamicLayer 。 （ 在官方文档中提到）

解决方案：只需更新phaser.js版本即可。