XNA and GIS (4) - Image Swapping
We’ve already discussed in general how XNA could be used as our graphics engine for building a mapping application. Today we will demonstrate a specific example of XNA in action as it relates to map images.
Let’s assume that we have a map image already generated by a mapping engine (Mapserver/Mapscript for example).
A user then zooms in on the map and a second image is generated.
Displaying the second image could be as simple as switching between the images. In most desktop applications, each map refresh does just that. Nothing fancy, but when you have a powerful graphical engine at your disposal, there is much more we can do.
Texture Opacity
XNA allows each texture (e.g. map image) to have an opacity (”alpha“) value ranging from 0 (transparent) to 255 (opaque). This gives us the ability to simulate an image fading in or out by quickly changing the alpha value. The texture’s alpha (a) is determined when it is drawn using a sprite batch:
spriteBatch.Draw(texture, rectangle, new Color(r, g, b, a));
Image Swapping Class Design
The first step is to design and program an “image swapping” class that we can use in various applications. This will enable us to easily implement image transitions such as fades or shifts.
The class must accept 2 images, their locations, and how fast the transition will occur. The image fading in is named “InImage” and the image fading out is “OutImage”. After some testing and revisions, our final object model looks like this:
The TransitionType property and SetShiftDestination method will be used in the future for performing an image swap when the map is recentered. It would be unnecessary to fade between 2 images that are at the same scale. Instead, the transition would involve shifting the first image and then the second image immediately replaces the first image.
Using the Image Swap Helper Class
We’ve setup a XNA game application (source code below) that demonstrates how the image swapping class works. It fades between the 2 images shown above. Here is an overview of how the class was implemented in our application.
Create a private variable (”field”) using the object:
shImageSwapHelper _imageSwapper;
Then create a new instance of the class and define a transition time in milliseconds.
_imageSwapper = new shImageSwapHelper(); _imageSwapper.TransitionTime = 5000.0f;
Set the incoming image and outgoing image rectangle sizes. In this scenario, they are both the entire size of the map window so:
_imageSwapper.InRect = new Rectangle(0, 0, _mapWidth, _mapHeight); _imageSwapper.OutRect = new Rectangle(0, 0, _mapWidth, _mapHeight);
Load the images into textures from a file name:
_imageSwapper.InImage = Texture2D.FromFile(graphics.GraphicsDevice, "Image2.jpg"); _imageSwapper.OutImage = Texture2D.FromFile(graphics.GraphicsDevice, "Image1.jpg");
In the Update method, we see if the image transition is occurring. If it isn’t, we start the transition:
if (!_imageSwapper.InProgress) { _imageSwapper.StartTransition(); }
Finally, in the Draw method, our image transition is drawn with one line of code. The individual alpha values of each image are controlled internally by the class.
_imageSwapper.Draw(spritebatch, gameTime);
Upon running the application, the first image will display and over the course of 5000 milliseconds, it will fade out while the second image will fade in. This pattern is repeated until the program is exited.
Conclusion
This is only another building block to our ultimate goal. It does show how easy XNA can be used to improve the graphical quality of an application. As always, the source code is available to download.
