javascript - 为什么在浏览器的 Phaser 中无法加载简单的图像?
问题描述
现在,我正在关注本教程:https ://phaser.io/tutorials/making-your-first-phaser-3-game/index
我按照第一个步骤,得到了将 sky.png 渲染到浏览器中的部分,但我的浏览器总是以空白告终。我什至只是试图打开他们完成的示例,但是却一片空白。我需要将它作为服务器运行吗?我尝试了 npm install ,但也没有用。
我遵循了本教程:https ://phaser.io/tutorials/making-your-first-phaser-3-game/index
它在“要求”下引用的 zip 文件不会加载 part1.html、part.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="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>
解决方案
是的。您需要一个托管您的 javascript 和 html 的服务器才能使其正常工作。如果您只是将 html 文件从本地目录拖到浏览器中,会话将无法访问其他需要的文件,因为它们仍然只保存在本地计算机中。Phaser 入门指南更深入,但本质上您不希望网页能够访问您计算机的本地文件。
上述任何解决方案对您有用吗?对我来说,我使用了一个带有 Python 的简单 HTTP 服务器。我正确引用了我的图像,并且正确托管了我的网络服务器。使用开发人员工具时,没有任何错误消息。我把头撞在墙上好几个小时。由于某种原因,Phaser API 无法从网页中分辨出本地目录 ( http://192.168.0.2:8080/ ) 是什么。
我通过为我的图像使用以下路径解决了我的问题:
'http://192.168.0.2:8080/assets/sky.png'
其中 192.168.0.2 是我托管服务器的本地 IP 地址,而 8080 是我用于通信的端口
除了为每个图像添加冗长的文件路径之外,您还可以this.load.setBaseURL('http://192.168.0.2:8080')
结合已有的内容调用该函数。
例如,请参见以下代码:
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 200 }
}
},
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload ()
{
console.log('preload');
this.load.setBaseURL('http://192.168.0.2:8080');
this.load.image('bombP','bowmb.png');
this.load.image('einMary','/bowmb.png');
}
function create ()
{
console.log('create');
this.add.image(126, 119, 'bombP');
this.add.image(222,269,'einMary');
//var s = game.add.sprite(80,0,'einMary');
//s.rotation=0.219;
}
推荐阅读
- php - phpunit 功能测试断言数组
- octopus-deploy - 支持 Octopus Deploy 包元数据中的 repository 属性
- c++ - 如果 char 类型变量需要超过 1 个字符,为什么仍然可以编译?
- sql-server - 从sqlserver导出表并导入oracle?
- c# - GPIO 输入 C# UWP 的延长脉冲
- android - 为什么 exoplayer setPlayWhenReady(false) 方法不暂停歌曲?
- cordova - 在 phonegap/cordova 上构建 iOS 时缺少 cordova_plugins.js
- python - 如何使用python删除CSV文件中的某些行
- openssl - 如何在as400机器上编译open ssl 1.1.1D源码
- laravel - 如何在 laravel 5.2 中将 http 重定向到 https:www.domain.com