javascript - 我无法使用 Phaser 3 中的创建功能将任何内容加载到画布上
问题描述
我无法让图像预加载
我尝试将其转换为 url,我尝试将其复制到项目文件夹中的文件,我尝试只输入文件名。
function preload(){
this.load.image('sky', 'assets/sky.png');
this.load.image('ground', 'assets/platform.png');
this.load.spritesheet('dude', 'assets/dude.png');
this.load.image('star', 'assets/star.png');
} // preloads all of the files I will need to make the game
function create() {
this.add.sprite(200, 200, 'star');
} // applies the files
function update() {
}// update every frame
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#FF0000',
physics: {
default: 'arcade',
arcade: {
gravity: {y:200},
debug: false
}
},
scene: {
preload,
create,
update
},
} // configures the game
var game = new Phaser.Game(config);
我想在画布上成功显示图像,但它只显示一个带有一些绿线的黑框。任何有关如何解决此问题或我所缺少的提示将不胜感激,谢谢。
function preload() {
this.load.image('sky', 'file:///home/chronos/u-fc7808c01e889e74148d1013b69f0a2241def976/Downloads/testprogram-atom.js/assets/sky.png');
this.load.image('ground', 'assets/platform.png');
this.load.spritesheet('dude', 'assets/dude.png');
this.load.image('star', '/home/jojobinks/Desktop/testprogram-atom.js/star.png');
}
function create() {
this.add.image(0, 0, 'sky');
}
function update() {
}
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#FF0000',
physics: {
default: 'arcade',
arcade: {
gravity: {y:200},
debug: false
}
},
scene: {
preload,
create,
update
},
}
var game = new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/phaser@3.16.2/dist/phaser-arcade-physics.min.js"></script>
解决方案
打开浏览器开发工具并查看网络请求。它实际上是在加载文件吗?还是那里有 404 错误?此外,您无法从 Web 服务器加载file://
并且您的游戏必须从 Web 服务器运行。如果您只是在浏览器中打开 index.html,它将无法正常工作。请按照 Phaser 网站上的入门指南了解更多详细信息。
推荐阅读
- dynamics-crm - 如何翻译多选选项集选项?
- python - 在迭代过程中对拆分数据框列求和
- typescript - Typescript - 获取方法调用者的类
- sql - Oracle SQL - 使用 CASE WHEN 选择适当的日期字段
- regex - 正则表达式匹配空格和一个
- c# - Telerik 报告查看器在 Asp .net 样板中与 Asp.net 核心结合使用时不起作用
- node.js - 基于密钥包含在 json 列表中搜索的有效方法
- python - 如何根据变化的列值 pd.fillna(mean())?
- nginx - 如何使用 nginx 和 php 后端修复重定向到斜杠
- java - 为什么我们使用 Lifecycle 感知组件 & Lifecycle Observer 在 Android 中的用途是什么?