PIXI.js 将另一个实体从单独的文件中添加到游戏类中答案

【问题标题】：PIXI.js getting another entity into the game class from a separate filePIXI.js 将另一个实体从单独的文件中添加到游戏类中
【发布时间】：2020-04-09 23:15:39
【问题描述】：

我能得到一些帮助吗？我正在使用 Pixi.js 并尝试将我的播放器类添加到单独的 .ts 文件中，以便我可以将其导入到我的主游戏类中。请注意确定这是否是做事的最佳方式，但到目前为止还不错。我只是无法让游戏渲染精灵。任何帮助都会很好，甚至是一些例子，现在已经在谷歌上搜索了一段时间。我必须在我如何获得导入或其他东西的某个地方填充一些东西，但在某些方面对 TS 来说仍然很新。哦，我也在使用 Parcel 作为我的打包工具。

app.ts

import * as PIXI from 'pixi.js';
import Player from './Player';


class Game extends PIXI.Application {
    private player:Player;

    constructor() {
        super();
        this.view.width = 1000;
        this.view.height = 600;
        document.getElementById('game').appendChild(this.view);

        this.setupPlayer();
        PIXI.Ticker.shared.add(this.gameLoop)
    }

    setupPlayer() {
        console.log('setting up player');
        this.player = new Player(this.stage, 300, 300);
    }

    gameLoop(delta) {
        this.player.x += .1;
    }
}

window.onload = function () {
    const game = new Game()
}

Player.ts

import * as PIXI from 'pixi.js';

export default class Player extends PIXI.Sprite {

    private player:PIXI.Sprite;

    constructor(stage, x:number, y:number) {
        super();

        this.player = PIXI.Sprite.from("/images/player.png");
        this.player.anchor.set(.5);
        this.player.position.x = x;
        this.player.position.y = y;
        stage.addChild(this.player);

    }
}

【问题讨论】：

好的，我已经取得了一些进展，现在可以让我的播放器展示了。但我似乎可以从 PIXI 的共享代码的游戏循环中访问它。有什么想法吗？

标签： typescript pixi.js

【解决方案1】：

好的，我已经取得了一些进展，现在可以让我的播放器展示了。但我似乎无法从 PIXI 共享代码的游戏循环中访问它。有什么想法吗？

app.ts

import * as PIXI from 'pixi.js';
import { PixiPlugin } from "gsap/PixiPlugin";
import Player from './Player';

PixiPlugin.registerPIXI(PIXI);

class Game extends PIXI.Application {
    player:Player;
    ticker:PIXI.Ticker;

    constructor() {
        super();
        this.view.width = 1000;
        this.view.height = 600;
        document.getElementById('game').appendChild(this.view);

        this.setupPlayer();
        this.ticker = PIXI.Ticker.shared.add(this.gameLoop);
    }

    setupPlayer():void {
        this.player = new Player(this.stage);
        this.player.setPosition(200,200);
    }

    gameLoop(delta):void {
        //neither of these work as player is undefined here, why is that?
        // this.player.x += 1;
        // this.player.position.x +=1;
    }
}

const game = new Game()

player.ts

import {Sprite, Texture} from 'pixi.js';

export default class Player extends Sprite {

    constructor(stage) {
        super(Texture.from(require("../../images/player.png")));

        this.anchor.set(.5)
        this.scale.set(.5)
        stage.addChild(this);
    }

    setPosition(x:number, y:number):void {
        this.position.x = x;
        this.position.y = y;
    }
}

【讨论】：

【解决方案2】：

天哪，我是个白痴。我讨厌问一个问题，然后在出去散步回来尝试一件事情之后，它就起作用了...... Ticker 缺少一个上下文，在这种情况下，它只是对它所在的类的引用。这就是修复.

代替

this.ticker = PIXI.Ticker.shared.add(this.gameLoop);

使用

PIXI.Ticker.shared.add(this.gameLoop, this);

【讨论】：