Main.js定义与模块不一致

Question

I am using the Phaser framework to create a game. I have two files, a main.js and a Player.js that is meant to hold the Player 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 Player object

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

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

However, player.thisIsMyBody returns the game Object and undefined

Is there anything I am missing or some misuse of this ?

Answer 1

You're correct, you're misusing the this when binding to input.onDown .

Haven't tested it, but try changing

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

to

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

or possibly just

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

When adding a Phaser.Signal listener, the second parameter basically answers the question "What should this mean when calling the callback?".

Answer 2

After some tinkering, I found the following to work:

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 );