kaboom.js 加载图片失败答案

【问题标题】：kaboom.js failed load imagekaboom.js 加载图片失败
【发布时间】：2021-11-05 14:34:23
【问题描述】：

我无法在 kaboom.js 中加载图像。这是我的代码文件根目录 D:\kaboom\src。这是我的图像文件根目录 D:\kaboom\public\assets。

js代码

import kaboom from 'kaboom';


kaboom({

  font: "sinko",

  background: [0, 0, 255,],
})

loadSprite("bean", "assets/ii.png");

// add a character to screen
add([
  // list of components
  sprite("bean"),
  pos(80, 40),
  area(),
]);

我错了

【问题讨论】：

错误是什么？
试试loadSprite("bean", "../public/assets/ii.png")

标签： javascript kaboom

【解决方案1】：

你的index.html在哪里？

我使用 React 构建这个游戏，并将这些公共文件设置为相邻 index.html。像这样：

.
├── MarioGames
│   └── sprites
│       ├── Items.png
│       ├── Mario.json
│       ├── Mario.png
│       ├── OverWorld.json
│       ├── OverWorld.png
│       ├── bigMushy.png
│       ├── brick.png
│       ├── castle.png
│       ├── cloud.png
│       ├── coin.png
│       ├── emptyBox.png
│       ├── enemies.json
│       ├── enemies.png
│       ├── ground.png
│       ├── hill.png
│       ├── pipe.png
│       ├── pipeBottom.png
│       ├── pipeTop.png
│       ├── questionBox.png
│       └── shrubbery.png
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt

这是我的解决方案。

    kaboom({
  background: [134, 135, 247],
  width: 320,
  height: 240,
  scale: 2,
  canvas: this.refs.canvas as any,
})

loadRoot('./MarioGames/sprites/')
loadAseprite('mario', 'Mario.png', 'Mario.json')
loadAseprite('enemies', 'enemies.png', 'enemies.json')

【讨论】：