Automatically Resize Entire Canvas To Browser Dimensions?

[JeZxLee]

Hi,

We were going to release an SDL2 game on the Windows(R) Store & maybe XBox Live,

But Microsoft(R) dragged their feet so we said so long to them and sold our company XBox One for $60.

We are now going to make a cross-platform Internet game using: "PixiJSv4" & "Audio5js".

Just started with the coding today...

How can we automatically resize the game's canvas to fill the browser's dimensions while maintaining aspect ratio?

Thanks!

JeZxLee

[JeZxLee]

Hi Again!

So I've got the following code in the main loop:

renderer.autoResize = true;

renderer.view.style.position = "absolute";
renderer.view.style.display = "block";
renderer.autoResize = true;
renderer.resize(window.innerWidth, window.innerHeight);	

But it only resizes the canvas and not the sprites?

Any help would be appreciated, thanks!

JeZxLee

[alex_h]

You probably don't want to resize the canvas, you want to scale it up using css. You might then need to adjust the width or height a bit if the aspect ratios of the game and the window don't match.

[JeZxLee]

25 minutes ago, alex_h said:

You probably don't want to resize the canvas, you want to scale it up using css. You might then need to adjust the width or height a bit if the aspect ratios of the game and the window don't match.

Hi,

I was hoping there was something I could do in JavaScript?

I am not really knowledgeable of CSS.

I do have a 1 line CSS file which loads on app start.

Can you provide an example in CSS where browser resize would scale the canvas?

Also would this effect mouse/touch coordinates?

Thanks!

JeZxLee 

 

[Taz]

If you scale both dimensions by the same factor then the ratio between them will be maintained. Otherwise it wont be. So you can't both scale your content to exactly fill the window and maintain the aspect ratio, because the former requires the scaling factors to sometimes be different and the latter requires them to always be the same.

And yes, Pix'si hit detection takes Pixi scaling into account but not CSS scaling, so CSS scaling will break Pixi's ability to know which DisplayObject you clicked on for instance. So if you use CSS scaling instead of Pixi scaling it will make some things harder..

 

[JeZxLee]

Sorry, I've been using PixiJSv4 for 1 day.

What would be the function to *scale* the display using Pixi?

Thanks!

JeZxLee

[JeZxLee]

Hi,

Please view this HTML5 game website:  www.LettersFall.com

Resize the browser to see the feature we want to do with Pixi.

Thanks!

JeZxLee

[Taz]

You can use renderer.resize(w, h) to resize the canvas and stage.scale.set(s) or stage.scale.set(xScale, yScale) to scale whatever you add to stage.

So you want to fill the window vertically and overflow horizontally?

I can post snippet or maybe CodePen demo but need to confirm what you're after first

[JeZxLee]

Yes...

Ok, let me try that, thanks!

JeZxLee

[Taz]

K lemme know if needed I have similar CodePen demo I can dig up and tweak a bit for this

[JeZxLee]

Hi,

Took some time, but I have this now:

http://16bitsoft.com/files/PixiAudio5JS/index.html

(still have to figure out the aspect ratio thing)

Thanks!

JeZxLee

[Taz]

To maintain aspect ratio you need to scale x and y the same. So instead of "stage.scale.set(xScale, yScale)" you need to do "stage.scale.set(scale)".

[Taz]

Actually I thought you were going for side-scrolling platformer type setup...

[JeZxLee]

Hi,

Have no idea what game I am making.

I am just putting together a 2-D framework to make a game now.

JeZxLee

 

 

 

[JeZxLee]

Hi,

Still not perfect with browser resizing.

Please view below screenshot to see current issue:

http://16bitsoft.com/files/PixiAudio5JS/DevPhotos/PixiScreenResizeIssue-01.png

There are scrollbars in the browser?

Any idea how to get rid of those?

Thanks!

JeZxLee

[Taz]

1 hour ago, JeZxLee said:

Hi,

Have no idea what game I am making.

I am just putting together a 2-D framework to make a game now.

JeZxLee

Cool sounds familiar. My point just that strategies for adapting to window dimensions are different for side-scrolling platformer than for overhead view with scrolling all directions than for non-scrolling game, etc.

[Taz]

22 minutes ago, JeZxLee said:

Hi,

Still not perfect with browser resizing.

Please view below screenshot to see current issue:

http://16bitsoft.com/files/PixiAudio5JS/DevPhotos/PixiScreenResizeIssue-01.png

There are scrollbars in the browser?

Any idea how to get rid of those?

Thanks!

JeZxLee

Try this CSS. Sorry can't remember exaclty which part fixes the scollbar but I think alltogether that will fix it

body {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

canvas {
    padding: 0;
    margin: 0;
}

 

[JeZxLee]

Wow, that fixed the issue, everything is perfect.

Many thanks for your help!

JeZxLee

[JeZxLee]

Hi,

Here is the current source code if someone needs this function of browser resize:

http://16bitsoft.com/files/PixiAudio5JS/Source/PixiAudio5JS.zip

Thanks!

JeZxLee