Main.js 定义与模块不一致

Question

我正在使用 Phaser 框架创建游戏。我有两个文件，一个 main.js 和一个 Player.js 用来存放播放器 class.

main.js:

import 'pixi'
import Phaser from 'phaser'

import Player from './controllers/Player.js'

var game = new Phaser.Game(1280, 703, Phaser.AUTO, '', {
    preload: preload, 
    create: create, 
    update: update
});

var player;

function preload() {
    this.stage.backgroundColor = '#eee',
    this.scale.pageAlignHorizontally = true,
    this.scale.pageAlignVertically = true,
    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL,

    game.load.spritesheet( 'idle', '../../assets/sheet_hero_idle.png', 64, 64 ),
    game.load.spritesheet( 'wall', '../../assets/roguelike-cave-pack/Spritesheet/roguelikeDungeon_transparent.png', 16, 16 )
}

function create() {
    //Player Controller
    //===========================
    //Enable Physics on the world
    game.physics.startSystem( Phaser.Physics.ARCADE );
    game.physics.arcade.setBoundsToWorld();

    //Enable input
    game.inputEnabled = true;

    //create player
    player = new Player( game, game.world.centerX, game.world.centerY, 'idle' );
    game.add.existing( player ); //Create on screen
    game.physics.arcade.enable( player ); //Create physics body on this object

    console.log("player is\t", player); //TEST
    console.log("player body is\t", player.body); //TEST
    console.log("player body is enabled\t", player.body.enable); //TEST

    player.playAnim( 'idle', 10, true );

    game.input.onDown.add( player.thisIsMyBody, this ); //When a click input occurs, call player.thisIsMyBody()

Player.js:

export default function Player( game, x, y, animKey ) {
    Phaser.Sprite.call( this, game, x, y, animKey),
    this.anchor.setTo( 0.5 ),
    this.inputEnabled = true,
    this.assets = {
        animations: {}
    },
    this.animations.add( 'idle' ),
    this.animations.play( 'idle', 10, true ), 
    this.alive = true
};

Player.prototype = Object.create( Phaser.Sprite.prototype );

Player.prototype.constructor = Player;

Player.prototype.thisIsMyBody = function(){ //TEST
    console.log( "I am ", this );
    console.log( "My body is ", this.body);
},

Player.prototype.playAnim = function( key, speed, isLoop ) {
    this.animations.play( key, speed, isLoop );
},

Player.prototype.move = function() {
    this.body.velocity.x = 30;
}

console.log("player is\t", player); returns 玩家 object

console.log("player body is\t", player.body); returns 玩家 body

console.log("player body is enabled\t", player.body.enable); returns true

但是，player.thisIsMyBody returns game Object 和 undefined

有什么我遗漏的或对 this 的误用吗？

Answer 1

你是对的，你在绑定到 input.onDown 时误用了 this。

还没有测试过，但尝试更改

game.input.onDown.add(player.thisIsMyBody, this);

至

game.input.onDown.add(this.thisIsMyBody, player);

或者可能只是

game.input.onDown.add(thisIsMyBody, player);

添加Phaser.Signal监听器时，第二个参数基本回答了"What should this mean when calling the callback?".

这个问题

Answer 2

经过一些修改，我发现以下方法有效：

this.player = new Player( game, game.world.centerX, game.world.centerY, 'idle' );
game.add.existing( this.player ); //<--WILL NOT WORK WITHOUT
game.physics.arcade.enable( this.player );

game.camera.follow( this.player );
game.input.onDown.add( this.player.thisIsMyBody, this.player );

Main.js 定义与模块不一致

Main.js Definitions Inconsistent from Module

javascript

phaser-framework

webpack