kaboom icon indicating copy to clipboard operation
kaboom copied to clipboard

Dynamic rescale

Open lajbel opened this issue 4 years ago • 7 comments

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

lajbel avatar Aug 11 '21 01:08 lajbel

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

slmjkdbtl avatar Aug 23 '21 22:08 slmjkdbtl

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

lajbel avatar Aug 23 '21 23:08 lajbel

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

slmjkdbtl avatar Aug 23 '21 23:08 slmjkdbtl

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

lajbel avatar Aug 23 '21 23:08 lajbel

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.

slmjkdbtl avatar Aug 23 '21 23:08 slmjkdbtl

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

lajbel avatar Aug 23 '21 23:08 lajbel

Will document when it's good to release!

slmjkdbtl avatar Aug 23 '21 23:08 slmjkdbtl

Added in @next

Whoops this is my issue

lajbel avatar Oct 04 '22 16:10 lajbel