Is there a way to resize a Kaboom game when the window is resized

Question

Consider the following simple kaboom "game":

kaboom();

function makeWallComps(name, x, y, w, h) {
  return [
    name,
    "wall",
    origin("center"),
    rect(w, h),
    pos(x, y),
    outline(),
    area()
  ];
}

let leftWall = add(makeWallComps("left", 5, height() / 2, 10, height()));
let rightWall = add(makeWallComps("right", width() - 5, height() / 2, 10, height()));
let topWall = add(makeWallComps("top", width() / 2, 5, width() - 20, 10));
let bottomWall = add(makeWallComps("bottom", width() / 2, height() - 5, width() - 20, 10));

let obj = add([
  "obj",
  origin("center"),
  rect(20, 20),
  pos(width() / 2, height() / 2),
  outline(),
  area(),
  { dir: rand(-180, 180) }
]);

obj.use(move(obj.dir, 100));

// bounce
obj.collides("wall", function huh(obstacle) {
  if (obstacle.is("left")) {
    console.log("left");
    if (obj.dir < -90) {
      obj.dir = -180 - obj.dir;
    } else if (obj.dir > 90) {
      obj.dir = 180 - obj.dir;
    }
  } else if (obstacle.is("right")) {
    console.log("right");
    if (obj.dir < 0) {
      obj.dir = -180 - obj.dir;
    } else {
      obj.dir = 180 - obj.dir;
    }
  } else if (obstacle.is("top")) {
    obj.dir *= -1;
  } else if (obstacle.is("bottom")) {
    obj.dir *= -1;
  }
  obj.use(move(obj.dir, 100));
});

window.addEventListener(
  'resize',
  () => {
    // I want to resize the game window
    // This does not work: 
    // canvas.width = document.documentElement.clientWidth;
    // canvas.height = document.documentElement.clientHeight;
    
    leftWall.use(pos(5, height() / 2));
    leftWall.use(rect(10, height()));
    rightWall.use(pos(width() - 5, height() / 2));
    rightWall.use(rect(10, height()));
    topWall.use(pos(width() / 2, 5));
    topWall.use(rect(width() - 20, 10));
    bottomWall.use(pos(width() / 2, height() - 5));
    bottomWall.use(rect(width() - 20, 10));
  }
);

<script src="https://cdn.jsdelivr.net/npm/kaboom@2000.0.0-beta.24/dist/kaboom.min.js"></script>

I'd like to be able to resize the canvas and have that reflected by the built in kaboom functions. Unfortunately explicitly setting the canvas dimensions doesn't work, and KaboomCtx doesn't appear to have any resize function. Is there any way to resize a kaboom game?

score 1 · Accepted Answer · answered Oct 09 '21 at 08:32

Well, I read through some of the Kaboom source code and discovered this this is pretty severely not-modifiable after initialization.

const app = appInit({
    // gconf.width is the initial width specified in the call to kaboom()
    width: gconf.width,
    height: gconf.height,
    scale: gconf.scale,
    crisp: gconf.crisp,
    canvas: gconf.canvas,
    root: gconf.root,
    stretch: gconf.stretch,
    touchToMouse: gconf.touchToMouse ?? true,
    audioCtx: audio.ctx,
});

const gfx = gfxInit(app.gl, {
    background: gconf.background ? rgb(gconf.background) : undefined,
    width: gconf.width,
    height: gconf.height,
    scale: gconf.scale,
    texFilter: gconf.texFilter,
    stretch: gconf.stretch,
    letterbox: gconf.letterbox,
});

// This creates functions width() and height() that just returns the values passed to gfxInit()
const {
    width,
    height,
} = gfx;

It turns out there is already an open feature request for this. Based on the current state of the code that seems like it will be quite the chore to implement.

ah glad to know you found the answer yourself, i was busy due to some work from some days — Blind Spot, Oct 11 '21 at 10:42

score 0 · Answer 2 · answered Oct 09 '21 at 04:44

0

You can resize game using kaboom's inbuilt scale() function. It must be run when initializing kaboom, like:

kaboom({
    scale: 4,
});
//This multiplies game size by 4
//your kaboom code here

Here's the official documentation for scale() function.

NOTE: After changing kaboom's scale, it may change position of sprites so you may need to re-adjust them.

answered Oct 09 '21 at 04:44

Blind Spot

191
10

Thank you for your answer. However I'm specifically looking for a way to **re**size the game, *after* creation. This is because I want my game to be responsive to the window being resized (or the aspect ratio changing, for example because the user rotates their device). – Paul Wheeler Oct 09 '21 at 05:32
@PaulWheeler are you using some replit kaboom template or is it simple html/node.js repl, you're using for development – Blind Spot Oct 09 '21 at 05:40
As you can see from the runnable snippet in my question, this is just HTML and javascript. However, if I find an answer I will be applying it to use cases hosted on Replit.com with their Kaboom template. I do specifically want to use the kaboom.js library. – Paul Wheeler Oct 09 '21 at 05:42
Oh ok, actually repl.it kaboom template looks same, so i was confused. Let me try some thing. – Blind Spot Oct 09 '21 at 05:44
After reviewing the Kaboom source code I've come to the conclusion that it's impossible for the time being. I hope you didn't waste too much time on this. – Paul Wheeler Oct 09 '21 at 08:33

Is there a way to resize a Kaboom game when the window is resized

2 Answers2