There is a trial that will let you play without any limitation for the first 10 levels!

Try it now: http://apps.microsoft.com/webpdp/en-US/app/roman-empire/18a56d6a-901f-4f84-aba9-4d57b91e64b9

You have an image of unit (sprite) in your game and you would like to dynamically change selected colors. You would like to get units that will look the same for one player and different than others. Let’s say Player one has units with red shield, Player two uses blue color.

Red and blue dummy example:

You can use two different images prepared by designer but then your application size will be increased. If your unit’s graphic is 10KB and you support ten players with ten colors, you get 100KB size. Now, if your animation is in 8 different directions, you will have 800KB instead of 80KB and it’s just for one sprite!

RGB Solution

The most convenient way to do that (as far as I know) is to use ColorPalette class but unfortunately it’s not supported in new Windows 8. If we don’t have access to colors, we can only go through pixels and change them manually.

We don’t have SetPixel and GetPixel methods on Bitmap or WriteableBitmap classes so following example will NOT work:

Bitmap bitmap = LoadBitmap("Sprite.png");
for (int x = 0; x < bitmap.Width; x++)
{
    for (int y = 0; y < bitmap.Height; y++)
    {
        if (bitmap.GetPixel(x, y) == Color.Red)
        {
            bitmap.SetPixel(x, y, Color.Blue);
        }
    }
}

We have to go really deep and work on pixels directly. We will detect color to swap and replace pixel’s values.

XAML:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel>
        <Button Content="Load image (Red to Cyan)" Click="Button_Click_1" />
        <Image x:Name="image" Stretch="None"/>
    </StackPanel>
</Grid>

Load Image and call “SwitchColors” method:

private async void Button_Click_1(object sender, RoutedEventArgs e)
{
    FileOpenPicker picker = new FileOpenPicker();
    picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
    picker.FileTypeFilter.Add(".png");
    StorageFile file = await picker.PickSingleFileAsync();

    if (file != null)
    {
        using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read))
        {
            BitmapDecoder decoder = await BitmapDecoder.CreateAsync(fileStream);

            PixelDataProvider pixelData = await decoder.GetPixelDataAsync(
                BitmapPixelFormat.Bgra8,
                BitmapAlphaMode.Straight,
                new BitmapTransform(),
                ExifOrientationMode.IgnoreExifOrientation,
                ColorManagementMode.DoNotColorManage);

            byte[] sourcePixels = pixelData.DetachPixelData();
            await ThreadPool.RunAsync(new WorkItemHandler(
                (IAsyncAction action) =>
                {
                    sourcePixels = SwitchColor(sourcePixels, decoder.PixelWidth, decoder.PixelHeight, Colors.Red, Colors.Cyan);
                }
                ));

            var writeableBitmap = new WriteableBitmap((int)decoder.PixelWidth, (int)decoder.PixelHeight);
            using (Stream stream = writeableBitmap.PixelBuffer.AsStream())
            {
                await stream.WriteAsync(sourcePixels, 0, sourcePixels.Length);
            }

            // Redraw the image
            image.Source = writeableBitmap;
        }
    }
}

Method “SwitchColors”:

private byte[] SwitchColor(byte[] sourcePixels, uint pixelWidth, uint pixelHeight, Color colorFrom, Color colorTo)
{
    int resultIndex = 0;

    // 4 bytes required for each pixel
    byte cFromB = colorFrom.B;
    byte cFromG = colorFrom.G;
    byte cFromR = colorFrom.R;
    byte cFromA = colorFrom.A;

    byte cToB = colorTo.B;
    byte cToG = colorTo.G;
    byte cToR = colorTo.R;
    byte cToA = colorTo.A;

    for (int y = 0; y < pixelHeight; y++)
    {
        for (int x = 0; x < pixelWidth; x++)
        {
            if (sourcePixels[resultIndex] == cFromG && sourcePixels[resultIndex + 1] == cFromB &&
                sourcePixels[resultIndex + 2] == cFromR && sourcePixels[resultIndex + 3] == cFromA)
            {
                sourcePixels[resultIndex] = cToB;
                sourcePixels[resultIndex + 1] = cToG;
                sourcePixels[resultIndex + 2] = cToR;
                sourcePixels[resultIndex + 3] = cToA;
            }
            resultIndex += 4;
        }
    }

    return sourcePixels;
}

