Scaling images for a Win 8 Impact game

If you tried making a game for Windows 8 with Impact, you might have noticed the extremely long time it takes to start the game. This happens if you scale your game up. Every image has to be scaled in JavaScript. And this is slow.

In my game, there is about 126KB of images to scale to x5. It takes 43secs. With the use of a Windows Runtime Component I was able to bring it down to 2secs. (Scaling x10 takes 6secs, x15 14secs and scaling x20 stops with too less memory.) It might help your game too.

Here is how:

Add a C# Windows Runtime Component project to your solution. Rename the Class1 to, for example, Image and add the following Resize method.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Runtime.InteropServices.WindowsRuntime;

namespace ZombieWRC
{
    public sealed class Image
    {
        public static void Resize([ReadOnlyArray()] byte[] origPixels_data, [WriteOnlyArray()] byte[] scaledPixels_data, double scale, double width, double height, double widthScaled, double heightScaled)
        {
            for (int y = 0; y < heightScaled; y++)
            {
                for (int x = 0; x < widthScaled; x++)
                {
                    int index = (int)((Math.Floor((double)(y / scale)) * width + Math.Floor((double)(x / scale))) * (double)(4));
                    int indexScaled = (int)((y * widthScaled + x) * 4);
                    scaledPixels_data[indexScaled] = origPixels_data[index];
                    scaledPixels_data[indexScaled + 1] = origPixels_data[index + 1];
                    scaledPixels_data[indexScaled + 2] = origPixels_data[index + 2];
                    scaledPixels_data[indexScaled + 3] = origPixels_data[index + 3];
                }
            }
        }
    }
}

In your JavaScript code, before the ig.main(…) call, add the following code to replace the Impact image resize function.

ig.Image.inject(
{
    resize: function (scale)
    {
        var origPixels = ig.getImagePixels(this.data, 0, 0, this.width, this.height);

        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');
        var scaledPixels = scaledCtx.getImageData(0, 0, widthScaled, heightScaled);

        ZombieWRC.Image.resize(origPixels.data, scaledPixels.data, scale, this.width, this.height, widthScaled, heightScaled);

        scaledCtx.putImageData(scaledPixels, 0, 0);
        this.data = scaled;
    },
});

Tell me if it worked!