replit / kaboom

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

Dynamic rescale #124

Closed lajbel closed 2 years ago

lajbel commented 3 years ago

Rescale canvas according to the available space like phaser or other html game engines

slmjkdbtl commented 3 years ago

Do you mean something like kaboom({ fullscreen: true })?

lajbel commented 3 years ago

Fullscreen only grabs the width and height of the page and uses them in the values ​​for the creation of the canvas, but don't rescale it

slmjkdbtl commented 3 years ago

Do you mean resize the canvas when window resizes, or something like stretch the game view to scale to window size?

lajbel commented 3 years ago

I will refer more to scaling the content, which is enlarged (without modifying anything in the game), it would be like the kaboom({scale: 2}) property but automatic according to the width of the space provided

slmjkdbtl commented 3 years ago

Gotcha, this is something I'm working on atm, there's now a scaleMode option (can try out on kaboom@next)

kaboom({
    scaleMode: "stretch",
    width: 320,
    height: 240,
    fullscreen: true,
});

if you specify you game's width and height and scaleMode: "stretch", it'll stretch everything to the canvas size. Also working on a "letterbox" mode which will preserve aspect ratio and leave black bars on side for extra space, but that's not fully functional yet. If left out or scaleMode: "none" it'll not scale anything just make the canvas bigger.

lajbel commented 3 years ago

Cool! I have seen it in the commits, but I was waiting for you to document it or say how it works to test it, right now I will, thanks

slmjkdbtl commented 3 years ago

Will document when it's good to release!

lajbel commented 2 years ago

Added in @next

Whoops this is my issue