WavePain
WavePain

Reputation: 5

issues creating and loading level using sprites from a spritesheet in kaboomJs

I'm trying to create and load scene levels using sprites from a spritesheet I found. I just can't figure out why the scene isn't loading/shows errors.

This is my code:

Error: Must provide tileWidth and tileHeight.

import kaboom from "kaboom";
kaboom();
//Load spritesheet and slice 
loadSprite("blocks", "sprites/16x16MineBlocks.png", {
  sliceX: 14,
  sliceY: 8,
}).then(() => {
  // Define sprites from the sliced thing
  const SPRITES = {
    STONE: 14,     
    GRASS_DIRT: 29,
    DIRT: 28,      
    SAND: 42,      
    SNOW: 56,       
  };

  //Create level
  function createLevel(SPRITES) {
    //Level layout
    const levelLayout = [
      "================",
      "=              =",
      "=   @     @    =",
      "=   ##         =",
      "=              =",
      "================",
    ];

    // Define the level config
    const levelConfig = {
      width: 16,
      height: 16,
      "=": () => [
        sprite("blocks", { frame: SPRITES.STONE }),
        solid(),
      ],
      "#": () => [
        sprite("blocks", { frame: SPRITES.GRASS_DIRT }),
        solid(),
      ],
      "@": () => [
        sprite("blocks", { frame: SPRITES.DIRT }),
        solid(),
      ],
      "S": () => [
        sprite("blocks", { frame: SPRITES.SAND }),
        solid(),
      ],
      "N": () => [
        sprite("blocks", { frame: SPRITES.SNOW }),
        solid(),
      ],
    };

    addLevel(levelLayout, levelConfig);
  }
  //Main scene
  scene("main", () => {
    createLevel(SPRITES);
  });

  //Use main scene at start
  go("main");
}).catch((err) => {
  console.error("Failed loading spritesheet:", err);
});

I tried setting:

const levelConfig = {

width:16, to --> tileWidth: 16,
height:16, to --> tileHeight: 16,

Which gave an error:

Error "Cannot read properties of undefined. (Reading '=')"

When I'm adding the sprites "Manually" they load just fine into the game.

For example:

add([
  sprite("blocks", {frame: SPRITES.DIRT}),
  pos(width()/2, height()/2),
]);

Upvotes: 0

Views: 40

Answers (0)

Related Questions