如何解决如何在ReactJS项目中加载使用Phaser 3制作的游戏资源?
我有一个网站项目,它是带有 ReactJS 的SPA,在其中使用 Phaser 3 制作游戏。实际上,我正在迁移以前在Angular Framework中的项目。我面临的问题是,当尝试在预加载功能中加载游戏的图像时,我无法访问存储游戏图像的路径。这样做并没有给我Angular带来麻烦。
我不知道ReactJS使用其组件的方式以及如何加载React图像是否有问题。
游戏本身不是 React 组件,它只是我在该组件中导出的一个单独模块,将呈现游戏视图。
在Angular项目中,我做到了:
- 是渲染游戏的组件
- 是否已加载图像中的场景
- 是用于加载图片的代码
- 图像的存储位置
它正常工作!但使用Angular。
另一方面,使用 ReactJS 时,我无法从reactJS项目的资产文件夹中加载相同游戏的相同图像。
- 是渲染游戏的 react 组件
- 在此处配置其他JS文件中的游戏(不是React组件)
- 游戏在哪里呈现
- 是否已加载图像中的场景
- 图像的存储位置
结果:
我必须说我已经尝试了几条路线,但都没有成功。
preload() {
this.load.image('background','assets/games/blaster-x/images/background.png');
}
preload() {
this.load.image('background','../../assets/games/blaster-x/images/background.png');
}
有人遇到过类似的问题吗?
解决方法
React对资产的文件加载器使用不同的样式。
import backgroundImage from ‘src/assets/games/images/background.png’;
...
this.load.image(‘background’,backgroundImage);
,
我一直在研究,事实是ReactJS JXS使用另一种方式将其图像导入其组件。
import image1 from './images/image1.jpg';
<img src={image1} />
或
<img src={ require('./images/image1.jpg') } />
对于我使用Phaser 3制作的游戏来访问场景中的资源的情况,只有当我将所有资产都移到ReactJS项目的公共文件夹中时,它才起作用。
更多信息在这里:
https://phaser.discourse.group/t/this-load-image-file-path-not-working/1566/11
,就我而言,这是我没有注意到的 package.json 配置(public 是放置文件的文件夹)
"staticFiles": {
"staticPath": "public","watcherGlob": "**"
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。