Tengo este error cuando toco una pared para cambiar de escena:
No se pueden leer las propiedades de undefined (leyendo 'inicio')
Probé varias técnicas pero ninguna funcionó, pero no tengo otros errores y mi código es bastante simple y no entiendo por qué no funciona... Aquí está mi código:
class SceneMilieu extends Phaser.Scene { constructor() { super({key: 'sceneMilieu'}); } //Chargement des images preload() { // this.load.image("Backgrond", "javascript/assets/Background.png"); 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"); } create() { cursor = this.input.keyboard.createCursorKeys(); //touches des fleches var w = config.width; var h = config.height; //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 }) // L'apparition + le controle et les collisions ce fais ci dessous // var backgroundImage = this.add.sprite(0, 0, "Background"); // backgroundImage.setPosition(w/2, h/2); player = this.physics.add.sprite(100, 300, "player"); //joueur player.setScale(1); player.body.setSize(30, 35); player.setCollideWorldBounds(true); //collision avec la bordure doorLeft = this.physics.add.staticSprite(200, 400, "wall"); //Porte de tp var platforms = this.physics.add.staticGroup(); var wall = this.add.sprite(400, 500, "wall"); //mur this.physics.add.collider(platforms, player); //collision platforms.add(wall); function collision() { this.scene.start("sceneGauche"); } this.physics.add.collider(player, doorLeft, collision); } 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 SceneGauche extends Phaser.Scene { constructor() { super({key: "SceneGauche"}); scene: { preload: this.preload; create: this.create; update: this.update; } } preload() { 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"); } create() { cursor = this.input.keyboard.createCursorKeys(); var w = config.width; var h = config.height; 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(100, 300, "player"); player.setScale(1); player.body.setSize(30, 35); const border = player.setCollideWorldBounds(true); var platforms = this.physics.add.staticGroup(); var wall = this.add.sprite(400, 500, "wall"); platforms.add(wall); this.physics.add.collider(platforms, player); player.onCollide = new Phaser.signal(); border.onCollide.add(changeMapGauche, 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: "#EDEED0", physics: { default : "arcade", arcade : { debug : true, } }, scene: [SceneMilieu, SceneGauche] }; let game = new Phaser.Game(config); var cursor; var player; var doorLeft; <!-- begin snippet: js hide: false console: true babel: false --> <!DOCTYPE html> <html lang="fr-FR"> <head> <meta charset="utf-8" /> <meta name="description" content="Page web du projet de NSI. Ce site regrouppe quelque jeux en ligne programmer par nous même en javascript" /> <meta name="author" content="Thorvald Helbling, Alexis STOCK, Lionel FUCHS" /> <title>Thoralial</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="//cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script> </head> <header> <img id="LogoThoralial" src="info/image/LogoThoralial.png" alt="Logo du site" /> <div> <h1>Bienvenue !</h1> <p>C'est votre tableau de bord.</p> </div> </header> <body> <script id="js" type="text/javascript" src="javascript/main.js"></script> <script></script> </body> <footer> <div id="personne"> <p> Ce projet a étais réalisé par : <a href="***"> Thorvald HELBLING</a>, <a href="***"> Lionel FUCHS </a> et <a href="***"> Alexis STOCK </a> </p> </div> </footer> </html>Me gustaría entender de dónde viene mi error y común solucionarlo. Uso Phaser3. El error proviene de la consola del sitio. (Local)
El problema es esta línea:
this.physics.add.collider(player, doorLeft, collision); Solo necesita pasar la scene como contexto a la función del collider . Aquí hay un enlace a la documentación, especialmente para la función y los parámetros del collider . https://newdocs.phaser.io/docs/3.52.0/focus/Phaser.Physics.Arcade.Factory-collider
Solo hay que pasar el contexto de la scene (como parámetro 5) y una función should process (parámetro 4, en este caso undefined , ya que no hay función)
Simplemente reemplace la línea actual, con esta línea (o agregue los dos parámetros) , y debería funcionar
this.physics.add.collider(player, doorLeft, collision, undefined, this); O puede usar la función javascript bind :
this.physics.add.collider(player, doorLeft, collision.bind(this)); Puede que no sea tan obvio, pero es más corto y funciona bien ( Enlace para bind documentación ). Este sería mi método preferido, si no uso el parámetro 4, ya que el código es mucho más limpio y corto de esta manera.
Actualización: alternativamente, si desea usar Closures , puede cambiar solo la definición de la función, a una expresión de función de flecha , entonces no tendría que pasar ningún parámetro adicional, haga la función collider :
let collision = () => { this.scene.start("sceneGauche"); }Por lo general, no soy fanático de definir funciones dentro de función/métodos (especialmente con la palabra clave de
function), pero con la expresión de función de flecha , se ve aún un poco más limpio.