Forums » Help » Problem with setting scale through ig.main -- images not rendering

For my game, I would like to have a different resolution when it is played on the desktop, and a different one when it is on the ipad/iphone browser (it is designed to be access via. web). However, when I play with setting the scale when calling ig.main(...), setting a scale lesser than 1 will just distort the images, or not render them at all. Setting it higher doesn't work either, unless I set the scale factor to 2.

The original native resolution is 1024x768 for desktop.

Does anyone else has this problem before? How else can I scale it down for ipad/iphone?

what do you use to adapt the game to ipad/iphone? you open it with browser or use cocoonjs/appmobi/phonegap?

I suggest you should try cocoonjs out. It's very simple to install and run the game, and you don't have to set the scale factor, just keep it at 1.

and btw yes, if you scale down the whole thing then many animationsheet will be "destroyed"

Right now it has to be accessible through browser. Will check out cocoonjs, thanks for the tip!

In general, it is better to make a game small, then scale it up? Does the screen resolution has to be a square, because for all the scaling demo I have see, it always 160x160 or 320x320.

Actually in my exp, the good practise is to make a game big, then scale it down, otherwise you can see the pixels in the images when you scale it up, which is not nice at all.

The thing is you have to work harder if you want to adapt the game to many screen sizes. Instead of simply adjusting the scale factor, it's better to keep the scale factor 1 and have many art repositories corresponding with the sizes.

First you have an art repo at 1024x768 for example.
Then you scale down all the animationsheets by, say, photoshop, and simply make smaller images, create smaller games, like 800x480, 480x320.

Cocoonjs does the job for you, however it tries to stretch all the images to fit the screen. So once again, I suggest you have different repo for different screen size.

I think iOS is easy enough because you don't have too many screen sizes. Some of ours are for both android, iOS, and WP, which is a nightmare.

Quote from tungvn261
Actually in my exp, the good practise is to make a game big, then scale it down, otherwise you can see the pixels in the images when you scale it up, which is not nice at all.

The thing is you have to work harder if you want to adapt the game to many screen sizes. Instead of simply adjusting the scale factor, it's better to keep the scale factor 1 and have many art repositories corresponding with the sizes.

First you have an art repo at 1024x768 for example.
Then you scale down all the animationsheets by, say, photoshop, and simply make smaller images, create smaller games, like 800x480, 480x320.

Cocoonjs does the job for you, however it tries to stretch all the images to fit the screen. So once again, I suggest you have different repo for different screen size.

I think iOS is easy enough because you don't have too many screen sizes. Some of ours are for both android, iOS, and WP, which is a nightmare.

Do you do the scaling down with CocconJS, or with ig.main? Because that's what I tried to do, but all my animations.fonts are not displaying correctly.

Impact handles fine only integer scales. If you have non-integer scales, you have to inject ig.Image so to scale the image to an arbitrary scale. So this won't be done with getImageData, but rather by creating a new canvas an puting image wih the right scale. Just ask if you are interested by the code i wrote for this.

I tried to update impact.image.js to support any scale value, likely work:

            resize: function (scale)
            {
                var widthScaled = this.width * scale;
                var heightScaled = this.height * scale;

                var scaled = ig.$new('canvas');
                scaled.width = widthScaled;
                scaled.height = heightScaled;

                var scaledCtx = scaled.getContext('2d');
                scaledCtx.drawImage(this.data, 0, 0, widthScaled, heightScaled);

                this.width = widthScaled;
                this.height = heightScaled;
                this.data = scaled;
            },