// How to use a Windows Runtime Component (C#) to scale images for a Windows 8 Impact game
// Published — Page updated 6 years ago
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!