{"id":6323,"date":"2007-04-16T14:15:00","date_gmt":"2007-04-16T14:15:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/vbteam\/2007\/04\/16\/using-xml-as-a-resource-in-your-code-one-more-series-on-gamewriting-matt-gertz\/"},"modified":"2024-07-05T14:48:30","modified_gmt":"2024-07-05T21:48:30","slug":"using-xml-as-a-resource-in-your-code-one-more-series-on-gamewriting-matt-gertz","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/vbteam\/using-xml-as-a-resource-in-your-code-one-more-series-on-gamewriting-matt-gertz\/","title":{"rendered":"Using XML as a resource in your code –one more series on gamewriting (Matt Gertz)"},"content":{"rendered":"

Using XML as a resource in your code \u2013one more series on gamewriting (Matt Gertz)<\/font><\/h2>\n

This is actually going to be part one of a two-part blog.  <\/span>In this post, I\u2019m going to cover some basic usage of XML, as well as a few other interesting coding points such as debug-only code.  <\/span>In the second part, I\u2019ll cover the creation and handling of on-the-fly controls.<\/font><\/p>\n

As has probably become apparent over my posts so far, I have a certain fondness for creating small computer games, and while I promise not to make every post about writing them, nevertheless this post does cover the creation of a different type of game than I\u2019ve discussed previously.  <\/span>Some background\u2026<\/font><\/p>\n

The first computer that my wife and I bought together was a Macintosh Centris 650, a really nice machine for the time and quite a change from my old Commodore 128.  <\/span>Being avid gamers, we quickly discovered all sorts of fun titles, such as the SSI Gold Box games, Civilization, SimLife, and so on.  <\/span>However, there was one title that absolutely blew me away; a watershed title that proved to me that the world had changed.  <\/span>In a word:  <\/span>Myst.<\/font><\/p>\n

Myst was an immersive game where you could walk around, look around, and interact with your environment.  <\/span>The actual navigation was actually not too dissimilar to that of the Gold Box games, but the photorealism combined with the real-time interaction with the scene was taking it to the next level.  <\/span>This weekend, while sitting and trying to think of a topic for this blog, I was wondering if I could build something like Myst from scratch using Visual Basic.  <\/span>I could (for example) create a virtual walkthrough of my new house to mail to my relatives or something.  <\/span>So, I sat down to figure out how to do it.<\/font><\/p>\n

The first thing I would need was a form.  <\/span>I created a new windows app and set the form size to be 800 x 600, keeping everything in the 4:3 ratio used by most monitors and digital cameras.  <\/span>The next thing I would need is a way to show the current image, and you might think that I\u2019d use a PictureBox for this.  <\/span>However, after careful thought, I realized that it would be best just to assign the image to the background of the form itself \u2013 that way, I could use transparency if I chose to overlay other items onto the form.  <\/span>(Recall from my last post that transparency is only enabled relative to the form itself!)<\/font><\/p>\n

My next assumption would be that I would map the virtual area into a 3-dimensional grid, with x and y giving the coordinates for each \u201ccell\u201d on the floor, and z indicating which floor I was on.  <\/span>In each cell, I should be able to turn left or left, maybe look up or down, and maybe move forward.  <\/span>My direction would be important to know, as well as how high or low I was looking.  <\/span>I came up with this:<\/font><\/p>\n

    <\/span>Dim<\/span> Cells(maxX, maxY, maxZ) As<\/span> Cell<\/span><\/p>\n

    <\/span>Dim<\/span> currentX As<\/span> Integer<\/span><\/span><\/p>\n

    <\/span>Dim<\/span> currentY As<\/span> Integer<\/span><\/span><\/p>\n

    <\/span>Dim<\/span> currentZ As<\/span> Integer<\/span><\/span><\/p>\n

    <\/span>Dim<\/span> currentOrientation As<\/span> Orientation<\/span><\/p>\n

    <\/span>Dim<\/span> currentAttitude As<\/span> Attitude<\/span><\/p>\n

 <\/font><\/span><\/p>\n

Using these enums:<\/font><\/font><\/span><\/p>\n

 <\/span><\/p>\n

    <\/span>Enum<\/span> Attitude<\/span><\/p>\n

        <\/span>Down = 1<\/span><\/p>\n

        <\/span>Neutral = 2<\/span><\/p>\n

        <\/span>Up = 3<\/span><\/p>\n

    <\/span>End<\/span> Enum<\/span><\/span><\/p>\n

 <\/span><\/p>\n

    <\/span>Enum<\/span> Orientation<\/span><\/p>\n

        <\/span>TowardsLargerY = 0 ‘ i.e., North<\/span><\/span><\/p>\n

        <\/span>TowardsLargerX = 1 ‘ i.e., East<\/span><\/span><\/p>\n

        <\/span>TowardsSmallerY = 2 ‘ i.e., South<\/span><\/span><\/p>\n

        <\/span>TowardsSmallerX = 3 ‘ i.e., West<\/span><\/span><\/p>\n

    <\/span>End<\/span> Enum<\/span><\/span><\/p>\n

 <\/span><\/p>\n

Each \u201cCell\u201d is just a structure owned by the form containing information on what you can do in the cell: can you step into that cell (i.e., is it active \u2013 that’s important since not all areas are perfect rectangles and you may want to \u201ccut out\u201d some sections of the grid as not relevant), can you look up or down, etc:<\/font><\/p>\n

    <\/span>Protected<\/span> Structure<\/span> Cell<\/span><\/p>\n

        <\/span>Dim<\/span> IsActive As<\/span> Boolean<\/span> <\/span><\/span><\/p>\n

        <\/span>Dim<\/span> CanWalkTowardLargerY As<\/span> Boolean<\/span><\/span><\/p>\n

        <\/span>Dim<\/span> CanWalkTowardLargerX As<\/span> Boolean<\/span><\/span><\/p>\n

        <\/span>Dim<\/span> CanWalkTowardSmallerY As<\/span> Boolean<\/span><\/span><\/p>\n

        <\/span>Dim<\/span> CanWalkTowardSmallerX As<\/span> Boolean<\/span><\/span><\/p>\n

        <\/span>Dim<\/span> CanWalkUpTowardLargerY As<\/span> Boolean<\/span><\/span><\/p>\n

        <\/span>Dim<\/span> CanWalkUpTowardLargerX As<\/span> Boolean<\/span><\/span><\/p>\n

        <\/span>Dim<\/span> CanWalkUpTowardSmallerY As<\/span> Boolean<\/span><\/span><\/p>\n

        <\/span>Dim<\/span> CanWalkUpTowardSmallerX As<\/span> Boolean<\/span><\/span><\/p>\n

        <\/span>Dim<\/span> CanWalkDownTowardLargerY As<\/span> Boolean<\/span><\/span><\/p>\n

        <\/span>Dim<\/span> CanWalkDownTowardLargerX As<\/span> Boolean<\/span><\/span><\/p>\n

        <\/span>Dim<\/span> CanWalkDownTowardSmallerY As<\/span> Boolean<\/span><\/span><\/p>\n

        <\/span>Dim<\/span> CanWalkDownTowardSmallerX As<\/span> Boolean<\/span><\/span><\/p>\n

        <\/span>Dim<\/span> CanLookUp As<\/span> Boolean<\/span><\/span><\/p>\n

        <\/span>Dim<\/span> CanLookDown As<\/span> Boolean<\/span><\/span><\/p>\n

    <\/span>End<\/span> Structure<\/span><\/span><\/p>\n

 <\/span><\/p>\n

On the form, I laid out five labels \u2013 one on the left, one on the right, one towards the top, one towards the bottom, and one in the middle.  <\/span>By setting their Autosize properties to False, I stretch them so that, all together, they covered the entire form.  <\/span>I then cleared their text and set their background color to \u201cTransparent\u201d so that the image on the form could show through them.  <\/span>I also changed their cursor properties to show a cursor pointing left, right, etc. as appropriate, and set the default form\u2019s cursor to the \u201cno smoking\u201d sign.<\/font><\/p>\n

Why do this?  <\/span>Well, now I can use these labels to (a) show the user what would happen if they clicked there to navigate relative to the current image and (b) handle the click event in that area rather easily.  <\/span>I can also enable or disable the labels as necessary \u2013 for example, if the user cannot move forward in their current cell, I simply disable the central label, therefore ignoring all clicks there and allowing the \u201cno smoking\u201d cursor of the base form to now show through.  <\/span>That gives valuable feedback to the player.  <\/span>A very simple example of the event handler for one of the labels (PanLeft) follows:<\/font><\/p>\n

    <\/span>Private<\/span> Sub<\/span> PanLeft_Click(ByVal<\/span> sender As<\/span> Object<\/span>, _<\/span><\/p>\n

      <\/span>ByVal<\/span> e As<\/span> System.EventArgs) Handles<\/span> PanLeft.Click<\/span><\/p>\n

        <\/span>TransitTo(currentX, currentY, currentZ, _<\/span><\/p>\n

            <\/span>LeftOrientation(currentOrientation), currentAttitude)<\/span><\/p>\n

    <\/span>End<\/span> Sub<\/span><\/span><\/p>\n

 <\/span><\/p>\n

Where:<\/font><\/font><\/span><\/p>\n

–<\/font>          <\/span><\/span><\/span>TransitTo() updates the current player position\/orientation\/attitude, shows the indicated new image, and enables\/disables labels as necessary based on info from the new adjacent cells.<\/font><\/font><\/span><\/p>\n

–<\/font>          <\/span><\/span><\/span>LeftOrientation() is a helper function which just returns the orientation 90 degrees to the left \u2013 for example, TowardsLargerY (north) if we were currently aimed TowardsLargerX (east).  <\/span><\/font><\/font><\/span><\/p>\n

The logic for the central label (PanForward) is actually slightly more complex, since we need to see if we\u2019re changing nor only X or Y but possibly Z as well, as might happen if their were stairs or a ladder in front of the user, but otherwiseis  <\/span>pretty much the same sort of thing as the other labels. <\/font><\/font><\/span><\/p>\n

To test it out, I created a 2x2x1 cell \u201chouse\u201d to walk around in \u2013 that is, four cells total.  <\/span>(Yes, I didn\u2019t test the Z-axis transitions yet, and no doubt that will come back to bite me later \u2013 maybe I\u2019ll have to talk about debugging in the next post. <\/font><\/span>J<\/span><\/span>)  <\/span>Now, each cell could<\/b> have up to 4 orientations * 3 attitudes = 12 views, and since I didn\u2019t block any up\/down views in any of my four cells, that meant I needed 48 images total.  <\/span>I generated some basic GIFs using Paint.exe, and added them into the resource manager, creating some helper functions to assist me in loading them from My.Resources based on the x\/y\/z\/orientation\/attitude.  <\/span>(In the \u201creal world,\u201d I might use digital camera shots and load those instead.) However, note that in the game logic as written, not all of the cells would necessarily have to have look up or look down capability, and not all cells can necessarily be traversed to.  <\/span>How is all of that information stored and acted upon?  <\/span>I didn\u2019t want to hard-code the actual layout into the code, so I needed to store this information in a separate file instead.  <\/span>XML is a good way to store it, being human-readable (unlike a binary file).  <\/span>Here\u2019s a bit of the XML file I created to detail the logic for one cell, created as file MAZE.XML:  <\/span><\/font><\/span><\/font><\/p>\n

<?<\/span>xml<\/span> <\/span>version<\/span>=<\/span>“1.0<\/span>“ <\/span>encoding<\/span>=<\/span>“utf-8<\/span>“ ?><\/span><\/span><\/p>\n

<<\/span>cells<\/span>><\/span><\/p>\n

  <\/span><<\/span>cell<\/span> <\/span>active<\/span>=<\/span>“true<\/span>“ <\/span>x-pos<\/span>=<\/span>“0<\/span>“ <\/span>y-pos<\/span>=<\/span>“0<\/span>“ <\/span>z-pos<\/span>=<\/span>“0<\/span>“<\/span><\/p>\n

        <\/span><\/span>lookup<\/span>=<\/span>“true<\/span>“ <\/span>lookdown<\/span>=<\/span>“true<\/span>“<\/span><\/p>\n

        <\/span><\/span>walk-larger-x<\/span>=<\/span>“true<\/span>“ <\/span>walk-larger-y<\/span>=<\/span>“true<\/span>“ <\/span><\/span><\/p>\n

  <\/span><\/span>walk-smaller-x<\/span>=<\/span>“false<\/span>“ <\/span>walk-smaller-y<\/span>=<\/span>“false<\/span>“<\/span><\/p>\n

        <\/span><\/span>walkup-larger-x<\/span>=<\/span>“false<\/span>“ <\/span>walkup-larger-y<\/span>=<\/span>“false<\/span>“<\/span><\/span><\/p>\n

  <\/span><\/span>walkup-smaller-x<\/span>=<\/span>“false<\/span>“ <\/span>walkup-smaller-y<\/span>=<\/span>“false<\/span>“<\/span><\/p>\n

        <\/span><\/span>walkdown-larger-x<\/span>=<\/span>“false<\/span>“ <\/span>walkdown-larger-y<\/span>=<\/span>“false<\/span>“ <\/span><\/span><\/p>\n

  <\/span><\/span>walkdown-smaller-x<\/span>=<\/span>“false<\/span>“ <\/span>walkdown-smaller-y<\/span>=<\/span>“false<\/span>“><\/span><\/span><\/p>\n

  <\/span><\/<\/span>cell<\/span>><\/span><\/p>\n

 <\/span><\/p>\n

[\u2026 etc \u2026]<\/span><\/p>\n

 <\/span><\/p>\n

<\/<\/span>cells<\/span>><\/span><\/span><\/p>\n

Again, in the \u201creal world,\u201d a separate application would likely generate the file from graphs that the developer drew, but I wrote this one by hand.  <\/span>Anyway, each <cell> element contains all of the information I want to load into the structure representing a given location, including which cell the information pertains to.  <\/span>I added the file into the resource manager, noting that My.Resources.Maze will now return a string containing the contents of the XML file \u2013 cool.   <\/span>Using the XML resource to initialize the cells during the game is extremely easy, and here is an excerpt from my code for accessing that file resource:<\/font><\/font><\/span><\/p>\n

    <\/span>Public<\/span> Sub<\/span> LoadMazeRules()<\/span><\/p>\n

        <\/span>‘ Load the maze rules from the built-in XML file<\/span><\/span><\/p>\n

 <\/span><\/p>\n

        <\/span>Dim<\/span> x As<\/span> Integer<\/span> = 0<\/span><\/p>\n

        <\/span>Dim<\/span> y As<\/span> Integer<\/span> = 0<\/span><\/p>\n

        <\/span>Dim<\/span> z As<\/span> Integer<\/span> = 0<\/span><\/p>\n

 <\/span><\/p>\n

        <\/span>Dim<\/span> xmlDoc As<\/span> New<\/span> XmlDocument<\/span><\/p>\n

        <\/span>xmlDoc.LoadXml(My<\/span>.Resources.Maze)<\/span><\/p>\n

        <\/span>Dim<\/span> outerNode As<\/span> XmlNode = _<\/span><\/p>\n

          <\/span>xmlDoc.GetElementsByTagName(“cells”<\/span>).Item(0)<\/span><\/p>\n

        <\/span>For<\/span> Each<\/span> node As<\/span> XmlNode In<\/span> outerNode.ChildNodes<\/span><\/p>\n

            <\/span>x = node.Attributes.GetNamedItem(“x-pos”<\/span>).Value<\/span><\/p>\n

            <\/span>y = node.Attributes.GetNamedItem(“y-pos”<\/span>).Value<\/span><\/p>\n

            <\/span>z = node.Attributes.GetNamedItem(“z-pos”<\/span>).Value<\/span><\/p>\n

            <\/span>With<\/span> Cells(x, y, z)<\/span><\/p>\n

   <\/span>             <\/span>.CanLookDown = node.Attributes.GetNamedItem(“lookdown”<\/span>).Value<\/span><\/p>\n

                <\/span>.CanLookUp = node.Attributes.GetNamedItem(“lookup”<\/span>).Value<\/span><\/p>\n

 <\/span><\/p>\n

               <\/span>‘ (Etc\u2026 keep loading in attributes for this cell)<\/span><\/span><\/p>\n

 <\/span><\/p>\n

            <\/span>End<\/span> With<\/span><\/span><\/p>\n

        <\/span>Next<\/span><\/span><\/p>\n

    <\/span>End<\/span> Sub<\/span><\/span><\/p>\n

 <\/span><\/p>\n

As you can see, I start out by declaring a new XmlDocument instance.  <\/span>The method LoadXml can take a string which contains valid XML , and since that\u2019s exactly what I can provide from calling My.Resources.Maze(), life is good.  <\/span>At any element level, I can query for child elements by name \u2013 I know that \u201ccells\u201d is a child of the XmlDocument node, so I get the first (and only) instance of that, and then I know that \u201ccell\u201d elements are children of that node, so I query for those.  <\/span>Having that list, I can then enumerate over it and pick out all of the information I want from the attributes via GetNamedItem(), supplying the desired attribute as the argument.  <\/span>It\u2019s very important to note that XML elements, tags, etc are all case-sensitive, so querying for \u201cCell\u201d instead of \u201ccell\u201d will not work!  <\/span>Also note that I need not make any assumptions about the ordering of the cell elements with respect to my internal array, since I\u2019m taking the coordinates directly from the XML itself.  <\/span>If, for some reason, the XML is missing a cell, that cell structure\u2019s members will all default to zero or false (including IsActive), so I could just leave out any inactive cells if I wished to.  <\/span>When I\u2019m done with the XmlDocument, it just goes out of scope and I don\u2019t worry about it anymore.<\/font><\/font><\/span><\/p>\n

There are other ways to retrieve XML as well, and you can see some of these from the snippets provided in Visual Basic 2005.  <\/span>To see these, in the editor type \u201c?\u201d and press the TAB key, and then navigate down to the XML item and select it.  <\/span>There are a lot of snippets here, but two of them are particularly interesting.  <\/span>The first one is \u201cRead XML from a String,\u201d which looks like this:<\/font><\/font><\/span><\/p>\n

        <\/span>Dim<\/span> reader As<\/span> XmlReader = XmlReader.Create( _<\/span><\/p>\n

New<\/span> StringReader( “<book\/>”<\/span> <\/span>))<\/span><\/p>\n

        <\/span>While<\/span> reader.Read()<\/span><\/p>\n

 <\/span><\/p>\n

        <\/span>End<\/span> While<\/span><\/span><\/p>\n

 <\/span><\/p>\n

and where you replace the argument to StringReader with your own XML string.  <\/span>This is analogous to reading in a normal stream serially, and it\u2019s particularly useful  <\/span>when you need to find something in a XML string but you don\u2019t want to duplicate everything into an XmlDocument.  <\/span>It\u2019s fast and doesn\u2019t cache anything.  <\/span>In the \u201cwhile\u201d loop, you would add code to check reader.NodeType, see what it is (e.g., XmlNodeType.Element),  <\/span>and act appropriately to that to collect information from the members reader.Name, reader.Value, etc.<\/font><\/font><\/span><\/p>\n

The second interesting snippet is actually two snippets: \u201cWrite class data to an XML file\u201d and the <\/span>corresponding \u201cRead class data from an XML file.\u201d  <\/span>Essentially, the former just writes out all of the data from a class instance into the XML file, and the latter reads it back in.  <\/span>If I had created a tool to automatically generate my XML file for my virtual walk-through, I might have used these snippets to write out the cell values to an XML file and then read them back in later, putting the logic (and the structure) in a class library to be shared by both.<\/font><\/font><\/span><\/p>\n

I\u2019ve included the code written thus far in a ZIP file attached to this post.  <\/span>You\u2019ll note when you look through it that I\u2019ve added a routine to check the validity of the XML information \u2013 it\u2019s pretty straightforward, and the only interesting thing is that I only run the validation when debugging (i.e., the code is in an #if DEBUG<\/b> block).  <\/span>For my next post, we\u2019ll add some state to this game, and add some controls on the fly to give the player something to do other than walk around.<\/font><\/font><\/span><\/p>\n

–Matt–*<\/span><\/p>\n

Maze.zip<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Using XML as a resource in your code \u2013one more series on gamewriting (Matt Gertz) This is actually going to be part one of a two-part blog.  In this post, I\u2019m going to cover some basic usage of XML, as well as a few other interesting coding points such as debug-only code.  In the second […]<\/p>\n","protected":false},"author":258,"featured_media":8818,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22,195],"tags":[101,165],"class_list":["post-6323","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-matt-gertz","category-visual-basic","tag-matt-gertz","tag-vb2005"],"acf":[],"blog_post_summary":"

Using XML as a resource in your code \u2013one more series on gamewriting (Matt Gertz) This is actually going to be part one of a two-part blog.  In this post, I\u2019m going to cover some basic usage of XML, as well as a few other interesting coding points such as debug-only code.  In the second […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts\/6323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/users\/258"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/comments?post=6323"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/posts\/6323\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/media\/8818"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/media?parent=6323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/categories?post=6323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/vbteam\/wp-json\/wp\/v2\/tags?post=6323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}