MVVM && Game Design: Part 2

If you read this post that I wrote last week about building a game on Windows Phone 7 using MVVM, you know that I am trying to make a port of Panzer General to the Windows Phone.  Where I left it, I had made a repeating sets of hexagons to be the game board and I dynamically filled them based on the user’s touch.  My next step was to make the hexagons contain images of the terrain.  To that end, I snipped out a single hex of terrain and placed it in the images folder.  I then coded up this in the view hex:

Added this:
        <Image 
            Canvas.Left="0" 
            Canvas.Top="0" 
            Height="100"
            x:Name="image1" 
            Width="100" 
            Stretch="Fill"
            Source="/Tff.Panzer;component/Images/Coast01.png" />

And I got this:

So then I realized that I need to add the image to the path, not layer it on top of the canvas:

        <Path x:Name="PathRoot"
            IsHitTestVisible="True"
            Width="100"  
            Height="100"
            d:LayoutOverrides="None"
            d:LastTangent="0,0" 
            Stroke="Black" 
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch"       
            Margin="0" 
            Stretch="Fill"
            Data="M0,8.660254 L5,17.320508 15,17.320508 20,8.660254 15,0 5,0 0,8.660254 z"
            Canvas.Left="{Binding Path=CanvasLeft}" 
            Canvas.Top="{Binding Path=CanvasTop}">
            <Path.Fill >
                <ImageBrush ImageSource="/Tff.Panzer;component/Images/Coast01.png" />
            </Path.Fill >
        </Path>

Doing that, I got this:

Well How about that!

There are 3 different ways to get this in markup:

            Fill="{Binding Path=TerraineImage}">
            <!--Fill="{Binding Path=Fill}"-->
            <!--<Path.Fill >
                <ImageBrush ImageSource="{Binding Path=TerraineImageLocation}" />
            </Path.Fill >-->

I prefer the 1^st option from a readability and brevity point of view.

In my explorations, I found that a guy in Russia named Rudankort created a faithful PG port called PG Forever. Looking at his directory structure, he has all of the background hexes in a single image like this:

There are approximately 500+ images that I would need to clip and save to the file system if I wanted to separate them all out. I thought of another way of loading the entire image and then pulling pieces out of the image at runtime. Another challenge is to get the icons – removing the back fill.  I’ll work on that coming up…