Hey there, let's work through this Phaser 3 black screen issue together—since you've confirmed the canvas is rendering and your JS is being called, we can zero in on the asset loading pipeline. Here's a step-by-step breakdown to diagnose and fix the problem:

1. Verify Asset Paths First (Most Common Culprit) #

First, open your browser's Developer Tools > Network tab, then reload your project. Look for any asset requests marked with a red 404 status:

• If you see 404s, your file paths are incorrect. Phaser resolves paths relative to your main HTML file, not your JS file. For example, if your HTML is in the root folder and images are in assets/sprites/, your load call should be:

  this.load.image('player', 'assets/sprites/player.png');
  

• Avoid leading slashes like /assets/... unless you're running a proper server (they can break local file:// protocol loading).

2. Double-Check Preload & Sprite Creation Code #

Make sure your preload logic is set up correctly, and you're using exact, case-sensitive key names when loading and creating assets:

• Example of correct preload + create flow:

  // Preload scene
  function PreloadScene() {
    Phaser.Scene.call(this, { key: 'PreloadScene' });
  }
  
  PreloadScene.prototype = Object.create(Phaser.Scene.prototype);
  PreloadScene.prototype.constructor = PreloadScene;
  
  PreloadScene.prototype.preload = function() {
    // Load asset with a clear key
    this.load.image('background', 'assets/background.png');
  };
  
  PreloadScene.prototype.create = function() {
    // Switch to game scene ONLY after preload completes
    this.scene.start('GameScene');
  };
  
  // Game scene
  function GameScene() {
    Phaser.Scene.call(this, { key: 'GameScene' });
  }
  
  GameScene.prototype.create = function() {
    // Use the EXACT same key from preload
    this.add.image(400, 300, 'background').setOrigin(0.5);
  };
  

• Even a tiny typo (like Background instead of background) will cause the sprite to fail silently.

3. Debug Loading Progress #

Add a loading progress indicator to your preload scene to confirm assets are actually being processed:

PreloadScene.prototype.preload = function() {
  let progressText = this.add.text(400, 300, 'Loading...', { fill: '#ffffff' }).setOrigin(0.5);
  
  this.load.on('progress', (value) => {
    progressText.setText(`Loading: ${Math.round(value * 100)}%`);
  });

  this.load.on('filecomplete', (key) => {
    console.log(`Loaded asset: ${key}`);
  });

  // Your asset load calls here
};

If the progress stays at 0% or no filecomplete logs show up, your paths are definitely wrong, or the assets aren't accessible.

4. Fix Local File Loading Issues #

If you're opening your HTML file directly (using file:// protocol), many browsers block asset loading due to security restrictions. Instead:

• Use a simple local server. Run npx serve in your project folder (requires Node.js), then visit http://localhost:3000 to test your project. This eliminates CORS and path resolution problems with local files.

5. Check for Corrupted Assets #

• Ensure your image files are not corrupted: try opening them in an image editor to confirm they load properly.
• Stick to Phaser-supported formats (PNG, JPG, GIF) for testing—avoid WebP or rare formats unless you're certain your target browsers support them.

Final Troubleshooting Tip #

If you're still stuck, comment out all asset load calls except one simple image, then build back up. This will help you isolate if a specific asset is causing the issue, or if the problem is in your loading logic.

内容的提问来源于stack exchange，提问作者Qrow