Forums » Help » Resizing the canvas

Hi,

I have an issue at the moment where by I want to be able to resize the canvas based on the available resolution.

If I try to resize by working out and using the ig.main constructor
ig.main( '#canvas', Game, frameRate, 960, 600, 1 ); I get errors on chunk size if it is not an equal division.

I can hard code the width/height directly in the css and it works perfectly.

However, I cannot seem to dynamically set the width height in JavaScript as the canvas size reduces but the scale remains the same - i.e. I am missing parts of the screen in the canvas window, perhaps I need to redraw after I resize, but not sure how?

Does anyone have any guidance?

Thanks,

Dave

Sorry - also trying to use:

ig.system.resize(960,600, .51);

Is the same issue with odd sizes, works perfect at .5, but not .51.

Thanks

I tried modifying image.js as per this post too and it loads but the game throws an exception in drawtile.

http://impactjs.com/forums/help/how-to-scale-down-game-size

The scaling algorithm in Impact is meant for scaling up pixel games by an integer factor: 2x, 3x, 4x etc. More info in this thread.

If you want to have the same viewport size and really "zoom" everything, try manipulating the CSS width and height through JavaScript. This should work fine, but is (depending on the browser) slow and probably doesn't look good.

If your game should use different resolutions, I personally would only ever resize the viewport - i.e. how the Weltmeister level editor resizes itself to the available resolution. Zooming by a floating point factor looks quite "dirty" for most 2D games, imho - but if you have really high res artwork, this could actually look good. It depends on the game.