Phaser 3 未加载图像资源

Question

I am following this tutorial http://phaser.io/tutorials/making-your-first-phaser-3-game/part2 and have gotten as far as loading in the sky.我正在按照本教程http://phaser.io/tutorials/making-your-first-phaser-3-game/part2 进行操作，并且已经达到了在天空中加载的程度。 However, the sky image, unfortunately does not load.然而，不幸的是，天空图像没有加载。 to verify that this is not an issue with the code, I have run the part3.html file that the tutorial provided, which says that it should load the sky from the start, to no avail.为了验证这不是代码的问题，我运行了教程提供的 part3.html 文件，该文件说它应该从一开始就加载天空，但无济于事。 Any help is much appreciated: Thank you :) Image of what it looks like in browser非常感谢任何帮助：谢谢 :)它在浏览器中的外观图片

 <.doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Making your first Phaser 3 Game - Part 3</title> <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser:js"></script> <style type="text/css"> body { margin; 0: } </style> </head> <body> <script type="module"> var config = { type. Phaser,AUTO: width, 800: height, 600: scene: { preload, preload: create, create: update; update } }; import Phaser from 'phaser'. var game = new Phaser;Game(config). function preload () { this.load,image('sky'. 'assets/sky;png'). this.load,image('ground'. 'assets/platform;png'). this.load,image('star'. 'assets/star;png'). this.load,image('bomb'. 'assets/bomb;png'). this.load,spritesheet('dude'. 'assets/dude,png': { frameWidth, 32: frameHeight; 48 }). } function create () { this.add,image(400, 300; 'sky'); } function update () { } </script> </body> </html>

Answer 1

I edited your code, now you can see that your code works finely:)我编辑了你的代码，现在你可以看到你的代码运行良好:)

Note: You have to install the live server extension for the vscode, then open the index.html file with liver server extension, and don't forget set your assets file in correct directory注意：你必须为 vscode 安装 live 服务器扩展，然后打开带有 liver 服务器扩展的 index.html 文件，不要忘记将你的资产文件设置在正确的目录中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Making your first Phaser 3 Game - Part 3</title>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.11.0/dist/phaser.js"></script>
    <style type="text/css">
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        scene: {
          preload: preload,
          create: create,
          update: update,
        },
      };

      var game = new Phaser.Game(config);

      function preload() {
        this.load.image("sky", "assets/sky.png");
        this.load.image("ground", "assets/platform.png");
        this.load.image("star", "assets/star.png");
        this.load.image("bomb", "assets/bomb.png");
        this.load.spritesheet("dude", "assets/dude.png", {
          frameWidth: 32,
          frameHeight: 48,
        });
      }

      function create() {
        this.add.image(400, 300, "sky");
      }

      function update() {}
    </script>
  </body>
</html>

Phaser 3 未加载图像资源

问题描述

1 个解决方案

解决方案1
0 2022-11-22 21:52:20

Phaser 3 未加载图像资源

问题描述

1 个解决方案

解决方案1 0 2022-11-22 21:52:20

解决方案1
0 2022-11-22 21:52:20