Forums » Help » scaling view > to get a "map overview"

I have a level which is bigger than the screen area and want to implement a zoomed out "view all" view.
just scaling everything down and rendering is fine, but having a few issues.

on starting the game:

ig.main('#canvas', MyGame, 30, 320, 400, 2);

this sets scaling to be 2X and all graphics are rescaled (slowly, using javascript)

since i'm gonna be changing the scale, i also set:

this.backgroundMaps[i].preRender = false; 

then later i try ig.system.resize

ig.system.resize(400,400,1)   // last param is scale
// also: ig.system.scale=1

so scale went from 2 to 1. however, this seems to scale the bounding box of the sprites, but not the actual graphics. ie entities are now cropped. maybe i need to resize all the images (render them again from JS?). is there a helper method for this?

is that the best approach? I also looked at the canvas' own scale API:
ig.system.context.scale(0.5, 0.5)

but this gives me a kind of "picture in picture" view, ie only the top left of the canvas is being rendered.
changing this
ig.system.canvas.style.width = '320px';
doesnt help.

so what would be the best way to just get a scaled down view of the whole map?


also regarding the coordinate system,
we have a "picked" method for entities which uses mouse.x/y to check hitPoint bounds.
applying canvas scaling would mean that any hit coords on the canvas are before the scaling transformation is applied?
ie in pixel coords of the raw canvas? so if we have a context.scale(0.5) then all the points
mousex = ig.input.mouse.x + ig.game.screen.x;
also need to be scaled by this amount?


for others reading this thread, here are related links:

http://impactjs.com/forums/help/zoom-feature-by-changing-scale-while-keeping-canvas-size-constant#post1285

http://impactjs.com/forums/impact-engine/mobile-safari-speedup-hack
http://www.phoboslab.org/fom2011/#15

useful for setting background color:
ig.game.clearColor = "#ff0000"

Quote from yatayata
so what would be the best way to just get a scaled down view of the whole map?

Draw it yourself with simple shapes or scaled down tiles into an off-screen canvas. Have a look at lib/impact/debug/maps-panel.js - the generateMiniMap() method does this. You could probably take this as a basis for your mini map function.

also regarding the coordinate system, we have a "picked" method for entities which uses mouse.x/y to check hitPoint bounds. applying canvas scaling would mean that any hit coords on the canvas are before the scaling transformation is applied? ie in pixel coords of the raw canvas? so if we have a context.scale(0.5) then all the points mousex = ig.input.mouse.x + ig.game.screen.x; also need to be scaled by this amount?

Mouse coordinates take the ig.system.scale into account - that is Impact&039;s internal scaling that you specify with #ig.main(). If you do additional scaling on top of that, i.e. through ctx.scale(), you have to transform the mouse coordinates yourself.