Forums » Help » Windows 8 Scale Problem

Hi
Trying out impact on Win8 as a metro app.
It works fine but there's some problem with scaling.

When I use for example:

ig.main('#canvas', MyGame, 60, 512, 384, 2);

The game dosen't show up, theres no error or nothing. Just a blank black canvas,
running at

ig.main('#canvas', MyGame, 60, 512, 384, 1);

Works fine aswell.
Scaling the canvas with CSS is no problem, but as you know, we end up with a blurry game.

I tried all the diffrent draw modes with the same results.
Is there some kind of way around this?
If I manually set the canvas size i have to redo all the assets for each resolution so that's not an option.

Help :-)

Update*
So i decided to leave the black screen of death for a couple of minutes.
Then the game kicked in!

So it seams that if the game is scaled it takes about one and a half minute for win8 metro app to scale-up the game.
Something's fish!

Impact actually scales up all images during load time of the game. This is done in JavaScript - pixel by pixel. If you have many large images and a slow JavaScript engine, such as IEs, this scaling can take a lot of time.

So, one solution is to leave the scaling in Impact at 1 and scale the Canvas element with the CSS width and height. Though depending on your game, this blurry scaling look may not be what you want.

I recently wrote a blog post about this whole issue: http://phoboslab.org/log/2012/09/drawing-pixels-is-hard

But maybe IE10 has support for the image-rendering CSS property or imageSmoothingEnabled? Can you please check this URL - if the pixels in the upscaled image look sharp (no blurring) there is hope http://jsfiddle.net/VAXrL/190/ :)

Yeah no hope there :-)
It returns blurry.

Yeah its slow alright.
Im scaling up around 500kb worth of images.
Can be a good note for does making win8 apps.
Stay away from scaling from now.

Wanted to do a quick conversion from a ipad mini game.
Thanks Dominic for your awesome support as always!
Quick response :-)

Yeah no hope there :-)
It returns blurry.

Yeah its slow alright.
Im scaling up around 500kb worth of images.
Can be a good note for does making win8 apps.
Stay away from scaling from now.

Wanted to do a quick conversion from a ipad mini game.
Thanks Dominic for your awesome support as always!
Quick response :-)

I have just walked into this problem too, thinking that maybe the best way to get around it is either:

a. scale multiple images and load the correct one accordingly. Could easily be done with a build time script.
OR
b. interop with c#/c++ and do the scaling in managed/native code.

(totally guessing here, does IE10 canvas use GDI+ underneath? Writing pixel data is slow as hell in GDI+ with managed code...)

I'll probably go with option a myself :)

by looking inside the different post quoted here, you can find an image.resize optimized function :

 var index = 0;
        var ref_indexScaled = 0
        var ref_step=1/scale;
        for( var y = 0; y < heightScaled; y++ ) {
            for( var x = 0; x < widthScaled; x++ ) {
                var i= index*4;
                scaledPixels.data[ ref_indexScaled++ ] = origPixels.data[ i++ ];
                scaledPixels.data[ ref_indexScaled++ ] = origPixels.data[ i++ ];
                scaledPixels.data[ ref_indexScaled++ ] = origPixels.data[ i++ ];
                scaledPixels.data[ ref_indexScaled++ ] = origPixels.data[ i++ ];
                index+= ref_step;
            }
        }

the author of this code, ' Mathieu 'p01' Henri' claims a very important speed-up.
you should give this a try before trying anything else i guess, because obviously you save quite a lot of computation with this optimization.

(Rq : i changed 'var i= index << 2; ' of mathieu's code for 'var i=index*4;' which is faster, because since all numbers are double in javascript '<<2 ' will perform a conversion to integer, then the shift, then a conversion back to double, so it is faster to do a *4.)

Been playing with this today and I think you will find that its the debugger slowing it all down. Starting your app without debugging and it'll load much faster.