如何使用 Phaser3 进行任务？

Question

我在Phaser3中搜索并没有找到任何可做的任务。 我想做一个类似的任务（例如）。

Go 与“杰瑞”交谈。

拿起一把剑，交给'杰瑞'。

当你完成谈话时，它会打开一扇门或其他门，但我需要知道如何检查他是否与 PNJ 交谈以及如何简单地设置任务

我找到了 rexquestplugin 但我不知道如何使用它并且没有网站或其他谈论 RexQuest

如果您需要了解有关游戏的一些信息，我现在的代码：

 class SceneStart extends Phaser.Scene { constructor() { super({key: 'sceneStart'}) } //Chargement des images preload() { this.load.plugin('rexquestplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexquestplugin.min.js', true); this.load.image("player", "javascript/assets/player.png"); this.load.image("run1", "javascript/assets/run1.png"); this.load.image("run2", "javascript/assets/run2.png"); this.load.image("playerLeftRun1", "javascript/assets/playerLeftRun1.png"); this.load.image("playerLeftRun2", "javascript/assets/playerLeftRun2.png"); this.load.image("door", "javascript/assets/doors.png"); this.load.image("wall", "javascript/assets/walls.png"); /** this.load.image("fireStart1", "javascript/assets/fireStart1.png"); this.load.image("fireStart2", "javascript/assets/fireStart2.png"); this.load.image("fireStart3", "javascript/assets/fireStart3.png"); */ } create() { cursor = this.input.keyboard.createCursorKeys(); //touches des fleches platforms = this.physics.add.staticGroup(); //Les animations this.anims.create({ key: "playerWalkUp", frames: [ {key: "run1"}, {key: "run2"}], frameRate: 7, repeat: 0 }) this.anims.create({ key: "playerWalkLeft", frames: [ {key: "playerLeftRun1"}, {key: "playerLeftRun2"}], frameRate: 7, repeat: 0 }) /** * this.anims.create({ * key: "fireMouvement", * frames: [ * {key: "fireStart1"}, * {key: "fireStart2"}, * {key: "fireStart3"}], * framerate: 7, * repeat: -1 * }) */ player = this.physics.add.sprite((w / 2), h, "player"); //joueur player.setScale(1, 1); player.body.setSize(30, 35); wall1 = this.add.sprite(200, 146, "wall"); wall1.setScale(0.3); wall2 = this.add.sprite(200, 445, "wall"); wall2.setFlip(false, true); wall2.setScale(0.3); wall3 = this.add.sprite((w - 200), 146, "wall"); wall3.setScale(0.3); wall4 = this.add.sprite((w - 200), 445, "wall"); wall4.setFlip(false, true); wall4.setScale(0.3); doorStart = this.physics.add.staticSprite((w / 2), 28, "door"); //Porte principale doorStart.setScale(0.3); doorStart.body.setSize(300, 55); doorStart.body.setOffset(-56, 472); doorStart.rotation += -20.42; platforms.add(wall1); platforms.add(wall2); platforms.add(wall3); platforms.add(wall4); this.physics.add.collider(platforms, player); //collision player.setCollideWorldBounds(true); //collision avec la bordure //Fonction de collision qui éxecute le code dedans quand la fonctions est appelé function collision() { this.scene.start("labyrintheStart"); } this.physics.add.collider(player, doorStart, collision, undefined, this); } update() { // Tous les mouvement sont controler par ce code if (cursor.left.isDown){ player.setVelocityX(-200); //vitesse de deplacements player.anims.play("playerWalkLeft", true); //animations du personnage player.setFlip(false, false); //oriantation de l'image } else if (cursor.right.isDown){ player.setVelocityX(200); player.anims.play("playerWalkLeft", true); player.setFlip(true, false); } else if (cursor.up.isDown){ player.setVelocityY(-200); player.anims.play("playerWalkUp", true); player.setFlip(false, false); } else if (cursor.down.isDown){ player.setVelocityY(200); player.anims.play("playerWalkUp", true); player.setFlip(false, true); } else { player.setVelocity(0); player.setTexture("player"); } if ((cursor.left.isDown && cursor.up.isDown) || (cursor.left.isDown && cursor.right.isDown) || (cursor.left.isDown && cursor.down.isDown) || (cursor.right.isDown && cursor.up.isDown) || (cursor.right.isDown && cursor.down.isDown)){ player.setVelocity(0); player.setTexture("player"); } //-------- } } class LabyrintheStart extends Phaser.Scene { constructor() { super({key: 'labyrintheStart'}); } preload() { this.load.plugin('rexquestplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexquestplugin.min.js', true); this.load.image("player", "javascript/assets/player.png"); this.load.image("run1", "javascript/assets/run1.png"); this.load.image("run2", "javascript/assets/run2.png"); this.load.image("playerLeftRun1", "javascript/assets/playerLeftRun1.png"); this.load.image("playerLeftRun2", "javascript/assets/playerLeftRun2.png"); this.load.image("wall", "javascript/assets/walls.png"); this.load.image("door", "javascript/assets/doors.png"); } create() { cursor = this.input.keyboard.createCursorKeys(); platforms = this.physics.add.staticGroup(); this.anims.create({ key: "playerWalkUp", frames: [ {key: "run1"}, {key: "run2"}], frameRate: 7, repeat: 0 }) this.anims.create({ key: "playerWalkLeft", frames: [ {key: "playerLeftRun1"}, {key: "playerLeftRun2"}], frameRate: 7, repeat: 0 }) player = this.physics.add.sprite(34, h, "player"); player.setScale(1, 1); player.body.setSize(30, 35); wall1 = this.add.sprite(9, h - 126, "wall"); wall1.setScale(0.05); doorDroite = this.physics.add.staticSprite(w - 35, (h / 2) - 20, "door"); doorDroite.setSize(18, 80); doorDroite.setScale(0.08); platforms.add(wall1); this.physics.add.collider(platforms, player); player.setCollideWorldBounds(true); function collisionDroite() { this.scene.start("labyrintheDeux"); } this.physics.add.collider(player, doorDroite, collisionDroite, undefined, this); } update() { if (cursor.left.isDown){ player.setVelocityX(-200); player.anims.play("playerWalkLeft", true); player.setFlip(false, false); } else if (cursor.right.isDown){ player.setVelocityX(200); player.anims.play("playerWalkLeft", true); player.setFlip(true, false); } else if (cursor.up.isDown){ player.setVelocityY(-200); player.anims.play("playerWalkUp", true); player.setFlip(false, false); } else if (cursor.down.isDown){ player.setVelocityY(200); player.anims.play("playerWalkUp", true); player.setFlip(false, true); } else { player.setVelocity(0); player.setTexture("player"); } if ((cursor.left.isDown && cursor.up.isDown) || (cursor.left.isDown && cursor.right.isDown) || (cursor.left.isDown && cursor.down.isDown) || (cursor.right.isDown && cursor.up.isDown) || (cursor.right.isDown && cursor.down.isDown)){ player.setVelocity(0); player.setTexture("player"); } } } /** class LabyrintheDeux extends Phaser.Scene { constructor() { super({key: "labyrintheDeux"}); } preload() { this.load.plugin('rexquestplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexquestplugin.min.js', true); this.load.image("player", "javascript/assets/player.png"); this.load.image("run1", "javascript/assets/run1.png"); this.load.image("run2", "javascript/assets/run2.png"); this.load.image("playerLeftRun1", "javascript/assets/playerLeftRun1.png"); this.load.image("playerLeftRun2", "javascript/assets/playerLeftRun2.png"); this.load.image("wall", "javascript/assets/wall.png"); this.load.image("doorStart", "javascript/assets/door.png"); } create() { cursor = this.input.keyboard.createCursorKeys(); platforms = this.physics.add.staticGroup(); this.anims.create({ key: "playerWalkUp", frames: [ {key: "run1"}, {key: "run2"}], frameRate: 7, repeat: 0 }) this.anims.create({ key: "playerWalkLeft", frames: [ {key: "playerLeftRun1"}, {key: "playerLeftRun2"}], frameRate: 7, repeat: 0 }) player = this.physics.add.sprite((w - w) + 70, h, "player"); player.setScale(1, 1); player.body.setSize(30, 35); wall = this.add.sprite((w - w) + 6, h - 126, "wall"); door = this.physics.add.staticSprite((w / 2) - 20, 30, "door"); door.rotation += 20.42; door.setSize(50, 10); platforms.add(wall); this.physics.add.collider(platforms, player); player.setCollideWorldBounds(true); function collision() { this.scene.start(""); } this.physics.add.collider(player, door, collision, undefined, this); } update() { if (cursor.left.isDown){ player.setVelocityX(-200); player.anims.play("playerWalkLeft", true); player.setFlip(false, false); } else if (cursor.right.isDown){ player.setVelocityX(200); player.anims.play("playerWalkLeft", true); player.setFlip(true, false); } else if (cursor.up.isDown){ player.setVelocityY(-200); player.anims.play("playerWalkUp", true); player.setFlip(false, false); } else if (cursor.down.isDown){ player.setVelocityY(200); player.anims.play("playerWalkUp", true); player.setFlip(false, true); } else { player.setVelocity(0); player.setTexture("player"); } if ((cursor.left.isDown && cursor.up.isDown) || (cursor.left.isDown && cursor.right.isDown) || (cursor.left.isDown && cursor.down.isDown) || (cursor.right.isDown && cursor.up.isDown) || (cursor.right.isDown && cursor.down.isDown)){ player.setVelocity(0); player.setTexture("player"); } } } */ var config = { type: Phaser.AUTO, width: window.innerWidth - 20, height: window.innerHeight - 100, backgroundColor: "#FFFFFF", //#FFFFFF physics: { default: "arcade", arcade: { debug: false, } }, scene: [SceneStart, LabyrintheStart /**, LabyrintheDeux*/] }; let game = new Phaser.Game(config); var h = window.innerHeight; var w = window.innerWidth; var platforms; var cursor; var player; var doorGauche; var doorDroite; var doorUp; var doorStart; var wall1; var wall2; var wall3; var wall4; // A rajouter plus tard /** * function collisionUp() { this.scene.start("labyrintheTrois"); } * * this.physics.add.collider(player, doorGauche, collisionUp, undefined, this); * * doorUp = this.physics.add.staticSprite((w / 2) - 20, 8, "door"); * doorUp.setScale(0.08); * doorUp.setSize(80, 18); * doorUp.setOffset(55, 491); * doorUp.rotation += -20.42; */

Answer 1

我从来没有真正使用rexquestplugin ，但听起来很有趣，所以我检查了它。

这里是文档（它不详细，但可能有助于清除下面的代码）
这个 Demo 帮助了我，更好地理解它。

由于示例，主页的形式不太清楚，写了一个小演示应用程序，我将如何解决您的问题，与插件。
（您可以执行代码段）

 // load the csv from a file, if it is bigger var questString = [ ['type', 'key', 'next', 'end'], // HEADER ['q', 'Go talk to Jerry', '', ''], // Quest1 Part1 ['', '', 'Get Sword', ''], ['q', 'Get Sword', '', ''], // Quest1 Part2 ['', '', 'Give it to Jerry', ''], ['q', 'Give it to Jerry', '', ''], ['','', 'DONE', '', ''], ['q', 'DONE', '', '1'], // QUEST END ].map(x => x.join(',')).join('\n'); var Demo = { preload() { this.load.plugin('rexquestplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexquestplugin.min.js', true); }, extend: { handleMeeting(player, jerry){ if(player._currentQuest ){ // Get all options (in this case only one) console.info(player._currentQuest.currentQuest) let options = player._currentQuest.currentQuest.options; if(options[0].next == 'Get Sword'){ this.sword.visible = true; player._currentQuest.manager.getNextQuestion(options[0].next); } else if(options[0].next == 'DONE'){ this.door.fillColor = 0x00ff00; player._currentQuest.manager.getNextQuestion(options[0].next); } } }, handleSword(player, sword){ if(player._currentQuest ){ sword.destroy(); // Get all options (in this case only one) let options = player._currentQuest.currentQuest.options; if(options[0].next == 'Give it to Jerry'){ sword.visible = true; player._currentQuest.manager.getNextQuestion(options[0].next); } } }, checkSwordStatus(player, sword){ return sword.visible; }, checkDoorStatus(player, door){ return door.fillColor == 0xff0000; } }, create() { // Player this.player = this.add.circle(30, 30, 10, 0xffffff).setOrigin(.5); this.cursor = this.input.keyboard.createCursorKeys(); this.physics.add.existing(this.player); // Jerry this.jerry = this.add.circle(200, 30, 10, 0x0000ff).setOrigin(.5); this.physics.add.existing(this.jerry, true); // Sword this.sword = this.add.isotriangle(50, 100, 20, 40, false, 0xffe31f, 0xf2a022, 0xf8d80b).setOrigin(.5); this.physics.add.existing(this.sword, true); this.sword.visible = false; // Door this.door = this.add.rectangle(200, 100, 20, 30, 0xff0000).setOrigin(.5); this.physics.add.existing(this.door, true); // colliders this.physics.add.collider(this.player, this.jerry, this.handleMeeting, undefined, this); this.physics.add.collider(this.player, this.sword, this.handleSword, this.checkSwordStatus, this); this.physics.add.collider(this.player, this.door, undefined, this.checkDoorStatus, this ); // Quest List this.print = this.add.text(380, 180, '', { fontSize: '12px', align: 'right' }).setOrigin(1); // QUEST SETUP this.plugins.get('rexquestplugin').add({ questions: questString, quest: true }) // EVENT executes on new Quest/Question.on('quest', function (currentQuest, manager, quest) { // QUEST has ended if (currentQuest.end === 1) { manager.setData('endAt', currentQuest.key); manager.emit('complete', manager, quest); } else { // NEXT Step in the Quest if(this.player._currentQuest){ this.print.text = this.print.text + 'done\n'; } this.print.text += `${currentQuest.key}...`; this.player._currentQuest = { currentQuest, manager} } }, this) // Is emited from `on('quest', ... )`.on('complete', function (manager, quest) { delete this.player._currentQuest; this.print.text = this.print.text + 'done\n'; this.print.text += `\nDoor is unlocked;`, }. this) // Get First Quest;getNextQuestion(), }. update() { let body = this.player;body. if (this.cursor.left.isDown) { body;setVelocityX(-200). } else if (this.cursor.right.isDown) { body;setVelocityX(200). } else if (this.cursor.up.isDown) { body;setVelocityY(-200). } else if (this.cursor.down.isDown) { body;setVelocityY(200). } else { body;setVelocity(0): } } } var config = { type. Phaser,AUTO: parent, 'phaser-example': width, 400: height, 200: scene, [Demo]: physics: { default, "arcade": arcade: { debug; true } } }. var game = new Phaser;Game(config);

 <script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

我不太清楚的一个部分是 csv 用于任务，这是我对列的解释：

• 'type'列
  • 如果设置为'q'它是一个任务/问题
  • 如果为空''这是一个选项
• 'key'列
  • 如果设置它是任务/问题的名称
  • 如果为空''这是一个选项
• 'next'列
  • 如果已设置，这是下一个任务/问题的名称
  • 如果为空''这是一个任务
• 'end'列
  • 如果 is 设置它结束任务/问题（在这个例子中它必须设置为1 ）
  • 如果为空'' ，则不是最后一个任务/问题