0

I'm trying to get the basics down for a top-down 2d tiled game in WPF and I have a feeling I'm going about it very wrong. I have tried several methods of displaying a tiled grid of 32x32 .png files on the screen and for small grids (such as 16x16), it works fine. If I move up to a 64x64 grid of tiles with the same image, the memory consumption is monstrous. With my current best approach, it's close to 60MB and redrawing it takes several seconds. Also, redrawing increases the memory usage by 20-30MB. How can I do this more efficiently? Please excuse my code; I can imagine it looks pretty ugly.

class Tile
{
    public int Dimension
    {
        get { return Settings.Default.TileDimensions; }
    }

    public BitmapImage Image { get; set; }

    public Point Location { get; set; }
}

for (int r = 0; r < Rows; r++)
{
    for (int c = 0; c < Columns; c++)
    {                   
        var t = new Tile();
        t.Image = new BitmapImage(new Uri("/AoW;component/Resources/Images/Grass.png", UriKind.Relative));
        t.Location = new Point(c, r);
        Tiles.Add(t);
    }
}

<Canvas Width="{Binding CanvasWidth}"
        Height="{Binding CanvasHeight}">
    <ItemsControl ItemsSource="{Binding Current.Container.Map.Tiles,
                                        Source={StaticResource Locator}}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Columns="{Binding Columns}"
                             Rows="{Binding Rows}" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Image Width="{Binding Dimension}"
                       Height="{Binding Dimension}"
                       RenderOptions.BitmapScalingMode="LowQuality"
                       Source="{Binding Image}" />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Canvas>

Any advice on how to do this properly would be greatly appreciated.

Jason D
  • 2,634
  • 6
  • 33
  • 67
  • Why do you have an ItemsControl in a canvas? Or, wording it differently: It seems you want to place the tiles on the Canvas, but you put them in the ItemsControl. What do you really want to do with the tiles: Placing them "manually" on the canvas, or let them being arranged by the ItemsControl/UniformGrid? –  Dec 27 '13 at 20:22
  • I'm pretty much guessing, but using the `UniformGrid` might be slowing things down. There is an approach here you could try http://stackoverflow.com/questions/6210264/improving-performance-of-drawing-tiled-bitmaps-in-wpf – geedubb Dec 27 '13 at 20:24
  • Is your image the same for all tiles? – geedubb Dec 27 '13 at 20:25
  • I am aiming for the user to be able to interact with the tiles either with mouse or keyboard at some point. I am far from experienced in WPF (or programming in general), but I'm trying here. – Jason D Dec 27 '13 at 20:25
  • How many tiles are we talking about? –  Dec 27 '13 at 20:25
  • For now, all are the same image. Also, as I mentioned in the post, a 16x16 grid is okay. 64x64 starts having some real problems. – Jason D Dec 27 '13 at 20:28
  • Do you always display same image in all cells, as in the code above? – dkozl Dec 27 '13 at 20:32
  • At this point, yes. Later on down the road, not necessarily, but for now I'm just working on the basics of the basics. – Jason D Dec 27 '13 at 20:33
  • In response to the first comment, removing the `Canvas` and using the `ItemsControl` by itself causes the memory usage to jump even more. – Jason D Dec 27 '13 at 20:47
  • I was asking because, if you use same image, maybe you just want to use [`ImageBrush`](http://msdn.microsoft.com/en-us/library/system.windows.media.imagebrush(v=vs.110).aspx) as `Background` as it already supports tile mode – dkozl Dec 27 '13 at 20:58
  • I agree that placing a Uniform Grid inside a Items Control and then again inside a Canvas is adding multiple unneccessary layers to your logical tree. You might want to have a look at my answer to [WPF controls needed to build chess application](http://stackoverflow.com/questions/20560519/wpf-controls-needed-to-build-chess-application) to see a more light-weight way of doing it that also allows you to change the images and tile positions programmatically whilst still adhering to the MVVM pattern. – Mark Feldman Dec 27 '13 at 21:53
  • Thanks for the reply, Mark. I'll go ahead and take a look at that. – Jason D Dec 27 '13 at 22:05

0 Answers0