[英]Phaser 3 is not loading the image assets
我正在按照本教程http://phaser.io/tutorials/making-your-first-phaser-3-game/part2 进行操作,并且已经达到了在天空中加载的程度。 然而,不幸的是,天空图像没有加载。 为了验证这不是代码的问题,我运行了教程提供的 part3.html 文件,该文件说它应该从一开始就加载天空,但无济于事。 非常感谢任何帮助:谢谢 :)它在浏览器中的外观图片
<.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>
我编辑了你的代码,现在你可以看到你的代码运行良好:)
注意:你必须为 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.