Is there a way to create multi-resolution graphics for game with createjs?

Question

I'm on a advanced development for a game made with createjs framework. However it's time to export it to some platforms. The graphics are made for the iPad 3 resolution.

I would like to export them to devices with less processing power, like iPhone 4 or low end Androids. But hi-definition assets drains the little processor of them.

Resizing all the files is not a solution. There must be some "scale factor" on image loader or another mechanism to get images in correct sizes.

If my game canvas has virtual 1000px wide, and my asset has 1000px wide, the canvas will be filled by the asset. If I resize it to half size, it will be 500px wide, and the canvas will be just half filled. There should be a scale factor that should get the displayObject (not the asset) and set its sizeX and sizeY to double size to fill the screen again. I can be done manually for every one, but I'm looking for a better solution.

Answer 1

Resize all files is a solution. It is the solution.

You really should have an asset conditioning pipeline that can take your source assets and convert them into the appropriate size/format for shipping. This might include converting the textures to compress formats (the supported set of which can differ between iOS, various Android device, WP8, PC, etc.), resizing images, and possibly other things. You'll want the same for audio files and meshes if you have any.

You could resize the files on load, but this is a very poor solution. Loading the larger images and processing them takes time (for that poor little ol' CPU you're worried about), plus the user still has to download the high-res game on their older device. If you're deadset on this approach, though, maybe try the technique at https://stackoverflow.com/questions/2303690/resizing-an-image-in-an-html5-canvas, which involves rendering the image in a smaller resolution to a Canvas and then reading the result back as an Image.

Answer 2

Option 1: Detect media screen size, and load appropriate scaled-down bitmaps. Scale the images down using automated tools like ImageMagick.

Option 2: Render vector imagery instead of raster bitmaps.

Answer 3

A way to your solution is to decouplate your images from their resolutions.
So you need to define the virtual size of each image.
You can define a class that will take filePath, virtualWidth, virtualHeight as arguments, as well as a draw method that take care of the scaling.
The virtual Width and Height are just the w/h of the images you have running right now.

That way when you load an image, whatever its resolution you'll be able to compute the scale to apply to it, and draw it with a correct size.
As a bonus you can even mix low-res/high res images depending on how important -or big- is the graphical object. (i did just that for a game i made and it worked fine).