cannot load sprites outside of replit using kaboomjs

Question

I have been working on a small game for fun these past few days using the kaboomjs library and it's working as expected when I'm writting and running it from replit, but if I try to run it using live server in vs code I keep getting

   failed to load ~/Desktop/Javascript/kaboom/sprites/baddie.kbmsprite
   Bt@https://kaboomjs.com/lib/0.5.0/kaboom.js:56:3338
   @http://127.0.0.1:5500/game.js:12:18
   J@https://kaboomjs.com/lib/0.5.0/kaboom.js:55:14756
   je/<@https://kaboomjs.com/lib/0.5.0/kaboom.js:56:396
   H/O<@https://kaboomjs.com/lib/0.5.0/kaboom.js:55:3425

this is an example of how the code I'm working with loads sprites:

kaboom({
  global: true,
  fullscreen: true,
  scale: 1,
  debug: true,
  clearColor: [0, 0, 0, 0.75],
});
loadRoot("~/Desktop/Javascript/kaboom/sprites/");
loadSprite("baddie", "baddie.kbmsprite");

scene("main", () => {
  const b = add([sprite("baddie"), pos(80,80)]);
});

start("main", 0);

It's just called in body of an HTML file

...
<body>
    <script src="https://kaboomjs.com/lib/0.5.0/kaboom.js"></script>
    <script src="game.js"></script>
  </body>
</html>

I'm still figuring out JS so any help or guidance would be greatly appreciated!

score 1 · Answer 1 · answered Jun 29 '21 at 13:05

1

Could you try and add the extension (ie .png) at the end of your sprite?

I am using Wamp64 with vs code, i'll test tonight to see if it works for me without the extension.

answered Jun 29 '21 at 13:05

imast

11
2

I tried to convert it to a .png and also tried loading from an imgur web address with no luck. The .kbmsprite is the file type that's exported from Kaboom's sprite builder on replit. – GNUk Jun 29 '21 at 15:30
Could you link your project on replit? I'll try to replicate it – imast Jun 30 '21 at 07:50
I tested your code in live server with a png and it works fine, i think you have an issue with your loadRoot. Right click your image in VS Code and click "Copy Relative Path" and add that in your loadSprite. You will need to change the dashes from \ to / and it should work. – imast Jun 30 '21 at 17:46

score 1 · Answer 2 · answered Sep 03 '21 at 17:42

1

Open directly index.html, live server gived me errors to

answered Sep 03 '21 at 17:42

Kat

11
1

This worked for me. Thanks a lot! – Karol D Jan 11 '22 at 20:11

score 1 · Answer 3 · answered Oct 17 '21 at 08:57

<script src="https://unpkg.com/kaboom@2000.0.0-beta.24/dist/kaboom.js"></script>

Use this script inside HEAD tag. Use .png file on sprites. Some error occurs for your sprites. But easist way open REPLİT kaboom-ligth version and copy it directly to your VScode.

score 0 · Answer 4 · edited Dec 27 '21 at 08:34

0

If you are using an ad-blocker extension in Google Chrome, try turning it off. While uBlock Origins blocks javascript codes in the background, it may also be blocking Kaboom.js. I solved the problem by turning off uBlock Origins.

edited Dec 27 '21 at 08:34

Suraj Rao

29,388
11
94
103

answered Dec 27 '21 at 08:32

srcnny

1
1

cannot load sprites outside of replit using kaboomjs

4 Answers4