MMORPG programming in Silverlight Tutorial (12)Map Instance (Part I)

    I introduced how to create map in the game in the previous chapters. The difficulty is the implementation inside the map, such as obstructions.

    Let me introduce another method to implement obstructions. We call it Map Instance, or Copy Map.

 

    Let’s have a look at the picture above. The top and the bottom are in the same size: 800*600. The top picture is the original map, the bottom is the Map Instance. We find the Map Instance is made up with some blocks in single cure color. The blocks in black stand for the obstructions in the original map. The white region stands for the area wherever the sprite can move. The yellow region stands for the transportation that you can move from one point to another one in a long distance. And also you can add red blocks to stand for snare in the game.

    The refine in this chapter is, how to pick up the color from the Map Instance.

private Color PickColor(Image image, int x, int y, double actualWidth)

{

    WriteableBitmap bitmap = new WriteableBitmap(image, null);



    int color = bitmap.Pixels[(int)(y * actualWidth) + x];



    //convert color integer to byte array

    byte[] bytes = BitConverter.GetBytes(color);



    //convert byte array to color integer(bytes[3] - A, bytes[2] - R, bytes[1] - G, bytes[0] - B)

    return Color.FromArgb(bytes[3], bytes[2], bytes[1], bytes[0]);

}

   In the method PickColor above, the parameter actualWidth stands for the image’s width, so the sentence

(int)(y * actualWidth) + x

stands for the accurate point of the image, we get the color of this point in the pixel array. Then we convert the color into a byte array. The elements in the array from 0 to 3 stand for ARGB correspondingly.

 

    Now, let’s use Copy Map in our game engine to to detect if the distinction is an obstruction. We prepare a new copy map for our demo, as follow:

    We init Copy Map at the beginning.

void InitCopyMap()

{

    BitmapSource deeper = new BitmapImage((new Uri(@"/Images/Map/Deeper.jpg", UriKind.Relative)));

    copyMap = new Image() { Source = deeper, Width = Carrier.Width, Height = Carrier.Height };

    Carrier.Children.Add(copyMap);

    copyMap.SetValue(Canvas.ZIndexProperty, -100);

}

 

    In this chapter we use PickColor method to detect if the distinction is an obstruction, we need to modify the Carrier_MouseLeftButtonDown method, as follow:

private void Carrier_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

    Point p = e.GetPosition(Carrier);



    //check if the distinction is an obstruction

    if (PickColor(copyMap, (int)p.X, (int)p.Y, Carrier.ActualWidth) == Colors.Black)

    {

        MessageBox.Show("The path doesn't exist");

        return;

    }

    

    ……(ignore some code)

    var path = pathFinder.FindPath(start, end);

    //if (path == null)

    //{

    //    MessageBox.Show("The path doesn't exist");

    //    return;

    //}

    ……(ignore some code)

}

    From the code above, we mark some old code and add some new code, it means we can check if the distinction is an obstruction by copy map, rather than A* algorithm any more. So we can see the same effect as we click on the obstruction, as follow:

    In the following chapter, I will use copy map to detect the teleportation, which is marked in Yellow in the picture above, the sprite can move soon from one region to another.

 

Summary: This chapter introduces mask instance to help us detect different regions by picking up the colors.

    Next chapter, we will resolve an issue about moving mechanism. Please focus on it.

    Chinese friend, you can also visit this Chinese blog if you feel difficult to read English, http://www.cnblogs.com/alamiye010/archive/2009/06/17/1505346.html, part of my article is base on it.

    Demo download: http://silverlightrpg.codeplex.com/releases/view/40978