Results

Image before and after (Red to Blue)

Sprite before and after (Red to Green and to Cyan)

I am changing only one single color. For our applications we will have some shadows and we would need to do that for at least few more (e.g. Red: {255, 255, 0, 0}, {255, 254, 0, 0}, {255, 253, 0, 0}).

There is also alternative to use HSL but that’s different story, not for today.

Optimization

If you know that Alpha channel will not change, don’s set it in the IF statement. You might also know that shield on the image starts on specific pixel {e.g. 300, 300}, so don’t iterate from 0 till end of the image.

Resources

• Download source code: link

Thanks!

var userName = document.getElementById("nameInput").value;

My natural question was can it be done in more fancy way ? How about using jQuery instead ? Why not so I’ve included jQuery library in my default.html page just like that :

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>HelloWorld</title>
 <!-- WinJS references -->
 <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet"/>
 <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
 <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
 <!-- External references -->
 <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
 <!-- HelloWorld references -->
 <link href="/css/default.css" rel="stylesheet" />
 <script src="/js/default.js"></script>
</head>
<body>
 <p>Content goes here</p>
</body>
</html>

and then replace getElementById() with jQuery syntax :

userName = $("#nameInput").val();

Unfortunately it results with an error:

0x800a1391 – JavaScript runtime error: ‘$’ is undefined.

It takes me a while to understand that jQuery library can’t be load. In fact none of external references can. Windows 8 Metro application is not a web application so trying to use non-project references will fail. That’s certainly hard to understand at first especially when Windows 8 application is seen from web developer perspective.

Solution

To make jQuery work with WinJS the source code of the library needs to be include in the project by adding jquery-1.8.0.min.js file as an existing item.

And then in the <head> section of the default.js referenced as

<!-- External references -->
 <script src=" /js/jquery-1.8.0.min.js"></script>

Error

I opened my project in new VS 2012. It compiled without any problems. I just had to change “OSMinVersion” and “OSMaxVersionTested” to 6.2.1. However when I run it, I got XAMLParseException with error

“{“XAML parsing failed.”}”.

StackTrace:

at Windows.UI.Xaml.Application.LoadComponent(Object component, Uri resourceLocator, ComponentResourceLocation componentResourceLocation)
at Shopping.Game.Controls.EndGameWindow.InitializeComponent() in \Shopping\Shopping.Game\obj\x86\Debug\Windows\EndGameWindow.g.i.cs:line 44
at Shopping.Game.Controls.EndGameWindow..ctor() in \Shopping\Shopping.Game\Windows\EndGameWindow.xaml.cs:line 28
at Shopping.Shopping_XamlTypeInfo.XamlTypeInfoProvider.Activate_6_EndGameWindow() in \Shopping\Shopping\obj\x86\Debug\XamlTypeInfo.g.cs:line 135
at Shopping.Shopping_XamlTypeInfo.XamlUserType.ActivateInstance() in \Shopping\Shopping\obj\x86\Debug\XamlTypeInfo.g.cs:line 404

My solution contains few projects and I keep “”EndGameWindow” UserControl in “Shopping.Game” project. Project “Shopping” is a main one.

I commented out everything from EndGameWindow.xaml and EndGameWindow.xaml.cs files but it still failed. Even for new created UserControls.

Problem

What I found? I found that inside the files {fielname}.g.i.cs under path obj/x86/Debug/ generated URL contains wrong project name, instead of “Shopping.Game” it was “Shopping_Game”.

global::System.Uri("ms-appx:///Shopping_Game/Controls/EndGameWindow.xaml")

Solution

Solution is super simple, don’t put dots in the project’s name. I didn’t check what would happen if I would manually change the value in the {filename}.g.i.cs file as this is auto generated file and my changes would be overwritten with compilation. I just renamed my project. I don’t use dot anymore in the name, which was my kind of naming convention. It was always working in VS 2010 and VS 2012 RC, but I can live without it.

How to change the name? Go to project’s properties and update Assembly name. I changed as well Default namespace and project’s name in the solution, just to have everything nice and clean.

[Edit 08/19/2012] Fix

Thanks to Tim Heuer we now know that there is a hotfix available for described issue. To get it, just follow this link: http://support.microsoft.com/kb/2739194. Awesome!

..or just use RSS and visit us only when there is something new