Forums » Help » Fullscreen Game screen?

Is it possible to make the gamescren fullscreen?

I run this at startup:

      ig.system.resize($(window).width(),$(window).height());

and have it bound to resizes like so:

$(window).resize(this.resize.bind());

Thanks for the response, how should i modify ig.main in order for this to work?

I put that as the last line of ig.main

I think it's somewhat important to note that subelsky is using the jQuery library in his example :)

@subelsky just curious, what's the performance like with fullscreen and scaling of 2? Or do you not scale?

Scaling should be completely irrelevant for performance I think - the resulting screen size is important.

If you have a game with a resolution of 320x240 and a scaling of 2, it's actually rendered at 640x480. All images are scaled up during load time in JavaScript. So drawing a 16x16 px image with a scaling of 2, will actually draw a 32x32 px image on the canvas.

The reason it's done like this is that rendering a canvas in anything else than its internal resolution is slooooow (i.e. scaling the canvas up using CSS) and there's no cross browser way to specify crisp nearest neighbor scaling.

point taken

so i aded this at the bottom of main,js :

      ig.system.resize($(window).width(),$(window).height());

And on load the canvas scales but not when the window changes size :-( Where does this go:

$(window).resize(this.resize.bind());

is this a better solution:

http://impactjs.com/forums/code/dynamic-pixelscaling

Does what i need in this instance!

#canvas {
			position: relative;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			border: 1px solid #555;
			background-color: red;
			width:100%;
			height:100%;
		}

As Dominic said one year ago :

Canvas is best used at 1x scale factor. Letting the browser resize it (with CSS) tends to cast the "blurry effect", the opposite of pixelart nearest-neighbor scaling.

So if you want a game to double its size, you'd better double the impact pixel-scale instead of CSS canvas dimensions.

Dominic also said what took me a while to understand : impact bitmap assets are scaled (in /lib/impact/images.js) ONCE after being pre-loaded. If you want the pixel-scale to vary on window or orientation resize, you'll have to re-compute the initial scaling.

Yea i got all that, not using as a game per se in this instance and blurry will work better for what im planning :-)


this: http://impactjs.com/forums/code/dynamic-pixelscaling works pretty well, but dont have the time to get it to work properly for what im doing ...

ig.system.resize(
            ig.global.innerWidth * 1 * ( 1 / 4 ),
            ig.global.innerHeight * 1 * ( 1 / 4 ),
            4
        );

and set scaling to 4. easy as that. Actually thats how http://collinhover.github.io/mimic/ deos it!