Break image into tiles

Question

Hey. I havea 480 x 800 image and would like to place this on my tilemap. I'm trying to split the image into into a grid (6 x 10) and assign each tile that specific portion of the image. Essentially, the tilemap will look like one big image since each tile has the relevant part of the image attached to it. What's the best way of doing this? I've tried going through each tile and drawing it to a WriteableBitmap, but all the images are the same.

WriteableBitmap wb = new WriteableBitmap(80,80);
Rect src= new Rect(x*Width,y*Height, 80, 80);
Rect dest= new Rect(0, 0, 80, 80);
wb.Blit(dest, mainWb, src); 
tile.SetImage(wb);

(x and y) are the just the indexes used when iterating through the tilemap, 80 is the tile height and width and mainWb is the big image I want to split. Thanks for any help.

edit: Full loop code:

    var mainImage = Application.GetResourceStream(new Uri("MainImage.jpg", UriKind.Relative)).Stream;
                    WriteableBitmap mainWb = new WriteableBitmap(480, 800);           

                    mainWb.SetSource(mainImage);
                    for (int x = 0; x < 6; x++)
                    {
                        for (int y = 0; y < 12; y++)
                        {
                            Tile tile = new Tile();

                            WriteableBitmap wb = new WriteableBitmap(80,80);


 Rect src = new Rect(x*Width,y*Height, 80, 80);

                        Rect dest = new Rect(0, 0, 80, 80);

                        wb.Blit(dest, mainWb, src); 
                        tile.SetImage(wb);    

                        Canvas.SetLeft(tile, x * WIDTH);
                        Canvas.SetTop(tile, y * HEIGHT);  


                        LayoutRoot.Children.Add(tile);
                        ls.Add(tile);
                    }
                }

The Tile class is a simple 80x80 canvas with an Image control called img. The SetImage method above is this:

 public void SetImage(WriteableBitmap wb)
        {                
            img.Source = wb;                     
        }

That code seems correct. Could you post the entire loop? – Olivier Payen May 19 '11 at 12:19 — Olivier Payen, May 19 '11 at 12:19
@Olivier Payen - I've added the full loop. – Skoder May 19 '11 at 14:36 — Skoder, May 19 '11 at 14:36

score 4 · Accepted Answer · answered May 19 '11 at 01:37

4

you can do it with a nice trick - just crop the image each time using a canvas, and move the image so each time another piece is showing:

        <Canvas Width="80" Height="80">
            <Canvas.Clip>
                <RectangleGeometry Rect="0,0,80,80" />
            </Canvas.Clip>
            <Image Source="your_image.png" 
   Canvas.Left="0" Canvas.Top="0" />
            <!-- or -80, -160, -240 etc.. -->
        </Canvas>

answered May 19 '11 at 01:37

Elad Katz

7,483
5
35
66

I've added some more code to the original question. Should I do this in the code behind in the loop and modify the `SetImage` method to accept a `canvas` parameter? – Skoder May 19 '11 at 14:46
you could either do i like u suggested, but the most elegant is to do it with databinding. put the aforementioned canvas inside an itemsControl.DataTemplate, and bind it do a list of objects that contains the relevant coordinates. that list should be created in code behind. – Elad Katz May 19 '11 at 14:50

Break image into tiles

1 Answers1