replit / kaboom

💥 JavaScript game library
https://kaboomjs.com
MIT License
2.66k stars 226 forks source link

Add level not work #662

Open Alvin-Alford opened 1 year ago

Alvin-Alford commented 1 year ago

Version

v3000.0.0-alpha.10

What browsers are you seeing the problem on?

Chrome

What happened?

The addlevel function throws a c.split error.

What's the expected behavior?

error function c.split is undefined.

Minimum reproducible code

const LEVELS = [
    [
    "=================",
    "=               =",
    "=               =",
    "                =",
    "=               =",
    "=               =",
    "=================",
  ],
]

const levelConf = {
    // grid size
    tileWidth(){"64"},
    tileHeight(){"64"},
  //pos: vec2(0,0),

    "=": () => [
        sprite("block"),
    pos(center()),
        area(),
        solid(),
    scale(2),
        origin("center"),
    "wall",
  ],
}

  camScale(0.2)

    // add level to scene
  const level = addLevel(LEVELS, levelConf)

Live demo

No response

lajbel commented 1 year ago

You should use tileWidth and tileHeight as functions, they are properties, so you can use:

const levelConf = {
  tileWidth: 64,
  tileHeight: 64,
}
Alvin-Alford commented 1 year ago

I have tried to but it results in errors

lajbel commented 1 year ago

And you need select the map, because LEVELS is an array of maps, so you should use LEVELS[0]

hacknug commented 1 year ago

You also need to move your tile definitions inside tiles lie this:

const levelConf = {
  tileWidth: 64,
  tileHeight: 64,
  tiles: {
    "=": () => [sprite("block"), pos(center()), area(), solid(), scale(2), origin("center"), "wall"],
  },
}
Alvin-Alford commented 1 year ago

thank you for the help but I seem to have another error it doesn't like the components.

Alvin-Alford commented 1 year ago

Solid and origin

hacknug commented 1 year ago

Solid and origin

Those two components have been removed in v3000. You need to replace solid() for body({ isStatic: true }), and origin() for anchor() 👍

Please take a look at the docs for v3000 and the changelog: https://kaboom3000.lajbel.repl.co/

You should also post these questions in Discussions or the help channels on Discord since they are not an issue of the library.

Alvin-Alford commented 1 year ago

thank you I was wondering where the new docs was.

Alvin-Alford commented 1 year ago

my code starts but the kaboom player doesn't load? do you have any ideas why


import kaboom from "kaboom"

kaboom({
  scale: window.innerWidth/110,
  //pixelDensity: 1,
  crisp : true,
})

// load assets
loadSprite("b", "sprites/b2.png");
loadSprite("t2", "sprites/t22.png");
loadPedit("block", "sprites/block.pedit");
loadSprite("ai", "sprites/player.png");

if (window.self == window.top) { 

} else {
  window.open('https://Kaboom-2d-shooter-test-3000.alford.repl.co/', '_blank');
};

const MOVE_SPEED = 280

const LEVELS = [
    [
    "=================",
    "=               =",
    "=               =",
    "                =",
    "=               =",
    "=               =",
    "=================",
  ],
]

const levelConf = {
  tileWidth: 64,
  tileHeight: 64,
  tiles: {
      "=": () => [
          sprite("block"),
      pos(center()),
          area(),
          body({ isStatic: true }),
      scale(2),
          anchor("center"),
      "wall",
    ],
  },
}

  camScale(0.2)

  const level = addLevel(LEVELS[0], levelConf)

    // define player object
    const player = add([
        sprite("ai"),
        pos(0,0),
        area(),
    rotate(0),
        scale(0.13),
        body({ isStatic: true }),
        anchor("center"),
    ])

  const gun = add([
    sprite("t2"),
    pos(),
    area(),
    scale(0.2),
    anchor("bot"),

  ])

    // action() runs every frame
    player.onUpdate(() => {
    //camScale(1),
    camPos(player.pos)
    gun.moveTo(player.pos)
    player.use(rotate(player.pos.angle(toWorld(mousePos()))))
    gun.use(rotate(player.pos.angle(toWorld(mousePos()))-90 ))
    //fps.text = player.pos
  })

  let shot = true

  function shoot(){
       shot = true 
      if (shot) {
                const projectile = add([
          sprite("b"),
          scale(0.2),
          anchor("center"),
          pos(player.pos.add(
            Math.sin((player.angle+90) /57)*-30,
            -Math.cos((player.angle+90) /57)*-30,
                            )
            ),
          rotate(player.pos.angle(toWorld(mousePos()))-90),
          area(),
          "bullet",
          move(player.pos.angle(toWorld(mousePos())), -480),
        ])
       shot = false
       wait(0.1, () => {
         shot = true
       })
            }
    //  const projectile = add([
    //   sprite("b"),
    //   scale(0.1), 
    //   pos(player.pos),
    //   area(),
    //   "bullet",
    //   move(player.pos.angle(toWorld(mousePos())), -100),
    // ])

  }

onCollide("wall","bullet", (w,b) => {
  destroy(b)
    //debug.log("delete")
})

onMouseDown(() => {
    if (shot) {
      shoot()
    }

  });

onKeyDown("left", () => {
    player.move(-MOVE_SPEED, 0)
})

onKeyDown("right", () => {
    player.move(MOVE_SPEED, 0)
})

onKeyDown("up", () => {
    player.move(0, -MOVE_SPEED)
})

onKeyDown("down", () => {
    player.move(0, MOVE_SPEED)
})

onKeyPress("f", () => {
    fullscreen(!fullscreen())
})

onKeyPress("e", () => {
    debug.paused = true
})

onKeyPress("q", () => {
    debug.paused = false
})

debug.inspect = true
lajbel commented 1 year ago

Can you provide an online demo? Or Repl? Btw, is this related to the original issue?

Alvin-Alford commented 1 year ago

here is a demo https://replit.com/@alford/Kaboom-2d-shooter-test-3000?v=1