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 1st 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…


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: