0

Character Select Screen for Fighting Game Using Kaboom.js - How to make the box redirect to scene on click

Hey guys -- I'm learning kaboom, I want to create a character select screen and cant seem to let the scene change when clicking on a box. I use: onClick((rect) => go("game")) and this basically goes to the next scene no matter where I click - which isnt what I want because nothings being selected.

Basically, on clicking a characters portrait, I need it to set the character function = to the selected one, and move on to the next scene -- any help appreciated.

I'm using the beta 3000 version, docs here: https://3000.kaboomjs.com/#onClick

here's my code:

I recommend running it on kaboom.js to get the screen I'm seeing (of course minus the assets)

scene("character-select", () => {

    const background = add([
        sprite("background"),
        scale(4)
    ])
    add([
      text("CHOOSE YOUR CHARACTER", {
        size: 65,
        width: 800,
        align: 'center',
      }),
      pos(250, 90)
    ])
    const selectMerlin = add([
      rect(200, 200),
      area(),
      pos(100, 250),
    ])
    const select1 = add([
        pos(100, 250),
        sprite("merlin"),
    ])
    add([
      text("Merlin"),
      pos(110, 250),
    ])
    const dark = add([
        pos(320, 250),
        sprite("dark"),
    ])
    add([
      text("Dark"),
      pos(330, 250)
    ])
    const worm = add([
        pos(540, 250),
        sprite("worm"),
    ])
    add([
      text("Worm"),
      pos(550, 250)
    ])
    const shard = add([
        pos(760, 250),
        sprite("shard"),
    ])
    add([
      text("Shard"),
      pos(770, 250)
    ])
    const hunter = add([
        pos(980, 250),
        sprite("hunter"),
    ])
    add([
      text("Hunter"),
      pos(990, 250)
    ])

    function block(xyz) {
      add([
        rect(48, 64),
        area(),
        outline(4),
        pos(xyz),
        color(255, 180, 255),
      ]);
    };

    onClick(() => {
      block(mousePos())
    });


    onKeyPress("enter", () => go("fight"));
})
Sal
  • 1
  • 1
  • I ended up solving this - here's the code if it can help y'all make better games! – Sal May 24 '23 at 07:02

1 Answers1

0

Ended up solving this - here's the code, hope it helps you all make better games!

Explanation: Each sprite has a rectangle with an onclick that goes tot he next scene. The only part missing in this is calling a function to make the fighter/character you want to play in the next scene - figuring that out! (Unnecessary parts of the below: debug log, and on hover effect)

add([
        pos(320, 250),
        sprite("dark"),
    ])
    add([
      text("Dark"),
      pos(330, 250)
    ])
    const selectDark = add([
      rect(200, 200),
      area(),
      pos(320, 250),
      body(),
      opacity(0.1),
    ])
    selectDark.onClick(() => {
      debug.log("FIGHT")
      go("fight")
    })

    selectDark.onUpdate(() => {
      if (selectDark.isHovering()) {
        selectDark.color = rgb(34,139,34)
      } else {
        selectDark.color = rgb()
      }
    })
Sal
  • 1
  • 1