无法呈现舞台-javascript和pixijs

我在制作游戏和小精灵方面非常新，我在渲染阶段遇到了麻烦。 这是我的代码，我有绘制功能在baseScreen中渲染，我使用它的代码

this.screens[i].draw();

在screenManage中，我不知道为什么我不能在画布上渲染舞台。 没有错误通知，但我没有看到loadBackground文件。 非常感谢你的帮助

game.js

import ScreenManager from '../framework/screens/screenManager.js';

export default class Game
{
  constructor()
  {
    this.frames = 0;
  }

  init()
  {
    this.screenManager = new ScreenManager(this);
    this.screenManager.loadContent();

    this.screenManager.draw();
  }
}

screenManager.js

import LoadingScreen from './loadingScreen.js';

export default class ScreenManager
{
  constructor(game)
  {
    this.game = game;
    this.screens = new Array();
    this.canvas = PIXI.autoDetectRenderer(1024, 768);
    document.body.appendChild(this.canvas.view);
  }

  loadContent()
  {
    this.loadingScreen = new LoadingScreen('loadingScreen');
    this.loadingScreen.loadContent();
    this.addScreen(this.loadingScreen);
  }

  addScreen(screen)
  {
    this.screens.push(screen);
  }

  draw()
  {
    for(var i=0;i<this.screens.length;i++)
    {
      console.log(this.screens[i]);
      this.screens[i].draw();
    }
  }

loadingScreen.js

import BaseScreen from './baseScreen.js';

export default class LoadingScreen extends BaseScreen
{
  constructor(name, screenManager)
  {
    super(name, screenManager);
  }

  loadContent()
  {
    this.loadBackground = PIXI.Sprite.from('assets/images/Preloader.png');
    this.stage.addChild(this.loadBackground);
  }
}

---

奇怪的是，您没有得到任何错误，因为LoadingScreen类构造函数需要两个参数，但您只传递一个：

new LoadingScreen（'LoadingScreen'）

-所以您没有传递

Screen Manager

。这将导致此调用出错：

This.sm.canvas….

。另外，请尝试确保真正调用了

BaseScreen.draw（）

函数（例如：在那里添加一些console.log等）。我看到的另一个问题是每帧有多个渲染-

this.screens[i].draw（）循环调用。每帧应该只有1个“render”调用，因为“render”会覆盖上一次渲染显示的内容。您应该尝试设置适当的主循环，每帧1个渲染-因此有1个“阶段”容器，但在这个“阶段”中，您可以放置多个其他容器（例如：您的基本屏幕等）。例如，请参阅以下文章：，以及中的演示：-它们使用pixi“ticker”显示简化的“主游戏循环”。奇怪的是，由于加载Screen类构造函数需要2个参数，但您只传递一个：
new LoadingScreen（'LoadingScreen'）
-所以您不传递
Screen Manager
。这将导致此调用出错：
This.sm.canvas….
。另外，请尝试确保真正调用了
BaseScreen.draw（）
函数（例如：在那里添加一些console.log等）。我看到的另一个问题是每帧有多个渲染-
this.screens[i].draw（）循环调用。每帧应该只有1个“render”调用，因为“render”会覆盖上一次渲染显示的内容。您应该尝试设置适当的主循环，每帧1个渲染-因此有1个“阶段”容器，但在这个“阶段”中，您可以放置多个其他容器（例如：您的基本屏幕等）。例如，请参阅以下文章：，以及中的演示：-它们使用pixi“ticker”显示简化的“主游戏循环”。
import BaseScreen from './baseScreen.js';

export default class LoadingScreen extends BaseScreen
{
  constructor(name, screenManager)
  {
    super(name, screenManager);
  }

  loadContent()
  {
    this.loadBackground = PIXI.Sprite.from('assets/images/Preloader.png');
    this.stage.addChild(this.loadBackground);
  }
}